Archief - HTML/CSS: Prutsen met Divs/background

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

XPlosiv

Legacy Member
Ben hier terug :p

Ik zit met een DIV probleem en met een achtergrond probleem. Ik ben er vrij zeker van dat ik een ongelofelijk domme manier heb gekozen om mijn resultaat proberen te krijgen :D

Hier is de link : http://users.pandora.be/hetfotohuis/test/index1.html

De bedoeling is dus dat het links grijs is en rechts zwart. De overgang van grijs naar zwart zou tussen de foto's moeten blijven. Nu, als je je browser kleiner maakt dan verschuiven die foto's mee en staat dat niet meer in het midden.

Ook als je de site opent op een 17inch staat die overgang van grijs naar zwart niet meer in het midden(zit ier op een 15 inch).

Enig idee hoe ik dit moet oplossen?
Niet te veel lachen aub :p

ps: let niet op die CSS want daar staat -veel- te veel in. Heb die voorlopig overgenomen van mijn schoolproject.

*edit* die 2 foto's enzo da's 1 div hé.
g

grooverider

Legacy Member
niet op de css letten, maar daar zit toch net het probleem?

mss is iets proberen in de aard van: width: 50% ??
X

XPlosiv

Legacy Member
Kan je wat meer uitleg geven aub?
Ik weet ook wel dat het probleem in de CSS zit. Ik wou gewoon duidelijk maken dat 3/4 van de classes niet van toepassing zijn.
T

Tiet

Legacy Member
Als je nu gewoon een achtergrondafbeelding pakt van 1600*1 breed en je centreert die en zet de repeat op repeat-y. Dan zet je je inhoud in 1 div en centreert deze ook. Dan moet je er enkel voor zorgen dat de tekst even lang is (door desnoods wat margin te geven aan je span ofzo) en dan staat dit toch perfect in het midden?
B

Bartel

Legacy Member
Tip:

Maak 1 container die een width en height van 100% heeft.
Verdeel deze container in 2 divs, links en rechts.
Links maak je je achtergrond grijs, en zet je de linkse foto + tekst.
Rechts maak je de achtergrond zwart, en zet je de rechtse foto + tekst.

De foto en tekst positioneert ge dan nog zoals ge wilt. Easy as that :).

Heb het met uw voorbeeld gedaan :). Probeer eerst eens zelf, moest het niet lukken, yell :)
X

Xavez

Legacy Member
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>Dummyfile</title>
<style>
* {margin: 0}
html, body {height:100%}
body {background: #000;}
#leftbg {position: absolute; width: 50%; height: 100%; background:#ccc;}
#fotodiv {position: absolute; top: 50%; left: 50%; height: 240px; margin-top: -120px; width:720px; margin-left: -363px; background: #fff; padding: 6px;}
</style>
</head>
<body>
<div id="leftbg">&nbsp;</div>
<div id="fotodiv">
<img src="http://users.pandora.be/hetfotohuis/test/images/teteatete.jpg" alt="moo" /><img src="http://users.pandora.be/hetfotohuis/test/images/fotoEerstepagina.jpg" alt="moo" />
</div>
</body>
</html>
Zoiets? :). Alles wijst zichzelf wel uit denk ik, behalve mssn de margin-left: die is gelijk aan de helft van de volledige breedte van de div, vermeerderd met de helft van de padding van de div :).
X

XPlosiv

Legacy Member
Heel erg bedankt Xavez, BarTel en killer oo7 voor de uitleg! 'T is gelukt :p
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