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, 16: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, 16: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, 17: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, 17: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, 17: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 20:11 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 17-02-2010, 17: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, 17: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, 17: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, 18: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, 20: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 20:20
Probleme mit verschachtelten IF-Anweisungen Alex.Th PHP Developer Forum 6 07-02-2007 13:18
PHP vergleicht Floats fehlerhaft phpaule PHP Developer Forum 8 25-08-2006 21:50
XML/XSL-Problem mit verschachtelten Absätzen ratio-x XML 5 01-03-2006 16:37
Frage Zu Ner Verschachtelten Abfrage bofan SQL / Datenbanken 0 24-02-2006 16: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

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 14:33 Uhr.