[Erledigt] Variable Spaltenlänge bestimmen

dreamcatcher · 13.04.2011, 17:42

Hallo,

ich habe folgendes:

PHP-Code:

  [html]

        <div id="body">

            <div id="sub_menue">

                <ul>

                    <li>Item 1</li>

                    <li>Item 2</li>

                    <li>Item 3</li>

                </ul>

            </div>

            

            <div id="main_content">

                <p>Bla</p>

            </div>

        </div>

[html]

Nun möchte ich, dass die 2 inneren Container immer die gleiche Höhe haben.

Beispiel:
main_content hat ganz viel Text, dadurch dass sub_menue jedoch so klein ist wird das gesamte Design demoliert.

Per google stieß ich auf folgenden Post:
http://www.hackerboard.de/web-design...tml#post262098

Meine 1. Frage ist nun, ist dies die "Best Practise" Variante ?
2. sehe ich z.B. auf anderen Seiten kein extra Container wie

PHP-Code:

      <div style="clear: both"></div><!-- clearendes Element, wird benötigt, wenn die Spalten floaten -->

und trotzdem erreichen sie eine Variable Menühöhe, daher kann ich mir nicht wirklich vorstellen dass dies eine sehr gute Lösung ist.
Wie löst ihr solch eine Problemstellung (Menü und Inhalt sollen gleich lang sein, sich quasi gegenseitig anpassen) ?

ChrisB · 13.04.2011, 17:54

Zitat:

Zitat von dreamcatcher

Meine 1. Frage ist nun, ist dies die "Best Practise" Variante ?

Es gibt einige Ansätze dafür - welchen du bevorzugst, musst du selber beurteilen.
Stichworte sind faux columns, equal height columns, etc.

Zitat:

2. sehe ich z.B. auf anderen Seiten kein extra Container wie [...]

Zum Clearen von Floats braucht man in modernen Browsern keine zusätzlichen Elemente im Markup, Stichwort Pseudo-Elemente.

nikosch · 13.04.2011, 17:55

mit html alleine nicht machbar -> Google: faux columns

dreamcatcher · 13.04.2011, 18:48

Danke, das Stichwort hat mich zum Ziel gebracht:

http://www.aspnetzone.de/blogs/peter...eich-hoch.aspx

sowie

http://www.alistapart.com/articles/fauxcolumns

Zitat:

Zitat von nikosch

mit html alleine nicht machbar -> Google: faux columns

In manchen Fällen wohl rein mit XHTML & CSS realisierbar:
http://www.aspnetzone.de/blogs/juerg...s-und-css.aspx

nikosch · 13.04.2011, 19:13

Hmm, scheint tatsächlich zu funktionieren. Bis auf dass man kein Floating im Content verwenden kann - genauer kein Clearing…

ChrisB · 13.04.2011, 21:43

Zitat:

Zitat von nikosch

Bis auf dass man kein Floating im Content verwenden kann - genauer kein Clearing…

Doch, kann man - siehe http://aktuell.de.selfhtml.org/weblo...-verschachteln

nikosch · 13.04.2011, 22:36

Theoretisch toll, Chrome reagiert hier leider allergisch.

ChrisB · 13.04.2011, 22:48

Zitat:

Zitat von nikosch

Theoretisch toll, Chrome reagiert hier leider allergisch.

Kann ich nicht nachvollziehen, das Beispiel #13 zeigt bei mir in Opera, Firefox und Chrome das gleiche Verhalten aus.

Btw., deine Problembeschreibung hier gerade ist irgendwie ziemlich synonym zu „funzt nich“, mein Lieber

nikosch · 13.04.2011, 22:57

Ich habe beispiel_margin.htm aus http://www.aspnetzone.de/blogs/juerg...s-und-css.aspx mal mit dem Selfthml Tipp gekreuzt: col3 mit einem overflow:hidden resp. auto versehen und im col3 mal ein Float angelegt: Bild mit Text in einem Paragraph. Und unter Chrome bricht jetzt die Spaltenbreite von col3 ein und der rechte Rahmen hängt jetzt irgendwo.

funzzt nicht!!

ChrisB · 14.04.2011, 00:14

Zitat:

Zitat von nikosch

Ich habe beispiel_margin.htm [...] mal mit dem Selfthml Tipp gekreuzt

Wenn du dazu mal eine Testseite zur Verfügung stellst, schaue ich mir das gerne mal an ...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Mehrere Querys hintereinander funktionieren nicht	wernersbacher	Datenbanken	3	14.03.2011 23:08
Probleme bei Variable bestimmen	Chrizn	PHP Tipps 2010	4	13.08.2010 16:50
[Erledigt] Variable in foreach erweitern ohne zurücksetzen	Polliny	PHP Tipps 2010	2	23.06.2010 10:13
[Erledigt] sql - Variable ??	Exception	PHP Tipps 2010	9	20.02.2010 04:03
Problem Undefined variable:	banbanban	PHP Tipps 2009	5	04.03.2009 17:55
Variable per Session übergeben? Spricht etwas dagegen?	Lapje	PHP Tipps 2008	6	20.10.2008 21:49
Undefined variable Undefined property: block	xxJJxx	PHP Tipps 2008	16	05.08.2008 15:30
Variable in $this Variable der Klasse benutzen		PHP Tipps 2006	5	03.05.2006 20:04
Inhalt per Variable bestimmen (foo.php?inhalt)		PHP Tipps 2007	3	11.01.2006 22:12
Variable durch 2. Variable bestimmen	Quagga	PHP Tipps 2005-2	11	26.10.2005 17:34
Session Variable oder Globale Variable ?		PHP Tipps 2005-2	3	27.06.2005 21:49
[Erledigt] Variable in DB		Datenbanken	1	17.04.2005 15:01
If variable $1 vorhanden dann nimm die, if variable $2 ....		PHP Tipps 2005	8	13.02.2005 20:16
Variable in einer Variable	Beatbox	PHP Tipps 2005	7	15.01.2005 15:55
Warum wird Variable nicht übergeben???	Anuschka	PHP Tipps 2005	2	06.01.2005 13:22

13.04.2011, 17:42
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	[Erledigt] Variable Spaltenlänge bestimmen Hallo, ich habe folgendes: PHP-Code: [html] <div id="body"> <div id="sub_menue"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <div id="main_content"> <p>Bla</p> </div> </div> [html] Nun möchte ich, dass die 2 inneren Container immer die gleiche Höhe haben. Beispiel: main_content hat ganz viel Text, dadurch dass sub_menue jedoch so klein ist wird das gesamte Design demoliert. Per google stieß ich auf folgenden Post: http://www.hackerboard.de/web-design...tml#post262098 Meine 1. Frage ist nun, ist dies die "Best Practise" Variante ? 2. sehe ich z.B. auf anderen Seiten kein extra Container wie PHP-Code: `<div style="clear: both"></div><!-- clearendes Element, wird benötigt, wenn die Spalten floaten -->` und trotzdem erreichen sie eine Variable Menühöhe, daher kann ich mir nicht wirklich vorstellen dass dies eine sehr gute Lösung ist. Wie löst ihr solch eine Problemstellung (Menü und Inhalt sollen gleich lang sein, sich quasi gegenseitig anpassen) ?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.04.2011, 17:55
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	mit html alleine nicht machbar -> Google: faux columns __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

13.04.2011, 19:13
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Hmm, scheint tatsächlich zu funktionieren. Bis auf dass man kein Floating im Content verwenden kann - genauer kein Clearing… __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

13.04.2011, 22:36
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Theoretisch toll, Chrome reagiert hier leider allergisch. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

13.04.2011, 22:57
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich habe beispiel_margin.htm aus http://www.aspnetzone.de/blogs/juerg...s-und-css.aspx mal mit dem Selfthml Tipp gekreuzt: col3 mit einem overflow:hidden resp. auto versehen und im col3 mal ein Float angelegt: Bild mit Text in einem Paragraph. Und unter Chrome bricht jetzt die Spaltenbreite von col3 ein und der rechte Rahmen hängt jetzt irgendwo. funzzt nicht!! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --