HTML div Container Problem

EoN · 09.07.2006, 15:01

Hallo,

habe ein kleines Problem mit den Div Containern. Und zwar möchte ich gerne links und rechts einen haben und in der Mitte soll ebenfalls einer sein, der ganau die Größe zwischen den beiden linken und rechten einnimmt. In dem mittleren Container soll ein Textfeld mit einem Button angebracht werden. Das Textfeld und der Button soll in der Breite genau die Breite des mittleren Containers einnehmen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html>
<body>

 <div style="float: left; width: 200px; border: solid 1px Silver; background-color: Red;">
  Links
 </div>

 <div style="float: right; width: 200px; border: solid 1px Silver; background-color: Yellow;">
  Rechts
 </div>

 <div style="border: solid 1px Silver; background-color: Blue;">
  <input type="submit" value="Suche" style="float: right;" />
  <input type="text" style="width: 100%" />
 </div>


</body>
</html>

Wenn ich jetzt noch weitere Div Container einfüge funktioniert das ganze ebenfalls nicht:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<body>

 <div style="float: left; width: 200px; border: solid 1px Silver; background-color: Red;">
  Links
 </div>

 <div style="float: right; width: 200px; border: solid 1px Silver; background-color: Yellow;">
  Rechts
 </div>

 <div style="border: solid 1px Silver; background-color: Blue; margin: 0 13em 0 13em;">

 <div style="border: solid 1px Silver; background-color: brown; width: 100%; margin: 0 16em 0 0em;">
<input type="submit" value="Suche" style="float: right;" />
</div>

 <div style="border: solid 1px Silver; background-color: black;">
  <input type="text" style="width: 100%" />
</div>

 </div>


</body>
</html>

In Firefox und Opera gehts so einigermaßen aber der IE 6 und 7 zerhaut das Design wieder komplett. Bräuchte da ne Möglichkeit für alle drei aktuellen Standardbrowser (IE 6, FF, Opera).

Vielen Dank schonmal!
EoN

tele · 09.07.2006, 15:53

Hi EoN,

also da gibts ein paar Fallstricke

1. braucht der mittlere Container mindestens soviel margin nach links und rechts, die die div-boxen dort breit sind

2. alle drei browser interpretieren die abstände zwischen den div containern unterschiedlich - also nicht wundern wenns nicht genau 100% passt.

3. irgendein bug war noch glaub ich mit der schriftgröße - völlig unnachvollziehbar

folge mal in etwas diesen Styl-angaben:
http://de.selfhtml.org/css/layouts/m...tm#dreispaltig

das sollte wenigstens "gehen"

Gruß

tele

EoN · 09.07.2006, 17:56

Danke, die SelfHTML Seite hab ich mir auch grad angeschaut und das mit der dreispaltigkeit geht auch so weit.
Das Problem, welches im Moment besteht ist, dass die Textbox in den ganzen Browsern unter den drei Spalten über die gesamte Seite angezeigt wird. Wenn ich das ganze mit den Div Containern eingrenzen will, so erreiche ich es nie, dass die Textbox genau den restlichen freien Platz in der Breite des mittleren Containers ausfüllt.
Also quasi: Textboxbreite = Breite des mittleren Containers - Breite des Buttons
Das ganze soll eigentlich schon in allen Browsern auf ca 1px genau funktionieren und gleich aussehen.
Ebenfalls sollte sich die Größe der Textbox beim resizen des Browserfensters dynamisch an die aktuelle Fenstergröße anpassen.

Das ganze muss doch irgendwie zu erreichen sein?!?

tele · 09.07.2006, 18:06

besser bekomm ich das auf die schnelle nicht hin:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html>
<body>

 <div style="float: left; width: 200px; border: solid 1px Silver; background-color: Red;">
  Links
 </div>

 <div style="float: right; width: 200px; border: solid 1px Silver; background-color: Yellow;">
  Rechts
 </div>

 <div style="margin: 0 201px; border: solid 1px Silver; background-color: Blue;">
	<form>
		<input type="submit" value="Suche" style="width: 20%; float: right;" />
		<input type="text" value="text..." style="width: 75%" />
	</form>
 </div>
 <div style="clear:both; border: solid 1px Silver; background-color: Blue;">

 </div>
</body>
</html>

mondrian · 11.07.2006, 12:14

EoN, da hab ich noch ein paar Fragen worum es dir, abgesehen von einem best. Layout, noch geht.

Soll die Seite auch auf Handhelds, Handies o.ä. ohne quer zu scrollen reinpassen?
Wenn das nicht wichtig ist kann u.U. statt float auch mit position:absolute gearbeitet werden.

Dann möchtest du wohl keine Tabellen einsetzen, soll die Seite barrierefrei sein?
Die Formulargeschichte würde ich ggf. in Tabellen einbauen, da Tabellen oft flexibler
als CSS sind und Formularfelder u.U. sowieso nicht so umfassend per CSS behandelt
werden können.

Schließlich würd ich wegen der besseren Übersichtlichkeit die wesentlichen Styleangaben
im head zusammenfassen (die DIVs brauchen dann eine id).
Das würde auch die Behandlung der IEs wesentlich vereinfachen da du ggf. eine
einfache Browserweiche im CSS einsetzen kannst.

Hier gibt es vielleicht noch geeignete Beispiele mehrspaltige CSS-Layouts.

Dann noch ein Beispiel mit absoluten Positionen als Anregung, also noch kein perfekter Code:

HTML-Code:

<!-- -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title></title>
<style type="text/css">

*{margin:0;padding:0;}
html,body {width:100%}
#links { position:absolute;width:200px;left:0px;right:0px; border: solid 1px silver; background-color: red;}
#mitte { position:absolute; left:200px; right:200px;border: solid 1px silver; background-color: blue;}
#rechts { position:absolute; width: 200px; top:0px;right:0px; border: solid 1px silver; background-color: yellow; }
#it {width:74%}
#is {width:24%}

input{display:inline}

/* aenderungen fuer ie 6: */

* html #mitte{width:100%;left:0px;right:0px;padding-left:200px;padding-right:200px;}
* html #it {float:left;width:75%}
* html #is {float:right;width:25%}
* html #links{z-index:9}

</style>
</head>
<body>
<div id="links">
  Links
 </div>
<div id="mitte">
 <form>
  <input 
id="it" type="text" value="text..." />
  <input
id="is" type="submit" value="Suche" />
  </form>
 </div>
  <div id="rechts">
  Rechts
 </div>

 </body>
 </html>

Der Kommentar am Anfang schaltet den IE 6 hier in den Standard-Modus, d.h. dass
der IE 6 versucht ähnlich wie Firefox oder IE 7 darzustellen, aber auch dass IE
5 und 5.5 sich etwas anders verhalten als der 6er.