Forum PHP.pl > [CSS]Problem z marginesem

Pomoc - Szukaj - Użytkownicy - Kalendarz

alimek

23.10.2010, 11:47:03

Witam, mam taki kod:

Cytat

body, html {
background-image: url(images/bg.jpg);
background-repeat: no-repat;
background-position: center;
margin: 0;
padding: 0;
}
#center {
margin-left: auto;
margin-right: auto;
}
#logo {
background-image: url(images/logo.png);
width: 999px;
height: 369px;
margin-left: auto;
margin-right: auto;
}
#menu01 {
background-image: url(images/menu01.png);
width: 999px;
height: 52px;
margin: 0;
padding-top: 0;
margin-left: auto;
margin-right: auto;
}
#news {
background-image: url(images/bgnews.png);
width: 999px;
height: 350px;
color: #fff;
margin-left: auto;
margin-right: auto;
}

Strona wygląda tak: kliknij
Nie mam pojęcia, jak zrobic żeby ten poziomy pasek z menu nie miał takiego odstępu od loga. Próbowałem wszystkiego: margin-top: 0; padding-top: 0; i nic.. Druga sprawa... chcę aby to szare tlo na newsy samo się zwiększało wraz z napływem newsów jednak, klasyczna wysokość ma być 350px;

vonski

23.10.2010, 12:23:30

Spróbuj tak:

Dodaj sobie w pliku ze stylami, gdzieś na samym początku taką klasę:

[HTML] pobierz, plaintext 
.clear  { position:relative; clear:both; height:0px; overflow:hidden; }
[HTML] pobierz, plaintext

Ustal sobie jakąś szerokość dla tego diva w którym będzie znajdować się zawartość strony (w twoim przypadku jest co #center), np: #center { width: 999px; }
Div z menu, czyli #menu01 floatuj do lewej, czyli #menu01 { float: left }
Pod tym divem dodaj sobie: <div class="clear"></div> (czyli tej klasy którą dodałeś na początku w stylach).
W #news usuń całkiem atrybut height, daj mu float: left a pod nim też dodaj <div class="clear"></div>
To tak na szybko, ale powinno działać

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.