Problem Homepage Horizontale Nav- Leiste Hover Effekt

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

green_devil90

Neues Mitglied
25 März 2011
12
0
0
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:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EinfachHTML</title>
<link rel="stylesheet" href="einfachhtml.css" media="screen" type="text/css" />
</head>

<div id="wrapper"><!--Anfang Wrapper-->
<div id="header"></div><!--Header-->

<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>
</ul>

<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.
</div><!--Ende Seiteninhalt-->
<div class="antifloat"></div>
</div><!--Ende Vertikale Navigationsleiste-->
<div id="footer">&copy;Andr&eacute; L.</div><!--Footer-->




</div><!--Ende Wrapper-->


<body>

</body>
</html>




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:eek:range;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
}
/*Ende Footer*/
 

green_devil90

Neues Mitglied
25 März 2011
12
0
0
moin...

meinst du so?

#horizontal_navigation {
float:left
width:750px;
height:21px;
background-color:blue;
padding:0 25px 0 225px;
ul.nolist,
ul.nolist li {
display:block;
list-style:none;
}
}
 

agodesign

Mitglied
28 Februar 2011
162
0
16
Nürnberg
#horizontal_navigation {
float:left
width:750px;
height:21px;
background-color:blue;
padding:0 25px 0 225px;
}

ul.nolist li {
display:block;
list-style:none;
}
 

green_devil90

Neues Mitglied
25 März 2011
12
0
0
Und verwende bitte Code-Tags sonst liest sich das so blöd hier.
Moin Moin...

wie mache ich das mit den Code-Tags? Habe am Wochenende nicht viel Zeit gehabt an der Homepage weiter zu arbeiten. Habe das eben mit der Liste ausprobiert. Aber irgendwie wird die Liste andauernd untereinander angezeigt, obwohl ich im css sheet mit list-style-type: inline den Befehl gebe die Elemente nebeneinander anzuzeigen. Kann einer von euch mir vielleicht eben kurz den Code schreiben?

Ich hab mal die "Horizontale Navigations-Box" mit der Höhe 100px beschrieben und nun sieht das wie folgt aus:



LG

André
 
Zuletzt bearbeitet:

threadi

Moderator
Team
Moderator
20 Oktober 2006
15.326
292
83
Leipzig
www.comedy-news.de
list-style-type sagt etwas anderes aus und nichts über Positionierungen.
list-style-type: Aufzählungszeichen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Wenn Du die Listenpunkte nebeneinander haben willst, floate sie oder wandel sie in inline-Elemente um.

Code:
ul#menu li { float: left; }
ul#menu li { display: inline; }
Anleitungen für horizontale Menüs gibt es im Netz wie auch im Forum hier genügend, da solltest Du fündig werden.

Mit Code-Tags meinte ich die Formatierung von Quellcode hier im Forum. Bei der Eingabe kannst und solltest Du deinen Quellcode mit [ CODE ] und [ /CODE ] umgeben (jeweils ohne die Leerzeichen).
 

green_devil90

Neues Mitglied
25 März 2011
12
0
0
list-style-type sagt etwas anderes aus und nichts über Positionierungen.
list-style-type: Aufzählungszeichen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Wenn Du die Listenpunkte nebeneinander haben willst, floate sie oder wandel sie in inline-Elemente um.

Code:
ul#menu li { float: left; }
ul#menu li { display: inline; }
Anleitungen für horizontale Menüs gibt es im Netz wie auch im Forum hier genügend, da solltest Du fündig werden.

Mit Code-Tags meinte ich die Formatierung von Quellcode hier im Forum. Bei der Eingabe kannst und solltest Du deinen Quellcode mit [ CODE ] und [ /CODE ] umgeben (jeweils ohne die Leerzeichen).
Sorry ich meine auch
Code:
display: inline
siehe
Code:
#horizontale_navigation li {
  display: inline; /* Listenelemente nebeneinander */
  list-style-type: none; /* Aufzählungszeichen entfernen */
Ich habe auch ein externes Projekt ausprobiert... da klappt es mit der Darstellung

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontale Navigation</title>
<link rel="stylesheet" href="navigation.css" media="screen" type="text/css" />
</head>
<body id="startseite">
<div id="horizontal_navigation">
                                    
                                    
                                    <ul id="navibereich">
 <li id="navi01"><a href="[URL]http://www.web.de"><img[/URL] src="startseite_button.jpg" /></a></li>
    <li id="navi02"><a href="[URL]http://www.ebay.de"><img[/URL] src="nautik_button.jpg" />
    <li id="navi03"><a href="[URL]http://www.google.de"><img[/URL] src="wassersport_button.jpg" />
    <li id="navi04"><a href="[URL]http://www.wvg-bremen.de"><img[/URL] src="ueber_mich_button.jpg" />
</ul>
 

    
    </div><!--Horizontale Navigationsleiste-->

</body>
</html>

Code:
@charset "utf-8";
/* CSS Document */
body {
 font-size: small;
 font-family: Verdana, Geneva, sans-serif;
}
#horizontal_navigation {
 float:left
 width:750px;
 height:46px;
 background-color:blue;
 padding:0 25px 0 225px;
}
#navibereich li {
 display: inline; /*Listenelemente nebeneinander */
 list-style-type: none; /*Aufzählungszeichen entfernen */
}
 

threadi

Moderator
Team
Moderator
20 Oktober 2006
15.326
292
83
Leipzig
www.comedy-news.de
Tipp: verwende die Erweiterung Firebug im Firefox beim Betrachten deiner Webseite. Darüber kannst Du alle Eigenschaften sehen die den Elementen zugeordnet sind und diese bearbeiten. Dadurch solltest Du herausbekommen wieso es in der kompletten Seite anders aussieht. Ähnliche Erweiterungen gibt es auch für Opera, Chrome und den IE.
 

green_devil90

Neues Mitglied
25 März 2011
12
0
0
Ich glaube ich habe irgendwo einen Fehler in meiner Struktur... kann die denn keiner für mich checken? Irgendwas is mit dem Container meiner horizontalen Navigation falsch. Jemandem der sich damit auskennt fällt sowas doch bestimmt auf, im Gegensatz zu mir. Bin echt am verzweifeln.

LG
 
Zuletzt bearbeitet:

green_devil90

Neues Mitglied
25 März 2011
12
0
0
Moin Moin...

also ich habe meinen Code nochmal ein wenig überarbeitet und hab erstmal ein paar Kompromisse machen müssen, weil das mit dem Hover-Effekt in meiner horizontalen Navigationsleiste noch nicht so will (wird noch immer untereinander angezeigt).

--> Hier erstmal das bisherige Ergebnis: www.andre-nautik.de <--

Nun hab ich folgende Fragen... Auf der Seite "Nautik" soll nach dem Unterpunkt "Die Reiseroute" des ersten Hauptpunktes "1. Praxissemester" eine Leerzeile eingefügt werden, damit es ein wenig übersichtlihcer wird. Wie lässt sich sowas realisieren?

Dann möchte ich gerne in der horizontalen Navigationsleiste jeweils links der Schrift ein kleines BullEye einfügen (als Kompromiss für meine erste Idee mit dem Hover Effekt).

Meine letzte Frage... wie kann ich eine feste Hintergrundgrafik einbinden. Der Wrapper mit seinem Inhalt soll also quasi über den Hintergrund gleiten. Welche Größe sollte man für solch einen festen Hintergrund verwenden?

Und dann erstmal vielen Dank für eure bisherige Hilfe...

Hier nochmal ein Screenshot:

Screenshot Homepage.jpg

HTML Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
 <title>www.andre-nautik.de</title>
    <meta name="keywords" content="Nautik, Waassersport" />
    <meta name="description" content="Das ist meine erste Homepage" />
    <meta name="robots" content="index, follow" />
 
    <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
 <a name="top"></a>
 <div id="wrapper"><!--Anfang Wrapper-->
     <div id="header"><img src="images/header.jpg" width="1000" height="250" alt="Bild Header" /></div><!--Header-->
        <div id="navigation2"><!--Anfang Navigation2-->
         <ul>
            <li><a href="index.html">Startseite</a></li>
            <li><a href="wassersport.html">Wassersport</a></li>
            <li><a href="nautik.html">Nautik</a></li>
            <li><a href="about.html">&Uuml;ber mich</a></li>
            <li><a href="guestbook.html">G&auml;stebuch</a></li>
            </ul>
        </div><!--Ende Navigation2-->
        <div id="navigation"><!--Anfang Navigation-->
         <ul><!--
            <li><a href="#link_1">Men&uuml;link_1</a></li>
            <li><a href="#link_2">Men&uuml;link_2</a></li>
            <li><a href="#link_3">Men&uuml;link_3</a></li>
            <li><a href="#link_4">Men&uuml;link_4</a></li>
            <li><a href="#link_5">Men&uuml;link_5</a></li>
            -->
            </ul>
        <div id="content"><!--Anfang Seiteninhalt-->
 
         <h1>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.
            </p>
            <a href="#top">nach oben</a>
            <a name="link_1"></a>
            <h2>Das ist meine &Uuml;berschrift 2</h2>
            <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.
             </p>
            <a href="#top">nach oben</a>
            <a name="link_2"></a>
        </div><!--Ende Seiteninhalt-->
        <div class="antifloat"></div>
</div><!--Ende Navigation--> 
        <div id="footer"><img src="images/footer.jpg" width="1000" height="50" alt="Bild Footer" /></div><!--Footer--> 
    </div><!--Ende Wrapper-->
</body>
</html>
CSS Code:

Code:
hmtl, body {
 font-family:Tahoma, Geneva, sans-serif;
 color:#FFF;
 background-color:#0097be;
 margin:0px;
 padding:0px;
}
p, a, h1, h2, {
 font-family:Tahoma, Geneva, sans-serif;
 color:#000;
}
h1 {
 border-bottom:1px solid #FFF;
 margin:0px 0px 15px 0px;
}
h2 {
 border-bottom:1px solid #FFF;
 margin:30px 0px 0px 0px;
}
p {
 text-align:justify;
 line-height:22px
}
a:link {color:#FFF}
a:visited {color:#FFFFFF}
a:hover {color:#999999}
a:active {color:#FFFFFF}
.antifloat {
 clear:both
}
/*Anfang Wrapper*/
#wrapper {
 width:1000px;
 background-color:#0097be;
 margin:0 auto 0 auto;
 border left:12px #FFF;
 border right:12px #FFF;
 
}
/*Ende Wrapper*/
/*Anfang Header*/
#header {
 height:250px;
 background-color:#071a21;
 /*background-image:url(images/header.jpg);*/
}
/*Ende Header*/
/*Anfang Navigation*/
#navigation {
 background-color:#071a21;
 
}
#navigation ul{
 float:left;
 width:200px;
 padding:54px 0px 0px 0px;
 margin:0;
 /*background-color:maroon;*/
}
#navigation ul li{
 /*border:1px solid lime;*/
 list-style:none;
 padding: 5px 5px 5px 10px;
 
}
#navigation ul li a{
 display:block;
 text-decoration:none;
 font-weight:bolder;
 border-bottom:1px solid #FFF;
 /*border:1px solid red;*/
 padding:0px 0px 5px 5px
}
#navigation ul li a:hover{
 color: #999999;
 padding:0px 0px 5px 5px;
 
}
#navigation ul li ul{
 float:left;
 width:190px;
 padding:0px 0px 0px 0px;
 margin:0;
 /*background-color:maroon;*/
}
#navigation ul li ul li{
 /*border:1px solid lime;*/
 list-style:none;
 padding: 5px 5px 5px 20px;
 
}
#navigation ul li ul li a{
 display:block;
 text-decoration:none;
 font-weight:bolder;
 border-bottom:1px solid #FFF;
 /*border:1px solid red;*/
 padding:0px 0px 5px 5px
}
#navigation ul li ul li a:hover{
 color: #999999;
 padding:0px 0px 5px 5px;
 
}
/*Ende Navigation*/
/*Anfang Navigation2*/
#navigation2 {
 float:right;
 width:800px;
 heigth:21px;
 background-color:#071a21;
 font-weight:bolder;
}
#navigation2 ul{
 padding:0px 0px 0px 20px;
 margin:0;
 /*background-color:maroon;*/
}
#navigation2 ul li{
 /*border:1px solid lime;*/
 list-style:none;
 display: inline;
 padding: 5px 5px 5px 10px;
 
}
#navigation2 ul li a{
 text-decoration:none;
 /*border:1px solid red;*/
}
/*Ende Navigation2*/
/*Anfang Content*/
#content {
 float:left;
 width:750px;
 padding:25px;
 background-color:#071a21;
 
}
/*Ende Content*/
/*Anfang Footer*/
#footer {
 clear:both;
 text-align:center;
 height:50px;
 /*padding: 15px 0px 50px 0px;*/
 background-color:#071a21;
}
/*Ende Footer*/
 

mermshaus

Senior HTML'ler
11 August 2009
5.369
38
48
www.ermshaus.org
Auf der Seite "Nautik" soll nach dem Unterpunkt "Die Reiseroute" des ersten Hauptpunktes "1. Praxissemester" eine Leerzeile eingefügt werden, damit es ein wenig übersichtlihcer wird. Wie lässt sich sowas realisieren?
Floate nicht die ul-Elemente einzeln, sondern das umgebende Rahmenelement (#navigation, glaube ich) insgesamt. Dann kannst du darin den ul-Elementen ein margin-top geben, eventuell per CSS-Klasse, falls es nicht für alle gelten soll.

Dann möchte ich gerne in der horizontalen Navigationsleiste jeweils links der Schrift ein kleines BullEye einfügen (als Kompromiss für meine erste Idee mit dem Hover Effekt).
Vielleicht per list-style-image oder per Hintergrundbild für die li-Elemente.

Meine letzte Frage... wie kann ich eine feste Hintergrundgrafik einbinden. Der Wrapper mit seinem Inhalt soll also quasi über den Hintergrund gleiten. Welche Größe sollte man für solch einen festen Hintergrund verwenden?
Hintergrundbild für body-Element mit background-attachment: fixed;. Größe ist wohl Gestaltungsfrage.
 

green_devil90

Neues Mitglied
25 März 2011
12
0
0
Moin Moin... also das Problem mit der Leerzeile hab ich gelöst... hab einfach n neuen div-Container dazwischen gesetzt... Bleibt noch ein Problem... wie bekomm ich diesen Kasten (taucht beim anklicken auf) weg... bzw. wieso is der so groß?Den Anhang 1948 betrachten
 

threadi

Moderator
Team
Moderator
20 Oktober 2006
15.326
292
83
Leipzig
www.comedy-news.de
Code:
outline: 0;
als Eigenschaft für den Link ergänzen.

Nachteil: damit dürften einige Nutzer nicht mehr deinen Links folgen können. Es erhöht die Barriere bei der Nutzung deiner Seite.

Tipp: schau lieber mal nach wieso der Rahmen so groß wird. Da stimmt imho etwas am HTML und/oder CSS nicht.