seitliche Navigation

[assmaje]

Hi, :)

wie kann ich eine "seitliche Navigation" (siehe Bild) erstellen? Ich brauche nur mal einen Denkanstoß, da ich in Google nichts passendes gefunden habe.

 

[threadi]

Eine Navigation an der Stelle ist sicher kein Problem. Das Problem ist eher der senkrechte Texte darin. Das wird derzeit nur vom Internet Explorer über die CSS-Eigenschaft writing-mode unterstützt.

HTMLWorld - CSS: Microsoft Texteigenschaften

Alternative dazu wären nur Bilder für jeden Menüpunkt.

 

[assmaje]

Eine Navigation an der Stelle ist sicher kein Problem.

Genau das ist aber mein Problem. :/ Wie soll ich die seitlichen Buttons neben einer 720px breiten (mittigen) Box positionieren?

 

[ingoS]

Mach doch noch eine etwas größere mittige Box drumherum, die im linken Zwischenraum nichts und im rechten Zwischenraum die Navigation enthält.

 

[neuroleptika]

Genau das ist aber mein Problem. :/ Wie soll ich die seitlichen Buttons neben einer 720px breiten (mittigen) Box positionieren?

Das ist doch ein ganz normaler Zweispalter.

<div id="spalten">
<div id="inhalt">
<h1>Einfacher Zweispalter</h1>

</div>
<ul id="navigation">
 <li>
  <a href="#">
   <img src="bild1.gif"  alt="Link1" width="20" height="100" />
  </a>
</li>
</ul>
</div>

#spalten bekommt eine Höhe von min-width 100%, ein background-image, width und margin:auto.
Dann die beiden Spalten floaten und clearen.

 

[threadi]

Oder: eine mittige Box und in dieser per absoluter Positionierung das Menü, leicht außerhalb der Box angebracht.

 

[prm]

Vielleicht hilft dir das weiter?
Navigation mit ausfahrbaren Registern

 

[assmaje]

Danke für alle Antworten!!
Jedoch gibt es noch einige Probleme, die man sich hier ansehen kann... :(

 

[thuemmy]

Das einzige Problem was mir so auf die Schnell auffällt. Du hast kein Problem angegeben. Dürfen wir uns eins aussuchen?

Gruß thuemmy

 

[neuroleptika]

Ich suche mir mal das Problem mit dem absolut positionierten Footer aus:

#footer
{
 position:absolute;
 bottom:0px;
 width:700px;
 font:10px/30px Arial;
 text-align:center;
 background:#FF8C00;
}

#footer richtest du bottom von body / html aus. Also an der Unterkante vom Viewpoint.
Er kann beim scrollen nicht mitrutschen, da er unabhängig von den anderen Elementen steht.
Wenn er immer unterhalb vom Inhalt stehen soll braucht er kein position:absolute.

Ich kann mir denken was du damit erreichen willst.
Wissen kann ich das aber nicht.

Vielleicht beschreibst du wozu das position:absolute im Footer dienen soll oder ob du ein anders Problem meinst.

 

[thuemmy]

Dann suche ich mir mal das Problem mit der #side_navi aus.Wenn Du #website links floatest, dann kommst Du zu Deinem ersehnten Ziel, oder zumindest verschwindet es nicht mehr unterhalb von #website.

Gruß thuemmy

P.S. Findet noch jemand ein Problem?

 

[assmaje]

Ich suche mir mal das Problem mit dem absolut positionierten Footer aus:

#footer
{
 position:absolute;
 bottom:0px;
 width:700px;
 font:10px/30px Arial;
 text-align:center;
 background:#FF8C00;
}

#footer richtest du bottom von body / html aus. Also an der Unterkante vom Viewpoint.
Er kann beim scrollen nicht mitrutschen, da er unabhängig von den anderen Elementen steht.
Wenn er immer unterhalb vom Inhalt stehen soll braucht er kein position:absolute.

Ich kann mir denken was du damit erreichen willst.
Wissen kann ich das aber nicht.

Vielleicht beschreibst du wozu das position:absolute im Footer dienen soll oder ob du ein anders Problem meinst.

Der Footer soll immer am unteren Ende des Viewports sein, falls der Inhalt eine kleinere Höhe als 100% hat. Wenn der Inhalt jedoch höher als 100% ist, soll er mitscrollen. In diesem Thread hast du mir den zum Footer zgehörigen Code gegeben/erklärt. Hat auch einwandfrei geklappt - bis jetzt. :) Normalerweise müsste ich #website position:relative; verpassen, damit sich der Footer entsprechend verhält, was in diesem Fall aber nicht funktioniert.

Dann suche ich mir mal das Problem mit der #side_navi aus.Wenn Du #website links floatest, dann kommst Du zu Deinem ersehnten Ziel, oder zumindest verschwindet es nicht mehr unterhalb von #website.

Danke!! :)

Das einzige Problem was mir so auf die Schnell auffällt. Du hast kein Problem angegeben. Dürfen wir uns eins aussuchen? :grin:

Naja, #website (und damit #content) hat keinen weißen Hintergrund (sondern nur dort, wo Inhalt steht), obwohl der dazugehörige Code vorhanden ist... löst sich wahrscheinlich automatisch, wenn das Footerproblem behoben ist. :)

 

[neuroleptika]

...
Naja, #website (und damit #content) hat keinen weißen Hintergrund (sondern nur dort, wo Inhalt steht), obwohl der dazugehörige Code vorhanden ist... löst sich wahrscheinlich automatisch, wenn das Footerproblem behoben ist. :)

Eher umgekehrt (Wenn man das überhaupt so sagen mag).
Ohne ein funktionierendes min-height kann man das Problem mit dem Footer nicht lösen.
Wer das Problem mit dem Footer lösen will, muß also auch dein min-height-Problem lösen.

Gucke mal:
http://css-spalten.red-rod.net/test/beispiel/beispiel15.htm

 

[assmaje]

Eher umgekehrt (Wenn man das überhaupt so sagen mag).
Ohne ein funktionierendes min-height kann man das Problem mit dem Footer nicht lösen.
Wer das Problem mit dem Footer lösen will, muß also auch dein min-height-Problem lösen.

Gucke mal:
http://css-spalten.red-rod.net/test/beispiel/beispiel15.htm

Danke... :shock:

Es funktioniert jetzt alles bis auf den weißen Hintergrund. Warum wird er transparent angezeigt?

#website
{
  width:700px;
  background:#FFFFFF;
}

PSP-SPIELEBASE.de | Willkommen

 

[neuroleptika]

Faux Colums:

#wrapper
{
  position:relative;
  width:720px;
  min-height:100%;
  margin:0px auto;
[COLOR=DarkRed]background-image: url(http://css-spalten.red-rod.net/test/beispiel/images/bg-hor-780px-weiss.gif);
background-repeat: repeat-y;[/COLOR]

}

Die Grafik anpassen.
Für den Fall, daß keine Grafiken angezeigt werden können, solltest du trotzdem eine passende Hintergrundfarbe angeben.

 

[assmaje]

Danke!! :)