[CSS] positioneren van overlappende elementen

[bart1074]

Ik werk aan een Wordpress template en wil de standaard header vervangen met een zelf gemaakte header.
Echter zit er in hetzelfde element als waar de header moet komen ook een ander element dat de navigatie van de website doet. Het header element moet zeg maar links gepositioneerd worden en het navigatie element aan de rechterbovenkant er min of meer bovenop. Dit aangezien ze net overlappen. Nou heb ik dit weten te realiseren met behulp van position:relative en position:absolute, maar ik heb het idee dat het per beeldscherm en per browser nu verschilt omdat het zich niet positioneert ten opzichte van het juiste element. Ik hoop dat duidelijk is wat ik wil oplossen. Hoe kan ik dit het beste realiseren? Op deze website is het resultaat te zien.

HTML:

<div id="wrapper">

    <div id="header">
        <a href="http://www.petraterdoest.nl/">
            <div id="logo">
            </div>
        </a>
        <div id="nav">
        <?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('Top Navigation') ) : ?>
            <ul>
                <?php wp_list_pages('title_li='); ?>
            </ul>
        <?php endif; ?>
        </div>
    </div>

Cascading Stylesheet:

#wrapper {
width:900px;
margin-top:30px;
margin:15px auto;
}
#header {
float:left;
width:900px;
border-bottom:1px dotted #ccc;
margin:0;
}
#logo {
background-image: url(images/banner_logo.gif);
height:252px;
position:relative;
width:600px;
}
#nav {
position:absolute;
top:10px;
right:380px;
width:auto;
padding:12px 0 0;
}

[MueR]

Behalve dat divs niet binnen a's mogen staan, moet je positions altijd relatief maken aan de (directe) parents. Er kan niet relatief gepositioneerd worden (vziw iig) vanaf siblings, laat staan vanuit children van siblings, omdat die gewoon niet binnen de dom tree zitten.

[bart1074]

MueR schreef op donderdag 23 september 2010 @ 13:56:
Behalve dat divs niet binnen a's mogen staan, moet je positions altijd relatief maken aan de (directe) parents. Er kan niet relatief gepositioneerd worden (vziw iig) vanaf siblings, laat staan vanuit children van siblings, omdat die gewoon niet binnen de dom tree zitten.

Dank voor uw vlugge antwoord.

- Ik had al het vermoeden dat die a om de divs niet juist was, maar hoe kan ik op een andere manier van mijn header image dan een link maken zodat als een soort 'home' knop functioneert?

- Ik had inderdaad al gelezen dat ik de position altijd moet relateren aan een parent, maar hoe kan ik zorgen dat de #nav en #logo een child worden van #header. Althans, ik vermoed dat dat de manier is om het e.e.a. goed te relateren. Werkt dat met een SPAN element?

Dank!

EDIT: Ik zie nu namelijk al dat IE het anders weergeeft dan FF en Chrome.

[ Voor 7% gewijzigd door bart1074 op 23-09-2010 14:03 ]

[MueR]

Met je huidige code zijn je #logo en #nav al children van #header, zie hieronder ruwweg je DOM tree
[list]• #wrapper[list]• #header[list]• a

• #logo
• #nav

Je kan die link ook gewoon het id #logo meegeven, heb je heel die div niet nodig. Dus een position:relative op je #header en klaar is Murderer.

Een span is eigenlijk gewoon een loze inline container die je (bijvoorbeeld) toestaat wat afwijkende styling op bepaalde delen van je content te doen, het is net een <a>, maar dan zonder linkfunctionaliteit of semantische betekenis.

[ Voor 26% gewijzigd door MueR op 23-09-2010 14:11 ]

[bart1074]

MueR schreef op donderdag 23 september 2010 @ 14:06:
Met je huidige code zijn je #logo en #nav al children van #header, zie hieronder ruwweg je DOM tree
[list]• #wrapper[list]• #header[list]• a

• #logo
• #nav

Je kan die link ook gewoon het id #logo meegeven, heb je heel die div niet nodig. Dus een position:relative op je #header en klaar is Murderer.

Een span is eigenlijk gewoon een loze inline container die je (bijvoorbeeld) toestaat wat afwijkende styling op bepaalde delen van je content te doen, het is net een <a>, maar dan zonder linkfunctionaliteit of semantische betekenis.

Wat betreft het id #logo meegeven aan de a begrijp ik. Maar hoe bedoel je position:relative op m'n header. Dat is toch in feite wat ik al heb? de position van mijn #nav en #logo zijn toch al gerelateerd aan #header?

Ik heb het onderstaande getest en het resultaat is dat de elementen weer onder elkaar staan of, in het geval van het id "#logo" toekennen aan het a element, verdwijnt de hele header image. Blijkbaar begrijp ik dus niet wat je bedoelt en doe ik het verkeerd.

HTML:

<div id="header">
        <a href="http://www.petraterdoest.nl/" id="logo">&nbsp
        </a>
        <div id="nav">
        <?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('Top Navigation') ) : ?>
            <ul>
                <?php wp_list_pages('title_li='); ?>
            </ul>
        <?php endif; ?>
        </div>
    </div>

Cascading Stylesheet:

#wrapper {
width:900px;
margin-top:30px;
margin:15px auto;
}
#header {
float:left;
width:900px;
border-bottom:1px dotted #ccc;
margin:0;
}
#logo {
background-image: url(images/banner_logo.gif);
height:252px;
position:relative;
width:600px;
}
#nav {
position:relative;
top:10px;
right:10px;
width:auto;
padding:12px 0 0;
}

[MueR]

Je moet expliciet position:relative op #header meegeven, en absolute op #logo en #nav. Absolute positioning gaat namelijk parents in de tree doorlopen tot er een element wordt gevonden met position relative, zodat er vanaf daar gerekend kan worden. Mocht dat niet gevonden kunnen worden, gaat er relatief gepositioneerd worden tov body. Je moet vervolgens wel een height opgeven aan je header, want doordat je alles absoluut gaat positioneren, heeft hij geen content meer om aan mee te schalen. Je zou je dan ook kunnen afvragen waarom je uberhaupt #logo absoluut positioneert, aangezien het eigenlijk alleen je menu is wat abnormaal moet functioneren.

Overigens klopt er niet veel van je CSS in zn algemeen..

Cascading Stylesheet:

#wrapper {
margin-top:30px;
margin:15px auto; /* wat zou dit doen met bovenstaande regel denk je? */
}
#header {
float: left; /* Float op een element wat op de volledige breedte moet gaan zitten, waarom? */
}
#nav {
width:auto; /* Is er een reden om tegen de browser te zeggen dat hij zelf maar de breedte moet uitvogelen? Tenzij je ergens anders specifiek een breedte hebt opgegeven, is width:auto het standaard gedrag namelijk */

[bart1074]

MueR schreef op donderdag 23 september 2010 @ 15:05:
Je moet expliciet position:relative op #header meegeven, en absolute op #logo en #nav. Absolute positioning gaat namelijk parents in de tree doorlopen tot er een element wordt gevonden met position relative, zodat er vanaf daar gerekend kan worden. Mocht dat niet gevonden kunnen worden, gaat er relatief gepositioneerd worden tov body. Je moet vervolgens wel een height opgeven aan je header, want doordat je alles absoluut gaat positioneren, heeft hij geen content meer om aan mee te schalen. Je zou je dan ook kunnen afvragen waarom je uberhaupt #logo absoluut positioneert, aangezien het eigenlijk alleen je menu is wat abnormaal moet functioneren.

Overigens klopt er niet veel van je CSS in zn algemeen..

Geweldig, veel dank. Ik heb weer wat geleerd. Ik snapte niet dat position:relative diende als een referentiepunt. Ik snapte het verschil niet echt denk ik. Maar nu wel, dus dat is super!

Ik zal m'n html en css uberhaupt nog even valideren. Echt heel erg bedankt voor de tijd en moeite.