mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 18.10.2017 00:35 Benutzername: Passwort: Auto-Login

Thema: Hilfe: div float / width:100% - CSS float Box Model vom 28.07.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Hilfe: div float / width:100% - CSS float Box Model
Autor Nachricht
revolution48
Threadersteller

Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 28.07.2009 08:07
Titel

Hilfe: div float / width:100% - CSS float Box Model

Antworten mit Zitat Zum Seitenanfang

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 09:58, insgesamt 6-mal bearbeitet
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 44
Geschlecht: Männlich
Verfasst Di 28.07.2009 08:53
Titel

Antworten mit Zitat Zum Seitenanfang

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 *zwinker* kannste statt iframe n include verwenden?

ach ja... moin erstma

(edit: noch auf float right umgeschrieben, da ich von links nach rechts gedacht habe Grins )


Zuletzt bearbeitet von pixelpapst303 am Di 28.07.2009 08:55, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
revolution48
Threadersteller

Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 28.07.2009 09:43
Titel

Antworten mit Zitat Zum Seitenanfang

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 10:19, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 44
Geschlecht: Männlich
Verfasst Di 28.07.2009 10:11
Titel

Antworten mit Zitat Zum Seitenanfang

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 *zwinker* )

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>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
revolution48
Threadersteller

Dabei seit: 28.07.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 28.07.2009 10:25
Titel

Antworten mit Zitat Zum Seitenanfang

Danke! Du rockst!
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS: float in darüberliegendes DIV übertragen.
(css) Div akzeptiert kein float right
CSS float versetzt <div> nach innen (firefox)
[css] div(float: right) vertikal im elternelement zentrieren
HTML CSS Tabellen durch DIV ersetzen: float-Problem
div und float
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.