Archief - css: div-only

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Flipkikker

Legacy Member
llo,
ik wil dus enkel div's gebruiken om mijn site vorm te geven (geen tables)
nu heb ik het probleem dat de div's die onder mekaar moeten dat wel doen, maar hoe moet ik div's naast elkaar zetten?
p

peng

Legacy Member
lol, zo simpel is de oplossing niet, dat hangt volledig van de situatie af, hoe ge welke, en vooral hoeveel divs naast elkaar wilt zetten enzo
D

DarkBone

Legacy Member
euh.. meestal geeft ge ze een vaste breedte en laat ge ze met float: left/right; naast elkaar 'zweven'.
maar zoals peng zegt, 't is vooral situatie gebonden
L

LunchBox

Legacy Member
ik geef alles zijn coördinaten, en heb daar verder nooit geen last mee gehad.
zaken die dan vertikaal gaan rekken (ik heb het niet voor breedte-liquids) daarvan zet je de div gewoon onder een andere div, en deze twee nogmaals binnen een div. (embedding dus)

zo heeft de onderste geen top-waarde nodig, en wordt hij dus dynamisch gepositioneerd met de hoeveelheid tekst die in de div erboven staat. de extra div errond heeft dan de functie van een container, om de beide divs binnenin (top/bottom) gezamelijk te herpositioneren indien nodig.
F

Flipkikker

Legacy Member
ik wil alles vaste groottes geven, werkt perfect in internet explorer, maar niet in firefox, dus gebruik ik ergens standaardwaarden :help:

http://puutjuwelen.sohosted.com/puutjuwelen/index2.php
en de link naar de stylesheet: http://puutjuwelen.sohosted.com/puutjuwelen/css/style2.css

ik zal nog alle css elementen in volgorde zetten zodat het duidelijker is ;)

Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style2.css">
<title>Layout PuutJuwelen</title>
</head>
<body>
<div id="sitecontainer">
<div id="header"><div id="border"><img src="images/header.jpg"></div></div>
<div id="hrule"></div>
<div id="menu"><div id="button">Informatie</div><div id="button">Contact</div><div id="button">Links</div></div>
<div id="strip"><div id="border"><div id="prev"><img src="images/prev.gif"></div><div id="photorow"><img src="images/photorow.jpg"></div><div id="next"><img src="images/next.gif"></div></div></div>
<div id="hrule"></div>
<div id="text">Zilveren ring met gepolijste doorzichtige steen - Beschikbaar</div>
<div id="imagecontainer"><div id="imagesl"><div id="imagel"><div id="border"><img src="images/imagel.jpg"></div></div><div id="imagel"><div id="border"><img src="images/imagel.jpg"></div></div></div><div id="imager"><div id="border"><img src="images/imager.jpg"></div></div></div>
<div id="footer">PuutJuwelen - Copyright 2005 <div id="button">RealReality</div></div>
</div>
</body>
</html>

Code: 
* 
{
margin: 0px;
padding: 0px;
border: none 0px hidden;
}

#border
{
border: 4px solid #DCDACC;
background-color: #DCDACC;
}

body
{
margin: 0px;
padding: 0px;
background-image: url("../images/pattern.gif");
font-family: verdana;
font-size: 16px;
font-weight: bold;
}

#sitecontainer
{
width: 800px;
height: 675px;
position:absolute;
left:50%;
margin-left:-386px;
}

#header
{
background-color: #DCDACC;
padding: 10px;
background-image: url("../images/pattern2.gif");
width: 800px;
height: 128px;
}

#menu
{
width: 800px;
height: 21px;
background-color: #DCDACC;
}

#hrule
{
overflow: hidden;
width: 800px;
height: 10px;
}

#strip
{
overflow: hidden;
width: 800px;
height: 166px;
padding: 10px;
background-image: url("../images/pattern2.gif");
}

#prev, #next
{
display: inline;
width: 82px;
height: 136px;
}

#photorow
{
display: inline;
width: 584px;
height: 136px;
}

#text
{
border: 4px solid #DCDACC;
background-color: #DCDACC;
width: 800px;
}

#imagecontainer
{
width: 800px;
height: 396px;
background-image: url("../images/pattern2.gif");
}

#imagesl
{
display: inline;
width: 242px;
}

#imagel
{
padding: 10px;
}

#imager
{
display: inline;
padding: 10px;
width: 510px;
}

#footer
{
width: 800px;
height: 21px;
background-color: #DCDACC;
text-align: right;
}

#button
{
display: inline;
width: 100px;
padding-top: 2px;
padding-left: 10px;
padding-right: 5px;
}
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan