Moin Moin…
ich heiße André und bin gerade dabei eine eigene Homepage zu gestalten. Da ich bei der Erstellung der Seite bereits auf einige Probleme gestoßen bin, habe ich mir gedacht, mich in diesem Forum anzumelden, um bei Problemen einige Tipps und Hilfestellungen zu bekommen.
Zu meinem Problem: Auf meiner Homepage möchte ich eine horizontale Navigationsleiste und eine vertikale Informationsleiste verwenden. Beim Anordnen der Buttons in der hor.nav.Leiste bin ich auf folgendes Problem gestoßen… Die Anordnung des ersten Menuepunktes „Startseite“ klappt wunderbar. Die weiteren Punkte wie „Wassersport“, „Nautik“ und „Über mich“ werden jedoch nicht angezeigt. Woran kann das liegen? Am liebsten wäre es mir, einen Hover Effekt zu verwenden… klappt eigentlich auch ganz gut bisher… aber wie sieht es damit aus, dies zusätzlich mit einem Spray-Menue zu verbinden? Wie lässt sich sowas realisieren? Würde gerne z.B. beim Hauptpunkt „Wassersport“ die Unterpunkte „Restauration 2010/2011“, „Tube fahren“, „Wakeboard fahren“ einfügen.
Vielleicht könnt ihr mir ja helfen.
MFG André
HTML Code:
EinfachHTML<div id="vertical_navigation"><!--Anfang Vertikale Navigationsleiste-->
<ul>
<li><a href="#link_1">Menülink 1</a></li>
<li><a href="#link_2">Menülink 2</a></li>
<li><a href="#link_3">Menülink 3</a></li>
<li><a href="#link_4">Menülink 4</a></li>
<li><a href="#link_5">Menülink 5</a></li>
<li><a href="#link_6">Menülink 6</a></li>
<div id="horizontal_navigation"><a href="#" class="foto-link-startseite foto-startseite"></a>
<a href="#" class="foto-link-wassersport foto-wassersport"></a>
<a href="#" class="foto-link-nautik foto-nautik"></a>
<a href="#" class="foto-link-ueber_mich foto-ueber_mich"></a>
</div><!--Horizontale Navigationsleiste-->
<div id="content"><!--Anfang Seiteninhalt-->
<h1>Überschrift Startseite</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna
no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
CSS Code:
@charset „utf-8“;
/* CSS Document */
hmtl , body {
background-color:green;
font-family:Tahoma, Geneva, sans-serif;
margin:0px;
padding:0px;
}
p, a, h1, h2, h3 {
font-family:Tahoma, Geneva, sans-serif;
color:#000;
}
h1 {
border-bottom:1px solid #000;
}
p {
text-align:justify;
}
.antifloat {
clear:both;
}
/Anfang Wrapper/
#wrapper {
width:1000px;
background-color:aqua;
margin:0 auto 0 auto;
}
/Ende Wrapper/
/Anfang Header/
#header {
height:150px;
background-color:grey;
/background-image:url(images/header.jpg);/
}
/Ende Header/
/Anfang Vertikale Navigationsleiste/
#vertical_navigation {
background-color:yellow;
}
/Ende Vertikale Navigationsleiste/
#vertical_navigation ul {
float:left;
width:200px;
list-style:none;
padding:0;
margin:0;
background-color:maroon;
}
#vertical_navigation ul li {
text-align:left;
border:1px solid red;
}
#vertical_navigation ul li a {
display:block;
}
/Anfang Horizontale Navigationsleiste/
#horizontal_navigation {
float:left
width:750px;
height:21px;
background-color:blue;
padding:0 25px 0 225px;
}
/Ende Horizontale Navigationsleiste/
.foto-link-startseite
{
width: 102px;
height: 21px;
display: block;
margin: 0;
}
.foto-startseite
{
background: url(images/startseite_button.jpg) no-repeat;
}
.foto-link-startseite:hover
{
background-position: 0 -21px;
}
/--------------------------------------------------------------------------------/
.foto-link-wassersport
{
width: 126px;
height: 21px;
display: block;
margin: 0 0 0 122px;
}
.foto-wassersport
{
background: url(images/wassersport_button.jpg) no-repeat;
}
.foto-link-wassersport:hover
{
background-position: 0 -21px;
}
/--------------------------------------------------------------------------------/
.foto-link-nautik
{
width: 77px;
height: 21px;
display: block;
margin: 0 0 0 268px;
}
.foto-nautik
{
background: url(images/nautik_button.jpg) no-repeat;
}
.foto-link-nautik:hover
{
background-position: 0 -21px;
}
/--------------------------------------------------------------------------------/
.foto-link-ueber_mich
{
width: 104px;
height: 21px;
display: block;
margin: 0 0 0 365px;
}
.foto-ueber_mich
{
background: url(images/ueber_mich_button.jpg) no-repeat;
}
.foto-link-nautik:hover
{
background-position: 0 -21px;
}
/--------------------------------------------------------------------------------/
#content {
background-color:fuchsia;
float:left;
width: 750px;
padding:25px
}
/Ende Seiteninhalt/
/Anfang Footer/
#footer {
clear:both;
background-color:orange;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
}
/Ende Footer/