Grafische gevorderde |
|
ik heb een probleem met mijn knopjes in het menu..
<div id="header">
<!--spanner-->
<div id="menu">
<a id="menu_home" href="index.htm"></a>
<a id="menu_portfolio" href="portfolio.htm"></a>
<a id="menu_about" href="about.htm"></a>
<a id="menu_contact" href="contact.htm"></a>
</div>
</div>
<!--spanner--> <a id="menu_home" href="index.htm"></a> <a id="menu_portfolio" href="portfolio.htm"></a> <a id="menu_about" href="about.htm"></a> <a id="menu_contact" href="contact.htm"></a>
/*!!!!!!!!!!!!Header!!!!!!!!!!!!*/
div#header{
width:100%;
height:210px;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-image: url('images/menu.jpg');
background-color: #FFF;
background-repeat: norepeat
}
/*!!!!!!!!!!!!Menu!!!!!!!!!!!!*/
div#menu{
margin: 0 0 0 385px;
width:200px;
height:210px;
background-color: #FFF;
}
a#menu_home{
position: relative;
width:60px;
height: 20px;
top: 100px;
background-image: url('images/menu_home.jpg');
}
a#menu_home:hover{
background-image: url('images/menu_home_hover.jpg');
}
a#menu_portfolio{
position: absolute;
width:111px;
height: 20px;
background-image: url('images/menu_portfolio.jpg');
top: 113px;
right: 485px;
}
a#menu_portfolio:hover{
background-image: url('images/menu_portfolio_hover.jpg');
}
/*!!!!!!!!!!!!Header!!!!!!!!!!!!*/ div#header{ width:100%; height:210px; margin: 0 0 0 0; padding: 0 0 0 0; background-image: url('images/menu.jpg'); background-color: #FFF; background-repeat: norepeat } /*!!!!!!!!!!!!Menu!!!!!!!!!!!!*/ div#menu{ margin: 0 0 0 385px; width:200px; height:210px; background-color: #FFF; } a#menu_home{ position: relative; width:60px; height: 20px; top: 100px; background-image: url('images/menu_home.jpg'); } a#menu_home:hover{ background-image: url('images/menu_home_hover.jpg'); } a#menu_portfolio{ position: absolute; width:111px; height: 20px; background-image: url('images/menu_portfolio.jpg'); top: 113px; right: 485px; } a#menu_portfolio:hover{ background-image: url('images/menu_portfolio_hover.jpg'); }
Ik had eerst alles gebouwd zo als de "menu_portfolio" alleen als je dan op een andere resolutie kijkt verschijft het menu, door dat hij de rand van je browser pakt ipv de div. dat vond ik al vreemd maar ok.
ik heb toen een extra div gemaakt, "menu" en deze in de "header" div gezet, vervolgens heb ik de "menu" div op de jusite plek gezet en ben nu de HOME knop aan het plaatsen. Alleen deze is neit meer zichtbaar. Als ik hem position: absolute maak is hij weer wel zichtbaar.
ik zoek dus iemand die mij kan vertellen waarom dat is en hoe ik er van af kom, of naja hoe het wel werkt!
|