zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Browser Problem mit Div Anordnung?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2014, 10:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.11.2012
Beiträge: 9
choumana befindet sich auf einem aufstrebenden Ast
Standard 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!
Angehängte Grafiken
Dateityp: jpg fehler.jpg (138,1 KB, 16x aufgerufen)

Geändert von choumana (05.02.2014 um 11:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2014, 10:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.005
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2014, 11:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.11.2012
Beiträge: 9
choumana befindet sich auf einem aufstrebenden Ast
Standard

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:
#header {
    
background-imageurl(xxx);
    
height150px;
}

#all{
    
overflowhidden;
    
width1100px;
    
margin: -150px auto;
}

#logo1 {

    
float:left;
    
height230px;
    
margin-left70px;
    
z-index9999;
}

#logo2 {
    
margin-left870px;
    
z-index3333;
}

#sidebar{
    
clearboth;
    
background-imageurl(xxx);
    
floatleft;
    
width230px;
    
height650px;
    
margin: -60px 0 0 0;
}

#content {
    
overflowhidden;
    
margin-top: -40px;
    
color#313131;
    
width590px;
    
padding10px 0 0 50px;
    
min-height600px;
}

#picture {
    
floatright;
    
width210px;
    
padding-top10px;
    
margin0 auto;
}

#navigation {
    
floatleft;
    
width200px;
    
height630px;
    
margin85px 0 0 -20px;

Tschuldigung für den ganzen Wirrwarr, aber ich bringe mir alles selbst bei und stehe noch am Anfang. Bin ja schon froh das die Website steht aber nur eben das Div 2 auf Div1 rutscht.
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2014, 11:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.005
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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>
CSS dafür:
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.*/
Mit Zitat antworten
  #5 (permalink)  
Alt 05.02.2014, 20:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.11.2012
Beiträge: 9
choumana befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2014, 20:33
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 06.02.2014, 08:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.005
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von choumana Beitrag anzeigen
Bleibt aber noch das Problem mit dem Logo (orange), das über alles drüber stehen soll.
Was heißt, es soll über allem drüber stehen? Soll es fixiert positioniert sein? Wenn ja, dann ist position:fixed dein Freund.
Mit Zitat antworten
  #8 (permalink)  
Alt 06.02.2014, 08:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.11.2012
Beiträge: 9
choumana befindet sich auf einem aufstrebenden Ast
Standard

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!!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Div 100%-X Höhe Problem, ohne absolute Positionierung xblax CSS 8 28.10.2010 01:02
Problem mit 3 Spalten Div stipo (X)HTML 5 04.10.2010 09:27
Design Float IE6 Problem koknarr CSS 10 05.09.2008 18:05
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:36 Uhr.