# Problem mit unterschiedlichen Auflösungen



## kbit (4. April 2008)

Hi ich habe ein Problem mit Unterschiedlichen Auflösungen. Und zwar lasse ich mir Buschstaben untereinander ausgeben. Einmal von A-M und dann von N-Z. Das Problem was ich nun habe ist wenn jemand eine kleinere Auflösung hat dann verschieben sich die Buchstaben z.b stehen dann dort 3 Zeilen und dann von A-K und das M in einer Zeile alleine und so.

```
foreach (range('A', 'M') as $Name)   {
		echo("<input type=\"submit\" class=\"buchstaben\" name=\"Name\" value=\"".$Name."\" />");
	}
	echo "<br />";

	foreach (range('N', 'Z') as $Name)   {
		echo("<input type=\"submit\" class=\"buchstaben\" name=\"Name\" value=\"".$Name."\" />");
	}
	echo "<br />";
```

Also in links stehen die Buchstaben und in mitte kommt die Ausgabe.


```
#links {
    width: 30%;
    float: left;
	margin-left:10px;
	display:inline;	
}
#mitte {
    width: 60%;
    float:left;
	padding-right:10px;
}
```


----------



## Maik (4. April 2008)

Hi,

zeig doch bitte mal anstelle des PHP-Codes den ausgegebenen HTML-Code.


----------



## Bratkartoffel (4. April 2008)

Hi,

Versuchs mal mit der CSS Eigenschaft "white-space: nowrap;". Das unterbindet einen automatischen Zeilenumbruch wenn kein explizites "<br />" angegeben ist.

€dit:

Also in etwa so:

```
<div style="white-space: nowrap;">
<?php
foreach (range('A', 'M') as $Name)   {
        echo("<input type=\"submit\" class=\"buchstaben\" name=\"Name\" value=\"".$Name."\" />");
    }
    echo "<br />";

    foreach (range('N', 'Z') as $Name)   {
        echo("<input type=\"submit\" class=\"buchstaben\" name=\"Name\" value=\"".$Name."\" />");
    }
    echo "<br />";  
?>
</div>
```


----------



## kbit (4. April 2008)

Hi das hat funktioniert habe es in meiner css datei eingebunden funktionierte gut.Nun ist noch ein Problem und zwar habe ich in der mitte einen Infotext der wenn ich das fenster klein mache sich über die buchstaben links schiebt. 


```
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><link rel="stylesheet" type="text/css" href="page.css" />
<html><head><title>Suche nach neuen Straßen</title><meta name='author' content='Andre Botor'><link rel='stylesheet' type='text/css' href='page.css'></head><body>        <div id="root">
            <div id="banner">
Willkommen auf neue-straßen.de&nbsp;&nbsp;&nbsp;<img src="../../nrw.jpg" alt="Kein Bild vorhanden" width="40" height="40">            </div>
<div id="balken">
</div>            <div id="links">




<div id="select"><br/><br/><form action="/startseite.php" method="GET">

Stadt: <select name="staedte" size="1" class="stadt" ><option value="1">Bochum </option><option value="2">Castrop-Rauxel </option><option value="3">Dortmund </option></select>
</div>
<br>
<br>
Straße: <input type="text" name="strasse" class="straßenname" />
<input type="submit" name="submit" value="suchen" />
<br>
<br> <br /><input type="submit" class="buchstaben" name="Name" value="A" /><input type="submit" class="buchstaben" name="Name" value="B" /><input type="submit" class="buchstaben" name="Name" value="C" /><input type="submit" class="buchstaben" name="Name" value="D" /><input type="submit" class="buchstaben" name="Name" value="E" /><input type="submit" class="buchstaben" name="Name" value="F" /><input type="submit" class="buchstaben" name="Name" value="G" /><input type="submit" class="buchstaben" name="Name" value="H" /><input type="submit" class="buchstaben" name="Name" value="I" /><input type="submit" class="buchstaben" name="Name" value="J" /><input type="submit" class="buchstaben" name="Name" value="K" /><input type="submit" class="buchstaben" name="Name" value="L" /><input type="submit" class="buchstaben" name="Name" value="M" /><br /><input type="submit" class="buchstaben" name="Name" value="N" /><input type="submit" class="buchstaben" name="Name" value="O" /><input type="submit" class="buchstaben" name="Name" value="P" /><input type="submit" class="buchstaben" name="Name" value="Q" /><input type="submit" class="buchstaben" name="Name" value="R" /><input type="submit" class="buchstaben" name="Name" value="S" /><input type="submit" class="buchstaben" name="Name" value="T" /><input type="submit" class="buchstaben" name="Name" value="U" /><input type="submit" class="buchstaben" name="Name" value="V" /><input type="submit" class="buchstaben" name="Name" value="W" /><input type="submit" class="buchstaben" name="Name" value="X" /><input type="submit" class="buchstaben" name="Name" value="Y" /><input type="submit" class="buchstaben" name="Name" value="Z" /><br /><br><br /><a href="startseite.php" class="navi">Startseite</a><a href="pearauth.php" class="navi" >Adminbereich</a><a href="info.php" class="navi" >Userbereich</a><br/><br/></form>             </div>

            <div id="mitte">
<br/><html>
<head>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />
	<meta http-equiv=\"Content-Type\"content=\"text/html; charset=ISO-8859-1\" />
</head>
<body>
<p style="text-align:justify;"> Neue-Straßen.de bietet Ihnen die Möglichkeit sich über neue Straßen in NRW zu informieren. Sie können mit den Suchfunktionen im linken Menübereich eine Suchabfrage abschicken. Dazu wählen Sie vorher eine Stadt aus der Auswahlliste aus und geben danach den Straßennamen in das Textfeld ein oder Sie klicken auf einen Buchstaben, der den Anfangsbuchstaben von der von Ihnen gesuchten Straße enthält.
<p> Viel Spaß auf neue-straßen.de!<p>
</body>
</html>            </div>

			  <div id="unten">
			  </div>
            <br style="clear:both;" />
       </div>
</body></html>
```


----------



## Maik (4. April 2008)

Dann richte mal für das DIV *#root* eine Mindestbreite ein, damit sich das Element beim Verkleinern des Fensters nicht vollends zusammenstauchen lässt.

Im übrigen wird beim Includen kein vollständiges HTML-Dokument in das Hauptdokument geladen, sondern nur was sich zwischen dem  Dokumentkörper *<body> ... </body>* befindet.

Die rotmarkierten Code-Zeilen haben dort nichts zu suchen:


```
<div id="mitte">
<br/><html>
<head>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />
	<meta http-equiv=\"Content-Type\"content=\"text/html; charset=ISO-8859-1\" />
</head>
<body>
<p style="text-align:justify;"> Neue-Straßen.de bietet Ihnen die Möglichkeit sich über neue Straßen in NRW zu informieren. Sie können mit den Suchfunktionen im linken Menübereich eine Suchabfrage abschicken. Dazu wählen Sie vorher eine Stadt aus der Auswahlliste aus und geben danach den Straßennamen in das Textfeld ein oder Sie klicken auf einen Buchstaben, der den Anfangsbuchstaben von der von Ihnen gesuchten Straße enthält.
<p> Viel Spaß auf neue-straßen.de!<p>
</body>
</html>            </div>
```


----------



## kbit (4. April 2008)

Genau sowas wäre gut weil wenn man z.b so eine seite wie gmx nimmt dort verschiebt sich ja auch nichts. Was muss ich denn da genau für angeben und wo muss das #root dann stehn?

Du hast recht das war noch falsch. War noch als ich das HTML gerüst noch nicht in einer extra Datei gepackt hatte.


----------



## Maik (4. April 2008)

Eine Mindestbreite lässt sich mit der min-width-Eigenschaft einrichten.

Da der IE bis einschliesslich Version 6 diese Eigenschaft nicht unterstützt, wäre zusätzlich ein Workaround erforderlich, wie ihn beispielsweise Stu Nicholls mit http://www.cssplay.co.uk/boxes/minwidth.html vorstellt.

Das DIV *#root* ist doch schon im HTML-Code enthalten, und folgt direkt nach dem *<body>*-Tag.

Ansonsten nimmst du die CSS-Regel für dieses Element im Stylesheet auf.


----------



## kbit (4. April 2008)

Also ich hatte das jetzt so gemacht einfach mal testweise.


```
#root{min-width:1200px;}
```

Hab ich das jetzt richtig verstanden das ich für den IE einen äußeren div und einen inneren noch brauche. Und der äußere bekommt eine Angabe bis zum inneren div und der innere bekommt 100% und einen negativen wert ?
Hab zwar auch das Bild dazu gesehn aber kann mir das nicht so ganz vorstellen wie man das macht?


----------



## Maik (4. April 2008)

kbit hat gesagt.:


> Hab zwar auch das Bild dazu gesehn aber kann mir das nicht so ganz vorstellen wie man das macht?


Im Quellcode des Beispiels http://www.cssplay.co.uk/boxes/width2.html findest du doch alle benötigten Angaben für den CSS- und HTML-Code.


```
#root{min-width:1200px;}

/* the bodge for IE6 browsers */
* html .minwidth {border-left:1200px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-1200px; position:relative; float:left; z-index:2;}
```


```
<div id="root">
     <div class="minwidth">
          <div class="container">
            <!-- Hier folgt der Bestand -->
          </div>
     </div>
</div>
```


----------



## kbit (4. April 2008)

Hi hab noch ein kleines Problem also im FF funktioniert es das ich den Browser so klein machen kann wie möglich und es verschiebt sich nix. Im IE hab ich noch das Problem das wenn ich mir Bilder anzeigen lasse und den Browser verkleinere das Bild sich noch mit verschiebt. Das komische ist auf der Startseite habe ich Infotext der wird nicht mehr verschoben da klappt es perfekt.


```
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><link rel="stylesheet" type="text/css" href="page.css" />
<html><head><title>Suche nach neuen Straßen</title><meta name='author' content=''><link rel='stylesheet' type='text/css' href='page.css'></head><body>        <div id="root">
<div class="minwidth"><div class="container">            <div id="banner">
Willkommen auf neue-straßen.de&nbsp;&nbsp;&nbsp;<img src="../../nrw.jpg" alt="Kein Bild vorhanden" width="40" height="40">            </div>
<div id="balken">
</div>            <div id="links">




<div id="select"><br/><br/><form action="/startseite.php" method="GET">
Stadt: <select name="staedte" size="1" class="stadt" ><option value="1">Bochum </option><option value="2">Castrop-Rauxel </option><option value="3">Dortmund </option></select>
</div>
<br>
<br>
Straße: <input type="text" name="strasse" class="straßenname" />
<input type="submit" name="submit" value="suchen" />
<br>
<br> <a id="tableansicht" href="startseite.php?Name=Asselner+Stra%DFe&amp;staedte=3&amp;PLZ=44319">Asselner Straße</a><br/><a id="tableansicht" href="startseite.php?Name=Astrid-Lindgren-Ring&amp;staedte=3&amp;PLZ=44339">Astrid-Lindgren-Ring</a><br/><a id="tableansicht" href="startseite.php?Name=Auf+dem+Loh&amp;staedte=3&amp;PLZ=44319">Auf dem Loh</a><br/><a id="tableansicht" href="startseite.php?Name=Auf+der+Hohen+Fuhr&amp;staedte=3&amp;PLZ=44319">Auf der Hohen Fuhr</a><br/><br/><a id="tableansicht" href="startseite.php">Zurück</a><br/><br/></form>             </div>
            <div id="mitte">
<br/>

<div class="ausgabe">Auf der Hohen Fuhr<br />44319&nbsp;Dortmund<br/><br/></div>
<div id="bild1">
</div>
<a href="javascript:void(0);" onclick="show('id_klein');"><img src="../../lupe+.jpg" title="Kartenausschnitt vergrößern" alt= "kein bild"border="0"></a>
<a href="javascript:void(0);" onclick="show('id_gross');"><img src="../../lupe-.jpg" title="Kartenausschnitt verkleinern" alt= "kein bild"border="0"></a>
<a id="bild" href="javascript:lage('ab')">Lagebeschreibung</a>	
<a id="bild" href="javascript:ben('bc')">Benennung/Widmung</a>
<a id="bild" href="javascript:ben('cb')">Legende</a>	
<div id="bild2">
</div>




<script type="text/javascript">
	function show(bild_id) {
		if( bild_id=="id_klein") {
			document.getElementById("id_gross").style.display = "none";
			document.getElementById("id_klein").style.display = "inline";
		}else{
			document.getElementById("id_klein").style.display = "none";
			document.getElementById("id_gross").style.display = "inline";
			}
		}

	function lage(lage) {
		if (document.getElementById(lage).style.display == "none"){
			document.getElementById(lage).style.display = "inline";
		    document.getElementById(lage).scrollIntoView();
		}else{
			document.getElementById(lage).style.display = "none";
		}
	}
	function ben(ben) {
		if (document.getElementById(ben).style.display == "none"){
			document.getElementById(ben).style.display = "inline";
		    document.getElementById(ben).scrollIntoView();
		}else{
			document.getElementById(ben).style.display = "none";
		}
	}

	function leg(leg) {
		if (document.getElementById(leg).style.display == "none"){
			document.getElementById(leg).style.display = "inline";
		    document.getElementById(leg).scrollIntoView();
		}else{
			document.getElementById(leg).style.display = "none";
		}
	}


</script>
		

<div id="ab" style="display:none;"><h1 style="font-size:100%;">Lagebeschreibung:</h1>Die Stra?e Auf der Hohen Fuhr zweigt von der Stra?e Stadtg?rtnerei ca. 80m in n?rdlicher Richtung ab und endet mit einem Wendeplatz.<br/></div><div id="bc" style="display:none;"><h1 style="font-size:100%;"><a name="anfang">Benennung/Widmung:</a></h1>Seit dem 29.4.2006 erh?lt die projektierte Stra?e Nr. 1100 den Namen Auf der Hohen Fuhr.<br/></div><div id="cb" style="display:none;"><h1 style="font-size:100%;"><a name="anfang">Legende:</a></h1><img src="../../nadel.JPG" alt="Kein Bild"> Ist im Kartenmaterila nur die gelbe Nadel zu sehen, dann zeigt Sie die Straße die Sie gesucht haben an.<br/><br/><img src="../../roterpunkt.bmp" alt="Kein Bild">Ist aber im Kartenmaterial noch zustäzlich ein roter Punkt zu sehen, dann zeigt die gelbe Nadel eine Straße die in der<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nähe liegt an und der rote Punkt die Straße die Sie suchen.</div><br/> <br/><img id="id_gross" src="../../Kartenmaterial/Auf der Hohen Fuhr_gross.JPG"  alt="Kein Bild vorhanden" ><img id="id_klein" src="Kartenmaterial/Auf der Hohen Fuhr_klein.JPG" alt="Kein Bild vorhanden" style="display:none; "><p>© Regionalverband Ruhr</p>            </div>
			  <div id="unten">
			  </div>
            <br style="clear:both;" />
       </div>
       </div>
       </div>
</body></html>
```

Hab das jetzt so gemacht im CSS:

```
.minwidth{ border-left:900px solid #fff; position:relative; float:left; z-index:1;}
.container{margin-left:-900px; position:relative; float:left; z-index:2;}
```


----------



## Maik (4. April 2008)

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?


----------



## kbit (4. April 2008)

```
#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;
}
```


----------



## Maik (4. April 2008)

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.


----------



## kbit (4. April 2008)

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.


----------



## Maik (4. April 2008)

Kann man sich die Seite mal irgendwo "live" anschauen?


----------



## kbit (4. April 2008)

Ja hier :
http://neuestrassen.ne.funpic.de/startseite.php?Name=Auf+der+Hohen+Fuhr&staedte=3&PLZ=44319

Da sieht man auch direkt das Bild was beim IE unterhalb der Buchstaben auf die linke Seite geschoben wird.


----------



## Maik (4. April 2008)

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):


----------



## kbit (4. April 2008)

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.


----------



## Maik (4. April 2008)

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.


----------



## kbit (4. April 2008)

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 ?


----------



## Maik (4. April 2008)

Bei mir bricht der IE das DIV *#mitte* erst dann um, wenn der verfügbare Platz im Fenster nicht mehr für das Element und die darin eingebundenen DIVs *#bild1* und *#bild2* ausreicht.

Im Vollbildmodus (Auflösung: 1280*1024px) oder bei voller Breitenausdehnung des Browserfensters wird die Seite korrekt dargestellt.


----------



## kbit (4. April 2008)

Ja ok das stimmt da ist es bei mir auch ok nun habe ich das bei 1024x768 hier laufen und da bricht er den div mitte halt um. Kann man das ändern oder verhindern ? Das er das nicht umbricht ? auch bei der einstellung ? Weil ich mein es sollte ja für verschiedene Einstellungen gut angezeigt werden


----------



## Maik (4. April 2008)

kbit hat gesagt.:


> nun habe ich das bei 1024x768 hier laufen und da bricht er den div mitte halt um.


Die minimalste Fensterbreite liegt bei mir bei 1071px, bevor das Element umgebrochen wird:




Wie sich das verhindern lässt, haben wir ja schon besprochen, und diese Technik ist unabhängig von der jeweiligen Bildschirmauflösung.


----------



## kbit (4. April 2008)

Ja das stimmt dann habe ich da aber noch einen fehler er schneidet mir wenn ich das so mache wie im bsp Code die linke hälfte ab ich kann dann nur lesen ab den Buchstaben N der rest fehlt dann kompellt 


```
#root{min-width:1200px;}
.minwidth{ border-left:1200px solid #fff; position:relative; float:left; z-index:1;}
.container{margin-left:-1200px; position:relative; float:left; z-index:2;}
```


----------



## Maik (4. April 2008)

Den "Bug" hab ich eben auch festgestellt, und mich direkt an den Autor Stu Nicholls gewendet.

Der "Schwellenwert" für die Mindestbreite liegt bei mir bei 960px - alles was darüber hinaus geht, wird vom IE nach links in den nicht-sichtbaren Bereich des Fensters verschoben.

Sobald ich von ihm eine Antwort, respektive einen Bugfix, erhalte, werde ich mich hier umgehend melden.


----------



## kbit (4. April 2008)

Das ist super vielen dank noch einmal für die lange und ausdauernde Hilfe. Das macht nicht jeder. Muss aber sagen das man an solche Probleme verzweifeln kann wenn keiner einem hilft


----------



## Maik (4. April 2008)

Keine Ursache, dafür bin ich doch schliesslich da


----------



## Maik (5. April 2008)

Hi,

da  bislang von Stu Nicholls keine Antwort kam, und ich am Samstagabend für gewöhnlich über etwas mehr Zeit verfüge, hab ich  mal auf seiner Seite alle Kommentare zu dem min-width-Workaround durchgelesen, und siehe da, das Problem mit der Mindestbreite, die größer als 960px ist, wurde das erste mal schon vor knapp drei Jahren von einem User erwähnt.

Stu rät in diesem Fall zu der "transparenten" Version, in der das Problem nicht auftritt. Dieses Modell stammt von Bruno Fassino, der ein eigenes CSS-Projekt CSS tests and experiments betreibt.

Und was soll ich sagen? Mit der unteren (transparenten) Box sieht's bei mir ganz vielversprechend aus 


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>min-width in IE</title>
<style type="text/css">
* html .container {
        margin-left: -1200px;
        position: relative;
}
/*\*/
* html .container, * html .content {
        height: 1px;
}
/**/

.b1 { height: 1px; background-color: #c00; margin: 0 5px; }
.b2 { height: 1px; border-left: 2px solid; border-right: 2px solid; margin: 0 3px; }
.b3, .b4 { border-left: 1px solid; border-right: 1px solid; }
.b3 { height: 1px; margin: 0 2px; }
.b4 { height: 2px; margin: 0 1px; }

.content {
        border-left: 1px solid;
        border-right: 1px solid;
        padding: 5px;
}
.b2, .b3, .b4, .content {
        border-color: #c00;
}
.content h2, .content p {
        margin: 0;
}
.lf, .rf {
        height: 10px;
        width: 10px;
}
.lf {
        float: left;
        background-color: #00f;
}
.rf {
        float: right;
        background-color: #0f0;
}
.rule {
        width: 1200px;
        background-color: #c00;
        color: #fff;
        margin: 1em 0;
}

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

<body>

<p>Transparent version:</p>

<div class="width1">
<div class="minwidth1">
<div class="layout">
<div class="container">
        <div class="b1"><!-- --></div><div class="b2"><!-- --></div><div class="b3"><!-- --></div><div class="b4"><!-- --></div>
        <div class="content">

                <h2>{width:90%; min-width:1200px;} includes IE5+</h2>
                <p>This div has a min-width of 1200px and a width of 90%. <span class="lf"><!-- --></span> <span class="rf"><!-- --></span>
                The width can be any percentage and the min-width a px or em value.</p>
        </div>
        <div class="b4"><!-- --></div><div class="b3"><!-- --></div><div class="b2"><!-- --></div><div class="b1"><!-- --></div>
</div>
</div>
</div>
</div>
<div class="rule">this is 1200px wide</div>

</body>
</html>
```


----------



## kbit (6. April 2008)

Hi, bei mir klappt es leider noch nicht so ganz  ich glaub ich mache aber auch noch was falsch.

Ich habe nun folgende Zeile in meine Css Datei dazu geschrieben:

```
.minwidth1 {
        padding-right: 1200px;
		}
.width1 {    
	width: 90%;      
	min-width: 1200px;
	}

.container {
        margin-right: -1200px;
        position: relative;
}
.layout {
        height: 1px;}
```


Und die div's in meine Startseite geschrieben. Im FF sieht das ganze ganz gut aus. Nur im IE da verschiebt er mir den Text auf der Startseite wieder unter die Buchstaben.


----------



## Maik (6. April 2008)

Du hast zum einen den CSS-Code des Workarounds nicht vollständig, und zum anderen in der falschen Form übernommen:


```
* 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;
}
/**/
```
Diese CSS-Regeln (ausser der *.width1*-Selektor) gelten ausschliesslich für den IE bis Version 6, also wird hier der Star-HTML-Hack angewendet, damit die übrigen Browser den Code nicht interpretieren.

Ansonsten müsstest du deine Variante ohne Star-HTML-Hack in eine zweite CSS-Datei auslagern, und sie mit Hilfe eines Conditional Comments den älteren IE-Versionen zuspielen, damit alle übrigen Browser den CSS-Code nicht zu Gesicht bekommen.


----------



## kbit (6. April 2008)

Ok da hab ich einiges dazu gelernt das kannte ich so noch nicht. Danke!Jetzt funktioniert es auch. 
Hab aber noch eine Frage. Und zwar hat jemand für mich bei sich zu hause gerade meine Seite aufgerufen der hat eine Auflösung von 1024x768 und dort wird die Seite nicht im vollem Umfang angezeigt sondern muss derjenige mit dem Scrollbalken nach rechts Scrollen um den Rest der Seite zu sehen. Und wenn er den linken Teil sehen will muss er nach links wieder zurück Scrollen. Gibt es da noch eine Möglichkeit das derjenige die Seite im vollen Umfang sehen kann ? 
Ich mein so Seite wenn wir mal als Bsp. gmx nehmen dort muss man ja auch nicht direkt Scrollen bei so einer Auflösung also zumindestens nicht nach links und rechts um alles zu sehen. Oder muss man irgendwann einfach sagen ok der Umfang meiner Seite ist halt so breit d.h leute für die und die Auflösung müssen halt Scrollen?


----------



## Maik (6. April 2008)

kbit hat gesagt.:


> Oder muss man irgendwann einfach sagen ok der Umfang meiner Seite ist halt so breit d.h leute für die und die Auflösung müssen halt Scrollen?


So sieht's aus.

Ansonsten müsstest du dir Gedanken über ein "Fluid-Layout" machen, das auf die Skalierung des Browserfensters reagiert.


----------



## kbit (6. April 2008)

Ok dann weiß ich bescheid. Danke noch mal für die tolle Hilfe! Hab viel dabei gelernt.


----------



## kbit (6. April 2008)

> Ansonsten müsstest du dir Gedanken über ein "Fluid-Layout" machen, das auf die Skalierung des Browserfensters reagiert.



Das hatte ich gerade überlesen. Ich hab danach gerade mal gegoolet und das was ich gefunden hatte dazu war das die meisten sagen sie würden wenn man ein drei spalten Layout hat mit banner, links und die mitte. Für die mitte die Werte wie breite und höhre weg lassen. Aber das kann ja nicht alles sein damit es reichen würde das die Seite sich automatisch an die Auflösung anpasst.


----------



## Maik (6. April 2008)

Und wieso nicht?

Die mittlere Spalte ist sozusagen der "Puffer" zwischen den äußeren Spalten und zieht sich zusammen, wenn das Browserfenster in der Horizontalen verkleinert wird.

Neben dieser Methode gibt es aber auch noch "Liquid Layouts", bei denen die Elemente prozentuale Breitenangaben erhalten, und so auf die Skalierung des Fensters reagieren.

Das trifft ja soweit auch bei deinen Seitenbereichen zu, nur durch die fixe Breitenangabe für das grosse Bild, haut das eben nicht mehr so hin.


----------



## kbit (6. April 2008)

Ja ok das stimmt die Bilder haben ja fixe angaben. Und eine Möglichkeit das die sich mit verkleinern gibt es sicher nicht da die angaben fix sind ?


----------



## Maik (6. April 2008)

Wenn du im width-Attribut des Grafikelements eine relative (=prozentuale)  Angabe machst, reagiert das Element auch auf die Fenstergrößenveränderungen.


----------



## kbit (6. April 2008)

Ok d.h aber das ich auch für alle anderen Css Werte einen Prozentualen Wert angeben muss, also auch für padding, margin usw Angaben ? Also müsste ich alle Angaben noch mal in Prozent ändern und dann müsste es klappen ?


----------



## Maik (6. April 2008)

Zumindest die width- und horizontalen margin-Deklarationen müssen noch relativ gesetzt werden.

Wenn du mal einen Blick in den Quellcode des von mir vorhin verlinkten Beispiels wirfst, siehst du, dass beispielsweise die vertikalen margin-Deklarationen weiterhin absolut festgelegt sind. 

Bei den padding-Angaben steht es dir frei, da es keine Rolle spielt bzw. keine Auswirkung hat, ob der Innenabstand einer Box relativ oder absolut ist.


----------



## kbit (7. April 2008)

Hi, ich dachte mir gerade ok probiere ich das mal aus da fiel mir auf das ich gar nicht weiß wieviel Prozent 1 Pixel überhaupt ist ? 
Hab danach mal gegooglet aber nix passendes gefunden.


----------



## Maik (7. April 2008)

Alle horizontalen Maße (Breite, linker u. rechter Außenabstand) müssen letztlich in der Summe 100% ergeben.


----------



## kbit (7. April 2008)

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?


```
* 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;
```


----------



## Maik (7. April 2008)

Dann musst du auch die Mindestbreiten wieder entfernen, womit dann auch der Workaround für den IE6 überflüssig ist.


----------



## kbit (7. April 2008)

Aber bedeutet das bedeutet ja wenn ich nun das Browserfenster verkleinere das dann wieder die Inhalte sich verschieben auf der Seite ?


----------



## Maik (7. April 2008)

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.


----------

