|
|||
menü will nicht da hin wo es hin soll...
Hallo Community,
in html halbwegs sattelfest hab ich probiert mit nem Kumpel, der css beherrscht, eine Seite zu basteln. Dummerweise wird besagter Herr aus beruflichen Gründen gut einen Monat ausfallen, und ich hänge in der Luft. In meiner Verzweiflung wende ich mich also an Euch. Problem Nr. 1: Hier seht ihr das Layout ohne Menü, alles in Butter soweit (jedenfalls im Firefox). Hier seht ihr die ganze Pracht mit Menü, welches nicht da auftaucht wo ich es gerne hätte, nämlich zwischen der ornamentalen grafik links und dem logo rechts am unteren rand des headers. Vielmehr zerreisst mir das menu das gesamte Layout. Frage: Wie kriege ich das Menü da hin wo ich es haben will? Was hab ich falsch gemacht? Problem Nr. 2: Die beiden grauen Spalten sollten nach Möglichkeit gleich lang sein, unabhängig vom Inhalt. Mit anderen Worten, die Spalte mit dem "längsten" Inhalt soll die Spaltenlänge beider Spalten definieren sodass diese immer auf gleicher Höhe enden, egal ob in der rechten oder der linken Spalte mehr (längerer) Text steht. Frage: Wie geht das? Problem Nr. 3: Warum weigert sich der IE die Schrift im Footer mittig (in der Höhe mittig also) anzuzeigen? Frage: Wie kann ich dem IE diese Flausen austreiben? Hier nun der css-code, das html könnt ihr ja in eurem Browser anschauen: Code:
#wrapper { width: 1024px; \width: 1044px; w\idth: 1024px; margin: 10px; margin-left: auto; margin-right: auto; } #left { float: left; width: 122px; height: 300px; background: url(../img/img_left.gif) no-repeat right top; } #right { float: right; width: 122px; height: 300px; background: url(../img/img_right.gif) no-repeat left top; } #container { margin-left: 122px; margin-right: 122px ; } #top { height: 40px; background: url(../img/img_top_right.gif) no-repeat right bottom; } #banner { width: 780px; height: 135px; margin-bottom: 10px; background: url(../img/img_header_left.gif) no-repeat left bottom; background-color: #932923; } #logo { background: url(../img/img_header_right.gif) no-repeat right bottom; width: 780px; height: 135px; margin: 0px; padding: 0px; } #content { padding: 30px; padding-left: 160px; margin-right: 225px; background: url(../img/img_bg_content.gif) no-repeat left top; background-color: #e5e1de; } #sidebar-a { float: right; width: 185px; margin: 0; padding: 15px; padding-top: 45px; background-color: #e5e1de; display: block; } #footer { padding: 1px; padding-left: 10px; background-color: #932923; margin-top: 10px; /* width: 780px; */ height: 40px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .textfield { background-color: #fff; padding-left: 15px; padding-bottom:10px; } .newsitem { margin-bottom: 20px; } .textfield p { margin-left: 20px; } #sidebar-a h2, #sidebar-a h3 { margin: 0.3em 0; } #sidebar-a h3, #sidebar-a p { margin-left: 25px; } #sidebar-a p { margin-top: 0.8em; } h1 { font-family: Helvetica, Verdana, Arial, sans-serif; color: #932923; letter-spacing: -1px; text-align: left; font-weight: normal; font-size: 1.4em; } h2 { font-family: Helvetica, Verdana, Arial, sans-serif; color: #932923; letter-spacing: -1px; text-align: left; font-weight: normal; font-size: 1em; } h3 { font-family: Helvetica, Verdana, Arial, sans-serif; color: #4b4b4b; letter-spacing: -1px; text-align: left; font-weight: bold; font-size: 0.6em; } h4 { font-family: Helvetica, Verdana, Arial, sans-serif; color: #000; letter-spacing: 0px; text-align: left; font-weight: bold; font-size: 0.6em; } p { line-height: 1.8em; text-align: left; font-size: 0.6em; color: #4b4b4b; font-family: Verdana, "Lucida Grande", Arial, sans-serif; } ul#menu { width: 100%; height: 43px; background: #932923 top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; } ul#menu li { display: block; float: left; margin: 0 0 0 5px; } ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; } ul#menu li a:hover { color: #333; } ul#menu li a.current{ color: #FFF; background: #FFF top left repeat-x; padding: 5px 15px 0; } Sorry, ich bin absoluter css-noob (merkt man sicher) und versuche es so zu lernen wie ich html gelernt hab, nämlich praktisch. Eure Antworten weiß ich deshalb sehr zu schätzen. Danke für eure Hilfe schon im voraus, Rolf |
Sponsored Links |
|
||||
Hi Rolf,
zu 1: Nimm doch mal bei ul#menü die height:43px; weg, dann schauts schon gleich anders aus. ul#menü li a - height:43px; weg und ein bißchen mit padding spielen, dann kannst du das Menü nach unten verschieben. zu 2: Faux Columns Technik. Funktioniert aber nur wenn alle Container bündig sind. zu 3: div#footer height:40px; wegnehmen dann ist es vertikal in der Mitte. Höhe des footers kannst du über line-height für h4 steuern. Getestet nur im FF. Gruß Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
|
|||
Super, hat geholfen, wenigstens das mit der Menüausrichtung und dem Footer.
Allerdings kann ich die Faux-columns-Methode nicht anwenden, da ich im #content schon eine Hintergrundgrafik verwende. Oder hab ich da was falsch verstanden bzw. denke ich nicht weit genug? Danke, Rolf |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Vertikale Navigation: IE6 - Whitespace-Bug? | b.erry | CSS | 6 | 12.02.2009 17:46 |
Umbruch in einem LI bei horizontalem Menü | M4rco | CSS | 12 | 13.10.2006 12:26 |
Navigation - Menü | T.S. | CSS | 6 | 18.02.2006 19:49 |