nicht angemeldet
Verschiebung beim Positionieren im Firefox
Hallo Forum,
habe eine kleine Frage.
Unsere Community war bisher mit Tabellen gestaltet. Zurzeit stelle ich das Layout auf DIV um. Hab gerade nur noch ein kleines Problem in Firefox.
Mit drei DIV’s haben wir die Seite in drei Bereiche aufgeteilt.
#ttop //Header
#main //Inhalt
#footer //Fusszeile
In Main wurde die der Inhalt und die Navigationsboxen (Rechts und Links) damals mit einer Tabelle unterteilt.
Nun habe ich es mit zwei DIV’s unterteilt. Leider schiebt er die Unterteilung (Rechts und Links) in Firefox leider unter #footer, obwohl die Unterteilung zwischen <div id=“main“> </div> angelegt wurde. Id=content ist dafür da, um die Unterteilung zu zentrieren.
<div id="top">
</div>
<div id="main">
<div id="content">
<div id="main_big_left">
Inhalt Bla Bla Links
</div>
<div id="main_big_right">
Navigation Rechts
</div>
</div>
</div>
<div id="footer">
</div>
###############################################
Die CSS:
###############################################
#main {
width:900px;
background-color:#FFFDFB;
padding:0;
margin:0 auto 0 auto;
border-left: 1px solid #F1E7C7;
border-right: 1px solid #F1E7C7;}
#content {
margin:0 auto 0 auto;
width:880px;}
#main_big_left {
float:left;
width:665px;
border:0px;
padding:0px;
vertical-align:top;
padding-top:15px;}
#main_big_right {
float:right;
width:215px;
border:0px;
padding:0px;
vertical-align:top;}
#############################################
Unter IE 6.0 sieht die Seite korrekt aus. Firefox 2.0 bringt es durcheinander.
Hier eine Beispielseite:
http://www.yamuk.com/servlet/start.jsp?cms=hilfe
Noch eine Kleinigkeit nebenbei.
Die Navigationsbuttons habe ich auch positioniert.
#navioben {
width:700px;
padding:0px;
border:0px;
padding-top:48px;
margin-left:190px;
text-align:right;
position:absolute;}
Im Firefox ist #navioben einwenig mehr nach unten verschoben.
Das müsste ein paar Pixel nach oben. padding-top:45px;
Oder anstelle padding-top -> margin-top;
Sollte ich nun solche Weichen reinmachen:
<!--[if lt IE 6]>
<style type="text/css">
#navioben {
padding-top:48px;
}
</style>
<![endif]-->
Else padding-top:45px;
Bzw. zwei verschiedene CSS-Dateien dementsprechend einbinden.
Oder könnte man dies besser lösen?
-
Yerf!
Unsere Community war bisher mit Tabellen gestaltet. Zurzeit stelle ich das Layout auf DIV um. Hab gerade nur noch ein kleines Problem in Firefox.
Hm, hoffentlich ists nicht so geworden, wie es sich anhört: eine DIV-Wüste... HTML besteht aus mehr als DIV und CSS lässt sich auf jedes Element anwenden.
Nun habe ich es mit zwei DIV’s unterteilt. Leider schiebt er die Unterteilung (Rechts und Links) in Firefox leider unter #footer, obwohl die Unterteilung zwischen <div id=“main“> </div> angelegt wurde. Id=content ist dafür da, um die Unterteilung zu zentrieren.
Das liegt vermutlich daran, weil weder main noch content derzeit etwas enthalten. Gefloatete Objekte gehören nicht zum Inhalt und ragen nach unten heraus. Gib am besten den Footer ein clear:both um hier Probleme zu vermeiden.
Gruß,
Harlequin
-
Hi, danke.
Nee, eine Wüste sollte es nicht werden.
Die Navigationsboxen bestehen gerade zwar aus vielen DIV's, das stelle ich aber auch um in <ul> und <li>.Natürlich setze ich auch andere Elemente ein.
Mit "clear:both" verschiebt er nun den Footer korrekterweise nach unten, sprich nach #main und der Unterteilung.
Er übernimmt gerade nur nicht die Hintergrundfarbe und den border von main. Da schaue ich gleich noch danach.-
Yerf!
Mit "clear:both" verschiebt er nun den Footer korrekterweise nach unten, sprich nach #main und der Unterteilung.
Er übernimmt gerade nur nicht die Hintergrundfarbe und den border von main. Da schaue ich gleich noch danach.Da sollte es helfen, den Footer innerhalb von Main zu setzen, denn dadurch wird Main dann auf die entsprechende Höhe gestreckt.
Gruß,
Harlequin
-
Hi,
Da sollte es helfen, den Footer innerhalb von Main zu setzen, denn dadurch wird Main dann auf die entsprechende Höhe gestreckt.
In Main sind ja die beiden DIV's, die den Inhalt auf Rechts und Links teilen. Diese wiederum haben ja einen Inhalt. Das müsste ja für die Streckung reichen?
Komisch, dass es gerade nicht geht.
Grüße
-
Yerf!
In Main sind ja die beiden DIV's, die den Inhalt auf Rechts und Links teilen. Diese wiederum haben ja einen Inhalt. Das müsste ja für die Streckung reichen?
Komisch, dass es gerade nicht geht.
Die Elemente links und rechts sind per float aus dem Dokumentfluss genommen. Sie bestimmen deshalb nicht die Höhe des umgebenden Containers (ist halt so definiert). Wird aber danach noch ein Element mit clear:both notiert so wird der Fluss wiederhergestellt und die Höhe entsprechend gestreckt.
Gruß,
Harlequin
-
Hi,
Die Elemente links und rechts sind per float aus dem Dokumentfluss genommen.
Das wusste ich nicht. Oki, jetzt sieht alles so aus, wie ich es mir vorgestellt habe.
Danke nochmals.
Grüße aus Stuttgart
-
Hi, jetzt muss ich leider noch einmal kurz stören. Hab die Navigationsboxen, die aus DIV’s bestanden nun mit <li> realisiert. Die Box an sich sieht nun auch gleich aus, nur dass die gesamte Box total komisch platziert ist auf der Seite, wie hier zu sehen:
http://www.yamuk.com/servlet/start.jsp?cms=hilfe
Die zweite Box von oben ist mit <li> erstellt.
Die erste mit <div>
Die anderen noch mit Tabellen<!-- Navibox Start -->
<div id="navibox_big">
<div id="navibox_big_head">
<p class="navibox_text">Verwandte Themen</p>
</div>
<div id="navibox_big_list">
Link 1
</div>
<div id="navibox_big_list">
Link 2
</div><div id="navibox_big_foot">
</div>
</div>
<!-- Navibox End -->Im Gegensatz dazu mit <li>
<!-- Navibox Start -->
<div id="naviboxneu">
<ul class="navibox">
<li class="navilisthead"><p class="navibox_text">Vorsicht!</p></li>
<li class="navilist> Link 1</li>
<li class="navilist> Link 2</li>
<li class="navilistbottom"></li>
</ul>
</div>
<!-- Navibox End -->############################################
CSSul.navibox {width:200px;}
li.navilisthead {padding:0px; margin:0px; background-image:url(../layout_0/navibox_big_head.gif); background-repeat:no-repeat; height:18px; list-style-type:none;}
li.navilist { padding:0px; list-style-type:none; background-image:url(../layout_0/navibox_big_list.gif); background-repeat:no-repeat; height:20px;}
li.navilistbottom { margin:0px; padding:0px; background-image:url(../layout_0/navibox_big_foot.gif); background-repeat:no-repeat; height:15px; list-style-type:none;}
#navibox_big {width:200px;}
#navibox_big_head {width:200px; background-image:url(../layout_0/navibox_big_head.gif); background-repeat:no-repeat; height:15px; margin-bottom:1px;}
#navibox_big_main {width:200px; padding:6px; background-image:url(../layout_0/navibox_big_main.gif); text-align:left; background-repeat:no-repeat;}
#navibox_big_list {width:200px; background-image:url(../layout_0/navibox_big_list.gif); text-align:left; background-repeat:no-repeat; height:20px;}
#navibox_big_foot {width:200px; background-image:url(../layout_0/navibox_big_foot.gif); height:16px; background-repeat:no-repeat; margin-bottom:10px;}Grüße
-
Yerf!
Hi, jetzt muss ich leider noch einmal kurz stören. Hab die Navigationsboxen, die aus DIV’s bestanden nun mit <li> realisiert. Die Box an sich sieht nun auch gleich aus, nur dass die gesamte Box total komisch platziert ist auf der Seite, wie hier zu sehen:
http://www.yamuk.com/servlet/start.jsp?cms=hilfe
Die zweite Box von oben ist mit <li> erstellt.
Die erste mit <div>
Die anderen noch mit TabellenDas Problem ist hier die Default-Einstellung des Browsers, die dem <ul> ein Padding-Left mitgibt (zumindest im FF, andere Browser benutzen hier evtl. Margin). Mit margin:0 und padding:0 für <ul> sollte das auch weg sein.
Als Hilfsmittel um soetwas zu finden kann ich das AddOn Firebug für den FF nur empfehlen. Da kann man über die Funktion Inspect ein Element anklicken und bekommt dann alle Informationen angezeigt.
Gruß,
Harlequin
-
Hi,
tatsächlich. Im FF wird es nun nach links geschoben.
Im IE 6.0 ist es noch nach rechts verschoben. Zugleich fangen die Navigationsboxen viel weiter unten an.
Ich experimentiere mal einwenig weiter.Danke für die Empfehlung des Addons. Ich versuche das naher mal gleich zu installieren.
Grüße
-
Ach,
es hat sich erledigt.
Der FF reagiert hier auf Padding und IE auf margin, wie du schon sagtest. Hab ausversehen nur padding eingefügt.Grüße
-
-
-
-
-
-
-
-