Navigation mit vertikaler Schrift

P

phoenixwebdesign

Grünschnabel
Hallo ihr Lieben,

ich habe folgendes Problem:

Ich möchte eine Page erstellen, die so eine Navigation hat wie auf dieser Seite:
http://www.homolka.cc.

Kann mir wer sagen, wie ich das hinbekomm?
Denk mal, nur mit CSS oder?
Und da bin ich noch ned wirklich erfahren.

Über jede Hilfe bin ich sehr dankbar!


LG
PHOENIX
 
Das ist schon klar.
Nur kenn ich mich da eben zu wenig aus, und wollte wissen, wie in etwa das quellcodetechnisch aussehen würde/muss...

Wäre lieb, wenn ich da was bekomm...

lg
 
Der HTML- und CSS-Code der genannten Seite ist frei einsehbar, um nachzuschauen, wie sich das quellcodetechnisch darstellt.

http://www.homolka.cc/ hat gesagt.:
HTML: 
<body id="homolka">

<div id="wrapper">
	<ul id="navigation">		
		<li><a href="/" id="nav-homolka" class="aktiv"><span>HOMOLKA</span></a></li>
		<li><a href="/?/photographie/" id="nav-photographie" class="inaktiv"><span>PHOTOGRAPHIE</span></a></li>
		<li><a href="/?/texte/" id="nav-texte" class="inaktiv"><span>TEXTE</span></a></li>
		<li><a href="/?/vita/" id="nav-vita" class="inaktiv"><span>VITA</span></a></li>
		<li><a href="/?/kontakt/" id="nav-kontakt" class="inaktiv"><span>KONTAKT</span></a></li>
		<li><a href="/?/links/" id="nav-links" class="inaktiv"><span>LINKS</span></a></li>
	</ul>
</div>

</body>
Zum Vergrößern anklicken....
http://www.homolka.cc/css/ho-common.css hat gesagt.:
CSS: 
ul#navigation
{
        margin: 0;
        padding: 40px 0 0 20px;
        background: url(../img/nav-titel.png) no-repeat 22px 11px;
        list-style: none;
        float: left;
}

ul#navigation li
{
        float: left;
        margin: 0;
        padding: 0;
}

ul#navigation li a
{
        display: block;
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        width: 35px;
        overflow: hidden;
}

ul#navigation li a#nav-homolka
{
        background-image: url(../img/nav-homolka.png);
        height: 197px;
        margin: 0 20px 0 0;
}

ul#navigation li a#nav-photographie
{
        background-image: url(../img/nav-photographie.png);
        height: 300px;
}

ul#navigation li a#nav-texte
{
        background-image: url(../img/nav-texte.png);
        height: 122px;
}

ul#navigation li a#nav-vita
{
        background-image: url(../img/nav-vita.png);
        height: 82px;
}

ul#navigation li a#nav-kontakt
{
        background-image: url(../img/nav-kontakt.png);
        height: 178px;
}

ul#navigation li a#nav-links
{
        background-image: url(../img/nav-links.png);
        height: 110px;
}

body#homolka div#wrapper
{
        background-image: url(../img/bg-wrapper-homolka.png);
}

body#photographie div#wrapper
{
        background-image: url(../img/bg-wrapper-photographie.png);
}

body#texte div#wrapper
{
        background-image: url(../img/bg-wrapper-texte.png);
}

body#vita div#wrapper
{
        background-image: url(../img/bg-wrapper-vita.png);
}

body#kontakt div#wrapper
{
        background-image: url(../img/bg-wrapper-kontakt.png);
}

body#links div#wrapper
{
        background-image: url(../img/bg-wrapper-links.png);
}

body#homolka div#wrapper ul#navigation li a
{
        background-position: 0px 0px;
}

body#homolka div#wrapper ul#navigation li a:hover,
body#homolka div#wrapper ul#navigation li a.aktiv
{
        background-position: -35px 0px;
}

body#photographie div#wrapper ul#navigation li a
{
        background-position: -70px 0px;
}

body#photographie div#wrapper ul#navigation li a:hover,
body#photographie div#wrapper ul#navigation li a.aktiv
{
        background-position: -105px 0px;
}

body#texte div#wrapper ul#navigation li a
{
        background-position: -140px 0px;
}

body#texte div#wrapper ul#navigation li a:hover,
body#texte div#wrapper ul#navigation li a.aktiv
{
        background-position: -175px 0px;
}

body#vita div#wrapper ul#navigation li a
{
        background-position: -210px 0px;
}

body#vita div#wrapper ul#navigation li a:hover,
body#vita div#wrapper ul#navigation li a.aktiv
{
        background-position: -245px 0px;
}

body#kontakt div#wrapper ul#navigation li a
{
        background-position: -280px 0px;
}

body#kontakt div#wrapper ul#navigation li a:hover,
body#kontakt div#wrapper ul#navigation li a.aktiv
{
        background-position: -315px 0px;
}

body#links div#wrapper ul#navigation li a
{
        background-position: -350px 0px;
}

body#links div#wrapper ul#navigation li a:hover,
body#links div#wrapper ul#navigation li a.aktiv
{
        background-position: -385px 0px;
}

ul#navigation li a span
{
        display: none;
}
Zum Vergrößern anklicken....


Desweiteren kommt hier Highlighting current page with CSS zum Einsatz, um in der Navigation den Link der aktuell geöffneten Seite "hervorzuheben."

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück