Hallo!
Ich bin Homepage - Programmier Anfänger und muss für die Uni eine Schein-Homepage erstellen!
Ich kriegs aber einfach nicht hin, dass die Buttons in der navileiste, nicht abgeschnitten werden
bzw. den richtigen abstand zeinander haben!
Hoffe ihr könnt mir helfen!
Hier die html und css datei:
Im ANhang ein bild mit der navi!
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Elektro Sunk</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body id="indexID">
<div id="wrapper">
<div id="header">
<!-- Im Header benötige ich das Sunk Logo -->
</div> <!-- Ende Header -->
<div id="navi">
<ul>
<li><a class="link_01" href="index.html"><span class="linkspan">Über Uns</span></a> </li>
<li><a class="link_02" href="leistungen.html"><span class="linkspan">Leistungen</span></a> </li>
<li><a class="link_03" href="team.html"><span class="linkspan">Team</span></a> </li>
<li><a class="link_04" href="links.html"><span class="linkspan">Links</span></a> </li>
<li><a class="link_05" href="kontakt.html"><span class="linkspan">Kontakt</span></a> </li>
<li><a class="link_06" href="impressum.html"><span class="linkspan">Impressum</span></a> </li>
</ul>
</div> <!-- Ende Navi -->
<div id="content">
<h3>Herzlich Willkommen auf unserer Homepage</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe</p>
</div> <!-- COntent Ende -->
<div id="footer">
</div> <!-- Ende Footer -->
</div> <!-- Ende Wrapper -->
</body>
</html>
CSS_FILE
* {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
font-family: Arial, Verdana, Comic, sans-serif;
}
html {
height: 100.2%;
}
body {
}
#wrapper {
width: 900px;
margin: 0 auto 0;
background: #FFFFFF;
border: solid 2px #000000;
}
#header {
background: url(images/header.jpg);
height: 226px;
}
#navi {
background: url(images/navi.jpg);
height: 30px;
text-align: center;
}
#navi ul li {
display: inline;
vertical-align: middle;
}
p, h3 {
margin: 5px;
padding-left: 300px;
}
#content {
background: url(images/papst.jpg);
background-repeat: no-repeat;
/* height: 309px; */
margin-left: 20px;
margin-top: 20px;
}
a:link {
background: url(images/button_rot.gif);
background-repeat: no-repeat;
display: inline;
margin: 10px;
padding-bottom: 5px;
/* padding-right: 35px; */
}
a:hover {
background: url(images/button_blau.gif);
background-repeat: no-repeat;
}
a.link_01 {
background: url(images/button_rot.gif);
background-repeat: no-repeat;
}
a.link_01:hover, #indexID a.link_01:link{
background: url(images/button_blau.gif);
background-repeat: no-repeat;
}
a.link_02 {
background: url(images/button_rot.gif);
background-repeat: no-repeat;
}
a.link_02:hover, #leistungenID a.link_02:link{
background: url(images/button_blau.gif);
background-repeat: no-repeat;
}
a.link_03 {
background: url(images/button_rot.gif);
background-repeat: no-repeat;
}
a.link_03:hover, #teamID a.link_03:link {
background: url(images/button_blau.gif);
background-repeat: no-repeat;
}
a.link_04 {
background: url(images/button_rot.gif);
background-repeat: no-repeat;
}
a.link_04:hover, #linksID a.link_04:link {
background: url(images/button_blau.gif);
background-repeat: no-repeat;
}
a.link_05 {
background: url(images/button_rot.gif);
background-repeat: no-repeat;
}
a.link_05:hover, #kontaktID a.link_05:link {
background: url(images/button_blau.gif);
background-repeat: no-repeat;
}
a.link_06 {
background: url(images/button_rot.gif);
background-repeat: no-repeat;
}
a.link_06:hover, #impressumID a.link_06:link {
background: url(images/button_blau.gif);
background-repeat: no-repeat;
}
.linkspan {
font-size: 15px;
display: inline;
text-align: center;
vertical-align: middle;
padding-right: 30px;
}