nicht angemeldet
Div-Layer - Webseit Layout - Verzweiflung
StruppiHallo ihr!
Ich versuche hier die ganze Zeit ein bestimmtes Layout mit Div-Layern zusammen zu stellen, nur klappt es nicht :(
Ich hab folgendes Layout aufgetragen bekommen:
------------------------------------------------
| | Top mit Logo |
| | |
| |---------------------------------|
| Navigation | |
| | |
| | |
| | |
| | Inhalt |
| | |
|------------| |
|Navigation | |
|Untere Rand | |
------------------------------------------------
Ich wollte das alles mit Div-Layern aufbauen:
4. Layer: Navigation, Top, Navigation Unten, Inhalt
Der Navigation-Unterer Rand - Layer sollte immer beim Browser unten anstehen, egal welche Auflösung (>= 800x600).
Wenn ich alles mit Absoluten Werten angeb, dann ist das wieder nicht Auflösungsunabhängig (Das Logo und der Inhalt sollte immer zentriert zw. Navigation und Bildschirmrand rechts sein, wenns geht) und die Navigation unten rechts ist nur bei einer bestimmten Auflösung dort, wo sie hin soll.
Kann ich das was ich da machen soll überhaupt machen? Oder muss ich da Table oder Frames benützen, was ich eigentlich überhaupt nicht machen will!
Wäre nett wenn mir wer helfen könnte, weil ich krieg das nicht hin. Hab nur noch Codeschnipsel Salat :(
Danke
Emanuel
-
Hi,
das klingt nach einem typischem Tabellen-Layout. Mit "Layern" (genauer dem CSS-Box-Model) ist es zwar auch möglich aber nicht ohne Hacks/Tricks.
Ändere das Layout oder verwende Tabellen oder Du wirst Dich einige Tage intensiv mit CSS-Layouts beschäftigen müssen.
MfG
Danny -
hallo,
Kann ich das was ich da machen soll überhaupt machen?
Selbstverständlich.
Oder muss ich da Table oder Frames benützen
Nein.
Hab nur noch Codeschnipsel Salat :(
Dann zeig das doch mal bitte.
Grüße aus Berlin
Christoph S.
-
hallo,
Hi
Oder muss ich da Table oder Frames benützen
Nein.
Wenn man weiß wie :)
Hab nur noch Codeschnipsel Salat :(
Dann zeig das doch mal bitte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body><div style="float:left; width:180px; border:2px solid gray;">
links floatende Box
</div><div align="center" style="border:2px solid blue; height:120px">
Top Logo test
</div><div style="border:2px solid red; overflow: scroll">
Der Inhalt
</div><div style="position: fixed; bottom: 0">
Test
</div></body>
</html>Das hab ich gestern aus einem Selfhtml Beispiel zusammen gebracht, aber die Probleme noch:
- Position: fixed funktioniert im IE nicht
- Kann man die Navigation trotzdem nicht mitscrollen lassen und die untere Navigation unten hingeben?
- Kann man die linke Navigation irgendwie mit einem Background über die ganze Seite (von oben bis unten) versehen? Die Box ist ja nur so groß, wie der Inhalt.
Grüße aus Berlin
Christoph S.
Grüße aus Wien zurück
Emanuel
-
-
Ich versuche hier die ganze Zeit ein bestimmtes Layout mit Div-Layern zusammen zu stellen, nur klappt es nicht :(
Ich hab folgendes Layout aufgetragen bekommen:
| | Top mit Logo |
| | |
| |---------------------------------|
| Navigation | |
| | |
| | |
| | |
| | Inhalt |
| | |
|------------| |
|Navigation | |
|Untere Rand | |Ich kann mich meinem Vorredner nur anschliessen.
HTML/CSS setzen ein "fliessendes" Layout vorraus, alles was starr an einem bestimmten Ort zementiert werden soll kann Probleme bereiten. Wobei bei dir das vor allem auf die untere Navigation zutrifft, die zumindest in Standarkonformen Browsern mit position:fixed und bottom:0 umgesetzt werden könnte. Der Rest ist eigentlich einfach und sollte aus den CSS Beispielen von selfhtml ohne Probleme hergeleitet werden können.
Struppi.
-
Hallo ihr!
Ich versuche hier die ganze Zeit ein bestimmtes Layout mit Div-Layern zusammen zu stellen, nur klappt es nicht :(
Ich hab folgendes Layout aufgetragen bekommen:
| | Top mit Logo |
| | |
| |---------------------------------|
| Navigation | |
| | |
| | |
| | |
| | Inhalt |
| | |
|------------| |
|Navigation | |
|Untere Rand | |Nein, ich bin kein Experte und halte mich auch nicht für einen, möchte aber trotzdem versuchen, ein wenig zu helfen.
Auf den ersten Blick würde ich sagen, dass du Top und Inhalt in ein weiteres div packst, das du mit einem passenden margin-left versiehst. Alternativ kannst du diesem div auch ein float:right geben. Das sollte dann schon mal das Grundsätzliche erledigen.
Bis auf die "Navigation Untere Rand" habe ich so ein Layout (s. u.), allerdings mit einem zusätzlichen Fuß.
Für das Problem mit der Navigation, die fest unten links sitzen soll, gibt es ja eine Lösung, die dir schon andere verraten haben. (Bei Problemen mit dem IE hilft dort vielleicht Javascript in einer Browserweiche. Da der typische IE-Nutzer JavaScript nicht abschaltet, sollte es kein Problem sein. Für den der es doch gemacht hat, sitzt dieser Rand, dann vielleicht direkt unter der Navigation)
Das o. g. Layout findest du unter http://www.feuerwehr-holtsee.de/Neu/ in Bälde unter http://www.feuerwehr-holtsee.de. Das ist vielleicht ein bisschen unübersichtlich, weil das Layout in mehreren CSS-Dateien versteckt ist, aber mit Hilfe des Firefox und seinem DOM-Inspector findet man die wichtigen Elemente recht schnell.
BTW, wenn sich noch jemand dieses Layout ansieht: Kritik ist willkommen, ja erwünscht, da es mein erstes CSS-basierte Layout ist.
HTH
Claus-
BTW, wenn sich noch jemand dieses Layout ansieht: Kritik ist willkommen, ja erwünscht, da es mein erstes CSS-basierte Layout ist.
Oh Ja das mekr man schon. Das ist eine typische DIV Suppe.
<div id="SiteTitel">
Freiwillige Feuerwehr Holtsee
</div> <!-- SiteTitel -->Warum nicht <h1> statt <div id="SiteTitel">?
<ul id="Menue">
<li class="MenuItem"><a href="Dienstplan.php">Dienstplan</a></li>
...
</ul> <!-- #Menue -->Warum MenuItem? Menue#ul li ist doch eindeutig.
Ausserdem solltest du das CSS vor alten Browsern verstecken mit z.b. media=all oder import url(....) Ich hab hier einen IE 4 und damit ist die Seite kaum benutzbar.
Struppi.
-
BTW, wenn sich noch jemand dieses Layout ansieht: Kritik ist willkommen, ja erwünscht, da es mein erstes CSS-basierte Layout ist.
Oh Ja das mekr man schon. Das ist eine typische DIV Suppe.
<div id="SiteTitel">
Freiwillige Feuerwehr Holtsee
</div> <!-- SiteTitel -->Warum nicht <h1> statt <div id="SiteTitel">?
Weil dieses Element eine Mindesthöhe (die Höhe der Grafik daneben) haben soll und ich es nicht anders hinbekommen habe. Aber ich will mich da gerne nochmal versuchen. Mmh, sollte aber eigentlich klappen, da h1 auch ein Blockelement ist. Vielleicht ist's einfach nur historisch.
<ul id="Menue">
<li class="MenuItem"><a href="Dienstplan.php">Dienstplan</a></li>
...
</ul> <!-- #Menue -->Warum MenuItem? Menue#ul li ist doch eindeutig.
Du meinst ul#Menue, oder?
In dem Moment, wo ein Menüeintrag ausgewählt ist, wird er anders dargestellt und hat die Klasse "SelectedItem". Des weiteren wird bei Bedarf ein Untermenü angezeigt, etwa:
<li class="MenuItem"><a href="Link1.php">Link 1</a><li>
<li class="SelectedItem"><div>Link 2</div>
<ul class="SubMenue">
<li class="MenuItem"><a href="Link2_1.php">Link 2_1</a></li>
<li class="MenuItem"><a href="Link2_2.php">Link 2_2</a></li>
</ul>
</li>
<li class="MenuItem"><a href="Link3.php">Link 3</a><li><denk>Aber das müsste ich ja mit ul.SubMenu li auch gebacken kriegen.</denk> Aber müsste ich dann nicht zweimal dasselbe hinschreiben?
Ausserdem solltest du das CSS vor alten Browsern verstecken mit z.b. media=all oder import url(....) Ich hab hier einen IE 4 und damit ist die Seite kaum benutzbar.
Nun hat der typische Besucher unserer Seite keinen IE4 sondern doch 5 oder mehr. Ich will mir das aber gerne nochmal ansehen. Ich habe da allerdings ein massives Problem. Ich habe es zwar hinbekommen IE4 bei mir zu installieren mittels Jens Grochtdreis' Hinweisen (http://www.grochtdreis.de/weblog/index.php?id=C0_9_1), allerdings zeigt der IE4 nichts an. Also nicht nur meine Seite nicht sondern auch andere Seiten nicht. Ich muss da noch ein bisschen forschen.
Struppi.
Vielen Dank erstmal
Claus-
Warum MenuItem? Menue#ul li ist doch eindeutig.
Du meinst ul#Menue, oder?
[...] Des weiteren wird bei Bedarf ein Untermenü angezeigt, etwa:
<li class="MenuItem"><a href="Link1.php">Link 1</a><li>
<li class="SelectedItem"><div>Link 2</div>
<ul class="SubMenue">
<li class="MenuItem"><a href="Link2_1.php">Link 2_1</a></li>
<li class="MenuItem"><a href="Link2_2.php">Link 2_2</a></li>
</ul>
</li>
<li class="MenuItem"><a href="Link3.php">Link 3</a><li><denk>Aber das müsste ich ja mit ul.SubMenu li auch gebacken kriegen.</denk> Aber müsste ich dann nicht zweimal dasselbe hinschreiben?
ul#Menu li, ul.SubMenu li {}
sollte funktionieren, oder muss es
ul#Menu,ul.SubMenu li {}
heißen?Claus
-
<ul id="Menue">
<li class="MenuItem"><a href="Dienstplan.php">Dienstplan</a></li>
...
</ul> <!-- #Menue -->Warum MenuItem? Menue#ul li ist doch eindeutig.
Du meinst ul#Menue, oder?
Stimmt.
In dem Moment, wo ein Menüeintrag ausgewählt ist, wird er anders dargestellt und hat die Klasse "SelectedItem". Des weiteren wird bei Bedarf ein Untermenü angezeigt, etwa:
<li class="MenuItem"><a href="Link1.php">Link 1</a><li>
<li class="SelectedItem"><div>Link 2</div>
<ul class="SubMenue">
<li class="MenuItem"><a href="Link2_1.php">Link 2_1</a></li>
<li class="MenuItem"><a href="Link2_2.php">Link 2_2</a></li>
</ul>
</li>
<li class="MenuItem"><a href="Link3.php">Link 3</a><li>Dann brauchst du überhaupt keine Klassen.
<ul id="menue"> --> ul#menu {}
<li><a href="Link1.php">Link 1</a><li> --> ul#menue li bzw. ul#menue li a
<li><div>Link 2</div> --> ul#menue li div (oder besser ein Inline element)
<ul > --> ul#menue li ul
<li><a href="Link2_1.php">Link 2_1</a></li> --> ul#menue li ul li aNun hat der typische Besucher unserer Seite keinen IE4 sondern doch 5 oder mehr. Ich will mir das aber gerne nochmal ansehen. Ich habe da allerdings ein massives Problem. Ich habe es zwar hinbekommen IE4 bei mir zu installieren mittels Jens Grochtdreis' Hinweisen (http://www.grochtdreis.de/weblog/index.php?id=C0_9_1), allerdings zeigt der IE4 nichts an. Also nicht nur meine Seite nicht sondern auch andere Seiten nicht. Ich muss da noch ein bisschen forschen.
Versteck es lieber komplett (beim IE 4 mit import) es hat wenig Zweck sobald du anfängst irgendwas zu floaten.
Struppi.
-
<ul id="Menue">
<li class="MenuItem"><a href="Dienstplan.php">Dienstplan</a></li>
...
</ul> <!-- #Menue -->Warum MenuItem? Menue#ul li ist doch eindeutig.
Du meinst ul#Menue, oder?
Stimmt.
In dem Moment, wo ein Menüeintrag ausgewählt ist, wird er anders dargestellt und hat die Klasse "SelectedItem". Des weiteren wird bei Bedarf ein Untermenü angezeigt, etwa:
<li class="MenuItem"><a href="Link1.php">Link 1</a><li>
<li class="SelectedItem"><div>Link 2</div>
<ul class="SubMenue">
<li class="MenuItem"><a href="Link2_1.php">Link 2_1</a></li>
<li class="MenuItem"><a href="Link2_2.php">Link 2_2</a></li>
</ul>
</li>
<li class="MenuItem"><a href="Link3.php">Link 3</a><li>Dann brauchst du überhaupt keine Klassen.
Okay, brauchen vielleicht nicht. Aber warum sollte ich sie nicht benutzen? Es ist doch viel leichter nachzusehen, wie ich .MenuItem formatiert habe, als sich durch die Stylesheet-Definitionen zu quälen, um dann festzustellen, dass es "ul#menue li ul li" ist.
<ul id="menue"> --> ul#menu {}
<li><a href="Link1.php">Link 1</a><li> --> ul#menue li bzw. ul#menue li a
<li><div>Link 2</div> --> ul#menue li div (oder besser ein Inline element)
<ul > --> ul#menue li ul
<li><a href="Link2_1.php">Link 2_1</a></li> --> ul#menue li ul li aNun hat der typische Besucher unserer Seite keinen IE4 sondern doch 5 oder mehr. Ich will mir das aber gerne nochmal ansehen. Ich habe da allerdings ein massives Problem. Ich habe es zwar hinbekommen IE4 bei mir zu installieren mittels Jens Grochtdreis' Hinweisen (http://www.grochtdreis.de/weblog/index.php?id=C0_9_1), allerdings zeigt der IE4 nichts an. Also nicht nur meine Seite nicht sondern auch andere Seiten nicht. Ich muss da noch ein bisschen forschen.
Versteck es lieber komplett (beim IE 4 mit import) es hat wenig Zweck sobald du anfängst irgendwas zu floaten.
Ich habe auf die Schnelle nicht gefunden, wo steht, welcher Browser @import nicht versteht. Auf http://de.selfhtml.org/css/formate/einbinden.htm steht es jedenfalls nicht.
Struppi.
-
Hallo,
Dann brauchst du überhaupt keine Klassen.
Okay, brauchen vielleicht nicht. Aber warum sollte ich sie nicht benutzen?
Um den Code so schlank wie möglich zu halten.
Es ist doch viel leichter nachzusehen, wie ich .MenuItem formatiert habe, als sich durch die Stylesheet-Definitionen zu quälen, um dann festzustellen, dass es "ul#menue li ul li" ist.
Dafür kommentiert man das Stylesheet.
Ich habe auf die Schnelle nicht gefunden, wo steht, welcher Browser @import nicht versteht.
http://www.dithered.com/css_filters/css_only/import_double_quotes_no_url.html
http://www.dithered.com/css_filters/css_only/import_no_quotes.html
http://www.dithered.com/css_filters/css_only/import_double_quotes.htmlMathias
-
Moin Mathias,
Ich habe auf die Schnelle nicht gefunden, wo steht, welcher Browser @import nicht versteht.
http://www.dithered.com/css_filters/css_only/import_double_quotes_no_url.html
http://www.dithered.com/css_filters/css_only/import_no_quotes.html
http://www.dithered.com/css_filters/css_only/import_double_quotes.htmlDanke
Claus
-
-
-
-
-
-
-
Hallo nochmal!
Da ich keine Ahnung mehr hab, wie ich das machen soll, hier die Webseite, die von Frames auf CSS umgestellt werden soll:
www.marzek.at
Hat wer ne Idee, wie ich das mit CSS nachbauen kann?
Danke
Emanuel