TweakPC

Zurück   Computer Hardware Forum - TweakPC > Games und Software > Programmiersprachen

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 09.07.2006, 16:01   #1 (permalink)
EoN
Kaffeejunkie
 
Benutzerbild von EoN
 

Registriert seit: 01.05.2002
Beiträge: 5.035

EoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer Anblick

Standard HTML div Container Problem

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
EoN ist offline   Mit Zitat antworten
Alt 09.07.2006, 16:53   #2 (permalink)
Polsterwaffenkampfsportle r
 
Benutzerbild von tele
 

Registriert seit: 29.10.2003
Beiträge: 14.561

tele hat eine strahlende Zukunft
tele hat eine strahlende Zukunfttele hat eine strahlende Zukunfttele hat eine strahlende Zukunfttele hat eine strahlende Zukunfttele hat eine strahlende Zukunft

Standard AW: HTML div Container Problem

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
tele ist offline   Mit Zitat antworten
Alt 09.07.2006, 18:56   #3 (permalink)
EoN
Kaffeejunkie
 
Benutzerbild von EoN
 

Registriert seit: 01.05.2002
Beiträge: 5.035

EoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer AnblickEoN ist ein wunderbarer Anblick

Standard AW: HTML div Container Problem

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?!?
EoN ist offline   Mit Zitat antworten
Alt 09.07.2006, 19:06   #4 (permalink)
Polsterwaffenkampfsportle r
 
Benutzerbild von tele
 

Registriert seit: 29.10.2003
Beiträge: 14.561

tele hat eine strahlende Zukunft
tele hat eine strahlende Zukunfttele hat eine strahlende Zukunfttele hat eine strahlende Zukunfttele hat eine strahlende Zukunfttele hat eine strahlende Zukunft

Standard AW: HTML div Container Problem

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>
tele ist offline   Mit Zitat antworten
Alt 11.07.2006, 13:14   #5 (permalink)
Extrem Tweaker
 
Benutzerbild von mondrian
 

Registriert seit: 11.11.2005
Beiträge: 1.638

mondrian ist ein Lichtblickmondrian ist ein Lichtblickmondrian ist ein Lichtblickmondrian ist ein Lichtblickmondrian ist ein Lichtblick

Standard AW: HTML div Container Problem

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.
mondrian ist offline   Mit Zitat antworten
Antwort

Stichworte
container, div, html, problem


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen
Ansicht

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist aus.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[php] Links vom Menü in Container öffnen UnoOC Programmiersprachen 23 15.10.2009 13:47
Link-Problem bei HTML Pixelfehler Programmiersprachen 2 29.05.2007 08:13
HTML Frameset - Problem GanTaMaN Programmiersprachen 25 27.02.2007 12:41
HTML CSS Problem Exit Programmiersprachen 5 03.11.2005 11:07
Frage zu HTML! Danneo Programmiersprachen 18 30.03.2004 16:12


Alle Zeitangaben in WEZ +1. Es ist jetzt 00:31 Uhr.




Powered by vBulletin® Version 3.8.10 (Deutsch)
Copyright ©2000 - 2023, vBulletin Solutions, Inc.
SEO by vBSEO 3.5.2 ©2010, Crawlability, Inc.
Impressum, Datenschutz Copyright © 1999-2015 TweakPC, Alle Rechte vorbehalten, all rights reserved