Problem mit unterschiedlichen Auflösungen

Status
Nicht offen für weitere Antworten.
K

kbit

Erfahrenes Mitglied
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.
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 />";

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

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

zeig doch bitte mal anstelle des PHP-Codes den ausgegebenen HTML-Code.
 
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:
PHP: 
<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>
 
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.

Code: 
<!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>
 
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:

Code: 
<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>
 
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.
 
Zuletzt bearbeitet:
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.
 
Also ich hatte das jetzt so gemacht einfach mal testweise.

Code: 
#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?
 
kbit hat gesagt.:
Hab zwar auch das Bild dazu gesehn aber kann mir das nicht so ganz vorstellen wie man das macht?
Zum Vergrößern anklicken....
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.

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;}
Code: 
<div id="root">
     <div class="minwidth">
          <div class="container">
            <!-- Hier folgt der Bestand -->
          </div>
     </div>
</div>
 
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.

Code: 
<!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:
Code: 
.minwidth{ border-left:900px solid #fff; position:relative; float:left; z-index:1;}
.container{margin-left:-900px; position:relative; float:left; z-index:2;}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück