Autor |
Nachricht |
revolution48
Threadersteller
Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 28.07.2009 07:07
Titel Hilfe: div float / width:100% - CSS float Box Model |
|
|
Hallo zusammen!
Ich möchte ein fließendes Design mit HTML/CSS realisieren.
Horizontal soll sich der Inhalt an den Viewport anpassen.
Dieses Schema ist erwünscht (die rote Markierung gibt die border des div elements an):
[BOX #1 volle Breite] [BOX #2 feste Breite] [BOX #3 feste Breite]
Setze Ich Box #1 jedoch auf width:100%; und lasse die anderen beiden Boxen floaten, so umspannt Box #1 die beiden anderen Boxen.
Dieses Schema ist das Ergebnis, jedoch nicht erwünscht:
[BOX #1 volle Breite [BOX #2 feste Breite] [BOX #3 feste Breite] ]
Code: |
<div style="width:100px;height:300px;background:yellow;float:right;">
Box #3
</div>
<div style="width:200px;height:300px;background:green;float:right;">
Box #2
</div>
<!-- width: 100%; !-->
<div style="width:100%;height:300px;background:blue;border:5px solid pink;float:none;">
Box #1, soll sich an den Viewport anpassen
<!-- Content- soll sich an die Breite der Box #1 anpassen; !-->
<iframe style="width:100%;height:200px;" src="http://www.google.com">
iFrame
</iframe>
</div>
|
(EDIT: Link zum Originalcode http://agent.kilu.de/float.html)
(EDIT: Diese Ansicht soll erreicht werden http://agent.kilu.de/zielscreenshot.jpg)
Dieses Markup wird dann spannend, wenn sich an die Box #1 anpassender (also Browserbreite minus Box #2 minus Box #3) Inhalt (hier ein IFrame) eingebunden wird.
Leider erscheint das iframe unterhalb der Boxen.
Über einen heissen Tip, in welche Richtung ich denken kann, wäre Ich sehr dankbar.
Zuletzt bearbeitet von revolution48 am Di 28.07.2009 08:58, insgesamt 6-mal bearbeitet
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 28.07.2009 07:53
Titel
|
|
|
weiß nicht, ob ich dein markup nun wirklich komplett verstanden habe. ein link zur ansicht wäre ggf praktisch.
aber so wie ich es verstanden habe, würde ich einen wrapper um die drei boxen machen (100%)
im wrapper liegen mit float-right box 2 und 3. den rest des wrappers würde ich dann mit deinem iframe füllen. womal ich mich gerade frage, ob sich der iframe selbst an die restliche breite anpasst. würde vermuten, eher nicht kannste statt iframe n include verwenden?
ach ja... moin erstma
(edit: noch auf float right umgeschrieben, da ich von links nach rechts gedacht habe )
Zuletzt bearbeitet von pixelpapst303 am Di 28.07.2009 07:55, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
revolution48
Threadersteller
Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 28.07.2009 08:43
Titel
|
|
|
Hallo! Danke für deine schnelle Antwort.
Unter folgender URL kannst Du den Originalcode betrachten: http://agent.kilu.de/float.html
Unter dieser Adresse findest Du den Code nach Deinen Vorschlägen (edit1): http://agent.kilu.de/edit1.html
Diese Anzeige möchte Ich erreichen (Screen): http://agent.kilu.de/zielscreenshot.jpg
PHP - Includes machen keinen Sinn, denn Box #1 benötigt Scrollbalken,da hierhin im weiteren Schritt dynamisch Elemente nachgeladen werden, die über die Seitengrösse hinausgehen können, aber dies nicht zwingend müssen. Fällt Dir dazu eine andere Möglichkeit als ein iframe ein?
Unabhängig vom Content (also mit oder ohne Iframe) sollte das parentobject, also Box #1 selbst, die maximal zur Verfügung stehende Breite ausnutzen.
Welche Lösungsansätze kannst Du mir empfehlen?
Zuletzt bearbeitet von revolution48 am Di 28.07.2009 09:19, insgesamt 3-mal bearbeitet
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 28.07.2009 09:11
Titel
|
|
|
revolution48 hat geschrieben: | PHP - Includes machen keinen Sinn, denn Box #1 benötigt Scrollbalken, da hierhin im weiteren Schritt dynamisch Elemente nachgeladen werden, die über die Seitengrösse hinausgehen können, aber dies nicht zwingend müssen. Fällt Dir dazu eine andere Möglichkeit als ein iframe ein? |
jepp. ein div mit overflow: auto...
habe hier mal den iframe drinne gelassen, würde aber so mitm include genauso funktionieren. leg die mal ne datei mit viel text ein, die du statt des iframes includierst...
mal schnell hingerotzt (muss wech )
Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Float Box Model</title>
</head>
<body>
<p>
Dies ist ein Beispiel zur Diskussion unter <a href="http://www.mediengestalter.info/forum/4/hilfe-div-float-width-100-css-float-box-model-130592-1.html">http://www.mediengestalter.info/forum/4/hilfe-div-float-width-100-css-float-box-model-130592-1.html</a>
</p>
<div id="wrap" style="width:100%">
<div style="width:100px;height:300px;background:yellow;float:right;">
Box #3
</div>
<div style="width:200px;height:300px;background:green;float:right;">
Box #2
</div>
<div style="border: 1px solid #cccccc; height: 300px; overflow:auto;">
Box #1, soll sich an den Viewport anpassen
<iframe style="width:100%;height:200px;" src="http://www.google.com">
iFrame
</iframe>
</div>
</div>
</body>
</html>
|
|
|
|
|
|
revolution48
Threadersteller
Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 28.07.2009 09:25
Titel
|
|
|
Danke! Du rockst!
|
|
|
|
|
|
|
|
Ähnliche Themen |
div und float
[css] IE und float
Css FLOAT
<tr> Float in IE7
[css] float und xp
float Problem
|
|