Yumiii
Threadersteller
Dabei seit: 17.12.2009
Ort: Wuppertal
Alter: 32
Geschlecht:
|
Verfasst Fr 18.12.2009 11:25
Titel HTML/CSS - Navigation verschoben - Links kaputt |
|
|
Hallo liebe User,
ich bastel gerade ein wenig an meinem Projekt und habe nun einen Fehler:
Ich habe mit CSS eine Navigation erstellt.
Diese hat wunderbar funktioniert.
Dann habe ich die Position verändert und garnichts hat mehr funktioniert.
Ich habe in der CSS nachgeschaut, kann aber keinen Fehler finden.
Hier die Website: www.yumiii.com
CSS Code
Code: |
* {margin:0px; padding:0px}
/*Der Aufbau der Seite*/
#gesamt {
font-family:Arial, Helvetica, sans-serif; color:#333333;
font-size:12px;
width:100%;
margin:0px;
padding:0px;
border:0px solid #dddddd;
background-color:#FFFFFF;
}
#header1 {
background-image: url(../img/head1.jpg);
background-repeat:repeat-x;
width:100%;
height:80px;
margin-bottom:0px;
background-color:#FFFFFF;
}
#banner1 {
background-image: url(../img/banner.jpg);
background-repeat: no-repeat;
background-position:center;
float:right;
position:fixed;
width:110%;
height:220px;
}
#header2 {
background-image: url(../img/head2.jpg);
background-repeat:repeat-x;
background-position:top;
height:220px;
margin-bottom:0px;
background-color:#FFFFFF;
}
#sidebar1 {
width:25.5%;
float:left;
padding:2px;
margin-bottom:0px;
background:#FFFFFF;
}
#inhalt {
width:47.3%;
padding:4px;
float:left;
margin-bottom:0px;
background:#FFFFFF;
}
#sidebar2 {
width:25%;
float:right;
padding:2px;
margin-bottom:0px;
background:#FFFFFF;
}
#footer {
background-image: url(../img/head2.jpg);
background-repeat:repeat-x;
background-position:top;
padding-top:20px;
height:50px;
clear:both;
}
/*Texte*/
#headline1 {
width:80%;
padding-left:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px; color:#0071bc;
font-variant:small-caps;
}
#text1 {
width:80%;
padding-left:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#494949;
}
li1 {
list-style-image:url(../img/radio.gif);
}
/*Link Styles*/
a:link {
font-family:Arial,Helvetica,sans-serif;
font-size: 12px;
text-decoration: none;
color: #0071bc;
}
a:visited {
color: #0071bc;
}
a:focus {
color: #494949;
}
a:hover {
color: #0071bc;
text-decoration: underline;
}
a:active {
color: #494949;
}
/*Menu*/
#menu {
width: 182px;
height:200px;
float:left;
margin-left:432px;
margin-top:10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color:#0071bc;
}
#menu ul {
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
#menu li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
}
#menu .notopbrdr0xNone {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background-color: #0071BC;
padding-top: 11px;
padding-right: 0;
padding-bottom: 11px;
padding-left: 20px;
}
#menu li a:hover {
color: #FFFFFF;
background: #0065A8;
padding-top: 11px;
padding-right: 0;
padding-bottom: 11px;
padding-left: 20px;
}
#menu ul,#menu ul li a{ height: 1%}
/*topmenu*/
#topmenu {
float:right;
}
#topmenu ul {
margin:0;
padding-right:150px;
padding-top:50px;
list-style:none;
line-height:normal;
}
#topmenu li {
display:inline;
}
#topmenu a {
padding:0 20px;
border-left:1px solid #0071bc;
text-decoration:none;
font-size:12px;
}
#topmenu a:hover {
text-decoration:underline;
}
#topmenu .first a {
border:none;
}
|
Hier die 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>Yumiii - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="gesamt">
<div id="header1">
<div id="topmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="header2">
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="impressum.html">Link2</a></li>
<li><a href="index.html">Link3</a></li>
<li><a href="impressum.html">Link4</a></li>
<li><a href="index.html" class="notopbrdr0xNone">Link5</a></li>
</ul>
</div>
<div id="banner1">
</div>
</div>
<div id="sidebar1"></div>
<div id="inhalt">
<div id="headline1">Home</div>
<div id="text1">
</div>
</div>
<div id="sidebar2">
<ul>
<li>Link Nummer 1</li>
<li>Link Nummer 2</li>
<li>Link Nummer 3</li>
<li>Link Nummer 4</li>
<li>Link Nummer 5</li>
<li>Link Nummer 6</li>
</ul>
</div>
<div id="footer">
<center><a href="impressum.html">Meins</a>
</center>
</div>
</div>
</body>
</html>
|
vielen Dank im voraus.
Liebe Grüße
Lara
|
|