Ergebnis 1 bis 2 von 2

Thema: a:link und a:hover richtig positionieren

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

    Standard a:link und a:hover richtig positionieren

    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 (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">&Uuml;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;

    }
    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 !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: a:link und a:hover richtig positionieren

    Du verwendest doch schon den Firebug. Analysiere doch mal welche Eigenschaften die einzelnen Elemente des Menüs haben. Ich würde dir als erstes raten auf das <span> in den Links zu verzichten, ist nicht notwendig. Die Eigenschaften davon kannst Du genauso gut an die Links hängen und dort noch "display: block;" setzen. Schau dir auch mal andere horizontale Menüs an, die machen es auch so ähnlich wie Du.

Ähnliche Themen

  1. hover - aber richtig?
    Von Salsero im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.03.2011, 12:38
  2. Grafik richtig auf Text positionieren
    Von SimplyFred im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 24.12.2008, 15:49
  3. link buttons in einem div container positionieren
    Von Corraggiouno im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 03.07.2007, 14:17
  4. Hover Link!
    Von Hailoko im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 23.04.2007, 15:33
  5. TD als Link mit einem Hover Effect
    Von xXx_BaSStar_xXx im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 08.03.2006, 15:34

Stichworte

Berechtigungen

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