Ist dies der Weg absolute/relative/statische CSS DIVs zu machen?

Ich möchte eine zentrierte Kopf DIV und im Inneren die folgenden absolut positionierte DIVs:Ist dies der Weg absolute/relative/statische CSS DIVs zu machen?

logo
Menü
Linie
Titel

Aber mein HTML/CSS hat zwei Probleme :

für so ich Grund, die Seite ist jetzt breite (untere Bildlaufleiste sehen)
Wenn mein Titel mehr, ich will es rechtsbündig natürlich seine

Was ich wirklich will, ist eine zentrierte DIV und innerhalb dieser I will DIVs absolut innerhalb ihres zentrierten Elternteils positionieren (aber nicht absolut, da sie nicht zentriert sein würden). Ist das möglich?

Wie würden Sie dieses Layout erreichen?

alt text http://tanguay.info/web/external/centeredLayoutProblem.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 

<style type="text/css"> 
    #headerArea { 
     background-color: yellow; 
     margin: 0px auto; 
     width: 760px; 
     height: 150px; 
    } 

    #logo { 
     position: relative; 
     top: 20px; 
     left: 20px; 
     background-color: orange; 
     text-align: center; 
     font-size: 32pt; 
     width: 150px; 
     padding: 10px; 
     z-index: 10; 
    } 

    #menu { 
     position: relative; 
     top: -52px; 
     right: -480px; 
     background-color: tomato; 
     text-align: center; 
     font-size: 14pt; 
     width: 240px; 
     padding: 10px; 
    } 

    #title { 
     position: relative; 
     top: -35px; 
     right: -620px; 
     font-style: italic; 
     font-size: 14pt; 
    } 

    #line { 
     position: relative; 
     top: -60px; 
     border-bottom: 1px solid blue; 
     margin: 0 20px; 
    } 
</style> 

</head> 

<body> 
    <div id="headerArea"> 
     <div id="logo">LOGO</div> 
     <div id="menu">One&nbsp;&nbsp;Two&nbsp;&nbsp;Three&nbsp;&nbsp;Four&nbsp;&nbsp;Five</div> 
     <div id="title">This is the Title a Bit Longer</div> 
     <div id="line"></div> 
    </div> 
</body> 
</html>

Quelle

2009-03-07 Edward Tanguay

Machen Sie Ihre #headerArea div position: relative. Dann können Sie für alle Ihre inneren divs positionieren: absolut in Bezug auf #headerArea.

Wie so:

<style type="text/css"> 
    #headerArea { 
     position:relative; 
     background-color: yellow; 
     margin: 0px auto; 
     width: 760px; 
     height: 150px; 
    } 

    #logo { 
     position: absolute; 
     top: 20px; 
     left: 20px; 
     background-color: orange; 
     text-align: center; 
     font-size: 32pt; 
     width: 150px; 
     padding: 10px; 
     z-index: 10; 
    } 

    #menu { 
     position: absolute; 
     top: 20px; 
     left: 480px; 
     background-color: tomato; 
     text-align: center; 
     font-size: 14pt; 
     width: 240px; 
     padding: 10px; 
    } 

    #title { 
     position: absolute; 
     top: 80px; 
     left: 20px; 
    width: 720px; 
    text-align: right; 
     font-style: italic; 
     font-size: 14pt; 
    } 

    #line { 
     position: absolute; 
width: 720px; 
height: 1px; 
     top: 70px; 
     border-bottom: 1px solid blue; 
     margin: 0 20px; 
    } 
</style>

Sie sollten das 'linke' Eigentum statt 'richtig' da 'richtigen' verwenden funktioniert nicht in IE6.

Die 'linken' und 'oberen' Werte, die ich eingegeben habe, sind vielleicht ein bisschen daneben, aber Sie können zwicken, um zu bekommen, was Sie wollen.

EDIT:

ich die Pixelwerte korrigiert haben, und eine Breite auf Ihre Linie div hinzugefügt, und eine Höhe, da IE standardmäßig alle divs eine Textzeile hoch.

Auch Ihr Titel div sollte volle Breite mit Textausrichtung rechts, so dass der Titel nach links statt der rechten erweitern wird.

Quelle

2009-03-07 15:10:22 Joel

genial, sieht gut aus in allen vier Test-Browsern, lernte auch etwas, danke! –

Ja. Wenn Sie #headerArea{position:relative;} tun, können Sie position: absolute auf den Kindern haben und ihre Position wird relativ zum Elternteil sein.

Quelle

2009-03-07 15:11:57 svinto

Position verwenden: relativ zur Überschrift (wie bereits vorgeschlagen), so dass sie zu einer Ebene wird, dann werden die absolut positionierten Elemente darin das Element als Ursprung verwenden.

Sie können die Zeile vor dem Logo im Markup platzieren, dann brauchen Sie den z-index nicht zu verwenden, um das Logo über die Zeile zu setzen. Alle Browser verarbeiten z-index nicht gleich ...

Wenn Sie den Titel auf der rechten Seite platzieren, wird er bei Bedarf nach links erweitert.

Verwenden Sie einen oberen Rand anstelle eines unteren Rands auf der Linie, die das Problem mit IE löst das Element mindestens ein Zeichen hoch machen soll.

Ich entfernte einige unnötige Stile und fügte der Seite einen Titel hinzu (wie es in einem richtigen HTML-Dokument erforderlich ist).

Dieses 3, konsequent in Firefox IE anzeigt 7, IE 8, Opera 9 und Chrome 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://data.w3.org/1999/xhtml"> 
<head> 
    <title>Title</title> 

<style type="text/css"> 

body { 
    margin: 0; 
    padding: 10px; 
} 

#headerArea { 
    position: relative; 
    background: yellow; 
    margin: 0 auto; 
    width: 760px; 
    height: 150px; 
} 

#headerArea div { 
    position: absolute; 
} 

#logo { 
    top: 20px; 
    left: 20px; 
    background: orange; 
    text-align: center; 
    font-size: 32pt; 
    width: 150px; 
    padding: 10px; 
} 

#menu { 
    top: 20px; 
    right: 20px; 
    background: tomato; 
    text-align: center; 
    font-size: 14pt; 
    width: 240px; 
    padding: 10px; 
} 


#line { 
    top: 80px; 
    left: 20px; 
    width: 720px; 
    border-top: 1px solid blue; 
} 

#title { 
    top: 90px; 
    right: 20px; 
    font-style: italic; 
    font-size: 14pt; 
} 

</style> 

</head> 

<body> 
    <div id="headerArea"> 
     <div id="line"></div> 
     <div id="logo">LOGO</div> 
     <div id="menu">One Two Three Four Five</div> 
     <div id="title">This is the Title a Bit Longer</div> 
    </div> 
</body> 
</html>

(Möglicherweise müssen Sie die Positionierung anpassen es genau, wie Sie wollen, aber das sollte ganz einfach sein.)

Quelle

2009-03-07 15:36:00 Guffa

Ist dies der Weg absolute/relative/statische CSS DIVs zu machen?

Antwort

Verwandte Themen