Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

img onderaan div positioneren

Win - 21/11/2006 10:51
Nieuw lid		Hoe plaats ik de afbeelding onderaan de grijze balk, zonder tabellen te gebruiken? http://users.pandora.be/bambam/trouble1/html.htm

4 antwoorden

Gesponsorde links

marten - 21/11/2006 10:58
Beheerder		php code - Bekijk de code zonder highlighting - Klap code in <div class=balk></div> <div class=balk></div> php code - Bekijk de code zonder highlighting - Klap code in div.balk { background-color: #hierjekleur; width: hier hoe lang het moet height: hoogtre hier } div.balk { background-color: #hierjekleur; width: hier hoe lang het moet height: hoogtre hier } Bedoeling is dus dat je een div maakt met een grijze achtergrond. Positie enzo moet je maar ff uitzoeken want met deze info kan ik daar niks mee.

Win - 21/11/2006 11:26
Nieuw lid		De hoogte van de div (<div id="navigation">) met grijze achtergrond is afhankelijk van hoeveel tekst er rechts staat, dus een vaste hoogte meegeven is niet mogelijk. Hoe maak ik die div even hoog als de div met tekst (<div id="content">)? De code staat op http://www.plaatscode.be/3173/

xSc - 21/11/2006 11:28
Onbekend		Door geen hoogte mee te geven. Ik heb je code niet bekeken maar misschien helpt het ook als je position: relative gebruikt.

Thomas - 21/11/2006 11:58 (laatste wijziging 21/11/2006 14:09)

Moderator

Je vraagt nu 2 verschillende zaken.

* hoe plaats ik een plaatje onderaan een div
* hoe laat ik een div doorlopen tot de lengten van een andere (langere) div

De tweede vraag is al meerdere malen beantwoord. Gebruik in een omringende div een achtergrondkleur of -plaatje. Zie ook Faux columns maken.

De eerste vraag:
Probeer iets met CSS in combinatie met je plaatje (vertical-align of bottom, of een top-margin van 100% en een negatieve top ter hoogte van een plaatje), of maak er een achtergrondplaatje van, dan kun je deze ook redelijk precies positioneren, onafhankelijk van de hoogte van andere divs.

EDIT: Dit lijkt het makkelijkste: Zet het plaatje achter de container-div, en gebruik dan een relatieve postionering:

php code - Bekijk de code zonder highlighting - Klap code in

                <!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*
{
	margin: 0px;
	padding: 0px;
}

body
{
	margin: 10px;
}

#container
{
	width: 600px;
	background-color: #ccc;
}

#left
{
	float: left;
	width: 180px;
	height: 100%;
	padding: 10px;
}

#right
{
	float: left;
	width: 380px;
	padding: 10px;
	background-color: #ffffff;
}

.clear
{
	clear: both;
}

.pic
{
	position: relative;
	top: -50px; /* afhankelijk van de hoogte van je plaatje */
}
</style>
</head>

<body>
<div id="container">
	<div id="left">
	</div>
	<div id="right">
Fusce vitae odio sit amet ante facilisis pharetra. Sed cursus dolor. Nulla facilisi. Proin pretium, odio vel dignissim auctor, arcu arcu imperdiet mi, in imperdiet purus dolor ut urna. Quisque non tellus. Donec quis ipsum. Sed vel turpis a tellus fermentum adipiscing. Curabitur vel tortor. Morbi eleifend. Phasellus a nibh. In placerat risus sit amet nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent imperdiet. Proin ornare, augue tristique blandit elementum, odio massa convallis lectus, sit amet malesuada libero nisi ut eros. Donec at eros. Aliquam vitae pede. In vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eleifend fringilla nisl. Nam eu dui euismod quam consectetuer eleifend.
	</div>
	<div class="clear"><!-- no content --></div>
</div>
<img src="pic.gif" class="pic" alt="" />
</body>
</html>
            
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*
{
	margin: 0px;
	padding: 0px;
}
 
body
{
	margin: 10px;
}
 
#container
{
	width: 600px;
	background-color: #ccc;
}
 
#left
{
	float: left;
	width: 180px;
	height: 100%;
	padding: 10px;
}
 
#right
{
	float: left;
	width: 380px;
	padding: 10px;
	background-color: #ffffff;
}
 
.clear
{
	clear: both;
}
 
.pic
{
	position: relative;
	top: -50px; /* afhankelijk van de hoogte van je plaatje */
}
</style>
</head>
 
<body>
<div id="container">
	<div id="left">
	</div>
	<div id="right">
Fusce vitae odio sit amet ante facilisis pharetra. Sed cursus dolor. Nulla facilisi. Proin pretium, odio vel dignissim auctor, arcu arcu imperdiet mi, in imperdiet purus dolor ut urna. Quisque non tellus. Donec quis ipsum. Sed vel turpis a tellus fermentum adipiscing. Curabitur vel tortor. Morbi eleifend. Phasellus a nibh. In placerat risus sit amet nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent imperdiet. Proin ornare, augue tristique blandit elementum, odio massa convallis lectus, sit amet malesuada libero nisi ut eros. Donec at eros. Aliquam vitae pede. In vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eleifend fringilla nisl. Nam eu dui euismod quam consectetuer eleifend.
	</div>
	<div class="clear"><!-- no content --></div>
</div>
<img src="pic.gif" class="pic" alt="" />
</body>
</html>
 

Je kunt het plaatje ook in het aparte div zetten.

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten