CSS: Div verschiebt sich ungewollt beim Fenster skalieren

killa343 · 10.02.2013

Hallo zusammen,

folgendes Problem habe ich:

Der Code ist mit 100 prozentiger Sicherheit nicht optimal, auf Grund meiner Codierungskenntnisse, aber das ist alles halb so wild.
Die Seite soll sich nicht immer ändern.

Der Div-Container unten verschiebt sich immer, ab einem bestimmten Punkt, bei der Fenster-skalierung. Dies soll er aber nicht machen.

Vor Fenster-Skalierung:

Nach Fenster-Skalierung:

Hier mal der Code-Schnibsel:

Code:

<...>
	 #Logofenster {
			width:329px;
			height:539px;
			background-image:url(../Bilder/slider.png);
			background-repeat:no-repeat;
			float:left;
			color:#FFF;
			margin-top:130px;
			padding:15px 20px 15px 20px;
			
			} 

	#content {
			width:600px;
			height:333px;
			background-image:url(../Bilder/content.png);
			background-repeat:no-repeat;
			float:left;
			margin-left:10px;
			
			margin-bottom:12px;
			color:#FFF;
			margin-top:130px;
			z-index:10;
			padding: 10px;
			}


	 #content_btm {
			width:700px;
			height:197px;
			background-image:url(../Bilder/content_btn.png);
			background-repeat:no-repeat;
			float:left;
			margin-left:10px;
	
			color:#FFF;
			z-index:10;
			margin-top:-200px;
			}
<...>

#Logofenster = links der Div

#Content = rechts wo die blume zu sehen ist

#Content_btm = Der betroffene Div-Container

Woran kann das liegen das er immer "rüber flutscht"?

Mit freundlichen Grüßen
Killa343

vincitore · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Wie ist denn deine HTML Struktur?

HTML:

<div id="wrapper">
  <div id="Logofenster">links</div>
  <div id="Content">rechts oben</div>
  <div id="Content_btm">rechts unten</div>
</div>

?
Ich nehme mal stark an es liegt an dem float. Sobald der (bei meiner Beispielstruktur oben so genanntem) wrapper ne bestimmte Breite unterschreitet fliegt das andere element halt eine Zeile weiter runter. Und durch das z-index zusammen mit dem margin-top, dann auch nicht komplett unter das Logofenster sondern halt darüber.

an deiner Stelle würde ich es so aufbauen:

HTML:

<div id="wrapper">
  <div id="Logofenster">links</div>
  <div id="rechts">
    <div id="Content">rechts oben</div>
    <div id="Content_btm">rechts unten</div>
  </div>
</div>

#logofenster mit float: left;
#rechts mit float: right;
und dann die Breiten usw festlegen und halt darauf achten, dass dein Wrapper nie kleiner wird als die Summe der beiden Breiten+Paddings+Margins (z.B. #wrapper mit min-width).

So viel komischer Text, hoffentlich kann man ihn lesen. ich leg mich wieder ins Bett

KroatienMonja · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

hmmm - irgendwie fehlt hier die zweite Vorschau - außerdem wäre ein Link zu der Seite praktisch.

Hier im "Codeschnipsel" ist ja überhaupt kein div angelegt ??

Du hast hier vermutlich eh nur einen Teil der css-Datei angezeigt - der Fehler könnte aber auch direkt in der HTML-Datei liegen - wie soll die jemand mit diesen unvollständigen Infos helfen können?

mwxx · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Nur auf die Schnelle - muss gleich weg - fällt mir auf:

Ich meine, der Aussencontainer, der alles enthält muss auch gefloated werden

Übrigens: z-index wirkt meines Erachtens nur bei Absolutpositionierung.

patrick_l · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

vincitore schrieb:
Ich nehme mal stark an es liegt an dem float. Sobald der (bei meiner Beispielstruktur oben so genanntem) wrapper ne [...]

Ich die genaue HTML-Struktur nicht, denke aber auch das es an dem Float liegt. Auch benutzt du zweimal den selben z-Index und ohne Position.

Poste doch mal deine HTML Grundgerüst.

Nur so nebenbei, dein CSS kann auch aufgeräumter und kürzer sein. Unter anderem bei backgrounds und margins. »

Code:

#Logofenster {
            width: 329px;
            height: 539px;
            color: #FFF;
            background: url(../Bilder/slider.png) no-repeat;
            padding: 15px 20px 15px 20px;
            margin-top: 130px;
            float: left;
            } 

    #content {
            width: 600px;
            height: 333px;
            color: #FFF;
            background: url(../Bilder/content.png) no-repeat;
            padding: 10px;
            margin: 130px 0 12px 10px;
            float: left;
            }


     #content_btm {
            width: 700px;
            height: 197px;
            color: #FFF;
            background: url(../Bilder/content_btn.png) no-repeat;
            margin: -200px 0 0 10px;
            float: left;
            }

Liebe Grüße, Patrick

Wellenbrecher1963 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Also, ich muss vincintore recht geben. Es liegt 100% am DIV Gerüst. Stell Dir Dein DIV Gerüst als Tabelle vor und stelle jede Zelle nach, wobei Du Spalten oder Zeilen zusammenfasst und schachtelst.

Die linke Zelle geht über 2 Zeilen. Das ist ein Div.

Die rechten Zellen gehen über 2 Zeilen. Also musst Du schon alleine um diese beiden Divs ein umschließendes Div schreiben. Die darin befindlichen 2 Divs haben sinnvoller weise float:left und beide eine feste Breite, die der Breite des rechten Teils entsprechen.

Denn ist die Breite z.B. nur 50% dieser Breite, hängen die beiden Divs wieder nebeneinander.

Die Breiten müssen eben einfach überall zu einander passen, dass nichts umgebrochen und verschoben wird.

Wellenbrecher1963 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Patrik, man merkt es Dir an, dass Du Programmiermuffel bist.....

;-))

Ich musste mir diesen Stiel schnell durch die Zusammenarbeit mit mehreren Programmierern im Team abgewöhnen. Da herrschen strikte und strenge Richtlinien. Es hat lange gedauert, bis ich die Lotterei los hatte....

Bin eigentlich auch ein .... Muffel

lool

l.G. Sylvio

killa343 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

vincitore schrieb:
an deiner Stelle würde ich es so aufbauen:

HTML:

<div id="wrapper"> <div id="Logofenster">links</div> <div id="rechts"> <div id="Content">rechts oben</div> <div id="Content_btm">rechts unten</div> </div> </div>

#logofenster mit float: left;
#rechts mit float: right;
und dann die Breiten usw festlegen und halt darauf achten, dass dein Wrapper nie kleiner wird als die Summe der beiden Breiten+Paddings+Margins (z.B. #wrapper mit min-width).

So viel komischer Text, hoffentlich kann man ihn lesen. ich leg mich wieder ins Bett

War genau richtig - hat super funktioniert

denn ist er zwar komischerweise auf die "nach"-position gespungen bewegte sich aber nicht mehr. Noch nen margin-left und nun ist alles palletti.

Vielen Dank für eure Hilfe.

Mit freundlichen Grüßen
Killa343

@patrick. Ich weiss hätte bisschen aufgeräumter sein können

habe auch am Anfang bisschen drauf geachtet, aber inzwischen ist die Ordnung hingeworfen vielleicht mache ich es am Ende nochmal ordentlich.

Kompletter HTML-Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KH Kurierdienst</title>
</head>

<body>



<div id="wrapper">
	<div id="nav">
    	<div id="menu">
        	<ul><b>
            	<li><a href="index.html">Home</a></li>
                <li><a href="ueber_uns.html">Über uns</a></li>
                <li><a href="preise.html">Preise</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul></b>
        </div>
    </div>
    
    <div id="Logofenster">
    	<div id="logo"></div>
    </div>
<div id="rechts">
    <div id="content">
    	<center>
	     <div id="sliderFrame" style="position:absolute">
             <div id="slider">
            
            <img src="images/image-slider-1.jpg" alt="" />
            <img src="images/image-slider-2.jpg" alt="" />
            <img src="images/image-slider-3.jpg" alt="" />
            <img src="images/image-slider-4.jpg" alt="" />
            <img src="images/image-slider-5.jpg" alt="" />
	    <img src="images/image-slider-6.jpg" alt="" />
            
        			</div>
             <div id="htmlcaption" style="display: none;">
             <em>HTML</em> caption. Link to <a     href="http://www.google.com/">Google</a>.
        		</div>
		</center>
    </div>
    </div>
    
    <div id="content_btn">
    	<div id="col_1">
        <h1>Test</h1>
        <div id="trennlinie"></div>
        Dies ist das linke Fenster.
        </div>
        
        <div id="col_2">
        <h1>Test Nr. 2</h1>
        <div id="trennlinie"></div>
        Dies ist das mittlere Fenster.
        </div>
        
        <div id="col_3">
        <h1>Test Nr. 3</h1>
        <div id="trennlinie"></div>
        Dies ist das rechte Fenster.
        </div>
    </div>
    
    <div id="footer">
    
    </div>
    </div>
</div>







</body>
</html>

Kompletter CSS-Code:

Code:

body {
	background-image:url(../Bilder/background.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-color:#000;
	}

#wrapper {
		width:1000px;
		height:674px;
		margin:auto;
		}

	#nav {
			width:600px;
			height:135px;
			position:absolute;
			margin-left:339px;
			}

		#menu {
			position:relative;
				}
		
		#menu ul li:hover   { 
						background-image:url(../Bilder/mouse_over.png);
						background-repeat:no-repeat;
						position:;
						z-index:-8;
						}
		
		#menu ul li:active   { 
						background-image:url(../Bilder/mouse_over.png);
						background-repeat:no-repeat;
						
						}

		
		#menu ul li {
			padding-top:80px;
			width: 135px;
			height: 140px;
			float: left;
			list-style-type: none;
			text-align: center;
			color:white;
			font-size:18px;
				
			}
			
		a:link { text-decoration:none; color:#FFF;}
		a:visited { text-decoration:none; color:#FFF;}
		
		

	
	 #Logofenster {
			width:329px;
			height:539px;
			background-image:url(../Bilder/slider.png);
			background-repeat:no-repeat;
			float:left;
			color:#FFF;
			margin-top:130px;
			padding:15px 20px 15px 20px;
			
			} 

	#content {
			width:600px;
			height:333px;
			background-image:url(../Bilder/content.png);
			background-repeat:no-repeat;
			float:left;
			margin-left:10px;
			
			margin-bottom:12px;
			color:#FFF;
			margin-top:130px;
			z-index:10;
			padding: 10px;
			}

	 #content_btn {
			width:700px;
			height:197px;
			background-image:url(../Bilder/content_btn.png);
			background-repeat:no-repeat;
			float:left;
			margin-left:380px;
	
			color:#FFF;
			margin-top:-200px;
			}
			
			
	
			


		#col_1 {
				width:200px;
				height:197px;
				float:left;
				padding-left:10px;
				}
	
		#col_2 {
				width:200px;
				height:197px;
				float:left;
				padding-left:10px;
				}
	
		#col_3 {
				width:200px;
				height:197px;
				float:left;
				padding-left:10px;
				}
				
h1 {
	font-size:20px;
	
}

#logo {
	margin-top:190px;
	margin-left:50px;
	background-image:url(../Bilder/logo.png);
	background-repeat:no-repeat;
	width :178px;
	height:118px;
	
}

#trennlinie {
	width:100px;
	height:20px;
	background-image:url(../Bilder/trennlinie.png);
	background-repeat:no-repeat;
}
	#footer {
	
			}
			
			#rechts {
				float:right;
			}

@Wellenbrecher. Jup, bin nicht so programmier faul und meinem Vater kann ich sagen das muss so sein

die Seite mache ich für ihn.
Deswegen muss auch niemand anderer daran arbeiten. Hatte ja im ersten Post geschrieben das die codierung mehr schlecht als recht und sehr suboptimal gemacht ist

patrick_l · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Wellenbrecher1963 schrieb:
Patrik, man merkt es Dir an, dass Du Programmiermuffel bist.....

Ich bin kein Programmiermuffel, überhaupt nicht. Nur spart man durch die kurze Schreibweise Zeit, und alles bleibt übersichtlicher. Gerade bei großen Projekten und komplexen Stylesheets hilfreich. Bei der Vergabe von Klassen und IDs benutze ich auch möglichst logische und kurze Begriffe.

Ich habe ganz am Anfang auch alles ausgeschrieben. Wenn man sich aber länger damit auseinandersetzt, versucht man natürlich unnötiges zu streichen. Daher weise ich auch hier öfters mal auf die Kurzschreibweise hin.

Liebe Grüße, Patrick

killa343 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Wenn ich hier schon mal ne Frage gestellt habe denn gleich eine hinterher:

Ich habe in der Navigationsleiste ja einen mouse-over drin, da entsteht folgendes Problem:

Der Mouse-Over braucht einen z-index, da dieser hinter den Content-Div soll, blos funktioniert dieser nur in Kombination mit einer Positionsangabe. Doch wenn ich die Positionsangabe darauf anwende, flackert die Mouse-Over-Grafik, kann man das irgendwie anders bewerkstelligen?

patrick_l · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

killa343 schrieb:
Der Mouse-Over braucht einen z-index, da dieser hinter den Content-Div soll,

Kann es nicht so recht nachvollziehen. Mir erschließt sich auch der Sinn hinter der Navigation nicht ganz. Stehe gerade etwas auf dem Schlauch. Was genau möchtest du machen?

Ich habe dein Grundgerüst mal überarbeitet bzw. einige Fehler korrigiert. Unter anderem der Bereich des Sliders. Habe das ganze fix hoch geladen.

-

Liebe Grüße, Patrick

killa343 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

patrick_l schrieb:
Kann es nicht so recht nachvollziehen. Mir erschließt sich auch der Sinn hinter der Navigation nicht ganz. Stehe gerade etwas auf dem Schlauch. Was genau möchtest du machen?

Ich habe dein Grundgerüst mal überarbeitet bzw. einige Fehler korrigiert. Unter anderem der Bereich des Sliders. Habe das ganze fix hoch geladen.

-

Liebe Grüße, Patrick

Vielen Dank, Patrick.

Habe dir hier mal meine Idee als Bild hochgeladen.

Der Slider wechselt automatisch die Bilder die in dem Quelltext sind. Diesen habe ich irgendwann mal im Internet gefunden.

Und meine Programmier-Kenntnisse lassen wirklich zu wünschen übrig

EDIT:
Der Slider ist/soll aber nur auf -Page 1- sein... auf den anderen Seiten kommt dort Text rein.

patrick_l · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Vorweg, ich weiß was ein Slider ist

Du setzt erst einmal das Grundgerüst deines Layouts um und benennst diese index.html. Anschließend erstellst du die Inhalte der Unterseiten und speicherst diese als eigene Seiten ab. Als Basis dient immer die index.html Dein Layout ist eigentlich auch flott umgesetzt.

Liebe Grüße, Patrick

killa343 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

patrick_l schrieb:
Vorweg, ich weiß was ein Slider ist

Du setzt erst einmal das Grundgerüst deines Layouts um und benennst diese index.html. Anschließend erstellst du die Inhalte der Unterseiten und speicherst diese als eigene Seiten ab. Als Basis dient immer die index.html Dein Layout ist eigentlich auch flott umgesetzt.

Liebe Grüße, Patrick

Naja, ich mein nur weil wenn ich "slider" in die Suchmaschine eingebe bekomme ich auch irgendwelche Gallerien.

Ja, das war vielleicht nicht richtig überlegt. Habe einfach drauf los gearbeitet

Inzwischen macht die Seite mich nur noch fertig.

Das hab ich so blöd gemacht, dass wenn ich einen Wert ändere die ganze Seite verrutscht ;D

patrick_l · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

killa343 schrieb:
Ja, das war vielleicht nicht richtig überlegt. Habe einfach drauf los gearbeitet

Ja, vor der eigentlich Umsetzung sollte man sich schon einige Gedanken machen. Sowohl über das Design als auch über die Inhalte. Fällt dann in den Bereich Konzeption.

killa343 schrieb:
Das hab ich so blöd gemacht, dass wenn ich einen Wert ändere die ganze Seite verrutscht ;D

Daher ist ein gutes Grundgerüst "wichtig". Wenn das erst einmal ordentlich auf die Beine gestellt ist, ist auch der Rest eigentlich kein Problem. Hier und da noch ein paar Anpassungen und gut ist

Aber du bekommst das schon hin. Einfach nach und nach abarbeiten. Bei Fragen und Problemen kannst du dich ja auch immer hier im Forum melden. Wenns also irgendwo hakt, helfen wir weiter

Liebe Grüße, Patrick

killa343 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

patrick_l schrieb:
Ja, vor der eigentlich Umsetzung sollte man sich schon einige Gedanken machen. Sowohl über das Design als auch über die Inhalte. Fällt dann in den Bereich Konzeption.

Daher ist ein gutes Grundgerüst "wichtig". Wenn das erst einmal ordentlich auf die Beine gestellt ist, ist auch der Rest eigentlich kein Problem. Hier und da noch ein paar Anpassungen und gut ist

Aber du bekommst das schon hin. Einfach nach und nach abarbeiten. Bei Fragen und Problemen kannst du dich ja auch immer hier im Forum melden. Wenns also irgendwo hakt, helfen wir weiter

Liebe Grüße, Patrick

Patrick, darf ich dein Grundgeruest für die Seite verwenden?

ich habe mal die Hintergründe integriert ~ da hat sich folgendes Bild ergeben:

Wie ist das mit dem Hintergrund vom Body passiert? bzw wie könnte es passiert sein?

Code:

html, body {
	min-height:100%; 
	min-width:100%;
	background-image:url(../Bilder/background.jpg);
	background-repeat:no-repeat;
	}

Edit: Gerade herausgefunden

wusste gar nicht das man bei css auf 2 Sachen mit den selben Attributen versehen kann. Habe jetzt beide getrennt und nur auf den Body den Background gemacht

So lernt man dazu

Mit freundlichem Gruß
Killa343

patrick_l · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

killa343 schrieb:
Patrick, darf ich dein Grundgeruest für die Seite verwenden?

Klar, habe es ja extra fix für dich gemacht.

killa343 schrieb:
wusste gar nicht das man bei css auf 2 Sachen mit den selben Attributen versehen kann. Habe jetzt beide getrennt und nur auf den Body den Background gemacht

Ja, kann man. Mit einem Kommata trennen und weitere Tags, ID und Klassen notieren. Für deine drei Spalten unten, kannst du dann alles folgendermaßen notieren.

Code:

.col-1, .col-2, .col-3 {width: 200px;} /* alle 3 Spalten mit gleicher Breite */
.col-1, .col-2 {float: left;}
.col-3 {float: right;}

Liebe Grüße, Patrick

killa343 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

patrick_l schrieb:
Klar, habe es ja extra fix für dich gemacht.

Dankeschön

patrick_l schrieb:
Ja, kann man. Mit einem Kommata trennen und weitere Tags, ID und Klassen notieren. Für deine drei Spalten unten, kannst du dann alles folgendermaßen notieren.

Code:

.col-1, .col-2, .col-3 {width: 200px;} /* alle 3 Spalten mit gleicher Breite */ .col-1, .col-2 {float: left;} .col-3 {float: right;}

Liebe Grüße, Patrick

Werde ich gleich mal ausprobieren.

Ich habe nochmal eine Frage zur Navi.
Ich habe jetzt das Mouse-Over-Bild ein bisschen optimiert so das der z-index nicht mehr von Nöten ist. Aber mache ich das in deine Navi rein in den :hover ~ wird keine Grafik angezeigt, auch wenn ich die BG-Color rausnehme.

patrick_l · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

killa343 schrieb:
Aber mache ich das in deine Navi rein in den :hover ~ wird keine Grafik angezeigt, auch wenn ich die BG-Color rausnehme.

Hat denn deine Hovergrafik auch genügend Platz?

killa343 · 10.02.2013

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

patrick_l schrieb:
Hat denn deine Hovergrafik auch genügend Platz?

Daran lag es - ich dachte, da der Effekt ja als Background-Image deklariert ist - dieser sich auch so verhält. Ein BG im Div ist ja auch da, auch wenn der Div nicht so groß ist wie der background.