nicht angemeldet
Content Bereich und Navigation
Gunnar Bittersmann
Kai345Hallo alle zusammen,
Ich bin gerade am umsetzen eines Design Entwurfs von mir. Dabei habe ich die Navigation so geplant, dass sie rechts zum Content ausgerichtet ist. Wie ich mir das vorstelle kann man hier ganz gut sehen: http://www.simpsons-fansite.de/design/design.jpg
Bislang habe ich es soweit alles umgesetzt: http://www.simpsons-fansite.de/design/
Jetzt komme ich mit dem Ausrichten der Navigation aber leider nicht so ganz klar. Mag mir da vielleicht jemand einen Tipp geben?
Und vielleicht habt ihr ja auch einen Tipp für mich wie ich am besten den grünen Verlauf von dem Content Bereich umsetze. Als Hintergrund Farbe wäre dies ja kein Problem aber ich weiß gerade nicht wie ich das mit dem Farbverlauf am besten hin bekomme und dem Rand.
Freue mich über Antworten :)
Gruß
Moritz
-
Hello out there!
Bislang habe ich es soweit alles umgesetzt: http://www.simpsons-fansite.de/design/
Verweise einbinden, danke.
<?xml version="1.0" encoding="ISO-8859-1"?>Damit schaltest du IE < 7 in den Quirks-Modus. Willst du das wirklich?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">XHTML 1.1 solltest du nicht verwenden, sondern XHTML 1.0 Strict. Gründe im Forumarchiv.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">Da ist aber schon einer: In XHTML 1.1 gibst es kein 'lang'-Attribut (aus dem XHTML-Namensraum) mehr; das 'xml:lang'-Attribut wird aber nur bei Verarbeitung als XML (Content-Type 'application/xhtml+xml') beachtet; bei 'text/html' ist keine derartige Sprachangabe möglich.
Verwende XHTML 1.0 Strict. Und sowohl 'lang' als auch 'xml:lang'.
~~~html <div id="header">
<p>Design Entwurf</p>
</div>"ich möchte eine überschrift sein, bitte bitte lass mich ein <hX> sein!" (wahsaga) [[ZITAT508](http://community.de.selfhtml.org/zitatesammlung/zitat508)] > Jetzt komme ich mit dem Ausrichten der Navigation aber leider nicht so ganz klar. Von deinen diesbezüglichen Versuchen ist nicht viel zu sehen: ~~~css #navigation { display: none; }Mag mir da vielleicht jemand einen Tipp geben?
SELFHTML: Mehrspaltige CSS-basierte Layouts
Und vielleicht habt ihr ja auch einen Tipp für mich wie ich am besten den grünen Verlauf von dem Content Bereich umsetze. Als Hintergrund Farbe wäre dies ja kein Problem
Hintergrungbild, muss nur 1 Pixel breit sein, horizontal wiederholt; Hintergrundfarbe entspricht der ganz unten im Bild.
aber ich weiß gerade nicht wie ich das mit dem Farbverlauf am besten hin bekomme und dem Rand.
Was hat der Rand mit dem Hintergrundbild zu tun?
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hallo und danke für die Antwort :)
Damit schaltest du IE < 7 in den Quirks-Modus. Willst du das wirklich?
Nein, dass wollte ich nicht damit erreichen. Danke für den Tipp und auch den Tipp mit xhtml 1.1 ich habe das gleich mal geändert.
Von deinen diesbezüglichen Versuchen ist nicht viel zu sehen:
Ich hatte es zuerst so probiert:
#navigation { position: absolute; width: 100px; top: 270px; left: 65%; right: 35%; }Aber wie man auch in dem aktualisiertem Beispiel sehen kann funktioniert das nicht wirklich. Die Navigation passt sich nicht wirklich in den Textfluss ein. Außerdem habe ich das Gefühl, dass meine Lösung nur auf meiner Auflösung richtig funktioniert.
Mit der float Lösung habe ich es dann auch noch probiert. Aber irgendwie klappt es auch dort nicht so recht. Siehe hier. Der Text verschwindet einfach unter dem anderem layer. Und passt sich auch nicht an. Ich weiß jetzt leider nicht was ich dort falsch mache :(
Hintergrungbild, muss nur 1 Pixel breit sein, horizontal wiederholt; Hintergrundfarbe entspricht der ganz unten im Bild.
ok, danke das ist nun klar :) Habe das gleich mal umgesetzt.
Was hat der Rand mit dem Hintergrundbild zu tun?
Eigentlich nichts. Nur das der Rand irgendwie sich dem Verlauf angepasst hat. Also da sind sozusagen zwei Pixel rand mit unterschiedlichen Farbwerten.
Hast du vielleicht auch noch einen Tipp für mich wie ich es erreichen kann, dass der Content bereich unten immer 10 px vom rand unten entfernt ist? Wenn die Seite anfängt zu scrollen dann klebt das Element immer unten fest und das sieht gar nicht schön aus wie ich finde.
Danke schonmal für deine Hilfe.
Gruß
Moritz Wörle-
Grütze .. äh ... Grüße!
Mit der float Lösung habe ich es dann auch noch probiert. Aber irgendwie klappt es auch dort nicht so recht. Siehe hier. Der Text verschwindet einfach unter dem anderem layer. Und passt sich auch nicht an. Ich weiß jetzt leider nicht was ich dort falsch mache :(
Deaktiviere mal position: relative im bereich #content, das holt die Navigation nach vorne. Z-index dürfte dann auch nicht mehr notwendig sein, zumindest hier in Opera geht es auch ohne.
Ach so .. für die Navigation brauchst du kein <div id="navigation">, das kannst du auch direkt auf die UL anwenden. CSS zusammenfassen (siehe Kurzformen border-color border-width padding background usw.) kannst du ja dann machen, wenn alles so funktioniert wie du es dir vorstellst.
Cü
Kai--
Der vertuschte Gefahrstoff: Dihydrogenmonoxid
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
Hallo,
Deaktiviere mal position: relative im bereich #content, das holt die Navigation nach vorne. Z-index dürfte dann auch nicht mehr notwendig sein, zumindest hier in Opera geht es auch ohne.
gut, dann stimmt zwar der Abstand nach oben nicht mehr so ganz aber immerhin wird nun die Navigation richtig angezeigt.
Nun fällt mir aber auf, dass ich nun das Probleme habe, dass ich der Abstand nach Rechts ja fix ist. Wenn ich jetzt die Auflösung ändere dann ändert sich ja auch der Abstand nach Rechts und dadurch auch die Position der Navigation. Ihh. Das wollte ich nicht erreichen. Wie kann man denn das umgehen?
-
-
-
SELFHTML: Mehrspaltige CSS-basierte Layouts
Sorry, vielleicht sollte man sich mal besser anschauen was für Tipps einem angeboten werden.
Das hier sieht jedenfalls verdammt gut nach dem aus was ich suchen: http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htmEntschuldige bitte aber jetzt nachdem ich das gesehen habe klappt es schon viel besser so wie ich mir das vorstelle :)
-
Grütze .. äh ... Grüße!
Entschuldige bitte aber jetzt nachdem ich das gesehen habe klappt es schon viel besser so wie ich mir das vorstelle :)
Hier wäre noch ein weiteres Beispiel (hier zwar mit links gesetztem Menü, aber das anzupassen ist ja kein Problem. Nun kannst du dir aus den Beispielen was zusammenbasteln. ;)
Cü
Kai--
Der vertuschte Gefahrstoff: Dihydrogenmonoxid
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
Hier wäre noch ein weiteres Beispiel
Danke :)
Ich habe jetzt mal wieder das hochgeladen was ich geschafft habe. Wie man sehen kann komme ich meinem Ziel näher. Aber was ich jetzt noch nicht ganz geschafft habe ist das der Trennstrich wie in meinem Beispiel angezeigt wird.
Außerdem funktioniert der Hintergrund im IE nicht so wie er soll. Wodran mag das liegen? Ich habe das Gefühl, dass er das repeat-x ignoriert.
-
So, ich komme meinem Ziel immer näher. Nun funktioniert auch das mit dem Trennstrich. Oben und unten die Lücke habe ich jetzt zwar nicht drinnen. Falls da noch jemand einen Tipp hat würde ich mich freuen. Ansonsten sieht es schon nicht schlecht aus wie ich finde.
Das einzigste Problem was ich jetzt noch habe ist der IE 7 der das repeat-x von dem content verlauf ignoriert. Was läuft da falsch?
-
-
-
-
