ďťż

[html & css] width w % i padding - div'y

Podstrony

telcocafe

Witam wszystkich użytkowników forum. Dawno nie pisałem - wiadomo - szkoła i inne duperele, no i nasze kobiety :in_love:
Mam takie czysto teoretyczne pytanie. Tworzę stronę, a raczej szablon, który jest oparty na div-ach. Załóżmy że chcę podzielić stronę w proporcji 20% na menu i 80% na tekst oraz mam atrybut "padding" który powiększa mi pole z tekstem i ląduje ono piętro niżej. Można by to zrobić ala "div w div-ie" ale to chyba beznadziejny pomysł. Czy macie jakieś inne pomysły na rozwiązanie tego problemu?

Drugie moje pytanie jest następujące: Czy trzeba deklarować długość menu i tego pola z tekstem? Czy można zostawić jego regulację samej zawartości. Zrobiłem w tej sposób i mam taki mały problem na IE (w FF wszystko gra i buczy). Jutro umieszczę kod, bo nie mam siły...

Z góry dziękuję oraz pozdrawiam
Maks

Padding nie powiększa niczego, a zmienia odstęp tekstu od krawędzi bloku, w którym się ten tekst znajduje.
Kochane IE :-) Będzie trzeba użyć * html * .klasa . . .

Mam takie czysto teoretyczne pytanie. Tworzę stronę, a raczej szablon, który jest oparty na div-ach. Załóżmy że chcę podzielić stronę w proporcji 20% na menu i 80% na tekst oraz mam atrybut "padding" który powiększa mi pole z tekstem i ląduje ono piętro niżej. Można by to zrobić ala "div w div-ie" ale to chyba beznadziejny pomysł.

No to tutaj musisz zrobić tak
CSS: #menu { float: left; width: 20%; } #content { float: left; width: 80%; }

<div> <div id="menu"></div> <div id="content"></div> //tutaj ewentualnei możesz dodać <div class="clear"></div> gdzie class.clear ma artykut w css "clear:both"; </div>
Użytkownik polasek edytował ten post 17 styczeń 2008, 09:36
Dobra, dobra panowie... zobaczcie sami http://www.badzpiekn.../maks/index.htm
Dla tekstu problem rozwiązuje overflow: auto. Ale co z resztą? Słyszałem, że dla bottom musi być width:100% oraz clear: both bo inaczej IE tego nie interpretuje poprawnie. Poza tym strona dalej szaleje pod IE. Co tu z tym fantem zrobić?

Kod html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="file:///C:/Documents%20and%20Settings/wookieb/Pulpit/index/style.css" type="text/css"><title>Lay trzykolumnowy na divach</title> </head><body> <div id="all"> <div id="menu"> <div class="padding_content"> <a href="#">* Moje menu *</a> <a href="#">* Moje menu *</a> <a href="#">* Moje menu *</a> <a href="#">* Moje menu *</a> </div> </div> <div id="glowny"> <div class="padding_content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Blandit sed, dapibus aliquam. In ultricies est. Maecenas orci luctus eget, bibendum a, dolor. Vestibulum a leo. Nullam et magnis dis parturient montes, nascetur ridiculus mus. Morbi commodo. Curabitur quis suscipit lectus. Vestibulum eget tellus. Nunc vehicula. Nunc id eros nec ligula libero, id turpis vulputate in, gravida sodales. Aenean. Ornare, erat a purus. Fusce nonummy sagittis. Nullam ut vehicula lectus. Curabitur gravida hendrerit nunc venenatis augue eu mi. Nam accumsan interdum. Donec lectus dapibus aliquam enim dolor tellus, volutpat quam congue ac, euismod orci at lectus sit amet, rutrum in, gravida elit. Pellentesque fringilla lorem, id ipsum. Aenean massa. Condimentum, pulvinar augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam hendrerit et, mollis eu, tellus. Donec condimentum, pulvinar felis, feugiat venenatis, elit rhoncus dolor sit amet, consectetuer nec, pharetra elementum. Mauris a mauris. Pellentesque sed orci ut quam eget tellus. Praesent commodo convallis diam. Justo, condimentum convallis. Donec euismod pulvinar, odio. Suspendisse sed eros. Curabitur egestas. Cras justo vel bibendum vel, placerat pulvinar, pede bibendum leo, pretium magna. Curabitur et eros nisl, tristique senectus et netus et imperdiet id, tortor. Nulla vehicula sit amet, sollicitudin ligula placerat nec, pharetra accumsan adipiscing, risus ut nisl.. </div> </div> <div id="bottom">Kurde czemu musi siĂ™ wszystko rozwalaĂ‡ przez te div'y!</div> </div> </body></html>

kod css
body { width: 80%; margin: 20px auto; } .text { font-family: Georgia, serif; font-size: 10pt; } div { margin: 0px; padding: 0px; } #all { background-color: #ff0000; } #menu { font-size: 12pt; font-weight: bold; float: left; width: 20%; } #menu .padding_content a { display: block; text-align: center; } #glowny { background-color: #55d4ff; float: left; width: 80%; } #bottom { background-color: #ffffcc; clear: both; padding: 10px 20px; } .padding_content { margin: 10px 20px; }

Nie testowałem pod IE 7.
Na FF i kIEpskim 6 jest ok.
Na safari i operze pokaże się 1px kreska po prawej stronie i nie chciało mi się z tym bawić. Dlatego lepiej by było gdybyś dał ustawianie szerokości w px.
Użytkownik polasek edytował ten post 17 styczeń 2008, 17:32
za co odpowiad clear: both i overflow : auto ?

http://www.kurshtml....s/przepelnienie,rozmiary.html do overflow

http://www.kurshtml....cjonowanie.html clear :)

Drogi Polasku, Twoje rozwiązanie jest dobre, ale tak jak wyżej napisałem to jest "div w divie".
<div id="menu"> <div class="padding_content"> <a href="#">* Moje menu *</a> <a href="#">* Moje menu *</a> <a href="#">* Moje menu *</a> <a href="#">* Moje menu *</a> </div></div>
Dobra, leżeli już mam takie rozwiązanie to nie lepiej użyć margin i listy jako menu? Czy to jedyny sposób załatwienia tego problemu?
Użytkownik Mr X edytował ten post 21 styczeń 2008, 16:55
Możesz inny. Lista też byłaby ok. Zrób jak chcesz:) A "div w divie"w niczym nie przeskadza bo własnię tak składa się strony za pomocą "divu w divie" :)

Bardzo dziękuję Tobie za odpowiedz :). Jeszcze małe pytanko: Czy width w procentach jest zły, czy lepiej używać pikseli? Cóż reszta należy do mnie, no to ja działam. Jeszcze raz dzięki!
Użytkownik Mr X edytował ten post 21 styczeń 2008, 22:35
Width stosowany dla ustalania ogólnej szerokości strony jest zły z tego względu, ze nigdy nie masz kontroli jak szeroko strona może się rozszerzyć co może dać bardzo brzydkie efekty. Podawanie szerokości w px jest najlepszym rozwiązaniem. Rozwiązania % stosuje sie najczęsciej na stronach które musza zajmować 100% szerokości bądź też nie zawsze jest to tam stosowane.

Chciałbym odsunąć menu od tekstu na jakieś 10px. Wykluczam zabawę z border. Próbowałem padding: 10px oraz margin: 10px z width:80%-10px; lecz one rozwalają układ strony. Mógłby mi ktoś pomóc?

Z góry dziękuję.
Pozdrawiam Maks.

http://forum.ks-eksp...howtopic=114415

Czy o to chodziło?

nie mozna zrobić width:80%-10px...
Poprostu wstawiasz tam kolejnego diva z parametrem margin. Umieszczasz w nim tekst i po kłopocie.

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL