Xhtml stict en CSS probleem met backgrounds

**Tim Wolf** · 07-02-2009, 14:11

Hallo,

Zelf ben ik altijd bezig om websites te designen die een uitdaging zijn om te bouwen. Zo nu heb ik dat ook met mijn eigen nieuw website

Zoals je ziet heb ik 2 achtergronden in mijn website verwerkt. Wat ik wil is dat de achtergrond in het weblog gedeelte uitrekt naar links (oneindig).

Maar ik wil ook dat de achtergrond die op de body zit gerepeat wordt van boven naar beneden.

Dat zijn dus twee achtergronden blog_bg.png & body.png.

Als je mijn huidige code bekijkt zul je er misschien snel achter komen dat wat ik wil helemaal niet kan zoals alles nu is ingedeelt. Dit weet ik. Maar zo heb je ook wat om naar te kijken. Ipv van alleen een post.

Ik heb van alles geprobeerd. 2 verschillende divs op de achterground en met percentages gewerkt. Wat niet goed werk. En divs geprobeerd te floaten en positioneren met de verschillende achtergrounden, min-height, width's van 50% e.d.

Ik hoop dat iemand hier zo brilliant is die mij kan helpen. Want ik heb geen zin om te wachten op CSS3 ondersteuning tot ik mijn site kan bouwen zoals ik wil.

Is het niet duidelijk genoeg. Dan edit ik mijn post.

**gast2960** · 07-02-2009, 15:06

Oei, dit is een moeilijke questie.

Ik ben bezig met een lang verhaal over hoe ej dit aan kan pakken,
straks meer hierover dus ;)

**Tim Wolf** · 07-02-2009, 15:11

Ik ben benieuwd!

**gast2960** · 07-02-2009, 15:42

Ik begrijp denk ik wel wat je bedoelt, maar om dat in een website te verwerken
die al bijna helemaal in elkaar zit is wel erg moeilijk...

In principe heeft je website 3 achtergronden:
- de header, en het menu
- weblog
- portfolio

om dit voor elkaar te krijgen heb je 3 waardes nodig zodat je dit krijgt:

De achtergrond die het meest bewegingsvrijheid heeft is de Portfolio
aangezien die verticaal moet uitlijnen en horizontaal. Dat wordt dus de
<html> achtergrond.

Vervolgens komt de header aan de beurt want die moet over de volledige
breedte repeat worden. Dat word de <body> achtergrond.

Het 'moeilijkste' gedeelte is de Weblog achtergrond. Die moet namelijk
horizontaal repeaten maar dat tot de helft van de pagina. Hiervoor
maken we een aparte div aan. Laten we deze id="extra_bg" meegeven.

Om alles goed te laten verlopen moet de rest van de website wel in een
container staan, anders werkt het namelijk niet. Zet overigens alle achtergronden
in de container en alle anders divs verwijderen (tijdelijk).

De html wordt dus:

Code:

<html>

   <body>

      <div id="extra_bg"></div>

      <div id="container"></div>

   </body>

</html>

De css wordt een stukje ingewikkelder, al hoewel ik het nu
bij jouw website nou ook vrij ingewikkeld vind terwijl dat niet hoeft
wanneer er een container is ;)

Code:

html {
   margin:0px;
   padding:0px;
   background:#fff url('portfolio.png') repeat-y center top;
   /* De Portfolio afbeelding moet even breed worden als de container, de basis achtergrond kleur is wit (#fff) */
   height:100%;
   /* standaard komt er een hoogte van 100% */
}

body {
   margin:0px auto;
   padding:0px;
   background:url('header.png') repeat-x left top;
   /* De header en menu kunnen in een afbeelding gezet worden, dat is in dit geval een stuk handiger */
   height:100%;
   /* standaard komt er een hoogte van 100% */
}

#extra_bg {
   position:absolute;
   left:0px;
   top:150px;
   /*
   150px moet veranderd worden naar de hoogte van de header en menu bij elkaar, anders valt
   deze achtergrond daar overheen.
   */
   width:50%;
   background:url('weblog.png') repeat-x left top;
   /*
   De afbeelding van de weblog wordt nou tot de helft van de webpagina gerepeat
   */
   height:591px;
   /* de hoogte van deze div moet net zo hoog zijn als van de achtergrond afbeelding.*/
   z-index:100;
   /*
   dit is een belangrijk punt, hiermee geef je straks aan dat de container over deze achtergrond moet
   vallen, en niet andersom
   */
}

#container {
   margin:0px auto;
   width:700px;
   /* stel hier de breedte van de container in */
   z-index:200;
   position:relative;
   /* nou valt de container boven de achtergrond div */
}

#weblog {
   min-height:591px;
   height:auto !important;
   height:591px;
}
   /*
   de div van de weblog moet een minimale hoogte meekrijgen, ander valt de achtergrond
   afbeelding weg wanneer er te weinig content in staat. Hiermee krijgt de div crossbrowser
   een minimale hoogte mee.
   */

Een demo van dit systeem is te zien op:
http://gijsbertsimon.com/tuto/

Binnenkort zal ik dit in het tutorial forum plaatsen met een duidelijkere uileg en demo ;)

Gr. Gijsbert

**Tim Wolf** · 07-02-2009, 15:50

Voor dat ik het helemaal doorlees, de demo zit er goed uit! Wat bedoel je te zeggen met dat mijn huidige CSS te ingewikkeld is? Waar wil je een container voor gebruiken dan. Ik heb graag mijn code zo klein en efficient mogelijk.

Kom later terug op je lange verhaal. Eerst even de CSS doornemen.
Aanvullend bericht:
Ik heb het doorgenomen en ik het snap het. Jij hebt wel een andere werkwijze dan ik. Maar hou jij voorsteld afbeeldingen samen te voegen, zat ik ook al aan te denken. Dat is eigenlijk wel mooier. Mits het gecombineerd goed te optimaliseren valt.

Reuze bedankt voor de tutorial!

P.S.

Ik snap het trouwens ook. Klak het niet klakkeloos van je over.

**gast2960** · 07-02-2009, 16:28

Origineel gepost door Tim Wolf

Voor dat ik het helemaal doorlees, de demo zit er goed uit! Wat bedoel je te zeggen met dat mijn huidige CSS te ingewikkeld is?

Dankje ;)
Als je het systeem snapt, dan is het niet heel moeilijk toe te passen.

Ik doelde meer op de css zeg maar.
Met een container stel je een keer margin:0px auto; in bijvoorbeeld,
terwijl zonder container moeten alle onderdelen apart geconfigureerd
worden.

Ik zelf ben ook voor een zo efficiënt mogelijke xhtml, vandaar dat
er ook optimaal gebruik gemaakt is van de <html> en <body>.
Normaal gesproken kan je de container ook weg laten door de <body>
als container te laten functioneren. Helaas ging dat in dit geval niet,
en dus is een container een overzichtelijke werkwijze ;)

**Tim Wolf** · 07-02-2009, 16:41

Super inderdaad ja. Dit gaat mijn baas ook leuk vinden. Nu kan ik grafisch nog meer uit mijn dak gaan op het werk. Doordat je mij dit nu hebt geleerd.

Maar zou je misschien nog eens kunnen kijken naar dit
Hij zit er goed uit in ie7 en ff, maar in ie6 is de achterground 1px verschoven naar links. Weet je hoe dat komt?

**gast2960** · 07-02-2009, 16:57

Origineel gepost door Tim Wolf

Maar zou je misschien nog eens kunnen kijken naar dit
Hij zit er goed uit in ie7 en ff, maar in ie6 is de achterground 1px verschoven naar links. Weet je hoe dat komt?

Dat kan komen omdat de breedte van div 'exta_bg' 50% is.
Als je resolutie 1024px breed is en je webbrowser maakt er van 1019px
gebruik. FF bebruikt voor 50% dan bijvoorbeeld 510px, terwijl IE6 dan
509px gebruikt. Dat zou een oorzaak kunnen zijn.

Als je een container gebruikt kan je de afbeelding 'portfolio_bg.png'
daar msischien in zetten? Dan moet de container wel 100% height
meekrijgen.

**Tim Wolf** · 07-02-2009, 17:04

Ja, dat zou inderdaad kunnen. Of het mag gewoon geen oneven getal zijn in pixels. Heb het nu tijdelijk opgelost door een margin van -1 toe te passen aan de linker kant. Nu heb ik een witte lijn van 1px in IE7 en FF maar dat zit er niet eens zo storend uit.

**Job van S.** · 14-02-2009, 10:22

Je kan het ook alleen op IE6 toepassen dmv conditional comments in de <head>:

Code:

<!--[if IE 6]><style type="text/css">hier de css voor alleen IE6</style><![endif]-->

**gast2960** · 14-02-2009, 10:42

Origineel gepost door Job van S.

Je kan het ook alleen op IE6 toepassen dmv conditional comments in de <head>:

Code:

<!--[if IE 6]><style type="text/css">hier de css voor alleen IE6</style><![endif]-->

Het is mooier als je zoiets oplost in de css zelf.

div {
width:500px !important; /* alleen de moderne browsers zullen hier naar luisteren */
width:400px; /* dus IE6 zal naar deze commando luisteren */
}

Belangrijk in dit geval is dat de volgorde hetzelfde blijft als nou,
want IE6 luistert naar het laatste waarde.

Xhtml stict en CSS probleem met backgrounds

2 achtergronden verwerken in Xhtml CSS website

Quick links

Sitedeals

Andere media

Over Sitedeals

Xhtml stict en CSS probleem met backgrounds

2 achtergronden verwerken in Xhtml CSS website

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen