|
|||
Höhe des "Center" Bereichs nicht an "menu" ausrichten, aber wie?
Hallo zusammen,
die Höhe des DIV Bereich Center wird immer gemessen an dem Inhalt des Bereichs "Menu". Werde also mehrere Menüpunkte in die Seite eingefügt, rutscht der Bereich Center weiter nach unten. Wie kann man das verhindern? ANbei der Code: die css Datei: Code:
body { margin:15px 0; color:#685E43; line-height: 1.4em; background : url(bg.gif); font-family: Arial, Helvetica, sans-serif; } .logo { margin: -66px 0 0px 39px; } .toph { background: #3D3E42 url(top.jpg) no-repeat center; height: 67px; } .content { margin: 0 auto; width: 665px; background: #3D3E42 url(bg-mid.jpg) repeat-y center; } .menu { width: 149px; color:#A90209; margin: 20px 0 0px 43px; } .center { width: 396px; min-height: 400px; font-size: 95%; margin: -354px 0 4px 225px !important; background: #eee7d2; } .footer { background: #3D3E42 url(bot.jpg) no-repeat center; height: 70px; } .footer_text { color:#FFFFFF; font-size:90%; text-align:center; padding: 26px; } /* Links */ A:link { COLOR: #9e1b34 } A:visited { COLOR: #9e1b34 } A:hover { BACKGROUND: rgb(221,211,213); COLOR: #9e1b34; TEXT-DECORATION: none } A:active { COLOR: #a79d9f; TEXT-DECORATION: none } /* Menu */ .hideMe { DISPLAY: none } A.section { font-size: 13px; PADDING-RIGHT: 2px; BORDER-TOP: #eee7d2 1px solid; DISPLAY: block; PADDING-LEFT: 6px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.section:link { BACKGROUND: #DDD5BE; COLOR: #A90209; } A.section:visited { COLOR: #A90209; } A.section:active { COLOR: #A90209; } A.section:hover { BACKGROUND: #eee7d2; COLOR: #A90209; } greets |
Sponsored Links |
|
||||
Sollen wir uns den HTML Code erraten?
CSS ist ohne HTML schlichtweg wertlos! Deine Problembeschreibung läßt auch zu Wünschen übrig - was genau möchtest Du?
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
Sponsored Links |
|
|||
Ergänzung
Hallo,
hier der HTML Code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML><HEAD><TITLE>Titel</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1" iso-8859-1?> <STYLE type=text/css media=all>@import url( images/style.css ); </STYLE> <LINK title="RSS 2.0" href="rss/" type=application/rss+xml rel=alternate> <META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD> <BODY> <DIV class=content> <DIV class=toph></DIV> <DIV class=logo><A href="#"><IMG height=165 alt="Beschreibung" src="logo.jpg" width=158 border=0></A> </DIV> <DIV class=menu><A class=section href="#1">Startseite</A><SPAN class=hideMe><BR></SPAN><A class=section href="#3">Kontakt</A><SPAN class=hideMe><BR></SPAN><A class=section href="#4">Impressum</A><SPAN class=hideMe><BR></SPAN></DIV> <DIV class=center> <H1>Lorem ipsum dolor</H1> <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</P> </DIV> <DIV class=footer> <DIV class=footer_text>Copyright 2007 | <A href="#">Login</A> | <A href="impressum.php">Impressum</A> </DIV></DIV></DIV></BODY></HTML> Wenn in dem DIV "Menu" weitere Menüpunkte hinzugefügt werden, verruscht die Höhe des Bereichs: "Center". Wie kann die Ausrichtung unabhängig von Menu statt finden!? Danke... |
|
|||
Hallo,
danke, habe mir deine Vorschläge und Artikel mal zu Herzen genommen. Demnach die CSS Datei umgestellt. Nun taucht das Problem auf, dass der "Firefox" alles ordentlich darstellt, aber beim IE und bei Opera so einiges falsch angezeigt wird. Aus diesem Grund hatte ich versucht die Befehle float zu vermeiden. Anbei die CSS Datei: Code:
.content { margin: 0 auto; width: 665px; background: #3D3E42 url(../images/bg-mid.jpg) repeat-y center; } .menu { clear: both; width: 149px; color:#A90209; float:left; margin: 20px 0 0px 43px; } .center { float:rigth; width: 396px; max-width: 396px; min-height: 350px; font-size: 95%; margin: 0 0 0 225px !important; background: #eee7d2; } .footer { clear:both; background: #3D3E42 url(../images/bot.jpg) no-repeat center; height: 70px; } Danke, |
|
|||
Antwort
Hallo,
auf die idee hätte ich auch selbst kommen können. Nach der Entfernung des Tippfehlers, wurden keine Fehler gefunden. Das Design wird dennoch in IE und Opera falsch dargestellt. |
|
|||
hallo
Hallo,
so habe nun endlich nochmal was Muße gefunden mich an das Design zu setzen. Habe nun mal ne Version Online gestellt... Lorem ipsum dolor Der Fehler wird in fast alle IE Versionen angezeigt. Firefox hat gar keine Probleme. Bei Opera sind es nur Kleinigkeiten. (Jeweils die aktuellen Versionen) Das Validieren führt zu keinen Fehlern... Danke für weitere Informationen! greets |
Sponsored Links |
|
||||
Als erstes: IE Doubled Float-Margin Bug - CSS fixes and workarounds
Und bitte validieren! Weiterhin: Das Menü gehört in eine Liste (siehe mein FAQ-Beitrag), und das Logo braucht kein umgebendes div - allenfalls eine h1 (die würde ich persönlich hier einsetzen). Geändert von heiko_rs (23.09.2007 um 18:01 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
<div>-Bereich mit Höhe des gesamten BrowserFensters | BullPit | CSS | 3 | 13.02.2005 11:49 |
Höhe des DIVs automatisch auf volle Höhe | scheichxodox | Knowledge Base | 5 | 21.12.2004 11:31 |
100% Höhe des Bodys | do | CSS | 7 | 25.11.2004 22:53 |
3 spalten layout - immer auf gleiche höhe "auffüllen&qu | dimension | CSS | 2 | 22.09.2004 13:02 |
3 div-Container sollen autom. die Höhe des längsten haben | DanEl | CSS | 4 | 13.06.2004 22:39 |