|
|||
Listen-Punkte liegen außerhalb des DIV Containers ?
Hi,
ich hoffe mal es kann mir jemand helfen. Ich bastle gerade an einer Seite und möchte eine Navigation als Liste in eine Div-Container "left_navi" anzeigen. Dummerweise liegen beim Firefox und beim Opera die Listenpunkte außerhalb des Containers. Beim IE 5.5, 6 und 7 hingegen liegen die Listenpunkte wie gewünscht im Container. Um das besser zu sehen hab ich dem Container mal einen Border mit 1px gegeben!! Beispiel ist hier:ZUMKELLERS CHÄMI 79837 HÄUSERN Hier mal mein Code: PHP-Code:
Code:
body, html { border: 0; margin: 0; position: relative; width: 100%; height: 100%; background: #ffffff; color:#4C4C4C; } #inhaltsbox { position: relative; padding: 0; width: 900px; height:600px; border: 1px solid #998451; top:50%; left:50%; margin: -300px 0 0 -450px; } #logo_zumkellers { position:absolute; top:0px; left:0px; height:162px; width:162px; } #logo_adler { position:absolute; top:376px; left:703px; height:166px; width:153px; z-index: 2; } #top_navi_bg { position:absolute; top:0px; left:164px; height:62px; width:736px; background-image: url(pics/top_navi_bg.gif); margin:0; } #top_navi { margin:0; padding:0; position:absolute; top:0px; left:136px; height:62px; width:596px; } #left_navi { margin:0; padding-left: 0px; position:absolute; top:250px; left:10px; width:162px; border: 1px solid; } #flash { position: absolute; top:62px; left:164px; } #flash_2 { position: absolute; top:354px; left:0; } #content { position: absolute; top:355px; left:263px; width:636px; height:179px; background-color: #ebe6dc; } #footer { position:absolute; top:533px; left:0; font-size: 11px; color: #EBE6DC; text-align: right; width: 880px; height:16px; border-top: 1px solid #998451; background-color: #39050c; padding:40px 20px 10px 0; } /* Styles fuer Top-Navigation */ #top_navi ul{ padding:0px; margin:0; list-style: none; width: 596px; } #top_navi ul li{ float: left; margin:23px 30px 0 0; padding:0; } #top_navi a { font: bold 10px Verdana, Arial, Helvetica, Verdana, sans-serif; text-decoration: none; color: #4c4c4c; } #top_navi a:hover { color: #39050c; } /* Styles fuer Top-Navigation */ /* Styles fuer Left-Navigation */ #left_navi ul{ display: inline; padding:0; margin:0; width: 152px; } #left_navi ul li{ line-height: 1.2em; list-style: circle; } #left_navi a { font: normal 9px Verdana, Arial, Helvetica, Verdana, sans-serif; text-decoration: none; color: #4c4c4c; } /* Styles fuer Left-Navigation */ |
Sponsored Links |
|
|||
Mit list-style als einer Kurzform setzt du auch list-style-position auf den Initialwert 'outside'. Firefox, Opera, Safari sind sich einig, dass du genau das willst.
Zitat:
Dazu kommt auch noch, dass die halbe Seite im Nichts oberhalb des Fensters im Safari und Webkit landet, und auch kein Scrollbar zur Hilfe eilt. Du gestaltest mit deinen ganzen Positionierungen für einen Flyer. Position:absolute ist für ganze Abschnitte der Seite wenig geeignet, weil man damit die Elemente aus dem Seitenfluss nimmt. Stell dir vor, du hättest kein position:absolute zur Verfügung. Wie würdest du dann gestalten? |
Sponsored Links |
|
|||
Hallo Ingo
zuerst mal danke für deine konstruktive Kritik!
Das mit der list-style-position: inside hab ich jetzt gemacht und es passt soweit auch. Das mit der Schriftgröße +1 hatte ich bisher gar nicht bedacht. Leider hab ich das Problem, daß ich bis morgen eine Seite zur Abnahme vom Kunden vorlegen muss und deshalb ist auch noch nicht alles so wie es endgültig werden soll. Das Problem mit der nach oben verschobenen Seite im Safari hab ich auch schon bemerkt, aber wie kriege ich es hin, daß die Seite in jedem Browser vertikal zentriert wird?Das war die einzige Lösung was mir bisher dazu einfiel. Aber was spricht gegen die absolute Positionierung in diesem Fall? Die Seite soll immer nur 900x600 Pixel groß sein und auch nicht scrollen! cu Holger |
|
|||
Ich reite deswegen auf die Textvergrößerung so rum, weil ich selbst für deine linke Navigation schon +1 benötige, damit ich sie lesen kann.
Und ich kann gelassen annehmen, dass die Kunden deines Klienten, die sich dort ein Essen leisten können, eher dem Designerlesebrillenalter zugehören als die meisten Webdesigner. Zur absoluten Positionierung: Ich verwende sie eher spärlich, wenn ein Element entgegen dem Seitenfluss irgendwohin platziert werden soll, wie zum Beispiel meine Navigation, die im HTML ganz unten kommt, weil sie nicht so wichtig ist, aber auf der Seite links oben landen soll, weil ich das so will. Also position:fixed/absolute. Der Hauptnachteil bei position:absolute ist doch, dass andere Boxen sich nicht auf die positionierten einstellen können. Wenn du auf deiner Seite nun nur noch zwei, drei Zeilen Platz hast für Text, wird es doch recht eng. Aber was, wenn später mehr rein soll? Die Schrift kannst du nicht beliebig verkleinern, ist ja kein CD-Booklet für Partymucke, wo der Text, äh, vorhersehbar ist. Aus dem Dilemma sehen einige dann den Ausweg darin, overflow:auto-Bereiche einzufügen, scrollbaren Inhalt innerhalb des scrollbaren Browsers -- nur das ist der Moment, wo ich eine Seite spätestens verlasse, weil ich mit den ganzen Balken mich nicht anfreunden kann. Das Ganze mag bis morgen nicht mehr sinnvoll umzusetzen sein, aber vielleicht beim nächsten Projekt ... |
|
|||
Ich weiß auch nicht, was der Safari hier für ein Problem hat mit der relativen positionierung top:50%, aber er ignoriert diesen Offset.
Mit #inhaltsbox {position: absolute; ...} geht es. Also doch, siehste, hab ich ja gleich gesagt, position:absolute ist die Lösung |
|
|||
:o)
Hallo Ingo,
sorry, war grad Abendessen und deshalb Funkstille Ja, super, also wäre das Safari Problem auch gelöst!! Das mit der viel zu kleinen Schrift bei der linken Navi sehe ich auch so, leider ist das Design nicht von mir und ich muss umsetzten was ich von dem Designer bekomme. Ich werde das aber morgen auch mal ansprechen. Ich habe den DIV jetzt aber in der Höhe auf auto gesetzt und das vertical-align auf bottom, jetzt müsste es von der Höhe her jedenfalls immer passen, nur mit der Breite ist halt nicht mehr drin!!! Jetzt sollte ich nur noch bis morgen früh das große Bild als Flash machen, da sich hier drei verschiedene Bilder austauschen sollen und das dann zu jeder Rubrik (..un dich hasse Flash) Also jetzt schon mal vielen vielen Dank für dein Hilfe, wünsch Dir noch einen erholsamen Sonntagabend Cu Holger |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |
Grafikposition mit scrollbarem DIV koppeln -- aber außerhalb des DIV? | Eberh@rd | CSS | 15 | 03.11.2009 23:05 |
Weite bzw. Höhe eines Div Containers ohne px Angabe | klecksfuss | Javascript & Ajax | 3 | 29.07.2007 13:11 |
div Container nimmt automatisch die Höhe des Eltern-div an | fidelio | CSS | 3 | 12.04.2006 16:34 |