bg image vs wrapper

  • Onderwerp starter Onderwerp starter xara
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
X

xara

Nieuwe gebruiker
Lid geworden
29 jan 2012
Berichten
3
Als ik m'n website verklein (schalen) dan valt de tekst buiten de wrapper. Tenminste, zo lijkt het. Volgens mij is het de bg-afbeelding die niet goed werkt. Hij lijkt bij het schalen te croppen. Zover ik weet heb ik me aan alle regels gehouden en ik heb dan ook werkelijk geen idee wat ik fout doe.
Ik hoop dat iemand mij kan helpen want ik weet het echt niet meer. Alvast bedankt.

CSS:
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #4F3621;
}
body {
background-position: center top;
background-image: url('images/Homepage foto x.jpg');
background-color: #E2DEC4;
background-repeat: no-repeat;
}
.alignLeftBody {
padding-right: 15px;
padding-bottom: 15px;
float: left;
}
#sidebar {
width: 200px;
float: right;
height: 590px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 980px;
position: relative;
padding-right: 20px;
}
#header {
height: 455px;
}
#maincontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #4F3621;
height: 857px;
width: 710px;
}
 
Splits de letters van de url even voor Google: y a m a t o d o j o . n l (weet niet of dat werkt maar goed).

Ik heb nogmaals de bevestiging gekregen dat de bg image te groot is. Jammer, want dan zou het design verloren gaan en worden vervangen door een aantal kolommen met achtergrondkleuren. Alvast bedankt voor jullie hulp
 
Hoi xara,
Welkom op het forum!
Het background-image is weliswaar aan de brede kant, maar dat is het niet. De eigenlijke inhoud is 1000px breed, en dat past er krap op bij een resolutie van 1024*768px. Bij een kleinere resolutie of smaller window mag er aan de linkerkant niets te zien zijn, en moet naar rechts scrollen geen problemen gaan geven. En ook dat kan!
  • De reden zit 'm in de pagina-opbouw: de structuur waarin de verschillende elementen hun plaats hebben. Daarbij is het mis gegaan: het kolommetje rechts (met de logo's) ontsnapt aan de pagina-breedte, en komt daardoor bij een smal window naast de achtergrond te staan. - En het onderste schaduwrandje van de footer valt buiten beeld. *)
Dus gaan we de pagina opnieuw opzetten, met een schone lei. Het leuke is, dat zal blijken dat de hele #wrapper niet nodig is! :)
Maar eerst gaan we lekker knippen en plakken.

Wordt vervolgd!

Met vriendelijke groet,
CSShunter
________
*) De diepere oorzaak zal zijn dat te haastig begonnen is de pagina te vullen, voordat het model goed en wel overeind stond. Bij het vastleggen van het pagina-model moet stap voor stap te werk gegaan worden (zelfs voetje voor voetje!, zie de Golden Rule nummer 2).

Een mix van een css-opbouw en tabellen voor de opmaak geeft vaak problemen: tabellen hebben de neiging zich zo groot te maken als hun inhoud vraagt. Het kan beter met css alleen. Zie ook Richtlijn 11.1 van de Webrichtlijnen ("Voor toegankelijke websites van hoge kwaliteit").

In dit geval speelt ook een rol dat de #wrapper nog vóór de <body> begint, en dat kan natuurlijk niet. Als je de html-validator even om z'n mening vraagt (aanbevolen: zie m'n handtekening hieronder), signaleert die dat ogenblikkelijk voor je:
Code: 
validator.w3.org/check?uri=http%3A%2F%2Fyam atodojo.nl%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;ss=1&amp;group=0&amp;verbose=1&amp;user-agent=W3C_Validator%2F1.2
(weer even de spatie na "yam" er uit halen).
 
Laatst bewerkt:
Hoi xara,
Eerst het knippen
De pagina-background is nu 1.559px * 1.500px en maar liefst 700kB groot. De schaar er in!

Horizontaal
Naast het middenstuk zitten links en rechts flinke stroken in één kleur. Die kunnen er af, want met css kan je de background die ene kleur geven op alle punten waar de background-afbeelding niet komt.
Het schaduw-verloop links en rechts is 40px (daar past dan ook het bruine strookje rechts bij de footer in).
Het middenstuk is 1000px, en het totaal kan dus 1080px breed worden ipv 1600px.
  • Dat scheelt (1600-1080)*1500 = 780.000 pixels die niet gedownload hoeven te worden.
Verticaal
Maar ook verticaal kan de schaar er in. Het middendeel is steeds hetzelfde, en met de css-eigenschap repeat kan je een background-image zichzelf laten herhalen, horizontaal en/of verticaal. Hier hebben we verticale herhaling nodig, dan gaat het repeat-y gaan worden (x is hori, y is verti).
  • Dan kan je toe met een herhaal-strookje van bv. 50px hoog, dat knippen we uit de afbeelding.
    Het strookje wordt dus 1080px * 50px, en daarmee winnen we zo'n 830.000 pixels.
Al met al
In plaats van 1 background-afbeelding voor de hele pagina hebben we nu 3 veel kleinere: 1 voor de header, 1 voor het middenstuk, en 1 voor de footer. Ze zijn even breed en passen exact onder elkaar.

Op deze manier komt er behalve een snellere pagina nog een geweldig extra voordeel bij: de pagina kan niet uit elkaar vallen bij grotere pagina's. Als er meer of minder inhoud op een pagina komt te staan, rekt of krimpt het middendeel gewoon mee en gaat het altijd goed.

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Hoi xara,
Nu het plakken :)

Stap 1: Middenstuk als html-background
Het middenstuk kan als background-img in de html-laag (de onderste laag van de pagina, dus nog onder wat in de <body> komt) geplaatst worden, netjes gecentreerd. De header- en footer-afbeeldingen kunnen er dan later overheen geplakt worden. Om ernaast geen wit te krijgen, wordt de lichtbruine background-kleur #E1DDC2 toegevoegd, en meteen maar de donkerbruine letterkleur #4F3621.
De css:
Code: 
html {
	height: 100%;
	padding-bottom: 1px;
	background: #E1DDC2 url(images/yamdo-pagina-bg.png) repeat-y 50% 0;
	color: #4F3621;
	}
Met alleen in de pagina:
HTML: 
<body>
	[body]
</body>
De 1px extra opvulling in de padding-bottom is om bij Firefox, Chrome e.a. browsers ruimte te reserveren voor de rechter scroll-balk, zodat de pagina niet horizontaal kan gaan verspringen
  • Met als resultaat van stap 1: pagina-opbouw-html.htm

  • De <body> begint nu helemaal links, ook bij een breed scherm (naast de afbeelding); dat moet nog aangepast worden.
  • Bij een resolutie van 1024*768px past de <body> er precies op, zoals de bedoeling is: dat is het witte middenstuk van de background-strook.
  • Bij een kleinere schermbreedte schuift de body-tekst naar binnen en niet alles past er in de breedte op (te zien aan de tijdelijke streeplijntjes), en er is geen horizontale scrollbar om er bij te kunnen komen; daar moet ook nog wat aan gedaan worden.
=====

Stap 2: De body op breedte vastgezet
De pagina is wat je kunt noemen een "stortkoker": van boven naar beneden moet alles er op dezelfde breedte in naar beneden kunnen vallen. Die breedte weten we: dat is in principe 1000px.
De header- en de footer-afbeelding moeten breder worden, daar maken we later een uitzondering voor.
Met een tijdelijke hoogte om nog wat te kunnen zien (en meteen het vastleggen van het hoofd-lettertype en -formaat) wordt de css ervoor:
Code: 
body {
	width: 1000px;
	margin: 0 auto;            /* auto = links-rechts centreren */
	font-family: arial, helvetica, verdana, sans-serif;
	font-size: 100.1%;         /* normaliseren voor alle browsers */
	height: 500px;             /* tijdelijk */
	}
De html blijft onveranderd:
HTML: 
<body>
	[body]
</body>
  • Met als resultaat van stap 2: pagina-opbouw-body-a.htm

  • Bij brede schermen en bij 10254*768px gaat het nu goed: de body-tekst blijft binnen de grenzen van de rode body-streeplijntjes die precies samenvallen met de background-afbeelding.
  • Bij smallere vensters gaat het ook goed aan de linkerkant: als je het window verkleint schuif de linkerkant van de body naar links, botst tegen de schermrand, en blijft daar staan, ook als het venster nog smaller wordt gemaakt.
  • Maar de achtergrond-figuur, die vanaf de helft van de schermbreedte naar links en naar rechts gaat, schuift ook mee: de streepjes gaan mee met het verkleinen van het venster, En als je naar rechts scrollt, is er aan de rechterkant een stuk van de body waar geen achtergrond-figuur achter zit...
=====

Stap 3: De html op minimum-breedte
Wat we willen, is dat van de achtergond-figuur ook altijd minstens het hele witte middengedeelte van 1000px zichtbaar is, zonder de verloop-randjes. Dan zetten we de html (waar het bg-img in zit) op een min-width!
Code: 
html {
	...
	min-width: 1000px;
	}
  • Met als resultaat van stap 3: pagina-opbouw-body-b.htm

  • Nu gaat het ook bij smallere schermen dan 1024*768px goed: de streeplijntjes verschuiven niet meer; en als je naar rechts scrollt, is de body helemaal zichtbaar, en zit er ook niets meer aan de rechterkant naast.
  • Bezoekers op smalle schermen moeten dan de rechterschaduw en het bruine bandje rechtsonder bij de footer missen, maar dat zal in een latere stap vanzelf goed komen.
Nu kan het vullen van de stortkoker beginnen!

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Vullen maar!

Stap 4: de header er in
De body is nu 1000px breed, maar de header heeft de twee zijkantjes nodig om over de pagina-background geplakt te kunnen worden: vanwege de afrondingen aan de bovenkant.
Bij ook 1000px breedte van de header zou het immers dit worden:

yamdo-header-hoekjes.png

Om de header op de goede plek te zetten, krijgt deze een negatieve margin-left voor de er overheen stekende 40px (links van de body-grens), en ook een negatieve margin-right (rechts van de bodygrens aan de rechterkant):
Code: 
#header {
	height: 490px;
	margin: 0 -40px;
	background: url(images/yamdo-header-bg.jpg);
	}
HTML: 
<body>
	<div id="header"></div>
	[rest body]
</body>
  • Met als resultaat van stap 4: pagina-opbouw-header-a.htm

  • Bij testen werkt dit prima (zoals het hoort) in de browsers: Firefox, Chrome, Opera, Safari en (volgens Netrenderer) ook in Internet Explorer 8 en Internet Explorer 9...
  • ... maar Internet Explorer 7 laat verstek gaan. Bij smallere schermen plaatst deze de middenkolom-achtergrond opgeschoven t.o.v. de header.
yamdo-ie7-schuiver.png

Dat is vervelend, maar niet onoverkomelijk.

=====

Stap 5: IE7 in de tang
Met een zogenaamd Conditional Comment (CC), dat is een soort commentaarregel die onder een bepaalde voorwaarde toch door één of meer versies van Internet Explorer wordt toegepast, kan IE7 tot de orde worden geroepen:
HTML: 
<!--[if lte IE 7]>
	<style type="text/css">
		body {width: 1080px}
		#header {margin: 0}
	</style>
<![endif]-->
Deze code komt in de head onder het stijlblok met de gewone css te staan (of onder het de regel met het aanroepen van een extern stylesheet; anders werkt het niet.
Op deze manier wordt voor IE7 onze stortkoker breder gemaakt, zodat alle achtergrond-afbeeldingen er in passen en niet meer kunnen opschuiven t.o.v. alkaar.
  • Met als resultaat van stap 5: pagina-opbouw-header-b.htm

  • Aan de linkerkant is bij IE7 nu ook bij smalle schermen altijd het linker verloopstukje te zien, maar alles staat recht onder elkaar, en de pagina is met wat links-rechts scrollen goed te lezen.
  • Wel zal er in het vervolg voor IE7 ook de positie van de tekst aangepast moeten worden, want die valt nu buiten de 1000px.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Inhoud-werkzaamheden

Stap 6: de inhoud
De inhoud, het hele gedeelte tussen de header en de footer, kan er in komen met en <div id="content">. Er hoeft in de css alleen maar een padding links en rechts te komen om afstand tot de zijkant te creëren:
Code: 
#content {
	padding: 0 20px;
	}
Voor IE7 komt er een aanvulling in het Conditional Comment, want hier is de breedte 40px groter, en moet dus ook de padding toenemen: #content {padding: 0 60px}.
HTML: 
<body>
	<div id="header"></div>
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer enz.</p>
	</div>
	[footer]
</body>
=====

Stap 7: hoofdinhoud voorop
In de originele site staat de rechterkolom rechts gefloat, en de hoofdinhoud ernaast zonder float. Dat kan, maar voor Google en de toegankelijkheid is het beter om de hoofdinhoud voorop te hebben staan in de html.
Dat kan eenvoudig door deze z'n breedte en een {float:left} te geven (plus er onder in de html een clearing-div); de css:
Code: 
#hoofdinhoud {
	float: left;
	width: 700px;
	}
.clearL {
	clear: left;
	}
HTML: 
<body>
	<div id="header"></div>
	<div id="content">
		<div id="hoofdinhoud">
			<p>Lorem ipsum dolor sit amet, consectetuer enz.</p>
		</div>
		<div class="clearL"></div>
	</div>
	[footer]
</body>
=====

Stap 8: rechterkolom ernaast
De rechterkolom kan er naast met een {float:right}, en de {clear:left} wordt nu een {clear:both}:
Code: 
#rechterkolom {
	float: right;
	width: 220px;
	}
.clearB {
	clear: both;
	}
HTML: 
<body>
	<div id="header"></div>
	<div id="content">
		<div id="hoofdinhoud">
			<p>Lorem ipsum dolor sit amet, consectetuer enz.</p>
		</div>
		
		<div id="rechterkolom">
			<p>Duis autem dolor in hendrerit in vulputate enz.</p>
		</div>
		
		<div class="clearB"></div>
	</div>
	[footer]
</body>
  • Met als resultaat van stap 8: pagina-opbouw-inhoud-c.htm.

  • En de test: wat we in welke browser ook uithalen met de venstergrootte, de kolommen blijven alle twee binnen de achtergrond. :)
  • NB: merk op dat m.i.v. stap 5 bij een verkleind window nu de rechterkzijkant van 40px met de schaduw (verdwenen in stap 2) intussen weer zichtbaar is tijdens het scrollen L-R. Dit komt door de negatieve margin-right van de header: zolang we de body niet verbieden deze extra breedte te tonen ... wordt deze getoond.
We naderen de footer!

Wordt vervolgd,
CSShunter
 
Laatst bewerkt:
Footer-werkzaamheden en eindresultaat

Stap 9: footer er in
De footer met z'n background-img kan er op dezelfde manier in als de header: met -40px marging L en R.
Om de inhoud van de footer onder het stippellijntje in de figuur te krijgen, moet erboven een opvulling {padding-top: 100px} gegeven worden.
Omdat de padding altijd opgeteld wordt bij de hoogte van een element, hoeft nu de hoogte van de #footer maar 85px te zijn om op de totale hoogte van 185px van het background-img van de footer uit te komen:
Code: 
#footer {
	height: 85px;    /* incl. paddingTop: 185px = bg-img hoogte */
	margin: 0 -40px;
	padding: 100px 60px 0 60px;
	background: url(images/yamdo-footer-bg.png);
	color: white;
	}
Daarnaast wordt voor IE7 aan het Conditional Comment toegevoegd: #footer {margin: 0}.
HTML: 
<body>
	<div id="header"></div>
	<div id="content">
		<div id="hoofdinhoud">
			<p>Lorem ipsum dolor sit amet, consectetuer enz.</p>
		</div>
		
		<div id="rechterkolom">
			<p>Duis autem dolor in hendrerit in vulputate enz.</p>
		</div>
		
		<div class="clearB"></div>
	</div>

	<div id="footer">
		[footer]
	</div>
</body>
  • Met als resultaat van stap 9: pagina-opbouw-footer-a.htm.
  • Met de pagina-hoogte en de footer gaat het goed op een resolute van 1280px*1024px en lager.
Maar...

=====

Stap 10: footer mislukt?
Test met weinig inhoud: pagina-opbouw-footer-b.htm.
  • De herhaal-strook komt tevoorschijn onder de footer, en dat is niet d bedoeling!
=====

Stap 11: footer altijd beneden
Nu zal er in de praktijk niet zo gauw zo'n korte pagina zijn, maar om het zekere voor het onzekere te nemen, voor beeldschermen met hele hoge resolutie (of kantelschermen!), richten we de pagina zó in, dat de footer altijd onderaan komt te staan: bij korte en lange pagina's.
Daarvoor is een wrapper-div nodig, die alles omvat wat niet de footer is.
Dus toch een wrapper! ;)
Passen we dat recept toe, dan wordt het in de css (de footer-styles zelf blijven onveranderd):
Code: 
body {
	...
	height: 100%;                   /* voor footer altijd onderaan */
	}
#wrapper {
	min-height: 100%; 
	margin-top: -185px;             /* voor footer onderaan: negatieve footer-hoogte! */
	}
#header {
	...
	padding-top: 185px;             /* voor footer onderaan: footer-hoogte! */
	}
HTML: 
<body>
<div id="wrapper">
	<div id="header"></div>
	<div id="content">
		<div id="hoofdinhoud">
			<p>Lorem ipsum dolor sit amet, consectetuer enz.</p>
		</div>
		
		<div id="rechterkolom">
			<p>Duis autem dolor in hendrerit in vulputate enz.</p>
		</div>
		
		<div class="clearB"></div>
	</div>
</div>

<div id="footer">
	[footer]
</div>

</body>
=====

Stap 12: test bij lange pagina
Met exact dezelfde css en html, maar nu met veel tekst in de inhoud (en/of rechterkolom).
=====

Daarmee is het pagina-model klaar.
Maar ook zo nieuwsgierig of het in het echt gaat werken? Ik wel! ;)

======

Stap 13: test de homepage!
De huidige pagina in de nieuwe stortkoker geworpen (met een enkele css-verandering):
Zoiets dacht ik. :)

Met vriendelijke groet,
CSShunter
__________
*) Het kan ook op een andere manier: gecentreerde-footer-A.htm.
 
Laatst bewerkt:
Hi CSS hunter.
Je hebt het fantastisch uitgewerkt. Ik ga er gauw mee aan de slag. SUPER!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan