Beiträge von mrpynk

mrpynk

äh ja...horizontal...
Ich hatte den Befehl "float:left" nur bei div#navigation und nicht auch noch bei div#navigation ul und li.
Ferner war der Tipp mit der Breite noch sehr hilfreich. Habe dies nun umgestellt auf 100%.

Funktioniert nun.

Danke!

mrpynk

...hm...ok, die Navigation größer --> passt...aber der Befehl im CSS

Code

float:left;

führt leider nicht zu einer vertikalen Anordnung des Menüs...

Muss ich im HTML noch etwas verändern?

mrpynk

Hi,
danke für die antwort...werde mir die links gleich mal anschauen und es ausporbieren.
Grundwissen...ja klar, bin ja grad dabei...learning by doing halt.
Nochmals Danke!

mrpynk

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>
&nbsp;&nbsp;&nbsp;&nbsp;
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&szlig; ein bisschen zeigen.Hier
kommt dann ein bisschen Text rein und soll den Textflu&szlig; ein
bisschen zeigen.Hier kommt dann ein bisschen Text rein und soll den
Textflu&szlig; ein bisschen zeigen.Hier kommt dann ein bisschen
Text rein und soll den Textflu&szlig; ein bisschen zeigen.Hier
kommt dann ein bisschen Text rein und soll den Textflu&szlig; ein
bisschen zeigen.</p>
</div>
</div>
<br clear="left">
</div>
</body>
</html>

Alles anzeigen

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; 
}

Alles anzeigen

Beiträge von mrpynk

Position der Navigation übers CSS

Position der Navigation übers CSS

Position der Navigation übers CSS

Position der Navigation übers CSS