[CSS] div over div in een andere div - Softwareontwikkeling

zaterdag 7 januari 2006 11:17

Acties:

Verwijderd

Topicstarter

Hoi,

ik heb mn hoofd liggen breken over layer over layer (met z-order). Het lukt zolang ik absolute positionering gebruik maar dat is niet de bedoeling. Ik wil verschillende div's langs elkaar hebben en in elke div een fotoje van een product met bovenop de foto van het product een "promotiekadertje" met daar de prijs in (zoals in de foto). Ik kan dus niet absolute positionering werken.

http://users.pandora.be/cliffsmoke/testje.gif

Kan iemand me even helpen?
thx

zaterdag 7 januari 2006 11:29

Acties:

Verwijderd

je kunt de divjes floaten:

code:

<html>
<head>
<title> New Document </title>
<style type="text/css">
    .holder {
        float: left;
    }
    .sticker {
        float: left;
    }
    .foto {
        border: 1px solid #000;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>
</head>

<body>
<div class="holder">
    <div class="sticker">
        [img]"sticker.gif">
    </div>
    <div[/img]
        [img]"foto.gif">
    </div>
</div>
</body>
</html[/img]

zaterdag 7 januari 2006 11:34

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zaterdag 07 januari 2006 @ 11:29:
je kunt de divjes floaten:

code:

<html>
<head>
<title> New Document </title>
<style type="text/css">
    .holder {
        float: left;
    }
    .sticker {
        float: left;
    }
    .foto {
        border: 1px solid #000;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>
</head>

<body>
<div class="holder">
    <div class="sticker">
        [img]"sticker.gif">
    </div>
    <div[/img]
        [img]"foto.gif">
    </div>
</div>
</body>
</html[/img]

Hier staat het promotielabeltje gewoon naast de foto. Het moet er echt op plakken

zaterdag 7 januari 2006 12:02

Acties:

Verwijderd

je hebt gelijk je zou de foto als achtergrond image van de foto-div kunnen gebruiken:

code:

<html>
<head>
<title> New Document </title>
<style type="text/css">
    .holder {
        float: left;
    }
    .sticker {
        float: left;
        background: #fc0;
        position:relative;
    }
    .foto {
        border: 1px solid #000;
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        height: 200px;
    }
</style>
</head>

<body>
<div class="holder">
    <div class="sticker">
        [img]"sticker.gif">
    </div>
    <div[/img]
    </div>
</div>
</body>
</html>

anders zit je volgens mij toch echt vast aan absolute positionering. waarom wil je dat niet?

zaterdag 7 januari 2006 12:14

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zaterdag 07 januari 2006 @ 12:02:
je hebt gelijk je zou de foto als achtergrond image van de foto-div kunnen gebruiken:

code:

<html>
<head>
<title> New Document </title>
<style type="text/css">
    .holder {
        float: left;
    }
    .sticker {
        float: left;
        background: #fc0;
        position:relative;
    }
    .foto {
        border: 1px solid #000;
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        height: 200px;
    }
</style>
</head>

<body>
<div class="holder">
    <div class="sticker">
        [img]"sticker.gif">
    </div>
    <div[/img]
    </div>
</div>
</body>
</html>

anders zit je volgens mij toch echt vast aan absolute positionering. waarom wil je dat niet?

omdat ik rekening moet houden met andere div's die er boven staan, die kunnen van hoogte verschillen. Ik had ook al aan de background gedacht maar ik wil een link op de foto kunnen zetten

zaterdag 7 januari 2006 12:22

Acties:

Verwijderd

nog even nagedacht (en meteen overbodige divs eruit gehaald):
(je hoeft trouwens niet steeds mijn hele post te quoten

)

code:

<html>
<head>
<title> New Document </title>
<style type="text/css">
    .holder {
        float: left;
    }
    .sticker {
        float: left;
        margin-left: -110px;
        position:relative;
    }
    .foto {
        float: left;
        border: 1px solid #000;
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        height: 200px;
    }
</style>
</head>

<body>
<div class="holder">
    [img]"foto.gif">
    <img[/img]
</div>
</body>
</html>