CSS w stronie szkoły Opcje

[Dariusz_512]

Witam

Tworzę obecnie layout strony szkoły. Zabierając się za to nie miałem żadnej wiedzy o CSS (IMG:style_emoticons/default/winksmiley.jpg)
Ale doszłem do tego: www.na-technike.yoyo.pl

Mam kilka pytań: co zrobić by menu po lewej stronie wypełniało cały dany mu obszar? Od nagłówka po stopkę? Co odbija IE?
Co uważacie za dobre a co trzeba zmienić? Dzięki z góry za kreatywne odpowiedzi. Ach i to chyba oczywiste, że menu po lewej nie poświęciłem więcej niż minutę...wcześniej planowałem tam zaokrąglone buttony, ale nie pasuje to do sztywności strony do tych prościutkich krawędzi. Napiszcie proszę też coś od strony artystycznej (IMG:style_emoticons/default/winksmiley.jpg)

CSS:

CODE

html, body {
background-color: #000000;
color: #000;
margin: 0;
padding: 0;
}


#top {
width:780px;
margin:0 auto;
height:auto;
}

#NAGLOWEK {
margin-top:5px;
background-color:#888;
height:90px;
background-image:url(header.jpg);
margin-bottom:5px;
}

#MENU {
width:150px;
height:auto;
float:left;
overflow:hidden;
background-color:#ccc;
margin-right:4px;
}

#MENU dl {
margin: 0px;
margin-bottom:15px;
}
#MENU dt {
font-size: 17px;
font-weight: bold;
height:20px;
width:150px;
padding-top:6px;
text-align:center;
}
#MENU dd {
font-size:13px;
margin-top:3px;
margin-left:6px;
}
#MENU a {
font-size:14px;
line-height: 135%;
}

#TRESC {
width:626px;
float:left;
overflow:hidden;
background-color:#ccc;
margin-bottom:5px;
}


#info {
float:left;
margin-left:15px;
margin-top:6px;
margin-bottom:10px;
}

#info dl {
margin: 0px;
margin-bottom:15px;
margin-left:5px;

}

#info dt {
font-size: 17px;
font-weight: bold;
height:20px;
width:auto;
text-align:left;
margin-top:5px;

}

#info dd {
font-size:13px;
margin-top:3px;

}

#obraz {
height:300px;
font-size:18px;
float:right;
margin-top:10px;
margin-right:10px;
text-align:center;

}


#STOPKA {
clear:both;
width:100%;
background-color:#888;
text-align:center;
}

Ten post edytował Dariusz_512 21.10.2009, 14:56:37

[athei]

Albo daj menu stałą wysokość, taką jak treść, albo umieść menu i treść w nowym divie, daj mu kolor i overflow:hidden. Niestety w drugim przypadku nie będzie czarnych przerw między menu - tresc - stopka.

Inne rozwiązanie to "faux columns" http://www.alistapart.com/articles/fauxcolumns/.
Menu, tresc w diva, dajesz tym trzem background-color:transparent, a nowy div dostaje też tło - obrazek rozciągany w pionie background:url(2_col_faux_art.gif) repeat-y; . Lewa część obrazka to kolor menu, prawa kolor treści. Np. coś podobnego do http://img23.imageshack.us/img23/9107/2colfauxart.gif

[sunpietro]

Zajrzyj tutaj jeśli chcesz rozwiązać problem:
kolumny tej samej wysokości w CSS