Problem mit unterschiedlichen Auflösungen

Status
Nicht offen für weitere Antworten.
Alle horizontalen Maße (Breite, linker u. rechter Außenabstand) müssen letztlich in der Summe 100% ergeben.
 
HI ich habe das so nun abgeändert, aber wenn ich auf die Auflösung 1024x768 wechsel und mir das ansehe, dann wird die Seite immer noch nicht komplett dargestellt und man muss immer noch scrollen um alles zu sehen?

Code: 
* html .container {
        margin-left: -1200px; 
        position: relative;
}
/*\*/
* html .container, * html .content {
        height: 1px;
}
/**/

.width1 {
        width: 90%;
        min-width: 1200px; 
}
* html .minwidth1 {
        padding-left: 1200px; 
}
/*\*/
* html .minwidth1, * html .layout {
        height: 1px;
}
/**/

body {
	
	padding: 0;
	margin: 0;	
}

#banner {
    height: 60px;
	font-size: 1.5em;
        font-weight:bold;
	padding-left:10px;
	padding-top:10px;
}
#links {
    width: 32%;
    float: left;
    margin-left:0.5%; 
}

#white{white-space: nowrap; }

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


}

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

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

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

#select{margin: 0 1.7%;} 

.stadt{width:34%;}  

.ausgabe{font-size: 1.2em;}


#bild2{
padding:4px 0 4px 4px!important;
padding: 1px 1px 0 1px;
text-decoration:none;
width:100%;			 
border-bottom:2px solid black;
color:black;
}
#bild1{
padding:4px 0 4px 4px !important;
padding: 1px 1px 0 1px;
text-decoration:none;
width:100%;	
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 12px 0 12px !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 2%;			

}
#gaestebuch{
padding:30px 0 0 2.5%;	
}


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

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:120%;
float:left;
padding: 10px 30px 10px 0 !important;
padding: 0px 0px 0px 0;
background-color:#4F94CD;
}

#adminlinks{
	width:20%;
	float: left;
	}

#adminmitte{
	width: 80%;
        float:right;
	margin:0%;  	
	padding: 30px 0 0 0;
	
}

#adminunten{
	width:120%;
	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.4%; 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;
 
Dann musst du auch die Mindestbreiten wieder entfernen, womit dann auch der Workaround für den IE6 überflüssig ist.
 
Aber bedeutet das bedeutet ja wenn ich nun das Browserfenster verkleinere das dann wieder die Inhalte sich verschieben auf der Seite ?
 
Nein. Da die Bereiche nun relative (prozentuale) Breiten besitzen, ziehen sie sich beim Verkleinern des Fensters zusammen, und beim Vergrößern wieder auseinander.

Schau dir einfach nochmal das empfohlene Demo liquid test an, und achte darauf, wie sich die Boxen beim Skalieren des Browserfensters verhalten.

Das Umbrechen geschieht nur bei absoluten Breitenangaben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück