php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 17-02-2010, 17:06
dduton
 Registrierter Benutzer
Links : Onlinestatus : dduton ist offline
Registriert seit: Apr 2009
Beiträge: 6
dduton ist zur Zeit noch ein unbeschriebenes Blatt
Question Problem mit 2 verschachtelten floats

Hallo,

Ich habe Links ein div (Menu) welches nach links gefloatet ist. Rechts davon befindet sich ein Content div. Diese Struktur ist fix durch das Template definiert, und sollte wenn möglich nicht geändert werden.

Im Content Div habe ich nun ein Header div und ein Footer div. Zwischen beiden befinden sich 2 divs (2 Kolonnen) die "float: left" als eigenschaft besitzen.

Nun zu meinem Problem:
Damit das Footer div unter die Beiden Kolonnen rutscht, habe ich ein "clear:both" eingesetzt. Das Problem ist nun dass nun nicht nur die beiden Kolonnen, sondern auch das Menu div mit gecleared wird, und so das Footer div mit unter das Menu rutscht. Es sollte sich eigendlich direkt unter den Beiden Kolonnen befinden.

Tabelle wollte ich vermeiden. Ausser es sei nicht anders zu lösen.

Hier mal Beispiel HTML was mein Problem wiederspiegelt.

PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Conforming XHTML 1.1 Template</title>
</
head>
<
body>

<!-- 
Menu -->
<
div style="float: left; width: 100px; background-color: #F00;">
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
</
div>

<!-- 
Content -->
<
div style="background-color: #F39; margin: 10px; margin-left: 120px;">

<!-- 
Header -->
<
div style="background-color: #0F0; margin: 10px;">
    
Header
</div>

<!-- 
2 Kolonnen -->
<
div style="float: left; width: 40%; background-color: #999; margin: 10px;">
    
Col1
</div>
<
div style="float: left; width: 40%; background-color: #CCC; margin: 10px;">
    
Col2<br />
    
Col2<br />
    
Col2<br />
</
div>

<!-- 
Footer -->
<
div style="background-color: #0FF; clear: both; margin: 10px;">
    
Footer
</div>

</
div>

</
body>
</
html
Würde mich auf eine Lösung des Problems freuen.

MfG
Daniel
Mit Zitat antworten
  #2 (permalink)  
Alt 17-02-2010, 17:11
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

Floats kann man zwar verschachteln, aber ein clear wirkt sich immer auf alle Floats aus, daher ist es generell keine gute Idee, mit verschachtelten Floats zu arbeiten.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #3 (permalink)  
Alt 17-02-2010, 18:02
dduton
 Registrierter Benutzer
Links : Onlinestatus : dduton ist offline
Registriert seit: Apr 2009
Beiträge: 6
dduton ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Danke für die schnelle Antwort.

Welche Möglichkeiten bleiben mir?

Ich könnte das "Header-Kolonnen-Footer" Konstrukt in eine Tabelle setzen. Glaube aber nicht dass dies eine sehr elegante Lösung ist, oder? Lasse mich gerne eines Besseren belehren .

Daniel
Mit Zitat antworten
  #4 (permalink)  
Alt 17-02-2010, 18:07
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Nein, mit Tabellen wollen wir gar nicht wieder anfangen.

Hättest du ein Problem mit absoluter Positionierung? Wenn nicht kannst du das damit prima erledigen.

Edit: wenn der Footer breit genug ist, rutscht er sowieso runter und muss nicht gecleart werden. Hast du es schon so versucht?
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 17-02-2010, 18:13
dduton
 Registrierter Benutzer
Links : Onlinestatus : dduton ist offline
Registriert seit: Apr 2009
Beiträge: 6
dduton ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ok gerne, weiss allerdings nicht wie ich das angehen soll.

Die gesamte Breite der Seite ist dynamisch (passt sich an Fenstergrösse an).
Die höhe der beiden Kolonnen sollte sich dem Inhalt anpassen.

Genau dort würde ich dann Probleme mit der absoluten Positionierung bekommen, oder? Ich verliere ja die Information, wie breit das Content div gerade ist.

Daniel

Geändert von dduton (17-02-2010 um 21:11 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 17-02-2010, 18:17
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Such mal nach liquid columns. Das sollte dein Problem beheben.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #7 (permalink)  
Alt 17-02-2010, 18:28
dduton
 Registrierter Benutzer
Links : Onlinestatus : dduton ist offline
Registriert seit: Apr 2009
Beiträge: 6
dduton ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Schaue mir das jetzt genauer an.
Melde mich Morgen zurück.

Vielen Dank erst mal

Daniel
Mit Zitat antworten
  #8 (permalink)  
Alt 17-02-2010, 18:41
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von dduton Beitrag anzeigen
Genau dort würde ich dann Probleme mit der absoluten Positionierung bekommen, oder?
Eigentlich nicht. Absolute Positionierung kann man auch prozentual angeben. Das Wort "absolut" heißt in dem Falle nur, dass sich das Element nicht mehr im Flow befindet, sondern vom Designer frei positioniert werden kann.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #9 (permalink)  
Alt 17-02-2010, 19:40
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Floats kann man zwar verschachteln, aber ein clear wirkt sich immer auf alle Floats aus
Nein, nicht auf floats in anderen block formatting contexts.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #10 (permalink)  
Alt 17-02-2010, 21:08
dduton
 Registrierter Benutzer
Links : Onlinestatus : dduton ist offline
Registriert seit: Apr 2009
Beiträge: 6
dduton ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@wahsaga:
Habe jetzt mal "Block Formatting Context" nachgeschlagen.
Und bin dann auf diese Seite gestossen klick.
Um einen neuen "Block Formatting Context" zu starten muss man also ein bestimmtes Attribut setzen. Habe meinem Content div jetzt das "overflow: auto" hinzugefügt und tada es funktioniert.

Hier die finale Lösung:
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Conforming XHTML 1.1 Template</title>
</
head>
<
body>

<!-- 
Menu -->
<
div style="float: left; width: 100px; background-color: #F00;">
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
    
Left Col<br />
</
div>

<!-- 
Content -->
<
div style="background-color: #F39; margin: 10px; margin-left: 120px; overflow: auto;">

<!-- 
Header -->
<
div style="background-color: #0F0; margin: 10px;">
    
Header
</div>

<!-- 
2 Kolonnen -->
<
div style="float: left; width: 40%; background-color: #999; margin: 10px;">
    
Col1
</div>
<
div style="float: left; width: 40%; background-color: #CCC; margin: 10px;">
    
Col2<br />
    
Col2<br />
    
Col2<br />
</
div>

<!-- 
Footer -->
<
div style="background-color: #0FF; clear: both; margin: 10px;">
    
Footer
</div>

</
div>

</
body>
</
html
@Kropff:
Die "Fluid Columns" werde ich mir aber auch noch anschauen, man kann nur dazulernen

@AmicaNoctis:
Stimmt, prozentual würde eventuell funktionieren. Habs jetzt mit "overflow: auto" gelöst.

Ich bedanke mich nochmal an alle die mir geholfen haben.

Daniel
Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
clear, css, float, kolonnen, verschachtelt


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Items in verschachtelten Kategorien ausgeben kuebel-s PHP Developer Forum 8 18-03-2007 21:20
Probleme mit verschachtelten IF-Anweisungen Alex.Th PHP Developer Forum 6 07-02-2007 14:18
PHP vergleicht Floats fehlerhaft phpaule PHP Developer Forum 8 25-08-2006 22:50
XML/XSL-Problem mit verschachtelten Absätzen ratio-x XML 5 01-03-2006 17:37
Frage Zu Ner Verschachtelten Abfrage bofan SQL / Datenbanken 0 24-02-2006 17:23

Themen-Optionen
Thema bewerten
Thema bewerten:

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

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


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 05:32 Uhr.