[CSS] Div over image

woensdag 13 april 2011 21:41

Acties:

0 Henk 'm!

Topicstarter

Goedenavond,

Op moment van schrijven, ben ik bezig met het designen van m'n eigen website. Ik stuit alleen op een klein probleempje.

Ik ben dus van plan om een jquery image slider toe te voegen op mijn site, maar daarover moet een div'je komen als je ergens overheen gaat. Heel simpel uitgelegd, hoe krijg ik een div over een image? Heb al gegoogled, maar daar beginnen ze constant over position:absolute. Dit werkt wel, maar dan komen al mijn menuknoppen op het plaatje. Ik wil alleen als je er over heen gaat (menuknop) of als die active is dat hij erover heen gaat.

Voor de wijsneusjes, nee, het mag niet als background. De image moet in de <img /> tag staan.

HTML:

      <div id="menu">
        <ul>
          <li><a href="#">Welcome</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="index.php?test">Welcome</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div id="header">
        <img src="header_test.png" />
      </div>

CSS

Cascading Stylesheet:

*{margin:0; padding:0;}
body{background:#FBFBF9; border:1px solid pink;}
a{text-decoration:none;}

.clear {clear:both;}

/*Menu*/
#menu ul{list-style-type:none; font-size:18pt; height:40px; width:100%; z-index:999;}
#menu li a{display:block; float:left; padding:5px; background:#f5f5f5; border:1px solid #f5f5f5; border-radius: 0px 0px 10px 10px; border-top:none; margin-left:2px; }
#menu li a:hover, #menu li a:active{padding-top:25px; box-shadow: 0px 0px 5px #555555;}

#header{background: #ff9900; height:250px; width:1024px;}
#header img{position:relative; float:left; z-index:900;}

In principe mag heel de CSS omgegooit worden.

Afbeeldingslocatie: http://private.fusioxan.nl/screenshots/2011_04_13_21_40_10.png

Wat ik dus wil, is dat een menuknop over de slider heen gaat (wat niks meer is dan een plaatje met een class, de rest is met jquery) als deze actief is.

woensdag 13 april 2011 21:49

Acties:

0 Henk 'm!

beronne

wat ik zal is het volgende: z-index gebruiken (IN CSS)
Je geeft de div zeg maar z-indez: 2;
daarna je img een class meegeven en die dan z-index: 1;

wat z-index doet is het ene element over de ander heen zetten.
zie het als lagen laag 2(z-index 2) light hoger dan laag1(z-index 1)

en volgens mij moet de div en de img position: absolute hebben maar dat weet ik niet meer zo zeker

ik hoop dat je hier wat aan hebt

donderdag 14 april 2011 06:48

Acties:

0 Henk 'm!

jw_moonshine

Ja, je moet iig de div position:absolute geven(en de img ook). Als dan de menuitems meegaan, moet je die opnieuw uitlijnen dmv margin/left/top. Dus idd, je css zal een beetje veranderd moeten worden.
Succes!

donderdag 14 april 2011 09:47

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Het zit 'm inderdaad in de z-index + position: absolute voor het menu. Let er op dat wanneer je een jQuery slider gebruikt, deze vaak ook de images/slides al een z-index geeft, dus moet je het menu een hogere z-index geven.

Maar als ik het goed begrijp wil je de menu-knoppen over de image laten vallen bij een mouse-over? Daar is namelijk geen jQuery voor nodig; tenzij je een animatie wil die in alle browsers werkt.

Hier even een simpele opzet: Bekijk online

HTML:

<!doctype html>
<html>
<head>
    <title>test</title>
    <style>
    #menu { position: absolute; top: 0px; height: 62px; }
    #menu ul, #menu li { margin: 0px; padding: 0px; list-style: none; }
    #menu li { width: 100px; height: 62px; float: left; margin-left: 10px; }
    #menu a { display: block; width: 100px; height: 40px; line-height: 40px;
    background: white; text-align: center; }
    #menu a:hover { padding-top: 20px; border: 1px solid gray;
    border-bottom-width: 2px; border-top: 0px; }
    #header { background: silver; margin-top: 40px; height: 200px; }
    #header img { width: 90%; height: 90%; background: orange; }
    </style>
</head>
<body>

<div id="menu">
    <ul>
    <li><a href="#">Welcome</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="index.php?test">Welcome</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</div>
    
<div id="header">
    <img src="header_test.png" />
</div

</body>
</html>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 14 april 2011 16:09

Acties:

0 Henk 'm!

Fusioxan

Topicstarter

Allemaal bedankt! Even kijken hoe de code van OkkE in elkaar zit, en ik kan verder.

Onderwerpen