Archief - CSS: div repeat niet

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 zit met een probleempje.
Ik zou graag een div een bg geven met een width van bv 720px en als je browser venster groter is dat hij gewoon de bg repeat. Er is toch bijna niemand met een resolutie van 640 dus dacht ik dat 720 wel goed ging zijn.

Maar wanneer ik het volgende doe bv:

Code: 
#header
{
background: url(images/header.png) repeat-y;
width: 720px;
height: 140px;
}

Dan krijg in mijn 1px afbeelding met een hoogte van 140px maar een breedte van 1px

iemand hier een oplossing voor?
n

n00bslayer

Legacy Member
Code: 
#header
{
background: url(images/header.png) repeat 0 0;
width: 720px;
height: 140px;
}
De background krijgt standaard een repeat mee (dus zowel een repeat-x, herhalen over de x-as, als een repeat-y) en wordt in het midden gecentreerd.
0 0 dient om je background linksboven te positioneren.
M

Marcooo

Legacy Member
Mijn afbeelding is 1px
Maar ook doe ik repeat 0 0 lukt het nog niet, hij wilt gewoon niet herhalen!
X

Xcessive-

Legacy Member
Als gewoon repeat niet werkt dan doe je toch iets verkeerd.
Z

Zero Grav

Legacy Member
#header {
background: url(images/header.png);
width: 720px;
height: 140px;
}

Waarom ergens repeat bijzetten als dat het standaardgedrag is? Ik hoop wel dat uw #header een div is (en dus een blockelement)? Png, gif, jpeg, .. het repeat.
M

Marcooo

Legacy Member
Hieronder vind je de code!
En ook de link: http://fastwebdev.be/projecten/mrsrose/index.htm

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</title>
<style type="text/css">

body
{
	background: #b18e90;
	font-family: "Trebuchet MS";
	font-size: 75%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}	

#container
{
	margin: 0;
}

#header
{
	background: url(images/header.png);
	width: 720px;
	height: 140px;
}
#lijn
{
	background: #926e70;
	height: 2px;
}

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

#logotekst
{
	background: url(images/logotekst.png);
	width: 453px;
	height: 66px;
	left: 50%;
}

</style>
	
</head>
<body>
	<div id="header">
	</div>

	<div id="lijn"></div>
	

</body>
</html>

Zoals je ziet repeat het wit gedeelde dus niet :(
Die lijn wel maar die klopt ook niet meer als de content erin komt.
Als het me lukt het wit te repeaten kan ik het zo op alles toepassen met een vaste waarde van 720 px en de rest repeat.
v

virox

Legacy Member
niet moeilijk dat het niet repeat... je header is maar 720 breed dus zal die header ook maar repeaten tot aan 720 en niet over de ganse lijn van je scherm...
M

Marcooo

Legacy Member
Dat is toch de vaste waarde? Zodat als je reso kleiner is je toch di waarde blijft behoud?
Of ben ik fout?
v

virox

Legacy Member
mja ge meot die div zien als een blokje in je site, eentje dat 720px breed is en 140px hoog.
als achtergrond geeft ge header.png mee.
Dus zal de browser dat lezen dat hij enkel die blok die achtergrond zal meegeven en automatisch repeaten tot 720px.
Als je wil dat je de browser de over de ganse breedte van het scherm die achtergrond geeft dan moet je die limiet van 720px wegdoen. Automatisch zal de div zich dan uitstrekken over de ganse breedte van het scherm.
Hopelijk helpt deze uitleg.
M

Marcooo

Legacy Member
Het helpt wel maar ik als ik het zo doe, en men gaat kleiner dan 720 px blijft mijn logo wel staan maar de header word gewoon kleiner. Ik wil dat hij een vaste waarde heeft maar tegelijk ook liquid is. Kan toch?
v

virox

Legacy Member
probeer eens...

Code: 
min-width: 720px;

dan heeft je header ten allentijde minimum 720px breedte en indien het zichtbare gedeelte groter is dan 720 zal hij zich aanpassen.
X

Xcessive-

Legacy Member
Geen optie om die achtergrond te repeaten in de body?

EDIT: Had niet gezien dat het 1px hoog is. Waarom maak je niet die achtergrond 142px hoog met ineens die lijn erbij en dan in de body repeaten?
M

Marcooo

Legacy Member
Ja en het lichtroze gedeelte dan?
Het moet toch mogelijk zijn die div te repeaten of niet?
Xavez waar zedde nu? :P
X

Xavez

Legacy Member
Heb morgen nog examen man, chill. Ik check het wel eens in de loop van de week :).
k

kRa

Legacy Member
marinho zei:
Ja en het lichtroze gedeelte dan?
Het moet toch mogelijk zijn die div te repeaten of niet?
Xavez waar zedde nu? :P
Klik om te vergroten...

het lichtroze kunde dan toch gewoon laten staan...

body {
background: #b18e90 url(images/header.png) repeat-x;
}
o

orez

Legacy Member
*kuch* *hoest*

1px op 1px, kan dus slechts, 1 kleurke bevatten...
Waarom werk jij met een background-image?

Stel dan toch gewoon de background-color in .... waarom moeilijk doen?

een div voor een lijn?? --> er bestaat zoiets als hr in html.

Je wilt het veel te moeilijk maken.
En als jij een breedte van 720px meegeeft, dan is dat de fixed with. dus 720px in alle resoluties... tegenwoordig zijn de richtlijnen trouwens ook om te ontwikkel voor 1024px breedte, omdat zo goed als niemand nog de 800px resolutie gebruikt. Creëer gewoon een gecentreerde site met een vaste breedte van bv 1000px... makkelijkste oplossing en trouwens ook de meest gebruikte oplossing.

Als het enkel is om uw logo vast te houden is de oplossing om uw logo img te loaten floaten links van uw div. de img een vaste breedte meegeven in uw css, en de rest van uw header in de div ernaast te definiëren. Dan staat uw logo vast, zal het niet verkleiner of verdwijnen, en zal de rest meerekken.
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