Ergebnis 1 bis 6 von 6

Thema: Position der Navigation übers CSS

  1. #1
    HTML Newbie
    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Position der Navigation übers CSS

    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-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 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>
    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; 
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Position der Navigation übers CSS

    Eine Anleitung für eine Horizontal-Navi findest du hier und
    hier.
    Dein div#navigation ist ja auch nur 150px breit, während der #content 500px breit ist.

    Generell solltest du dir etwas mehr Grundwissen aneignen.
    Geändert von sejuma (16.07.2012 um 11:16 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Position der Navigation übers CSS

    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!

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Position der Navigation übers CSS

    ...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?

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Position der Navigation übers CSS

    float: left führt normalerweise zu einer horizontalen Anordnung. Die wolltest du ursprünglich.
    In den genannten Anleitungen findest du alles erklärt.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Position der Navigation übers CSS

    ä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!

Ähnliche Themen

  1. Der Sommerthread übers Wetter!!!
    Von reeperbahner11 im Forum Off Topic und Quasselbox
    Antworten: 171
    Letzter Beitrag: 18.08.2009, 12:13
  2. Wlan übers laptop
    Von Vodka im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 22.02.2008, 03:01
  3. Meine HP übers reiten
    Von Milena2504 im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 2
    Letzter Beitrag: 08.01.2006, 00:03
  4. Die Seite übers Geldverdienen
    Von m-money im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 11
    Letzter Beitrag: 05.10.2005, 21:44

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •