php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit
Dynamisches Container-Div für floating Divs Dynamisches Container-Div für floating Divs
Wiki Registrieren Grundlagen Suchen Heutige Beiträge Alle Foren als gelesen markieren

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 14.09.2007, 10:48  
Erfahrener Benutzer
 
Registriert seit: 25.04.2005
Beiträge: 1.356
HStev zeigte ein beschämendes Verhalten in der Vergangenheit
Standard Dynamisches Container-Div für floating Divs
Servus,

ich hab ein Problem ich möchte gerne ein Container-Div mit einer festen Breite und variablen Höhe haben für einen Hauptbereich mit 3 Spalten, die 2 Spalten links sind mit float:left definiert die rechte mit float:right.
Werden aber innerhalb des mittleren Divs weitere Divs definiert gehen diese über die mittlere Spalte bzw. über das komplette Container-Div hinaus lässt sich das irgendwie so hinkriegen das alles in der Höhe mitwächst?
Wo liegt da mein Problem?

PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Div Problem</title>
<style type="text/css">
<!--

* {
    font-family: Times, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

body {
    font-family: Times, sans-serif;
    font-size: 14px;
    padding: 10px;
    margin: 0;
}

div.page {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    width: 900px;
    height: 800px;
}

div.header {
    height: 80px;
    width:     100%;
}

dif.footer {
    height: 30px;
    width: 100%;
}

div.middle {
    width: 100%;
    height: 690px;
}

div.left_menu {
    width: 190px;
    height: 100%;
    float: left;
}

div.main {
    float: left;
    height: 100%;
    width: 500px;
    background-color: orange;
}

div.right_menu {
    width: 190px;
    float: right;
    height: 100%;
}

//-->
</style>
</head>
<body>
<div class="page">
    <div class="header">Header</div>
    <div class="middle">
        <div class="left_menu">Left</div>
        <div class="main">
            <div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div>

            <div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div>

            <div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div>

        </div>
        <div class="right_menu">Right</div>
    </div>
    <div class="footer">Footer</div>
</div>
</body></html> 
ps: Bei den Problemen die bei Divs auftreten kann ich einerseits verstehen warum Table-Layouts immer noch sehr beliebt sind.
__________________
Gewisse Dinge behält man besser für sich, z.B. das man gewisse Dinge für sich behält.
HStev ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 14.09.2007, 12:39  
Erfahrener Benutzer
 
Registriert seit: 21.05.2008
Beiträge: 9.937
Zergling-new wird schon bald berühmt werden
Standard
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Div Problem</title>
<style type="text/css">
<!--

* {
    font-family: Times, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

body {
    font-family: Times, sans-serif;
    font-size: 14px;
    padding: 10px;
    margin: 0;
}

div.page {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    width: 900px;
    min-height: 800px;
}

div.header {
    height: 80px;
    width:     100%;
    background : yellow;
}

div.footer {
    height: 30px;
    width: 100%;
    background : purple;
}

div.middle {
    width: 100%;
    min-height: 690px;
}

div.left_menu {
    width: 190px;
    float: left;
    background : green;
}

div.main {
    float: left;
    height: 100%;
    width: 500px;
    background-color: orange;
}

div.right_menu {
    width: 190px;
    float: right;
    background : blue;
}

//-->
</style>
</head>
<body>
<div class="page">
    <div class="header">Header</div>
    <div class="middle">
        <div class="left_menu">Left</div>
        <div class="main">
            <div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div>

            <div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div>

            <div style="width: 400px; height: 300px; border: 1px solid red; margin: auto;">Ein Div</div>

        </div>
        <div class="right_menu">Right</div>
        <br style="clear:both" />
    </div>
    <div class="footer">Footer</div>
</div>
</body></html> 
Allerdings funktioniert min-height nicht ab allen Versionen und links und rechts ist keine Höhe definierbar, zumindest keine prozentuale. Warum weiß ich grad nicht, oft reichts ja aber, wenn der Inhalt die Spalten in der Höhe aufdrückt.

Vielleicht als Alternative:
http://www.yaml.de/
Zergling-new ist offline   Mit Zitat antworten
Antwort

« [Erledigt] Nach Seletauswahl neues Eingabefeld gehts in PHP? | JavaScript: Safari Browser: Problems »

Themen-Optionen
Thema bewerten
Thema bewerten:

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 an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[JS] Divs nach Datum sortieren cycap JavaScript, Ajax und mehr 24 16.07.2008 18:48
2 Div's zentrieren pfump HTML, Usability und Barrierefreiheit 7 24.04.2008 10:57
Formular mit DIVs Aris Sung HTML, Usability und Barrierefreiheit 2 25.11.2007 14:09
[CSS] Container in Container Igäl HTML, Usability und Barrierefreiheit 5 04.09.2007 11:29
CSS - Bild im div container überlappt andere container Buschdieb HTML, Usability und Barrierefreiheit 13 19.07.2007 23:17
DIV's untereinander -> Problem snatch-ic HTML, Usability und Barrierefreiheit 1 05.02.2007 12:39
IE6: Container mit Float dabei wird margin doppelt gewertet DonTermi HTML, Usability und Barrierefreiheit 1 11.01.2007 09:02
3 divs nebeneinander mit dynamisch gleicher Höhe HTML, Usability und Barrierefreiheit 19 18.01.2006 22:05
[Erledigt] Container im Firefox falsch dargestellt HTML, Usability und Barrierefreiheit 27 15.08.2005 23:18
&amp;lt;div&amp;gt;- container vertikal auf seite zentrieren HTML, Usability und Barrierefreiheit 3 08.05.2005 11:16
DIVs nebeneinander freitz HTML, Usability und Barrierefreiheit 4 21.04.2005 22:47
DIVs visible -> hidden beim Laden der Seite HTML, Usability und Barrierefreiheit 2 03.03.2005 22:20
[Erledigt] drei divs nebeneinander HTML, Usability und Barrierefreiheit 5 10.01.2005 20:27
Verschachtelung von DIV's bei unterschiedlichen Auflösungen HTML, Usability und Barrierefreiheit 8 24.12.2004 14:45
mehrere gleichnamige DIVs möglich? HTML, Usability und Barrierefreiheit 6 26.08.2004 11:56

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
dynamische div container, div container dynamisch, dynamische divs, floating divs, div dynamische höhe, css div header footer dynamisch, dynamischer div container, html container definieren, div container dynamische höhe, http://www.php.de/html-usability-und-barrierefreiheit/44773-dynamisches-container-div-fuer-floating-divs.html, float höhe dynamisch, css div dynamische höhe, div container dynamische höhe joomla, div float dynamische höhe, div höhe dynamisch float, dynamisches div, div container variable höhe, div dynamisch untereinander, divs float dynamische breite, dynamisch div container erstellen

Alle Zeitangaben in WEZ +2. Es ist jetzt 03:13 Uhr.

php.de - Das deutsche PHP-Forum - Kontakt - Impressum - Forenregeln - Archiv - Nach oben



Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum

Creative Commons License
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.