Ergebnis 1 bis 7 von 7

Thema: Text nicht auf Höhe der Navigation

  1. #1
    Teeny
    Registriert seit
    04.07.2012
    Beiträge
    22
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Idee Text nicht auf Höhe der Navigation

    Hallo,

    könnt ihr mir sagen wie ich es hinbekomme, dass mein contend div Inhalt (Text) auf gleicher Höhe wie meine Navigationsleiste steht (horizontal)? Bisher wird er nach unten, ans Navigationsende geschoben.

    Vielen Dank

    Navigation
    Text


    Navigation Text



    html>
    <head>
    <title>Sport Homepage</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    </head>

    <body>

    <div id="wrapper">

    <div id=logo>
    <img src="pictures/logo/versuch Farbe.JPG"/>
    </div> <!-- Dies ist das Logo -->

    <div id="navigation">

    <div id="header">

    <img src="pictures/header/header_photo_2.jpg" />

    </div> <!-- Ende Header -->


    <table>
    <tr>
    <td><a href="http://www.html.net/">home</a><hr class="naviline" /></td>
    <td><a href="http://www.html.net/">handstand</a><hr class="naviline"

    /></td>
    </tr>
    <tr>
    <td><a href="http://www.html.net/">home</a><hr class="naviline" /></td>
    <td><a href="http://www.html.net/">handstand</a><hr class="naviline"

    /></td>
    </tr>
    </table>

    </div> <!-- Ende Navigation -->



    <div id="content">

    <h1 id="headline1" > New System </h1>

    Test für einen Inhalt
    Um ein Element relativ zu positionieren, wird die Eigenschaft position auf den Wert relative

    gesetzt. Der Unterschied zwischen absoluter und relativer Positionierung liegt in der Berechnung

    der Position.

    Die Position eines relativ positionierten Elementes wird von der eigentlichen Stelle im Dokument

    aus berechnet. D.h. man verschiebt das Element nur nach rechts, links, oben oder unten. Das

    Element nimmt nach der Positionierung trotzdem noch seinen ursprünglichen Platz im Dokument ein,

    obwohl es woanders dargestellt wird.

    <div id= picturehome>
    <img src="pictures/home/beginner-skateboard-tricks.jpg" />
    </div>

    Standardmäßig werden nachfolgende Elemente herangezogen, um freien Platz neben dem schwimmend

    positionierten Element aufzufüllen. Schauen Sie in das obige Beispiel, wo der Text automatisch

    neben das Bild von Bill Gates gezogen wird.

    Test für einen Inhalt Um ein Element relativ zu positionieren, wird die Eigenschaft position auf

    den Wert relative gesetzt. Der Unterschied zwischen absoluter und relativer Positionierung liegt

    in der Berechnung der Position. Die Position eines relativ positionierten Elementes wird von der

    eigentlichen Stelle im Dokument aus berechnet. D.h. man verschiebt das Element nur nach rechts,

    links, oben oder unten. Das Element nimmt nach der Positionierung trotzdem noch seinen

    ursprünglichen Platz im Dokument ein, obwohl es woanders dargestellt wird.

    </div> <!-- Ende Content -->



    <div id="footer">
    Contact Info klick!

    <p> www.homepage.de | Alle Rechte vorbehalten | © 2012 </p>
    </div> <!-- Ende footer -->
    <div style="clear: both;"></div>
    </div> <!-- Ende wrapper -->


    </body>
    </html>


    html * { margin: 0px; padding: 0px;}

    body {background-color: #DEDEDE;}


    #wrapper {
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    padding: 20px 0px 0px 0px;
    background: white url(../pictures/wrappernavi/grau.JPG) repeat-y left top;
    z-index: 1; width: 840px;border:20px solid white;
    }


    #header {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 20px 0px 40px 0px;
    z-index: 3;
    }

    #navigation {
    margin-top: 0px;
    margin-right: 710px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: ;
    z-index: 2;
    padding: 0px 0px 0px 20px;
    }

    #content {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 292px;
    z-index: 4;
    width: 520px;
    font-family: tahoma, geneva, verdana, arial, sans-serif;
    font-size: 90%;
    color: #616161;
    }

    #footer {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-left: 272px;
    background-color: #2E2E2E;
    z-index: 5; padding: 0px 0px 0px 130px;
    width: 424px;
    font-family: tahoma, Geneva, verdana, arial, sans-serif;
    font-size: 90%;
    color: white;
    }

    #logo {
    position:relative;
    top: 20px;
    left: 130px;
    }

    table, tr, td {
    font-family: tahoma, Geneva, verdana, arial, sans-serif;
    font-size: 90%;
    table-layout: fixed;
    width: 80px;
    padding: 0px 12px 8px 0px;
    }

    a:link {
    color: #616161;
    text-decoration:none;
    }

    a:visited {
    color: #616161;
    }

    a:active {
    color: #DE5A51;
    }

    a:hover {
    color: #DE5A51;
    border-bottom: 1px solid grey;
    }

    .naviline {
    margin: 8px 0px 0px 0px;
    high: 1px;
    border-color : #B0B0B0;
    border-width : 1px 0 0 0;
    border-style : solid;
    }

    #picturehome {
    margin: 20px 0px 20px 0px;
    }


    #headline1 {
    font-family: tahoma, Geneva, verdana, arial, sans-serif;
    font-size: 110%;
    color: #616161;
    padding: 0px 0px 20px 0px;
    }
    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
    Bandit
    Gast

    Standard AW: Text nicht auf Höhe der Navigation

    Ein Link zur Seite, damit man sich das ansehen kann, wäre nicht schlecht.

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    04.07.2012
    Beiträge
    22
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Text nicht auf Höhe der Navigation


  4. #4
    Bandit
    Gast

    Standard AW: Text nicht auf Höhe der Navigation

    Du hast einen falschen Aufbau, das sollte so aussehen:
    layout.gif
    Weiß = Wrapper
    Rot = Header
    Grün = Navigation
    Blau = Content

    Navigation und Content mit float versehen, dann sollte das passen.

  5. #5
    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: Text nicht auf Höhe der Navigation

    Dem HTML-Code fehlt zudem ein Doctype.

  6. #6
    Teeny
    Themenstarter

    Registriert seit
    04.07.2012
    Beiträge
    22
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Text nicht auf Höhe der Navigation

    Super, funktioniert. Aber man braucht nur die Navigation auf float left zu setzen, der content füllt dann von alleine den leeren Bereich auf. Sonst bekomme ich Probleme mit meinem footer, da die Hintergrundfarbe von ihm den contend ausfüllt.

  7. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Text nicht auf Höhe der Navigation

    In deinem BeispielLink funktioniert nichts. Will mal hoffen, dass du noch einen anderen Link hast, wo alles funktioniert. Ansonsten mal die bereits vorgestellte Aufteilung nutzen.

    @Edit: Ah, jetzt funktioniert's.
    Geändert von djheke (10.07.2012 um 22:22 Uhr)

Ähnliche Themen

  1. Li Navigation mit Text einrücken !
    Von Sway18 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.06.2012, 11:22
  2. wieso ist der text in der navigation zentriert
    Von Chrissi1202 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.08.2010, 23:28
  3. CSS float - variable Höhe der Navigation?
    Von 1234d1 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.07.2010, 18:16
  4. Tooltip CSS Höhe geht nicht? o.O
    Von Thonixx im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.03.2010, 16:11
  5. Antworten: 1
    Letzter Beitrag: 12.01.2008, 19:30

Stichworte

Berechtigungen

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