Centrowanie divow :: 4programmers.net

0

Witam.

Na poczatku dodam, ze kompletnie nie znam sie na webmasteringu.

Dostalem szablon, ktory zaczalem przerabiac w Photoshopie, Dreamweaverze i mam problem z kilkoma rzeczami.

Mam 3 tabelki i chcialbym je wysrodkowac. Dawniej, aby to zrobic nalezalo wpisac i wszystko gralo. Kod wyglada tak:

[code]<section id="content">

Management

Cempore massasoluta nobis est eligendi omnis volutasas sumendam dusempquibudamet aut rerum odes necessitatibus saepe evenievoluptates estu repudiandae sint et molestiae non recusandaeItaque.

</center>

Resources

Cempore massasoluta nobis est eligendi omnis volutasas sumendam dusempquibudamet

Saut rerum odes necessitatibus saepe evenievoluptates estu repudiandae sint.

</center>

Consulting

Cempore massasoluta nobis est eligendi omnis volutasas sumendam dusempquibudamet aut rerum odes necessitatibus saepe evenievoluptates estu repudiandae sint et molestiae non recusandaeItaque.

</center>

[/code]

Z gory dzieki za odpowiedz.

0

No ok, a gdzie style?

0

Jeśli "kompletnie nie znasz się na webmasteringu", to jak możemy Ci sensownie pomóc?

Można Ci dać gotowca, ale jeśli chcesz, by ktoś po prostu odwalił robotę za Ciebie, to tradycyjnie odsyłamy do działu Praca. Przecież nie przychodzisz do fryzjera i nie oczekujesz, że gdy powiesz "kompletnie nie znam się na obcinaniu włosów", to ktoś Cię ostrzyże za darmo czy wytłumaczy w parę minut, jak to się robi...

Dziś w CSS-ie są różne sposoby centrowania elementów. Elementy generujące ramkę wierszową możesz wycentrować, ustawiając text-align: center w którymś z elementów nadrzędnych. Elementy generujące ramkę blokową, nie-pływające i nie-pozycjonowane (z wyjątkiem pozycjonowania względnego) możesz wycentrować, ustawiając im szerokość oraz ustawiając poziome marginesy na auto.

Mógłbym Ci powiedzieć, co konkretnie zrobić w tym wypadku, ale nie wskazałeś nawet zbyt precyzyjnie elementów, które chcesz wycentrować (czy to te, wokół których jest <center>?). Nie podałeś też stylów CSS, które już masz, więc nie wiadomo, jak pozycjonowane są te elementy oraz inne elementy, które mogą na nie wpłynąć.

Problem też taki, że jeśli "kompletnie nie znasz się na webmasteringu", to równie dobrze możesz nie wiedzieć nawet, co to CSS.

Jesteśmy tu chętni do pomocy jeśli ktoś wykazuje chęć nauki (ale nauki, a nie na zasadzie zasypywania nas kolejnymi problemami i kopiowania rozwiązań bez próby zrozumienia...). Tylko ciężko sensownie pomóc w takim wypadku.

0

Troche poczytalem, ale nie wiele z tego zrozumialem. Mam kilka plikow zapisanych jako style CSS. Jak na razie edytowalem jeden:

http://wklej.org/id/678292/

To co jest w kodzie w pierwszym poscie chcialbym wycentrowac. Takie zaznaczenie mi sie wyswietlilo po zaznaczeniu tych 3 tabelek (?) w kodzie jak wybralem opcje "split" w DW.

0

Witam.

Metoda prob i bledow doszedlem, ze odpowiedzialny jest za "tabelki" styl grid. Gdyz po zaznaczeniu ich i zmianie szerokosci faktycznie przesuna sie na srodek, ale niestety wszystkie na pozostalych stronach, a chcialbym tylko w tym jednym miejscu. Jak moge to zrobic?

Styl grid:

[code]/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.

*/

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_24 {
margin-left: auto;
margin-right: auto;
width: 960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/* Grid >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .grid_1 {
width:30px;
}

.container_24 .grid_2 {
width:70px;
}

.container_24 .grid_3 {
width:110px;
}

.container_24 .grid_4 {
width:150px;
}

.container_24 .grid_5 {
width:190px;
}

.container_24 .grid_6 {
width:230px;
}

.container_24 .grid_7 {
width:270px;
}

.container_24 .grid_8 {
width:310px;
}

.container_24 .grid_9 {
width:350px;
}

.container_24 .grid_10 {
width:390px;
}

.container_24 .grid_11 {
width:430px;
}

.container_24 .grid_12 {
width:470px;
}

.container_24 .grid_13 {
width:510px;
}

.container_24 .grid_14 {
width:550px;
}

.container_24 .grid_15 {
width:590px;
}

.container_24 .grid_16 {
width:630px;
}

.container_24 .grid_17 {
width:670px;
}

.container_24 .grid_18 {
width:710px;
}

.container_24 .grid_19 {
width:750px;
}

.container_24 .grid_20 {
width:790px;
}

.container_24 .grid_21 {
width:830px;
}

.container_24 .grid_22 {
width:870px;
}

.container_24 .grid_23 {
width:910px;
}

.container_24 .grid_24 {
width:950px;
}

/* Prefix Extra Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .prefix_1 {
padding-left:40px;
}

.container_24 .prefix_2 {
padding-left:80px;
}

.container_24 .prefix_3 {
padding-left:120px;
}

.container_24 .prefix_4 {
padding-left:160px;
}

.container_24 .prefix_5 {
padding-left:200px;
}

.container_24 .prefix_6 {
padding-left:240px;
}

.container_24 .prefix_7 {
padding-left:280px;
}

.container_24 .prefix_8 {
padding-left:320px;
}

.container_24 .prefix_9 {
padding-left:360px;
}

.container_24 .prefix_10 {
padding-left:400px;
}

.container_24 .prefix_11 {
padding-left:440px;
}

.container_24 .prefix_12 {
padding-left:480px;
}

.container_24 .prefix_13 {
padding-left:520px;
}

.container_24 .prefix_14 {
padding-left:560px;
}

.container_24 .prefix_15 {
padding-left:600px;
}

.container_24 .prefix_16 {
padding-left:640px;
}

.container_24 .prefix_17 {
padding-left:680px;
}

.container_24 .prefix_18 {
padding-left:720px;
}

.container_24 .prefix_19 {
padding-left:760px;
}

.container_24 .prefix_20 {
padding-left:800px;
}

.container_24 .prefix_21 {
padding-left:840px;
}

.container_24 .prefix_22 {
padding-left:880px;
}

.container_24 .prefix_23 {
padding-left:920px;
}

/* Suffix Extra Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .suffix_1 {
padding-right:40px;
}

.container_24 .suffix_2 {
padding-right:80px;
}

.container_24 .suffix_3 {
padding-right:120px;
}

.container_24 .suffix_4 {
padding-right:160px;
}

.container_24 .suffix_5 {
padding-right:200px;
}

.container_24 .suffix_6 {
padding-right:240px;
}

.container_24 .suffix_7 {
padding-right:280px;
}

.container_24 .suffix_8 {
padding-right:320px;
}

.container_24 .suffix_9 {
padding-right:360px;
}

.container_24 .suffix_10 {
padding-right:400px;
}

.container_24 .suffix_11 {
padding-right:440px;
}

.container_24 .suffix_12 {
padding-right:480px;
}

.container_24 .suffix_13 {
padding-right:520px;
}

.container_24 .suffix_14 {
padding-right:560px;
}

.container_24 .suffix_15 {
padding-right:600px;
}

.container_24 .suffix_16 {
padding-right:640px;
}

.container_24 .suffix_17 {
padding-right:680px;
}

.container_24 .suffix_18 {
padding-right:720px;
}

.container_24 .suffix_19 {
padding-right:760px;
}

.container_24 .suffix_20 {
padding-right:800px;
}

.container_24 .suffix_21 {
padding-right:840px;
}

.container_24 .suffix_22 {
padding-right:880px;
}

.container_24 .suffix_23 {
padding-right:920px;
}

/* Push Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .push_1 {
left:40px;
}

.container_24 .push_2 {
left:80px;
}

.container_24 .push_3 {
left:120px;
}

.container_24 .push_4 {
left:160px;
}

.container_24 .push_5 {
left:200px;
}

.container_24 .push_6 {
left:240px;
}

.container_24 .push_7 {
left:280px;
}

.container_24 .push_8 {
left:320px;
}

.container_24 .push_9 {
left:360px;
}

.container_24 .push_10 {
left:400px;
}

.container_24 .push_11 {
left:440px;
}

.container_24 .push_12 {
left:480px;
}

.container_24 .push_13 {
left:520px;
}

.container_24 .push_14 {
left:560px;
}

.container_24 .push_15 {
left:600px;
}

.container_24 .push_16 {
left:640px;
}

.container_24 .push_17 {
left:680px;
}

.container_24 .push_18 {
left:720px;
}

.container_24 .push_19 {
left:760px;
}

.container_24 .push_20 {
left:800px;
}

.container_24 .push_21 {
left:840px;
}

.container_24 .push_22 {
left:880px;
}

.container_24 .push_23 {
left:920px;
}

/* Pull Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .pull_1 {
left:-40px;
}

.container_24 .pull_2 {
left:-80px;
}

.container_24 .pull_3 {
left:-120px;
}

.container_24 .pull_4 {
left:-160px;
}

.container_24 .pull_5 {
left:-200px;
}

.container_24 .pull_6 {
left:-240px;
}

.container_24 .pull_7 {
left:-280px;
}

.container_24 .pull_8 {
left:-320px;
}

.container_24 .pull_9 {
left:-360px;
}

.container_24 .pull_10 {
left:-400px;
}

.container_24 .pull_11 {
left:-440px;
}

.container_24 .pull_12 {
left:-480px;
}

.container_24 .pull_13 {
left:-520px;
}

.container_24 .pull_14 {
left:-560px;
}

.container_24 .pull_15 {
left:-600px;
}

.container_24 .pull_16 {
left:-640px;
}

.container_24 .pull_17 {
left:-680px;
}

.container_24 .pull_18 {
left:-720px;
}

.container_24 .pull_19 {
left:-760px;
}

.container_24 .pull_20 {
left:-800px;
}

.container_24 .pull_21 {
left:-840px;
}

.container_24 .pull_22 {
left:-880px;
}

.container_24 .pull_23 {
left:-920px;
}

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}[/code]

Edit: przy pierwszym kodzie domyslalam sie, ze classa jest container_24 z tym, ze w gridzie jest tego mnostwo. Ktory znich edytowac?

Centrowanie divow

Management

Resources

Consulting

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami