+ Antworten
Ergebnis 1 bis 3 von 3

Thema: CSS ! Line-height - PROBLEM

  1. #1
    TP-Member haibo macht alles soweit korrekt
    Registriert seit
    Jan 2005
    Beiträge
    49

    CSS ! Line-height - PROBLEM

    Hallo zusammen.
    Kann mir jemand bei diesem Problem behilflich sein?
    Ich würde gerne die Navigation und der Inhalt auf der exakt gleichen
    Höhe positionieren, jedoch mit verschiedenem Durchschuss (line-height)
    Wie funktioniert das, es sollte in allen Browsern auf gleicher Höhe sein.


    HTML

    <div id="hauptnavi">
    <ul>
    <li><a href="link 1.html">Link 1</a></li>
    <li><a href="link 2.html">Link 2</a></li>
    <li><a href="link 3.html">Link 3</a></li>
    </ul>
    </div>

    <div id="content">Text, Text, Text, Text, Text,
    Text, Text, Text, Text, Text, Text, Text, Text,
    </div>




    CSS:

    /*Hauptnavigation*/
    #hauptnavi { POSITION: absolute;
    top:203px;
    left:101px;
    width:110;
    color:#ffffff;
    }

    #hauptnavi ul{line-height: 29px;list-style-type:none;}


    /*Text-Content*/
    #content { position:absolute;
    left:283px;
    top:203px;
    width:360;
    line-height:20px;
    }

  2. #2
    TP-Member akratellio macht alles soweit korrekt Avatar von akratellio
    Registriert seit
    Jul 2005
    Ort
    berlin
    Beiträge
    49
    hallo haibo,

    prob mal das:

    Code:
    <style type="text/css">
    <!--
    #hauptnavi {
    POSITION: absolute;
    vertical-align:top;
    top:203px;
    left:101px;
    width:110;
    color:#ffffff;
    }
    #content {
    vertical-align:top;
    position:absolute;
    left:283px;
    top:203px;
    width:360;
    line-height:1.8em;
    }
    #content:first-line{
    line-height:normal;
    }
    //-->
    </style>
    erklärung:
    die wirkung von line-height setzt erst ab der zweiten zeile ein,
    somit beginnen nun beide inhalte auf gleicher höhe.

    mfg

    akratellio

  3. #3
    TP-Member haibo macht alles soweit korrekt
    Registriert seit
    Jan 2005
    Beiträge
    49
    Super danke dir....so funzt es.

    vielen dank

+ Antworten

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51