[css] Layout w procentach - coś nie tak

0

Witam :) Postanowiłem przerobić layout tak, aby szerokość była wyrażona w procentach. Stronę macie tutaj: http://coldpeer.ovh.org/neo_new/, oraz od razu daję link do styli: http://coldpeer.ovh.org/neo_new/style.css. Niby wszystko OK, ale jak nie trudno zauważyć środkowy kontener content nie sięga szerokością "do końca", tj. tak aby nie było tego brzydkiego pustego, białego miejsca zaraz przy lewej części kontenera right. Cały lay jest na 100%. Kontenery mają następujące wartości:

  • left: 12%
  • content: 75%
  • right: 12%
    I nie wiem czemu, jak zmienię szerokość content na 76%, to już wszystko legnie (right idzie pod spód) :( A przecież powinno być na content właśnie 76% (100% - (2*12%) = 76% ;)).

Wiecie co z tym zrobić?? Proszę o pomoc. [diabel]
Pozdrawiam!

0

#content {
/* i wywal to width : 75% */
margin: 0 12% 0 12%;
}

0

Hmm... Jakoś nie chce działać... A po wywaleniu width: 75%, content jest na szerokość tekstu (z width: 75% się rozwala)...

0

Ja bym proponował inaczej:
width: 75%; /albo jak chcesz, to 76%, na to samo praktycznie wyjdzie/
margin: 0 auto;

0
Adam.Pilorz napisał(a)

Ja bym proponował inaczej:
width: 75%; /albo jak chcesz, to 76%, na to samo praktycznie wyjdzie/
margin: 0 auto;

To samo co wtedy :-/

0

no a powiedzmy że

width = 1024

all = round(99% z 1024) = 1014

lewe = prawe = round(12% z 1014) = 122
border(lewe + prawe) = 4
content = round(75% z 1014) = 761

1014 - (2 * 122 + 4 + 761) = 5px przerwy

0
Adamo napisał(a)

no a powiedzmy że

width = 1024

all = round(99% z 1024) = 1014

lewe = prawe = round(12% z 1014) = 122
border(lewe + prawe) = 4
content = round(75% z 1014) = 761

1014 - (2 * 122 + 4 + 761) = 5px przerwy

No tak ;) Tylko co w takim razie ja mam zmienić, żeby nie było tych 5px przerwy, a żeby cała strona była w procentach? Bo jakoś nie wiem co takiego zmienić tam... :P

0
Coldpeer napisał(a)

No tak ;) Tylko co w takim razie ja mam zmienić, żeby nie było tych 5px przerwy, a żeby cała strona była w procentach? Bo jakoś nie wiem co takiego zmienić tam... :P

zmienić box-model i ustawić 76%

czyli do styli dopisać np:

div, span, * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

oczywiście wystarczy sama gwiazdka a w twoim przypadku samo "div" ale tak sobie napisałem

w pliku html zrobić na samiutkim początku jedną pustą linijkę i

#content {
  float: left;
  width: 75%;

na:

#content {
  float: left;
  width: 76%;

mógłby mi ktoś podać przykład gdzie model content-box jest niby wygodniejszy i dużo by było kombinowania bez niego ? bo jak widzę to sprawia same kłopoty

BTW 13 zapytań SQL ? przecież tam nie ma jeszcze o co pytać, czy same te 12 pozycji statystyk zajmują 12 zapytań ?

0
Adamo napisał(a)

[...]

Dzięki, Adamo, bardzo mi pomogłeś :)

Adamo napisał(a)

BTW 13 zapytań SQL ? przecież tam nie ma jeszcze o co pytać, czy same te 12 pozycji statystyk zajmują 12 zapytań ?

No co Ty :p

  1. layout mocno okroiłem (z menu i środka) zeby było czytelniej po prostu
  2. Działy z menu razem są na 2 zapytaniach :)
0

Chyba za szybko się ucieszyłem :-| Udało mi się zdobyć screena z IE: http://img370.imageshack.us/img370/562/d4zk.png [rotfl] Jakby co strona jest poprawiona nadal tu: http://coldpeer.ovh.org/neo_new/

0

a było dobrze :|
no to nie wiem, ale przy okazji widzisz że musisz ustalić kolor tła na biały bo jak ktoś ma w systemie/przeglądarce ustawiony inny domyślny to to dziwnie wygląda

0
Adamo napisał(a)

a było dobrze :|

:/

Adamo napisał(a)

no to nie wiem, ale przy okazji widzisz że musisz ustalić kolor tła na biały bo jak ktoś ma w systemie/przeglądarce ustawiony inny domyślny to to dziwnie wygląda

Domyślnie w Xp jest biały :P Ale sam też to zauważyłem i zadbam o to :)
Hmm.. A może dać +- 750px i wsio? Osoby. której się pytałem mówiła ze wtedy było lepiej, ale zobaczymy jeszcze :P

0

Ale jak u mnie na przykład będzie 750 pikseli, to zajmuje mi niecałą połowę szerokości ekranu. Po to są wartości procentowe, by tak się nie działo.

0
Adam.Pilorz napisał(a)

Ale jak u mnie na przykład będzie 750 pikseli, to zajmuje mi niecałą połowę szerokości ekranu. Po to są wartości procentowe, by tak się nie działo.

Wiem (tak w ogóle to jak już to będzie 768px :p), tylko jak widzisz są problemy z wykonaniem tego :/

0

ale layouty na procentach wyglądają zazwyczaj dobrze na jednej, góra dwóch rozdzielczościach, już lepiej dawać na jakąś stałą wartość szerokości albo ew. sprawdzać rozdzielczość i podawać odpowiedni styl

0
Adamo napisał(a)

ale layouty na procentach wyglądają zazwyczaj dobrze na jednej, góra dwóch rozdzielczościach, już lepiej dawać na jakąś stałą wartość szerokości albo ew. sprawdzać rozdzielczość i podawać odpowiedni styl

Przesadzasz. Mam choćby na stronie Epsisoftu layout na procentach, wygląda dobrze u mnie na 1600x1200, 1280x1024, 1024x860. U mnie na joggu jest podobny, który jeszcze na 800x600 jest czytelny. Nie jest to cud techniki, ale dowód, że da się zrobić coś, co jest czytelne niezależnie od rozdzielczości i doskonale wykorzystuje przestrzeń monitora.

0
Coldpeer napisał(a)

Chyba za szybko się ucieszyłem :-| Udało mi się zdobyć screena z IE: http://img370.imageshack.us/img370/562/d4zk.png [rotfl] Jakby co strona jest poprawiona nadal tu: http://coldpeer.ovh.org/neo_new/

Bo ie ma buga, nie wiem o co dokładnie chodzi, ale zeby divy lezały obok siebie na ie ten środkowy musi być o zdaje sie 3piksele mniejszy... ja zawsze robie tak:

/* styl dla ie */
#content
{
width: 697px;
}

/* styl dla innych */
body>#content
{
width: 700px;
}

Do twojej stronki to width nie pasuje ale chodzi o przykład ie hack'a

0
Kooba napisał(a)
Coldpeer napisał(a)

Chyba za szybko się ucieszyłem :-| Udało mi się zdobyć screena z IE: http://img370.imageshack.us/img370/562/d4zk.png [rotfl] Jakby co strona jest poprawiona nadal tu: http://coldpeer.ovh.org/neo_new/

Bo ie ma buga, nie wiem o co dokładnie chodzi, ale zeby divy lezały obok siebie na ie ten środkowy musi być o zdaje sie 3piksele mniejszy... ja zawsze robie tak:

/* styl dla ie */
#content
{
width: 697px;
}

/* styl dla innych */
body>#content
{
width: 700px;
}

Do twojej stronki to width nie pasuje ale chodzi o przykład ie hack'a

Hmm... Jeśli chodzi o lay nie na procentach, to ja robię:
#content { width: 768px }
i śmiga na IE także :)

0

nie no chodzi o ten box-model, jak na FF prawa strona spadała na dół to na IE było dobrze, teraz jest na odwrót więc pokombinuj jakoś, głównie z doctype i jego umieszczeniem w pierwszej / kolejnej linii

0

Zacząłem coś kombinować. Zrobiłem dwie wersje. W pierwszej, na Operze, wszystko jest OK, ale za to pod IE się sypie. Zresztą poniżej zamieszczam screeny, zobaczcie sami:

http://coldpeer.ovh.org/neo_new/
Opera (jest OK)
Firefox (reszta jak na Operze)
IE
Konqueror

http://coldpeer.ovh.org/neo_new/index2.php
Opera
Firefox
IE
Konqueror

Arkusz styli ten sam - http://coldpeer.ovh.org/neo_new/style.css.
Wiecie co z tym zrobić? :)

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