+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Bez tabel (/thread-css-bez-tabel)
[CSS] Bez tabel - Stef@n - 21-03-2009
Witam,
Zaczynam nowa przygodę z pisaniem stron bez tabel. No i wszystko niby cacy zrobiłem sobie mały szablon, ale są pewnie niedociągnięcia które nie wiem jak poprawić. A w czym problem? No z ustawieniem div. W IE wszystko jest fajnie i tak jak powinno. A w FF niestety jeden div pokrywa się z innym zdjęciem. Podaje link do strony:
http://www.kozuchykorzen.pl
Bardzo proszę o pomoc i różne poprawki oraz komentarze do tego kodu abym mógł pogłębić zagadnienie robienia stron bez tabel.
kod CSS:
Kod:
body {
background-color: #7390C4; margin-top: 7px; margin-left: 0; margin-right: 0; margin-bottom: 7; font-family: Tahoma; color: #000000; font-size: 12px; }
p.naglowek {
margin-left: 15px; margin-top: 0px; margin-bottom: 0px; color: #FFFFFF; font-weight: bold; line-height: 22px; }
#top {
background-color: #FFFFFF; width: 978px; margin: auto; }
#logo {
width: 84px; height: 70px; padding-left: 30px; float: left; }
#mini_menu {
width: 200px; float: right; text-align: right; margin-top: 20px; padding-right: 30px; display: run-in; }
#mini_menu ul {
display: inline; padding-left: 0px; margin-left: 0px; }
#mini_menu li {
list-style-type: none; display: inline; padding: 5px; }
#reklama_a {
background-color: #FFFFFF; width: 960px; text-align: center; margin: auto; margin-top: 5px; margin-bottom: 5px; }
#menu {
background-image: url(grafika/bg_menu.gif); width: 960px; margin: auto; line-height: 39px; font-weight: bold;}
#menu ul {
display: inline; padding-left: 0px; margin-left: 0px; }
#menu li {
list-style-type: none; display: inline; padding: 17px; }
#lewa_kolumna {
width: 362px; padding-left: 10px; padding-top: 15px; float: left; }
#logowanie_naglowek {
background-color: #7390C4; width: 362px; }
#logowanie_formularz {
background-color: #D2DFEB; height: 150px; width: 362px; }
#informacja {
padding-top: 15px; height: 150px; width: 362px; }
#prawa_kolumna {
width: 586px; float: right; padding-right: 10px; padding-top: 15px; }
#tekst {
width: 960px; padding-bottom: 15px; padding-top: 15px; text-align: justify; margin: auto; }
#logo_stopka {
width: 58px; padding-left: 30px; float: left; }
#menu_stopka {
width: 860px; float: left; text-align: center; padding-top: 7px; }
#menu_stopka ul {
display: inline; padding-left: 0px; margin-left: 0px; }
#menu_stopka li {
list-style-type: none; display: inline; padding: 5px; }
#tresc_stopka {
width: 860px; float: left; text-align: center; padding-top: 5px; }Z góry dziękuje i czekam na mądre rady.
RE: [CSS] Bez tabel - Labsta.com - 21-03-2009
Witam.
Jeśli dobrze rozumiem to wystarczy:
Kod:
#tekst {clear: both;}RE: [CSS] Bez tabel - Stef@n - 21-03-2009
Dziękuje Ci bardzo. Mam jeszcze tez prośbę co do mojego kodu czy aby na pewno wszystko jest poprawnie i czy można go jakoś uprościć?
RE: [CSS] Bez tabel - Labsta.com - 21-03-2009
Usuń align="left" border="0" z obrazków i daj to do css
Uprościć można np.
Kod:
margin-top: 7px; margin-left: 0; margin-right: 0; margin-bottom: 7;Kod:
margin: 7px 0px 7px 0px;Dodatkowo, żeby lepiej poruszać się po CSS uporządkuj właściwości alfabetycznie np.
Kod:
#logo {
width: 84px; height: 70px; padding-left: 30px; float: left; }Kod:
#logo {
float: left; height: 70px; padding-left: 30px; width: 84px;}bo łatwiej się edytuje.
Może ktoś Ci jeszcze coś dorzuci.
Pozdrawiam