Archief - CSS: div probleempje in CSS

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

Marcooo

Legacy Member
Ik ben momenteel bezig met mijn nonkel zijn website in xhtml te zetten.
Maar ik zit met een probleempje. Ik heb een container gemaakt en hier steekt dus al mijn div's in. Maar nu dat ik net de content img wou invoeren ging deze uit de container, aloewel deze er toch inzit. Tot gevolg is dat mijn header niet meer doorloopt en al de rest. Iemand die mij kan helpen. Een foto van het probleem: http://www.fastwebdev.be/projecten/css.jpg

De code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Mrs.Rose - Tea-room & Ijssalon</title>
	
	<style type="text/css">
	
	body
{
	background: #b18e90;
	font-family: "Tahoma";
	font-size: 11px;
	color: #fff;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

arrow
{
	float: left;
	background: url(images/a.gif);
	width: 3px;
	height: 5px;
}

.container
{
	
}

.header
{
	position: relative;
}

.header .opmaak
{
	position: absolute;
	background: #fdf3f1;
	width: 100%;
	height: 140px;
}

.header .logo
{
	position: absolute;
	background: url(images/logo.png);
	width: 200px;
	height: 171px;
	z-index: 1;
}

.header .logotekst
{
	position: absolute;
	background: url(images/logotekst.png);
	width: 453px;
	height: 66px;
	margin-left: 220px;
	margin-top: 62px;
}

.header .lijn
{
	position: absolute;
	background: #8a6668;
	width: 100%;
	height: 2px;
	margin-top: 138px;
}

.menu
{
	
}

.menu .opmaak
{
	float: left;
	position: absolute;
	width: 250px;
	height: 100%;
	margin-top: 200px;
}

.menu .hetmenu
{
	background: url(images/menu.png);
	width: 76px;
	height: 9px;
	margin-left: 50px;
}

.menu .hetmenutekst
{
	width: 100px;
	height: 100px;
	margin-left: 67px;
}

.menu .navigatie
{
	background: url(images/navigatie.png);
	width: 72px;
	height: 11px;
	margin-left: 50px;
}

.menu .navigatietekst
{
	width: 100px;
	height: 100px;
	margin-left: 67px;
}

.content
{
	position: relative;
	float: left;
	background: url(images/content.png);
	width: 723px;
	height: 553px;
	margin-top: 200px;
	margin-left: 250px;
}
		
	</style>
	</head>
	<body>
	<div class="container">
		<div class="header">
			<div class="opmaak">
				<div class="logo"></div>
				<div class="logotekst"></div>
				<div class="lijn"></div>
			</div>
		</div>
		<div class="menu">
			<div class="opmaak">
				<div class="hetmenu"></div>
				<div class="hetmenutekst"><br />
				Home <br />
				Info <br />
				Fotos <br />
				Gastenboek <br />
				Contact
				</div>
					<div class="navigatie"></div>
					<div class="navigatietekst"><br />
					Ontbijt <br />
					Warme maaltijden <br />
					Koude maaltijden <br />
					Saladjes <br />
					Snacks <br />
					Drank
					</div>
				</div>
			</div>
			<div class="content">sd</div>
		</div>
	</body>
</html>

Alle sinds al heel fel bedankt!
a

azerty_2006

Legacy Member
Float's gebruiken zou ik zo zeggen. Eigenlijk is het best om voor alle divs in een container float's te gebruiken. Kan veel tijd besparen om alles juist te plaatsen.
M

Marcooo

Legacy Member
Hij staat niet online, maar anders zet ik em even online, ik plaats zo de link!
s

stoomboot

Legacy Member
Euhm, 'k denk dat het te maken heeft met dat ge den header "100%" geeft en dan de content een vaste breedte.

Als ik men scherm minimaliseer tot kleiner dan die breedte van de content + breedte van menu, en ik scroll naar rechts zie ik hetzelfde probleem. Dus misschien die header ook een bepaalde breedte geven ipv de procentjes boven te halen.

Wat ik ook opmerk is dat die content meer speling tussen het menu laat bij IE dan bij FF...
(kan wel opgelost worden door die float: left in content weg te doen... maar dan doet FF weer moeilijk met die header.)


Ik ben te lui om dat heel gedoe te herschrijven, dus mijn tip:
http://blog.html.it/layoutgala/LayoutGala07.html
(en dan kunt ge die rechterkolom "extra" nog altijd verwijderen en de width ervan bijtellen bij de content)
D

Devastate

Legacy Member
waarom heb je dingen als "het menu" in een image geplaatst?
M

Marcooo

Legacy Member
Khad da eens gemaakt voor mn nonkel en toen opgeslagen als een image, hij zei dat die goed was en ik die moest gebruiken, en dus dacht ik, dan gebruik rechtstreeks die image :) Is daar iets mis mee soms?
D

Devastate

Legacy Member
'k vind het nogal vreemd daar ge uw ander tekst in hetzelfde lettertype hebt...
kan gemakkelijk zonder image, niet?

en maakt uw website meer browseable zonder layout.

of; ge kan altijd werken met img-replacement. same voor de header.
v

virox

Legacy Member
Code: 
.header
{
	position: relative;
}

.header .opmaak
{
	position: absolute;
	background: #fdf3f1;
	width: 100%;
	height: 140px;
}
ge hebt een div header en daarin een div opmaak met daarin dan nog es content van je header...
die div opmaak is voor niets nodig en het probleem ligt bij die 100%

nog een puntje dat ge eigenlijk nie achtervraagt... steek je menu in een lijstje...
M

Marcooo

Legacy Member
Maar da zijn echt dingen voor later, die doe ik zeker weten wel, maar het gaat mij vooral om het probleem momenteel. Waar niet echt iemand mij een antwoord op heeft kunnen geven :( Snik

*edit: 100% veranderd in 500px en nog steeds zelfde probleem :(
X

Xavez

Legacy Member
:)

Je moet anders denken bij de opbouw van je CSS en bij het slicen van je site: de background van je body wordt dan een 1 pixel brede afbeelding die je horizontaal herhaalt. Je header wordt in twee stukken gekapt: het deel boven de horizontale donkere lijn en het deel onder de horizontale donkere lijn. Het deel erboven ga je als background-image replacement in je headerdiv zetten en het deel eronder zet je linksboven als background-image in je menudiv. Door middel van een marge zet je dan de inhoud van je menu zelf wat lager. Je menudiv moet je links floaten en een absolute margin van bovenaf geven, je content-div (het donkerste roze) float je eveneens links, maar geef je van links af een absolute marge mee. De rest wijst zichzelf wel uit.

Die tip was gratis. Volgende keer verwacht ik dat je niet meer arrogant en astrant reageert als ik een negatieve reactie plaats in een topic (van iemand anders!). 'tis zoiets als basic respect. En ja zo een grote eikel ben ik :).
M

Marcooo

Legacy Member
Enorm bedankt voor de tip, maar ook dat lost mijn probleem niet op spijtig genoeg.
Ik ben ten einde raad.
D

Devastate

Legacy Member
marinho zei:
Enorm bedankt voor de tip, maar ook dat lost mijn probleem niet op spijtig genoeg.
Ik ben ten einde raad.
Klik om te vergroten...

eigelijk lost dat je probleem wel op. jij werkt gewoon met 1 grote image als content-bg; terwijl dat maar een strookje van 1px zou moeten zijn die zichzelf herhaalt. dan krijg je dit soort problemen niet. ik zou trouwens ook voorzien dat de content verticaal groter kan worden hoor, als je met menu's enzo gaat werken. een scrollbar moeten weergeven in dat kadertje zou echt zonde zijn.
M

Marcooo

Legacy Member
Ook als ik enkel een pixel gebruik heb ik het zelfde probleem, met of zonder de float's :(
X

Xcessive-

Legacy Member
Ik zou zeker en vast je website opnieuw doen want al die divs is gewoon een warboel en moeilijker om een probleem te vinden.

Al geprobeerd je container een breedte te geven?
D

DeFlup

Legacy Member
Je beseft toch dat PNG transparency niet door alle browsers ondersteund wordt?
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