position: anpassen. Flexibler Header

[Shrax]

Auf meiner Seite internet-studio.bplaced.net hab ich ein kleines Problem.

Drücke ich STRG+Mausrad und zoome weit weg verschieben sich die Header. Dies liegt wahrscheinlich an meiner angabe position: absolute.
Da dadurch der div-container htext aus dem fluss genommen wird und immer von Bildschirmrand zählt.

Wie löse ich das am geschicktesten das sich die beiden kästen htext und htext2 an den header anpassen wenn man die größe verändert?

css:

Code: Alles auswählen

#header {
border-top : 1px solid black;
border-right : 1px solid black;
border-bottom : 1px solid black;
padding : 20px;
background-color : #a2e2e2;
}
#header p {
font-family : Verdana, Arial, Helvetica, sans-serif;
color : black;
}
#logo {
width : 306px;
border : 5px solid black;
padding : 10px;
background-color : white;
}
#htext {
position : absolute;
left : 400px;
top : 40px;
height : 47px;
padding : 10px;
width : 300px;
border : 5px solid silver;
background-color : white;
}
#htext p {
font-family : Verdana, Arial, Helvetica, sans-serif;
color : black;
}
#htext2 {
position : absolute;
left : 750px;
top : 25px;
height : 64px;
padding : 10px;
width : 200px;
border : 5px solid silver;
background-color : white;
}
#htext2 p {
font-family : Verdana, Arial, Helvetica, sans-serif;
color : black;
}

html:

Code: Alles auswählen

        
<div id="header">
            <div id="logo">
                <img src="logo.bmp" height="62" width="306" alt="Daniels Internet Studio" />
            </div>

            <div id="htext">
                <p>Gewappnet f&uuml;r dass Internet? Sicher vor Viren, Spyware und W&uuml;rmern gesch&uuml;tzt?</p>
            </div>

            <div id="htext2">
                <p>Schauen sie sich um und Endecken sie die Vielfalt des Internets!</p>
            </div>
        </div>

Ich wäre für eine elegante lösung aufgeschlossen, und auch froh wenn dabei ein paar <div>s wegfallen. Da das irgentwie so ne,... wie sagt man,.. div-suppe ist.

[Kerli]

Ich wäre für eine elegante lösung aufgeschlossen, und auch froh wenn dabei ein paar <div>s wegfallen. Da das irgentwie so ne,... wie sagt man,.. div-suppe ist.

Erstens kannst du alle Divs bis auf das Div 'header' weglassen, da du ja eh direkt alle Elemente auch formatieren kannst ohne das ein Div herum ist. Und zweitens würde ich unbedingt weg von dem fixen und unflexiblen Layout gehen. Ich würde nur relative Größen- und Positionsangaben machen, da du dadurch ein schönes, fluides Layout erhältst, das auf jedem Bildschirm gut ausschaut. Ich hoffe Größenangaben in Prozent oder 'em' sagen dir was...

Dann noch zu deinem CSS. Warum fasst du denn nicht mehrfach auftretende gleiche Eigenschaften zusammen? Zb:

Code: Alles auswählen

#htext p,
#htext2 p
{
  font-family : Verdana, Arial, Helvetica, sans-serif;
  color : black;
}

[Shrax]

Erstens kannst du alle Divs bis auf das Div 'header' weglassen, da du ja eh direkt alle Elemente auch formatieren kannst ohne das ein Div herum ist. Und zweitens würde ich unbedingt weg von dem fixen und unflexiblen Layout gehen. Ich würde nur relative Größen- und Positionsangaben machen, da du dadurch ein schönes, fluides Layout erhältst, das auf jedem Bildschirm gut ausschaut. Ich hoffe Größenangaben in Prozent oder 'em' sagen dir was...

Eben deswegen will ich den Header ja anpassen dass er sich mit bewegt. Die komplette Website flexibel machen werde ich noch machen aber habe noch ein paar Probleme mit % da sich manche dinge dann nicht so hinrichten wie ich das will, was sich aber machen lässt.

Aber fürs erste würde mir das im Header reichen.

Wegen dem css, jo ich muss das mal wieder Optimieren hab die ganze zeit nur unten reingeschrieben.

[Shrax]

Habs hinbekommen, thx