nicht angemeldet
2 divs gleich lang
Hallo,
an meinem neuen Design "http://www.timwoelfle.de/newdesign/home.php" gibt es 4 divs, das Logo, der Titel, die Navigation und der Inhalt. Nun sollen aber Navigation und Inhalt immer gleich lang sein, wie kann ich dass erreichen?
Vielen Dank,
Tim.
-
Hallo Tim Wölfle,
Hallo,
an meinem neuen Design "http://www.timwoelfle.de/newdesign/home.php"*schock* bitte, bitte verwende andere Farben - die jetztigen sind zu grell.
Nun sollen aber Navigation und Inhalt immer gleich lang sein,
warum? der Inhalt hat doch immer eine andere Länge, und die Navigation dürfte doch immer mehr oder weniger gleichlang sein - also warum sollen die geleich lang sein?
wie kann ich dass erreichen?
außer beiden ein heigth:XXpx; zu verpassen, wüßte ich nicht wie.
Grüße aus Nürnberg
Tobias-
Hollo Tobias,
*schock* bitte, bitte verwende andere Farben - die jetztigen sind zu grell.
Na mal schauen...
warum? der Inhalt hat doch immer eine andere Länge, und die
Navigation dürfte doch immer mehr oder weniger gleichlang sein -
also warum sollen die geleich lang sein?Ja, aber ich finde es sieht besser aus wenn beides auf gleicher höhre endet.
außer beiden ein heigth:XXpx; zu verpassen, wüßte ich nicht wie.
Das geht glaube ich nicht, weil der Inhalt ja immer eine andere Höhe hat...
So, viel Spaß,
Tim.-
Hallo Tim,
Ja, aber ich finde es sieht besser aus wenn beides auf gleicher höhre endet.
ich nicht, das sieht doch irgendwie bescheiden aus, wenn das div mit der Navigation halb leer da an der Seite rumhängt...
außer beiden ein heigth:XXpx; zu verpassen, wüßte ich nicht wie.
Das geht glaube ich nicht, weil der Inhalt ja immer eine andere Höhe hat...das ist doch egal, das height:...; muss doch im div stehen, oder habe ich jetzt irgendwo einen Denkfehler?
Grüße aus Nürnberg
Tobias-
Hallo Tobias Hallo Tim,
Ja, aber ich finde es sieht besser aus wenn beides auf gleicher höhre endet.
ich nicht, das sieht doch irgendwie bescheiden aus, wenn das div mit der Navigation halb leer da an der Seite rumhängt...außer beiden ein heigth:XXpx; zu verpassen, wüßte ich nicht wie.
Das geht glaube ich nicht, weil der Inhalt ja immer eine andere Höhe hat...
das ist doch egal, das height:...; muss doch im div stehen, oder habe ich jetzt irgendwo einen Denkfehler?Also wenn ich mich richtig erinnere, ist es doch so, daß das div die Höhe hat, die mit mit dem Wert der Eigenschaft 'height' angegeben ist. Aber nur solange der Innhalt weniger Platz braucht, als bei height zur Verfügung gestellt.
Sobald der Innhalt mehr Platz braucht, wird das div nach unten verlängert.
Wenn man möchte kann man das 'Verlängern' mit der Eigenschaft overflow verhindern.
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#overflow
http://www.styleassistant.de/tips/beispiel73.htmGrüße aus Nürnberg,
HarryS
-
-
-
-
Moin
an meinem neuen Design
inwiefern kann ein Design dynamisch sein?
Gruesse
Wilhelm--
Wozu baucht der Mensch eine Signatur?
[x]weil er witzig sein will [x]weil er kreatives Denken vermitteln will? [x]weil er so wichtig ist? -
Moin!
Hallo,
an meinem neuen Design "http://www.timwoelfle.de/newdesign/home.php" gibt es 4 divs, das Logo, der Titel, die Navigation und der Inhalt. Nun sollen aber Navigation und Inhalt immer gleich lang sein, wie kann ich dass erreichen?Dein Design ist ein typisches Tabellendesign - nur eben ohne Tabellen.
Du hast die Wahl: Entweder stellst du auf Tabellen um - dann orientiert sich die Ausdehnung der Zeile "Navigation&Inhalt" am längeren von beiden, oder du stellst dein Design so um, dass du diese Notwendigkeit des Gleichlang nicht mehr hast. So wie es jetzt ist, sollte es jedenfalls nicht bleiben.
Ich weiß natürlich nicht, in welchen Bereichen dein Layout dynamisch sein soll, aber mit ein paar Tricks kriegt man trotzdem gleiche Längen bei beiden Spalten hin - zumindest optisch.
Was ich gerne mal anwende: Tricks mit Hintergrundbildern.
Schematisch sehen deine DIVs so aus:
+---------------------------+
|+-----+ |
||Menü | Inhalt |
|| | |
|+-----+ |
| |
| |
+---------------------------+Du kannst dem Div "Inhalt" ein Hintergrundbild geben, welches den orangenen Trennstreifen realisiert. Die Hintergrundfarbe des DIV ist gelb. Durch positionieren des Hintergrundbildes an der gewünschten Position und wiederholen nur in Y-Richtung (background-repeat:repeat-y) kriegst du einen senkrechten Streifen. Links davon wird dann das Menü platziert, und damit der Inhalt nicht nach links rüberläuft, gibst du dem Inhalts-DIV ein passendes Padding links, um Abstand zu halten.
- Sven Rautenberg
--
"Bei einer Geschichte gibt es immer vier Seiten: Deine Seite, ihre Seite, die Wahrheit und das, was wirklich passiert ist." (Rousseau)-
Hallo, Sven,
(...) mit ein paar Tricks kriegt man trotzdem gleiche Längen bei beiden Spalten hin - zumindest optisch.
Was ich gerne mal anwende: Tricks mit Hintergrundbildern.
Für manche Fälle mag das die vorzuziehende Realisierungsmöglichkeit sein.
Schematisch sehen deine DIVs so aus:
+---------------------------+
|+-----+ |
||Menü | Inhalt |
|| | |
|+-----+ |
| |
| |
+---------------------------+Ich würde eher ein folgendes Modell vorziehen, da es gewöhnliche Boxeffekte ohne Hintergrundbilder erlaubt und für die meisten Fälle vielseitiger ist (über den speziellen Fall will ich nicht mutmaßen):
+---------------------------+
|+-----+ +-----------------+|
||Menü | | Inhalt ||
|| | | ||
|+-----+ | ||
| | ||
| +-----------------+|
+---------------------------+(Schemazeichnung, die Bereiche haben im Endeffekt natürlich nicht alle Rahmen.)
Das Menü ist mit float und width gekennzeichnet und der Inhalt mit margin-left. Ein einfaches Beispiel: http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout3.html.
Du kannst dem Div "Inhalt" ein Hintergrundbild geben, welches den orangenen Trennstreifen realisiert. Die Hintergrundfarbe des DIV ist gelb. Durch positionieren des Hintergrundbildes an der gewünschten Position und wiederholen nur in Y-Richtung (background-repeat:repeat-y) kriegst du einen senkrechten Streifen. Links davon wird dann das Menü platziert, und damit der Inhalt nicht nach links rüberläuft, gibst du dem Inhalts-DIV ein passendes Padding links, um Abstand zu halten.
Ich würde es ähnlich, aber doch ein bisschen anders und einfacher lösen. Jan Eric macht es auf http://www.barrierefreies-webdesign.de/ vor. Sein Layout mit drei gleichlangen Spalten sieht schematisch folgendermaßen aus:
+---------------------------------------+
|+---------------------------+ +-------+|
||+-----+ +-----------------+| |Menü 2 ||
|||Menü | | Inhalt || | ||
||| | | || +-------+|
||+-----+ | || |
|| | || |
|| | || |
|| +-----------------+| |
|+---------------------------+ |
+---------------------------------------+Die Menüs sind jeweils mit float links beziehungsweise rechts ausgerichtet. Durch die umgebenden zusätzlichen Elemente wird eine Hintergrundfarbe definiert, welche im Inhaltsbereich wieder aufgehoben beziehungsweise überschrieben wird. Siehe auch http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout2.html. Wie das Beispiel zeigt, muss jedoch die mittlere Spalte am längsten sein, da sonst die float-Bereiche vertikal nach unten herausragen, diesbezügliche Untersuchungen siehe http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout.html.
Bisher habe ich es auch mit Workarounds nicht geschafft, bei dieser speziellen Aufgabenstellung mittels CSS die Flexibilität von Tabellenspalten zu erreichen.
Grüße,
Mathias--
»Im Kampf zwischen Dir und der Welt, sekundiere der Welt.
Man darf niemanden betrügen, auch nicht die Welt um ihren Sieg.«
Franz Kafka - http://www.kafka.org/projekt/nachlass2/ohg.html-
Moin!
Bisher habe ich es auch mit Workarounds nicht geschafft, bei dieser speziellen Aufgabenstellung mittels CSS die Flexibilität von Tabellenspalten zu erreichen.
Das liegt einfach daran, dass Tabellen einfach Möglichkeiten bieten, die andere Elemente nicht bieten. Sie sind halt Tabellen - das bedeutet, dass sie ein Raster erzeugen, welches sich am Inhalt orientiert - und zwar am Gesamtinhalt, nicht nur lokal an dem einer einzelnen Zelle.
Außerdem bieten nur Tabellen bei vertical-align Möglichkeiten wie Zentrieren über die gesamte Zellenhöhe. Bei allen anderen Elementen gilt die vertikale Ausrichtung nur für die einzelne Textzeile.
Man kommt also bei Designs, die explizit diese Tabellenfeatures nutzen, kaum um die Benutzung von Tabellen herum, oder man hat ziemlich viel Aufwand mit CSS. Es bleibt die Frage, was "besser" ist. Tabellen sind sicherlich leichter zu erstellen, aber unflexibel bei der Gestaltung des Quelltextes - deshalb kann es Probleme mit der Barrierefreiheit geben. CSS hingegen ist eigentlich optimal für eine barrierefreie Gestaltung ausgerichtet, allerdings kann es zu Problemen mit der exakten Umsetzung des Designs kommen.
- Sven Rautenberg
--
"Bei einer Geschichte gibt es immer vier Seiten: Deine Seite, ihre Seite, die Wahrheit und das, was wirklich passiert ist." (Rousseau)
-
-