tutorials.de Buch-Aktion 02/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
366
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 07.07.08 20:31 #1
    godfather_al godfather_al ist offline Mitglied Bronze
    Registriert seit
    Jan 2007
    Beiträge
    41
    Guten Abend,

    ich arbeite gerade an einem neuen Layout, bei der oberen Navigation war das Ziel, dass die Navigationspunkte in Blöcken erscheinen und beim Überfahren ein ganzer Block (nicht nur der Hintergrund des Textes) umgefärbt wird, so ähnlich wie bei www.hockey.de nur ohne den waagerechten Platz zwischen den Blöcken. Es will mir nicht gelingen, wer kann mir einen Tip geben ?

    Vielen Dank vorab.
    Alex


    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">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Kaufmännische Nachhilfe Düren</title>
    <style type="text/css"> @import url(layout.css);</style>
    </head>

    <body>
    <basefont face="Verdana">
    <div id="centerBox">
    <div id="kopf"><h2>Kaufmännische Nachhilfe Düren</h2></div>
    <div id="navigation_links"><br/>
    <ul>
    <li><a href="index.html">Nachhilfe </a></li>
    <li><a href="nachpruefung.html">Nachprüfung</a></li>
    <li><a href="service.html">Service </a></li>
    <li><a href="angebote.html">Angebote </a></li>
    <li><a href="kontakt.html">Kontakt </a></li>
    <li><a href="links.html">Links </a></li>
    <li><a href="impressum.html">Impressum </a></li>
    </ul>
    </div>

    <div id="navigation_oben">
    <ul>
    <li><a href="index.html">Nachhilfe </a></li>
    <li><a href="nachpruefung.html">Nachprüfung</a></li>
    </ul>
    </div>

    <div id="inhalt"><basefont face="Verdana"><h1></br>Wer wir sind ...</h1>
    <p>Die Kaufmännische Nachhilfe Düren ist eine Nachhilfe - Einrichtung speziell ....</p>
    </div>

    </div>

    </body>
    </html>




    CSS:


    body, html, #navigation_links, #navigation_oben, #kopf, #inhalt, #centerbox {margin: 0; padding: 0;}

    body {font: 100.01% font-family: cursive; margin: auto; background-color: white; text-align: center;}

    #centerBox {
    position: absolute;
    left: 2.5%;
    width: 95%;
    top: 2.5%;
    height: 95%;
    border: 0px solid #000;
    background-color: aqua;
    }

    #kopf {
    position: absolute;
    left: 0%;
    width: 100%;
    top: 0%;
    height: 15%;
    border: 1px solid #000;
    background-image: url(nav.jpg);
    background-repeat: no-repeat;
    background-color: white;
    text-align: left;
    }

    #navigation_links {
    position: absolute;
    left: 0%;
    width: 15%;
    top: 15%;
    height: 85%;
    border: 1px solid #000;
    background-color: white;
    text-align: left;
    }


    #navigation_oben {
    position: absolute;
    left: 15%;
    width: 85%;
    top: 15%;
    height: 5%;
    border: 1px solid #000;
    background-color: white;
    text-align: left;
    }


    #inhalt {
    position: absolute;
    left: 15%;
    width: 85%;
    top: 20%;
    height: 80%;
    border: 1px solid #000;
    background-color: white;
    color: #806640;
    text-align: left;
    }


    p {color: #000000; margin: 25px 25px 0 25px;font-size: 0.9em;}

    p1 {color: rgb(0, 0, 0); font-size: 1.0em;}

    h1 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 1.2em;}

    h2 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 2.0em; font-family: cursive; text-align: right; letter-spacing: 3px;}


    #navigation_links ul {list-style-type: none; line-height: 1.2; margin: 25px 0px 0 0; padding: 0; font-family: cursive; font-size: 0.9em; }

    #navigation_links ul li {margin-top:15px;}

    #navigation_links a:link, #navigation_links a:visited {text-decoration: none; color: black; display: block; font-weight: bold; padding: 0px; padding-left: 15px; rgb(255, 255, 255); font-family: cursive; font-size: 0.9em;}

    #navigation_links a:hover {color: gray; background-color: aqua; font-family: cursive;}



    #navigation_oben ul {display: inline; list-style-type: none; margin: 0px 25px 0 0; line-height: 1.5em; padding:0; font-family: cursive; font-size: 0.9em; font-weight: bold;}

    #navigation_oben ul li {display: inline; margin-top: 0px; margin-left: 25px; }

    #navigation_oben a:link, #navigation_oben a:visited {display: inline; text-decoration: none; color: black; padding: 0px; rgb(255, 255, 255);font-family: cursive; font-size: 0.9em; font-weight: bold;}

    #navigation_oben a:hover {display: inline; color: gray; background-color: aqua; font-family: cursive;}
     
  2. 07.07.08 21:12 #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Moin,

    Notiere für die <li>-Elemente das Format display:inline

    Für die Links in den <li> die Formate: display:block; float:left;

    Das Format bei <li> sorgt dafür, dass alles nebeneinander steht.
    Die Formate für die Links sorgen
    ... 1. Dafür, dass nicht nur der Texthintergrund sich ändert
    ... 2.Dafür, dass sie nebeneinander und nicht untereinander stehen

    Das mit den Hintergrundfarben beim Hovern notierst du dann halt für die Links.
     
« Div Breite ändert sich nicht | Layout problem -Div Box verschiebt sich »

Ähnliche Themen

  1. Trennlinie Navigation und Blockrand Effekt
    Von felsi im Forum Photoshop
    Antworten: 5
    Letzter Beitrag: 14.02.08, 23:42
  2. Glitzer Effekt für Navigation
    Von Dustin84 im Forum Cinema 4D
    Antworten: 2
    Letzter Beitrag: 21.10.07, 18:33
  3. Navigation oben auf der Seite!
    Von D-LuX im Forum PHP
    Antworten: 2
    Letzter Beitrag: 18.06.07, 11:11
  4. Navigation mit fade out effekt
    Von Meikel25 im Forum Flash Plattform
    Antworten: 4
    Letzter Beitrag: 23.09.04, 15:05
  5. Guestbook eintraege waagerecht
    Von loki2002 im Forum PHP
    Antworten: 4
    Letzter Beitrag: 19.04.02, 16:47