Hi zusammen,
ich muss als kleines Projekt eine sehr limitierte Homepage machen. Doch habe bereits ziemlich zu kämpfen.
Ich schaffe es einfach nicht, dass die Navigation/Menü mir horizontal über dem Content positioniert wird.
Ich habe im CSS schon sehr viel ausprobiert aber bekomme es nicht hin.
Hat von Euch jemand die Muße mir da ein wenig auf die Sprünge zu helfen?
Ich bin blutiger Anfänger was HTML und CSS angeht...;-(
Vielen Dank für alle Tipps und Hinweise!
HTML:
HTML
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type">
<link media="screen" type="text/css" rel="stylesheet" href="style.css">
<title>E-Business Webdesign
Auftritt</title>
</head>
<body>
<div id="container">
<div id="header">
<table align="center">
<tbody>
<tr>
<td> <a href="index.html"><img alt=" Tiervermittlung"
src="Bilder/Logo-2.jpg" style="width: 113px; height: 81px;"></a></td>
<td><br>
Tiervermittlung Freiburg </td>
</tr>
</tbody>
</table>
</div>
<div id="navigation">
<ul>
<li><a href="Aktuelles.html">Aktuelles</a></li>
<li><a href="ueber-uns.html">Ueber uns</a></li>
<li><a href="Tiervermittlung.html">Tiervermittlung</a>
<ul>
<li><a href="Katze.html">Katze</a></li>
<li><a href="Hunde.html">Hunde</a></li>
<li><a href="Kleintiere.html">Kleintiere</a></li>
</ul>
</li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="Impressum.html">Impressum</a></li>
<li><a href="AGBs.html">AGBs</a></li>
</ul>
</div>
<div id="main">
<div id="content">
<h1>Willkommen<br>
</h1>
<p>Hier kommt dann ein bisschen
Text rein und soll den Textfluß ein bisschen zeigen.Hier
kommt dann ein bisschen Text rein und soll den Textfluß ein
bisschen zeigen.Hier kommt dann ein bisschen Text rein und soll den
Textfluß ein bisschen zeigen.Hier kommt dann ein bisschen
Text rein und soll den Textfluß ein bisschen zeigen.Hier
kommt dann ein bisschen Text rein und soll den Textfluß ein
bisschen zeigen.</p>
</div>
</div>
<br clear="left">
</div>
</body>
</html>CSS:
Code
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
background-color:#FFEBCD;
background-repeat:repeat-x;
font-family: tahoma, arial, helvetica, sans-serif;
color:#000000;
font-size:90%;
}
div#container {
width: 875px;
background-color:#FDF5E6;
/*margin-top: 0;
margin-right:auto;
margin-bottom:0;
margin-left: auto;*/
margin: 0 auto 0 auto;
}
div#header {
background-image:url(Bilder/);
background-repeat:no-repeat;
height:160px;
}
div#header table {
font-size:30px;
text-align: center;
}
div#navigation {
width: 150px;
margin-left:20px;
margin-right:20px;
text-align:left;
float:left;
display:inline;
}
div#main {
width:665px;
float:left;
line-height:150%;
}
div#content {
width:500px;
margin-right:40px;
margin-top:30px;
float:left;
}
/* header definitionen */
div#header img {
margin-top: 30px;
margin-left: 20px;
border:none;
}
/*navigation definitionen */
div#navigation ul {
background-color:#FDF5E6;
padding-top:30px;
padding-bottom:30px;
list-style-type:none;
}
div#navigation ul li{
margin-bottom:10px;
}
div#navigation ul a{
color:#000000;
border-color:#FDF5E6;
border-style:solid;
border-width:1;
text-decoration:none;
padding-left: 5px;
font-weight:bold;
}
div#navigation ul a:hover, div#navigation ul a:focus {
color:#CDC5BF;
border-bottom-color:#CDC5BF;
}
div#navigation ul ul{
padding:10px 0 0 15px;
}
div#navigation ul ul a {
font-weight:normal;
border-left-width:none;
}
/* content definition*/
h1 {
color:#000000;
font-size:180%;
margin-bottom:0.8em;
}
p {
margin-bottom:1em;
}
a{
color:#f1984f;
text-decoration:none;
}
a:hover, a:focus {
text-decoration:underline;
}