|
|||
Browser Problem mit Div Anordnung?
Bräuchte bitte Eure Hilfe...komme nicht weiter. Ich bin Anfängerin und schreibe mit Notpad.
Für eine Website habe ich ein umfassendes Div angelegt und in diesem sind mehrere Divs, die gefloatet werden sollen. Zur Vorstellung sende ich anbei ein Übersichtsbild. Die obere Ansicht zeigt, wie es sein soll und bei Google Chrome und Internet-Explorer auch funktioniert. Nur bei den anderen Browsern rutscht das Div 2 links auf das Div 1. Was läuft da falsch? Vielleicht hat jemand da ein Tip. Wenn ihr noch was an Information braucht, fragt bitte danach, da ich nicht weiß was benötigt wird. Danke sehr! Geändert von choumana (05.02.2014 um 12:00 Uhr) |
Sponsored Links |
|
|||
Hallo,
du verwendest unnötigerweise position:absolute für die Positionierung des orangenen divs. Auch div5 musst du nicht mit ~800px linkem Abstand positionieren, das kann rechts gefloatet werden. Dein div-Aufbau ist auch sehr komisch, wieso nimmst du nicht folgende Reihenfolge: div1 = orange, div2 = grün, div3 = blau, div4 = rot, div5 = braun. Dann brauchst du auch nicht die negativen margins für die divs 3-5 nicht. Meine Empfehlung an dich: Verwende statt notepad lieber notepad++, da hast du auch syntax highlighting und es ist bequemer, damit zu arbeiten. Dann baue deinen HTML-Aufbau um, um eine logische Abfolge der divs zu haben. Verwende auch Firebug (Firefox addon), um deinen HTML/CSS Code zu analysieren. Und noch ein Hinweis für das Forum: Poste lieber den Code gleich ins Forum, mithilfe der [ CODE ] -Tags [ /CODE ] (ohne Leerzeichen) |
Sponsored Links |
|
|||
Danke für die schnelle Antwort.
Div4 (orange) ist ein Logo, das über allen in der höchsten Ebene stehen soll. Deshalb auch der z-index. Nehme ich die position:absolut raus. rutscht es nach hinten in der Ebenenanordnung. Derb Header ist ganz unten in der Ebene. Orange und grün sind nur Logobilder. Die anderen sind Haupt-divs. Div1=Navi, Div2=Inhalt, Div3=Bilderleiste. HTML-Code:
<div id="header"></div> <div id="all"> <div id="Logo1"></div> <div id="Logo2"></div> <div id="sidebar"> <div id="navigation"></div> </div> <div id="Bilderleiste"></div> <div id="Inhalt"></div> </div> PHP-Code:
|
|
|||
Erst einmal kann die Reihenfolge der Elemente in die logische Reihenfolge gebracht werden:
Code:
<div id="all"> <div id="Logo1"></div> <div id="Logo2"></div> <div id="sidebar"> <div id="navigation"></div> </div> <div id="inhalt"></div> <div id="Bilderleiste"></div> </div> Code:
#Logo1{float:left;} #Logo2{float:right} /*sidebar fängt eine neue Zeile an, deshalb floats clearen*/ #sidebar{clear:both;float:left;width:20%} #inhalt{float:left;width:60%} #Bilderleiste{float:left;width:25%} /*Die 3 Elemente haben jetzt keine 100% in der Summe, das soll nur zeigen, wie es prinzipiell funktioniert. Die Zahlen müssen natürlich angepasst werden.*/ |
|
|||
Jaaaaaaaaa, danke es funktioniert!!! Lag also an meinem Chaos
Bleibt aber noch das Problem mit dem Logo (orange), das über alles drüber stehen soll. Es soll sozusagen das blaue Div zum Teil überdecken. position: absolute hatte ich rausgenommen. Gibt es noch eine Lösung dazu? z-index nimmts irgendwie nicht an |
|
|||
Z-index lässt sich nur auf positionierte Elemente anwenden, also alles was absolute, relative oder fixed als Positionswert hat.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Was heißt, es soll über allem drüber stehen? Soll es fixiert positioniert sein? Wenn ja, dann ist position:fixed dein Freund.
|
|
|||
Ich hab jetzt die position: absolute wieder reingenommen und wie
explanator schon schreibt, funktioniert auch der z-index wieder und mein Logo ist über den Navi-Div. Vielen Dank an cloned für die Mühe, es funktioniert so wie ich will!! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Div 100%-X Höhe Problem, ohne absolute Positionierung | xblax | CSS | 8 | 28.10.2010 02:02 |
Problem mit 3 Spalten Div | stipo | (X)HTML | 5 | 04.10.2010 10:27 |
Design Float IE6 Problem | koknarr | CSS | 10 | 05.09.2008 19:05 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |