Głupie problemy - CSS

Sebaci · 11 Czerwca 2006

Robie sobie stronke, dałem głównego diva a w nim reszta mniejszych, chciałem żeby strona była powiedzmy na 800 px to dałem głównego na taki rozmiar i chciałbym żeby strona była wyśrodkowana. I problem jest taki że nie wiem jak wyśrodkować diva!

Drugi problem: Chcę żeby był div główny i reszta w nim, a tu patrze i tylko 2 divy są w tym głównym, reszta pod nim. Czyli tylko górny baner i mały div pod nim. 3 divy, które mają być obok, tj menu, treść i prawy div, są pod spodem poza całością. Jednak gdy usunę im atrybuty float: left to sie okazuje że już są w tym głównym divie, ale wtedy wiadomo, nie układają się obok siebie tylko są jeden pod drugim.

i chodzi o to żeby te wszystkie divy były w tej jasnej ramce, czyli głównym divie.

<div id="site">
<div id="top"><h1>pierwszy div</h1></div>
<div id="undertop">drugi div</div>
<div id="left">trzeci</div>
<div id="main">czwarty</div>
<div id="right">piąty</div>
</div>

body{
width: 995px;
height: auto;
text-decoration: none;
font-family: verdana;
font-size: 10px;
color: #333333;
background-color: #d2ffd2;
}
#site{
width: 800px;
height: auto;
border: 1px #006600 solid;
background-color: #f4fff4;
overflow: none;
}
#top{
width: 700px;
height: 120px;
clear: both;
}
#undertop{
width: 700px;
height: 16px;
padding: 2px;
clear: both;
}
#left{
width: 100px;
height: auto;
padding: 10px;
float: left;
}
#main{
width: 400px;
height: auto;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
float: left;
}
#right{
width: 100px;
height: auto;
padding: 10px;
float: left;
}

EDIT: już sobie poradziłem ze divami wyłażącymi poza div główny. Teraz tylko nie wiem jak całość wyśrodkować. Chodzi mi o to żeby cał strona, o ustalonej szerokości wyświetlała się na środku, a nie z lewej, bez względu na rozdzielczość.

Edytowane 11 Czerwca 2006 przez Sebaci

Lukass19 · 11 Czerwca 2006

daj dla body: text-align: center; a dla #site: text-align: left;

zobacz i powiedz czy o to chodzilo

yavaho · 11 Czerwca 2006

W body nie podadawaj rozmiarów.

body{

text-align: center;

}

#site{

width: 770px; -> zostaw troche na sówaki

text-align: left;

margin: auto; -> to jest wazne dla FF

}

zerocool · 11 Czerwca 2006

width: 995px;

a to co niby ma być ?

Tu jest moja wersja twojego wynalazku : https://www.ecv1457.2-ec.com/testy/5div.html

co do wyśrodkowania ... można kombinować, jest na to rozwiązanie, ale ciężko wtedy pogodzić wyrównanie tych DIV-ów w środku. Temat jest otwarty : być może ktoś ma na to pomysł bo widziałem kilka rozwiązań w sieci, ale żaden nie uwzględniał podobnego przykładu.

body{
text-align: center;

}

działa tylko Explorerem

zresztą to samo można załatwić za pomocą <center>

11 Czerwca 2006

cala zabawe zaczynamy od doctype, ktory zostanie zrozumiany przez wiekszosc przegladarek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

zarocool: kod css dla #site:

#site {
 margin:0 auto;width:750px;
}

z body wyrzuc text-align i czemu wiekszosc divow jest relative?

.clearfix dla #site

/* position is everything */
.clear {clear:both;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

Edytowane 11 Czerwca 2006 przez w3master

radziem · 11 Czerwca 2006

A nie wystarczy zrezygnować z float: left; w #site i dodać tam jeszcze margin: 0 AUTO;. Z moich obserwacji wynika, że działa i w IE, i w FF, i w Operze.

zerocool · 11 Czerwca 2006

A nie wystarczy zrezygnować z float: left; w #site i dodać tam jeszcze margin: 0 AUTO;

NIE wystarczy, zobacz sobie co się dzieje pod Firefox :

https://www.ecv1457.2-ec.com/testy/5div2.html

#site zawiera ramkę która powinna obejmować wszystkie DIV-y w środku, a zostaje w górze, da się to obejść ustalając stałą wartość height, ale wtedy dasz kilka razy <br /> i DIV w środku wyjdzie poza #site

EDIT : Nie zauważyłem clearfix-a, trzeba by to sprawdzić

Edytowane 11 Czerwca 2006 przez zerocool

yavaho · 11 Czerwca 2006

Tak jak juz wspomnial w3master trzeba zacząć od doctype, bo różnie bedzie z margin i padding przy różnym doctype.

I co za dużo styli to niezdrowo.

Tyle wystarczy aby było na środku i we wszystkich przegladarkach jednakowo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
body{
font: bold 10px verdana;
background: #FFFFFF;
text-align: center;
color: #FFFFFF;
}
#site{
border: 3px solid #000000;
background-color: #FFFFFF;
text-align: left;
margin: auto;
width: 750px;
}
#top{
width: auto;
margin: auto;
height: 120px;
padding: 10px;
background-color: #99CC33;
}
#undertop{
width: auto;
margin: auto;
height: 16px;
padding: 10px;
background-color: #3D5100;
}
#left{
float: left;
width: 170px;
padding: 10px;
background-color: #557100;
}
#main{
margin-left: 190px;
width: auto;
padding: 10px;
background-color: #7CA600;
}
#right{
float: right;
width: 140px;
padding: 10px;
background-color: #99CC00;
}
-->
</style>
</head>
<body>
<div id="site">
<div id="top"><h1>pierwszy div</h1></div>
<div id="undertop">drugi div</div>
<div id="left">trzeci</div>
<div id="right">pi±ty</div>
<div id="main">czwarty</div>
</div>
</body>
</html>

Sebaci · 11 Czerwca 2006

Hmm, chyba zrobię stronę na cały ekran, tak jak na początku myślałem. Z tego co widzę to wiele stron które są wycentrowane to są robione tak, że są w tabeli o ustalonej szerokości z parametrem center. A ja nie chce używać tabel. Tylko pytanie: dlaczego nie dano takiego prostego parametru w CSS jak align: center?

Hmm a jak nie szerokość 955px to jaką mam dać? Jak daje na auto to nie ma paska przewijania gdy zawartość strony jest większa... a jak na 100% to pojawia sie poziomy suwaczek i strona jest nieznacznie szersza od szerokości ekranu...

zerocool · 11 Czerwca 2006

hehe yavaho bardzo sprytnie wymyślone na to nie wpadłem,

ale zobacz co się dzieje jak dasz zbyt długi text pod Firefoxem

https://www.ecv1457.2-ec.com/testy/5div3.html

11 Czerwca 2006

Sebaci: to jakies stare rozwiazania musisz ogladac, zapytaj google co wie na temat 'centrowania divow', border ma zwyczaj rozpychania layoutu o dodatkowe piksele.

zerocool: faux columns i po problemie.

yavaho: prosze, zmien <div id="site"> na <div id="site" class="clearfix"> i uzupelnij css o definicje klasy clearfix. i skad doctype 1.1 ? pogon za najwyzszym numerkiem? - ie go nie zrozumie i wejdzie w tryb quirks mode.

Edytowane 11 Czerwca 2006 przez w3master

Sebaci · 11 Czerwca 2006

Zrobiłem takie coś ale nie mam teraz za bardzo pomysłu na design:

yavaho · 11 Czerwca 2006

zerocool

To jest typowy tasiemiec. A każda przegladarka przełamuje tekst za różnymi znakami. Mozna taki tekst ukryć wstawiając do styli np: overflow:hidden;

w3master

Przed czym zabezpieczy ten hack "clearfix" w moim przypadku? Czy nie wystyrczy w odpowiednich miejscach wstawić clear:cośtam; ?

Osobiście unikam takich trików aby sie w przyszłości nie wpakować w bagno jak wyjdzie nowa przeglądarka, która to dziwacznie zinterpretuje.

ps. ja używam zawsze XHTML 1.0

11 Czerwca 2006

Przed czym zabezpieczy ten hack "clearfix" w moim przypadku? Czy nie wystyrczy w odpowiednich miejscach wstawić clear:cośtam; ?

powoduje rozciagniecie rodzica, jesli zawartosc jest floatowana. tak wystarczy dac clear:costam - tylko do czego? musi byc to ostatni element w divie, ktorego potomkowie sa floatowani. moze <br class="clear" /> ? imho malo semantycznie.

Zaloguj się

Głupie problemy - CSS

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Gość w3master

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Gość w3master

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Gość w3master

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Polecamy

Współpracują z nami

Powiadomienie o plikach cookie