Problem mit unterschiedlichen Auflösungen

Status
Nicht offen für weitere Antworten.
Kannst du mal den vollständigen CSS-Code aus dem Stylesheet page.css zeigen, damit man sich die Seite auch so in vollem Umfang betrachten kann, wie sie formatiert ist?
 
Code: 
#root{min-width:1200px;}
.minwidth{ border-left:900px solid #fff; position:relative; float:left; z-index:1;}
.container{margin-left:-900px; position:relative; float:left; z-index:2;}

body {
	
	padding: 0;
	margin: 0;	
}

#banner {
    height: 60px;
	font-size: 1.5em;
    font-weight:bold;
	padding-left:10px;
	padding-top:10px;
}
#links {
    width: 30%;
    float: left;
	margin-left:10px;
	display:inline;	
	white-space: nowrap;

}
#mitte {
    width: 60%;
    float:left;
	padding-right:10px;



}
#balken{
	width:100%;
	float:left;
	background-color:#4F94CD;
	padding: 10px 30px 10px 0 !important;
	padding: 0px 0px 0px 0;
}

#unten{
	width:100%;
	float:left;
	padding: 10px 30px 10px 0 !important;
	padding: 0px 0px 0px 0;
	background-color:#4F94CD;
}

.buchstaben{
 height:25px;
 width:25px;
 }

#select{margin: 0 7px;}

.stadt{width:150px;}

.ausgabe{font-size: 1.2em;}

/*Version 3 suche 7.php*/
#bild2{
padding:4px 0 4px 4px!important;
padding: 1px 1px 0 1px;
text-decoration:none;
width:755px;
border-bottom:2px solid black;
color:black;
}
#bild1{
padding:4px 0 4px 4px !important;
padding: 1px 1px 0 1px;
text-decoration:none;
width:755px;
border-top:2px solid black;
color:black;
}
a#bild  {
font:bold 15px verdana, sans-serif;
font-style:center;
text-decoration: none;
color:black;
padding:0 20px 0 20px !important;
}

a:hover#bild  {
color:red;
}

/* css für Userereich ----------------------------------------------------------------*/

.user{
padding-left:45px;
/*background-color:#B5B5B5;
/*width:50%;
margin:0px auto;
margin-top:100px;
border: 3px solid;*/
}
.userbalkenoben{
width:100%;
float:left;
font: bold 15px verdana, sans-serif;
margin: 10px 0 0 0;
padding:5px 0 5px 50px;
background-color:#4F94CD;
}
.userbalkenoben a{
color:white;
text-decoration: none;
}
.userbalkenoben a:visited {color: white;}

.userbalkenoben a:hover {text-decoration: Underline;}

.userbalkenunten{
width:100%;
float:left;
margin: 15px 0 5px 0;
padding:15px 0 15px 50px !important;
padding:5px 0 5px 0;
background-color:#4F94CD;

}
/* Für das Formular*/
#user{
padding:30px 0 0 15px;
/*background-color:#B5B5B5;*/
}
#gaestebuch{
padding:30px 0 0 15px;
/*background-color:#B5B5B5;*/
}

.form{
/*background-color:red;*/
}

.feedb0{
width:50%;
padding-top:30px;
padding-left:50px;
}
/*
a.gaeste{
text-decoration:none;

}*/
a.gaeste:visited{color:blue;}
a.gaeste:hover{color:red;}

.feedb1{
width:50%;
padding-top:30px;
padding-left:50px;
}

.feedb2{
border-top:1px dashed #99917d;
border-left:5px solid red;
padding-left:2px;
}
.feedb3{
font-weight:bold;
}

.info{
width:80%;
padding-top:20px;
padding-left:50px;
text-align:justify;
}
a:visited#tableansicht{color:blue;}
a:hover#tableansicht{color:red;}

/* css für Adminbereich ----------------------------------------------------------------*/

.login{
width:300px;
height:160px;
margin:0px auto;
border:1px solid #bcbcbc;
border-style:dashed;
margin-top:200px;

}

.login2{
height:125px;
width:250px;
text-align:left;
margin-left:40px;
margin-top:10px;

}

#adminbanner{
width:100%;
float:left;
padding: 10px 30px 10px 0 !important;
padding: 0px 0px 0px 0;
background-color:#4F94CD;
}

#adminlinks{
	width:20%;
	float: left;
	/*background-color:#4F94CD;*/
	}

#adminmitte{
	width: 80%;
    float:right;
	margin:0;
	padding: 30px 0 0 0;
	/*background-color:#4F94CD;*/
}

#adminunten{
	width:100%;
	float:left;
	background-color:#4F94CD;
	padding: 10px 30px 10px 0 !important;
	padding: 0px 0px 0px 0;
}


ul#oben{
	margin:0; padding:0.8em;
	text-align:center;
	border: 1px solid white;
}

ul#oben li{
	margin:0.4em; padding:0;
	list-style:none;
	display:inline;
	

}

ul#oben a{
	padding: 0.2em 1em;
	text-decoration:none;
	font-weight:bold;
	border: 1px solid white;
	color:white;
}

ul#oben a:hover{
	color: red;
}

ul#links{
	width: 10em;
	margin: 0; padding:0.8em;
	list-style: none;

	
	
}
ul#links li{
	list-style:none;
	margin: 0.4em; padding: 0.2em;
	border: 1px solid #4F94CD;
	background-color:#4F94CD;

}
ul#links a{
	text-decoration:none;
	font-weight:bold;
	color:white;
	display: block;
	background-color:#4F94CD;
	border: 1px solid #4F94CD;
	
}

ul#links a:hover{
	color: #4F94CD;
	background-color: white;
	border: 1px solid white;	
}
/*Links Hauptmenü*/
a.navi {
font:bold 13px verdana, sans-serif;
margin:5px 0 5px 0;
padding:1px 3px 1px 4px;
text-decoration:none;
background-color:#CDC9C9;
display:block;
border-top:1px solid #99917d;
border-right:1px solid #e4d9c0;
border-bottom:1px solid #e4d9c0;
border-left:1px solid #99917d;
width:155px;
color:black;
}
a.navi:hover{
color:white;
background:red;
border-top:1px solid #e4d9c0;
border-right:1px solid #837c6b;
border-bottom:1px solid #837c6b;
border-left:1px solid #e4d9c0;
}
 
Bei mir verschiebt sich da kein Bild.

Dafür wird aber das vollständige rechte DIV #mitte beim Verkleinern des Browserfensters umgebrochen, da die beiden darin eingebundenen DIVs #bild1 und #bild2 jeweils eine Breite von 755px besitzen, und somit die "900px-Mindestbreite" für den IE zu gering gewählt ist.
 
Ich habe gerade noch mal auf einem 19" Bildschirm getestet und werde hier verrückt. Im FF ist alles ok dann verschiebt er dafür im IE das Bild weil es nicht passt. Also das ganze schon beim normalen Browserfenster öffnen. Ich weiß aber einfach nicht woran das liegt und wie ich sowas umgehen kann? Weil ist ja blöd wenn ich auf meinem 22" Bildschirm teste und da ist alles ok und dann auf einem 19 passt das nicht mehr.
 
Wie gesagt, die "900px-Mindestbreite" ist für den IE zu gering gewählt, da schon die beiden DIVs #bild1 und #bild2 aktuell eine Breite von 668px besitzen, sich aber im rechten DIV #mitte befinden.

Zur Veranschaulichung hab ich mal das Maßband aufgezogen, wo sich ihr rechter Rand befindet (1095px vom linken Fensterrand):

demo_ie6.jpg
 
Ok das stimmt ich habe die Werte nun auf 1200 geändert. Ich mein ich könnte sie auch mal ganz raus nehmen. Nur wieso schiebt er im IE das Bild unter die Buchstaben? Ich mein es müsste ja funktionieren das ich sowohl auf einem kleineren Bildschirm als auch auf einem größeren beides gut angezeigt bekomme. Seh irgendwie den fehler nicht.

Weil es funktioniert im moment nicht mal das es mir so wie in ihrem beispiel angezeigt wird. Also auch wenn ich den Browser normal öffne.
 
Zuletzt bearbeitet:
Der Wert zur Mindestbreite muss so gewählt werden, dass die eingebundenen floatenden Elemente von ihr komplett "umfasst" werden, ansonsten werden sie nacheinander umgebrochen, wenn das Fenster in der Horizontalen verkleinert wird, das Mindestbreitenmaß aber noch nicht erreicht ist.
 
Ich hab jetzt die Mindestbreite mal raus genommen, aber es ist leider so das das Bild wohl die Breite des Fenstern überschreitet und im IE wird es dann unter die Buchstaben angezeigt. Nur probiere ich das die ganze zeit schon hin zu bekommen, mache aber noch was falsch ?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück