Archief - HTML/CSS: imageready-code naar div-code

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.
K

KoenDK

Legacy Member
het lukt allemaal wel in IE6, maar niet in FF :cry:
eigenlijk raar, want ik zie de (kleine) fout echt niet



PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container_homepage">
	<div id="top_homepage">
		<div id="derde"></div>
		<div id="vierde"></div>
		<div id="vijfde"></div>
	</div>
	<div id="middle_homepage">
		<div id="zevende"></div>
		<div id="achtste"></div>
		<div id="negende"></div>
		<div id="tiende"></div>
		<div id="elfde"></div>
	</div>
	<div id="footer_homepage">
		<div id="twaalfde"></div>
		<div id="dertiende"></div>
		<div id="veertiende"></div>
		<div id="vijftiende"></div>
		<div id="zestiende"></div>
	</div>
</div>
</body>
</html>

css :

PHP: 
#derde {
background-image: url(images/homepage_slice_03.gif);
width:292px;
height:52px;
padding-top:20px;
padding-left:18px;
float:left;
}

#vierde {
background-image: url(images/homepage_slice_04.gif);
width:263px;
height:52px;
padding-top:20px;
padding-left:16px;
float:left;
}

#vijfde {
background-image: url(images/homepage_slice_05.gif);
width:205px;
height:52px;
padding-top:20px;
padding-left:25px;
float:left;
}

#zevende {
background-image: url(images/homepage_slice_07.gif);
width:289px;
height:274px;
padding-left:15px;
padding-right:15px;
font-size:15px;
text-align: justify;
float:left;
}

#achtste {
background-image: url(images/homepage_slice_08.gif);
width:8px;
height:274px;
float:left;
}

#negende {
background-image: url(images/homepage_slice_09.gif);
width:253px;
height:274px;
padding-left:10px;
padding-right:15px;
font-size:15px;
text-align: justify;
float:left;
}

#tiende {
background-image: url(images/homepage_slice_10.gif);
width:9px;
height:274px;
float:left;
}

#elfde {
background-image: url(images/homepage_slice_11.gif);
width:201px;
height:274px;
padding-left:18px;
float:left;
}

#twaalfde {
background-image: url(images/homepage_slice_12.gif);
width:289px;
height:31px;
float:left;
}

#dertiende {
background-image: url(images/homepage_slice_13.gif);
width:8px;
height:31px;
float:left;
}

#veertiende {
background-image: url(images/homepage_slice_14.gif);
width:253px;
height:31px;
float:left;
}

#vijftiende {
background-image: url(images/homepage_slice_15.gif);
width:9px;
height:31px;
float:left;
}

#zestiende {
background-image: url(images/homepage_slice_16.gif);
width:201px;
height:31px;
float:left;
}



#container_homepage{
width:760px;
height:380px;
}

#top_homepage{
width:760px;
height:52px;
}

#middle_homepage{
width:760px;
height:274px;
}

#footer_homepage{
width:760px;
height:31px;
}
K

KoenDK

Legacy Member
op de eerste lijn
kan de derde float div er niet meer op, zo blijkt
=> die komt op de tweede lijn
=> tweede lijn is ook fucked up en zo valt alles dus uit elkaar

je kan het altijd vlug effe testen door deze code te kopiëren
ik heb echt geen idee :eek:
K

KoenDK

Legacy Member
amai

ik heb de oorzaak gevonden


padding-top:20px;
padding-left:18px;


in die div zorgt voor problemen



die padding diende voor de tekst, maar in FF gaat hij die padding dus toepassen op de backgroundimage


deze mag gesloten worden :)
Z

Zero Grav

Legacy Member
Ja, amai, dat is geen div-code maar een div overload. Deze code kan bijna onmogelijk correct zijn gebruikt.
K

KoenDK

Legacy Member
Zero Grav zei:
Ja, amai, dat is geen div-code maar een div overload. Deze code kan bijna onmogelijk correct zijn gebruikt.
Klik om te vergroten...

wat voor een dwaze opmerking is dat nu ?
als ik mijn pagina in 3 hoofddelen verdeel (top middle footer)

en bijvoorbeeld 5 sub delen heb in zo 1 stuk, dan is dat toch zo ? :doh:
F

Featherfoot

Legacy Member
KoenDK zei:
wat voor een dwaze opmerking is dat nu ?
als ik mijn pagina in 3 hoofddelen verdeel (top middle footer)

en bijvoorbeeld 5 sub delen heb in zo 1 stuk, dan is dat toch zo ? :doh:
Klik om te vergroten...

jij hebt last van divitis! x :)

edit: vorige post niet gelezen.
w

w3bb3r

Legacy Member
Divitis usually happens when converting a table-based layout into a CSS-P layout.

:lol:
o

orez

Legacy Member
KoenDK das geen dwaze opmerking
HTML bestaat wel uit wat meer als DIV's alleen, zoals P blokken, H blokken, enzovoort...

Trouwens --> CORRECTE prefix gebruiken is toch enorm moeilijk precies hé... na al die tijd al :s
K

KoenDK

Legacy Member
mja, het is inderdaad een verkeerde methode die ik toepas
vroeger gebruikte ik tabelcellen om mijn content te plaatsen, nu gebruik ik divs voor iedere block text die ik ergens specifiek wil plaatsen :lol:
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