[CSS] div's met variabele en vaste lengte

[squeez]

Het is niet echt mijn gewoonte een topic te openen voor mijn probleempjes, maar dit keer kom ik er na lang zoeken echt niet meer uit...

Ik wil een website maken met een patroontje als achtergrond. In het midden zit de inhoud van de website. Het patroontje loopt door in de inhoud van de pagina. De achtergrondafbeelding en de eignelijke website moeten dus op elkaar afgestemd te worden. Omdat jullie er na dit verhaaltje waarschijnlijk nog niets van snappen heb ik even een screenshot online gezet:



Ik wil dit probleem als volgt oplossen. Ik maak 3 div's, een linker, een center (met daarin de eigenlijke website) en de rechter. Deze div's bedekken de hele pagina. De div's hebben de volgende indeling:

|---variabele breette---| |---vaste breette---| |---variabele breette---|

De divs moeten de hele pagina van links naar rechts opvullen, en de linker div moet even breed zijn als de rechter div. De middelste div komt dan precies in het midden. Zo kan ik de achtergrond in de linker div van rechts laten repeaten, de website zelf gewoon in de middelste div zetten en in de rechter div de achtergrond van links laten repeaten. Volgens mij moet dit prima kunnen met css. Ik weet alleen niet hoe...

Wie helpt mij aan de goede code/tutorial waar ik het kan vinden?

[Verwijderd]

waarom moet er aan de zijkant wat zitten? dat kan toch gewoon marge van het middelste element zijn dat gecentreerd staat?

[squeez]

Verwijderd schreef op zondag 09 april 2006 @ 18:05:
waarom moet er aan de zijkant wat zitten? dat kan toch gewoon marge van het middelste element zijn dat gecentreerd staat?

* squeez hoort een nieuw begrip

Doe eens uitleggen?

* squeez gaat weer googlen

[Kayshin]

Box model:

code:

  /-----------\
  |           |
  | xxxxxxxxx |
  | xxxxxxxxx |
  | xxxxxxxxx |
  | xxxxxxxxx |
  |           |
  \-^---------/
    |--padding
 ^--margin
 
 xxx=content
 
 ruimte tussen container en content = padding
 ruimte tussen verschillende containers (elementen) = margin

[Verwijderd]

http://www.w3.org/TR/CSS21/box.html
dus (voor de spec)

en om mezelf maar eens te quoten:

Horizontal centering

Of course we all know the <center> element is deprecated and <table> solutions are to be avoided. Fortunately there is an easy method for horizontal centering hidden in the specs.


If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

CSS 2.1 spec: 10.3.3 Block-level, non-replaced elements in normal flow


thus:

[an arbitrary selector] {
margin: <length> auto <length>;
}


will do

[ Voor 99% gewijzigd door Verwijderd op 09-04-2006 18:52 ]

[JHS]

Illustratie bij het verhaal van /me .

[ Voor 16% gewijzigd door JHS op 09-04-2006 19:21 ]

[Rowanov]

JHS schreef op zondag 09 april 2006 @ 19:21:
Illustratie bij het verhaal van /me .

Het is horizontally. /mierenneukmodus

[ Voor 4% gewijzigd door Rowanov op 09-04-2006 19:30 ]

[Kayshin]

Dat plaatje kon ik dus zo snel niet vinden

Hou er wel rekening mee: IE en box model ZUIGT!!!

(Die wel gevonden: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)

[ Voor 30% gewijzigd door Kayshin op 09-04-2006 20:21 ]

[squeez]

Kayshin schreef op zondag 09 april 2006 @ 20:20:
Hou er wel rekening mee: IE en box model ZUIGT!!!

Oei, dat is vervelend, want IE wordt best veel gebruikt.

Dus als ik het goed begrijp is de margin een veld om de content én padding heen. Dat is heel wat simpeler dan ik in gedachten had. Blijft er nog wel een probleem over: hoe krijg ik mijn achtergrondpatroontje daar? Met gewoon "background : url(images/bg1.gif);" komt hij niet verder dan de padding.

Edit: vrij logisch ook...

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

[ Voor 20% gewijzigd door squeez op 09-04-2006 20:55 ]

[Rowanov]

Achtergrond plaatje op de body of op een container waar je je content gedeelte in zet?

[squeez]

Rowanov schreef op zondag 09 april 2006 @ 20:37:
Achtergrond plaatje op de body of op een container waar je je content gedeelte in zet?

Dan had ik toch net zo goed gewoon een achtergrondje met 'n gecentreerde div kunnen doen? Het gaat er juist om dat hij het patroon aan de linker kant van div in het midden opbouwt. Anders loopt het patroon in de soep als je de grootte van je venster verandert.

Nog even voor de duidelijkheid:

code:

|--- links, breette auto ---||--- content, breette 800px ---||--- rechts, breette auto ---|
toon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroo

Het patroon moet beginnen aan de linker kant van de content div. Het moet verder gewoon het hele beeld opvullen en netjes aansluiten zodat het er niet raar uitziet.

[ Voor 33% gewijzigd door squeez op 09-04-2006 20:47 ]

[Rowanov]

Je padding staat buiten de box; daar krijg je je achtergrond dus niet. Je zal dus wat anders moeten verzinnen, maar ik kan er geen touw aan jouw verhaal vastknopen.

[squeez]

Rowanov schreef op zondag 09 april 2006 @ 20:56:
Je padding staat buiten de box; daar krijg je je achtergrond dus niet. Je zal dus wat anders moeten verzinnen, maar ik kan er geen touw aan jouw verhaal vastknopen.

Hè verdorie. Ik moet eens een goed css boek ofzo kopen, dan kan ik tenminste een beetje in de goede termologie praten...

Goed, ik zal nogmaals proberen uit te leggen wat ik wil:

code:

|--- links, breette auto ---||--- content, breette 800px ---||--- rechts, breette auto ---|
toon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroon-patroo

De eerste regel is wat ik aan div's wil hebben. De tweede regel is hoe het achtergrondfiguurtje als patroontje mee wil lopen. Het is de bedoeling dat de vierde 'p' op regel 2 zegmaar vast komt te zitten aan de derde '|' op regel 1, ongeacht hoe groot ik het venster van mijn browser maak. Alleen op die manier komt het achtergrondpatroon overeen met de afbeeldingen in de content div. Het patroon van het achtergrondfiguurtje moet natuurlijk wel netjes meelopen.

Vandaar ook mijn idee om 3 divs te maken. In de conten div doe ik dan "background : url(images/bg1.gif);" en in de linker div doe ik "background : url(images/bg1.gif) left;". Dan sluit de achtergrond mooi aan op de content div.

En om het nog wat duidelijker te maken:
Dit gebeurt er dus als ik gewoon een background maak en een div in het midden zet (met margin: 0 auto;) met daarin de header

[ Voor 12% gewijzigd door squeez op 09-04-2006 21:16 ]

[Kayshin]

Waarom niet gewoon een background op een container div en de background uit de verschillende elementen weghalen?

Een background wordt geerfd/georvern (whatever) van zijn parent als je deze niet specefiek voor het child element aangeeft.

Of zit ik nu verkeerd te denken?

[squeez]

Kayshin schreef op maandag 10 april 2006 @ 00:11:
Waarom niet gewoon een background op een container div en de background uit de verschillende elementen weghalen?

Een background wordt geerfd/georvern (whatever) van zijn parent als je deze niet specefiek voor het child element aangeeft.

Of zit ik nu verkeerd te denken?

Nouw, er zit schaduw over de background heen, en de background loopt door in de het content element. Geen optie om er een transparant gifje van te maken dus (alhoewel, wordt transparantie-mask in png al een beetje ondersteunt?).

[Kayshin]

Met Dean Edwards IE7 javascript oplossing wel, gebruik ik ook voor al mn sites cross-browser te krijgen

http://dean.edwards.name/ie7/

[squeez]

Kayshin schreef op maandag 10 april 2006 @ 12:07:
Met Dean Edwards IE7 javascript oplossing wel, gebruik ik ook voor al mn sites cross-browser te krijgen

http://dean.edwards.name/ie7/

In FF werkt transparante PNG's gebruiken prima. Met dit script moet het dus ook in IE gaan werken? Ziet mijn site er dan bij iedere browser en nog netjes uit en valideert de boel dan ook nog eens een beetje?

Bedankt voor alle hulp tot nu toe iig!

Edit:
Jippie, het werkt nu ook onder IE! Deze oplossing is veel beter dan al dat gepruts met css! Jammer alleen dat je bij fotosoep niet zoveel kan instellen aan png'tjes. En nu snap ik eingelijk ook eens waarom "margin: 0 auto;" de boel centreert.

Mijn dank is zeer groot!

[ Voor 24% gewijzigd door squeez op 10-04-2006 15:27 ]

[squeez]

Oké, het werkt toch niet helemaal lekker.

Als ik IE7 gebruik wil hij in IE de achtergrond van een div (transparant png'tje) niet repeaten. De afbeelding wordt bovenaan een keer gebruikt, daaronder is geen background. Hij doet het echter wel als ik IE7 niet gebruik, maargoed, dan is hij niet transparant.

code:

#content {
    background  : url(images/content-trans.png) repeat-y;
    width       : 830px;
}

Oplossing anyone?

[JHS]

Je kan ook slechts delen van IE7 gebruiken, heb je daar al naar gekeken ?

[squeez]

Nee, helaas, dat helpt niet... Zodra ik ie7-graphics.js include gaat 't mis.

[squeez]

Zeg, kan ik met css ook afmetingen meegeven aan de background image? Dan kan ik gewoon zeggen dat hij de achtergrondafbeelding moet uitrekken naar 830 bij 10.000 pixels. Het is niet netjes, maar het werkt in de praktijk wel...

[Verwijderd]

squeez schreef op maandag 10 april 2006 @ 17:50:
Zeg, kan ik met css ook afmetingen meegeven aan de background image? Dan kan ik gewoon zeggen dat hij de achtergrondafbeelding moet uitrekken naar 830 bij 10.000 pixels. Het is niet netjes, maar het werkt in de praktijk wel...

Nope, kan niet.

[squeez]

Verwijderd schreef op maandag 10 april 2006 @ 18:05:
[...]
Nope, kan niet.

Nou, da's iig duidelijk. Dan maar een afbeelding maken van 830 bij 5000 pixels...
Ik hou mij altijd aanbevolen voor een beter oplossing!

[Kayshin]

IE7 bestaat uit verschillende scripts, je zult dus moeten kijken welke jij wilt gebruiken en alleen deze toepassen.

Je kunt er bijvoorbeeld voor zorgen dat hij alleen superstrict css pakt, maar dan zul je heeeel goede css moeten schrijven. Dus deze gebruik ik zelf niet.

Even uitzoeken welke je nodig hebt dus. Staat beschreven op de site

[JHS]

Kayshin: Dat gaf ik ook al aan, maar volgens /me zit zowel de oplossing als het nieuwe probleem in het ie7-graphics.js script .

[squeez]

JHS schreef op dinsdag 11 april 2006 @ 06:58:
Kayshin: Dat gaf ik ook al aan, maar volgens /me zit zowel de oplossing als het nieuwe probleem in het ie7-graphics.js script .

En daar lach jij om? (emoticon)

Ik maak mijn hele leven al websites, maar ben pas recent van het tabellen geloof overgestapt op css. Maar mijn handen jeuken nu toch echt om weer tabellen te gebruiken hoor... moet... vol... houden...

[Verwijderd]

tabellen is geen geloof maar een (hardnekkige) misvatting
als je heel je leven met tabellen hebt gewerkt heb je nooit websites gebouwd, maar html soep geproduceerd (nofi verder, heb ik zelf ook gedaan, maar websites kan je het niet noemen, hoogstens gerommel in de marge en er mee wegkomen omdat iedereen het doet)

[Dutchess_Nicole]

squeez schreef op dinsdag 11 april 2006 @ 15:21:
[...]

En daar lach jij om? (emoticon)

Ik maak mijn hele leven al websites, maar ben pas recent van het tabellen geloof overgestapt op css. Maar mijn handen jeuken nu toch echt om weer tabellen te gebruiken hoor... moet... vol... houden...

Ik heb het nou 3 keer doorgelezen, maar ik snap nog steeds niet wat je nou wilt.

Even afgaande op dat plaatje van je... De normale background, (buiten de logo en contentvelden) kun je gewoon op je body zetten; de background van je contentveld maak je in 1 keer, das toch fixed width (800px), en die kun je prima laten aansluiten op de background door wat in de marges te rommelen (letterlijk ).
Het logo en content gedeelte samen zet je in een containing div van die 800px breed, geef je margin: 0 auto; evt een margin-top om de background goed te laten aansluiten, het logo zet je bovenin diezelfde div, met daaronder 2 divs voor een lijstje (je menu) en de content ernaast.
Die hele containing div geef je de background in 1 keer als blok mee, inclusief schaduwen en dat spul.

Als je dan vervolgens je background op de body centert (background: url("") 50% 50%) is het een knappe jongen die het nog van zijn plek krijgt lijkt me.

[squeez]

Verwijderd schreef op dinsdag 11 april 2006 @ 15:37:
tabellen is geen geloof maar een (hardnekkige) misvatting
als je heel je leven met tabellen hebt gewerkt heb je nooit websites gebouwd, maar html soep geproduceerd (nofi verder, heb ik zelf ook gedaan, maar websites kan je het niet noemen, hoogstens gerommel in de marge en er mee wegkomen omdat iedereen het doet)

offtopic:
Ok, het html bestand is wat groter, ok, het validate niet altijd, maar geeft toch een zeer bruikbaar resultaat en het zal de gemiddelde surfer aan de reet roesten hoe de website achter de schermen opgebouwd is.

BlackSash schreef op dinsdag 11 april 2006 @ 17:15:
[...]

Ik heb het nou 3 keer doorgelezen, maar ik snap nog steeds niet wat je nou wilt.

[interresant verhaal]

AARG! Wat is dat toch? Waarom begrijpt niemand mij hier op dit forum?

En niemand vertelt mij even dat je de achtergrond ook kan centreren? Dat is een geniale oplossing! Helaas brengt IE7 wat nieuwe probleempjes met zich mee, dus: i'll stick with this one.

Mijn dank is zeer groot! Ik denk dat ik het vanaf hier wel weer zelf red. Ik zal in het vervolg mijn problemen wat beter proberen te formuleren.

[ Voor 9% gewijzigd door squeez op 11-04-2006 18:03 ]

[Verwijderd]

-

[ Voor 100% gewijzigd door Verwijderd op 11-04-2006 18:30 ]

[Dutchess_Nicole]

squeez schreef op dinsdag 11 april 2006 @ 17:57:
AARG! Wat is dat toch? Waarom begrijpt niemand mij hier op dit forum?

En niemand vertelt mij even dat je de achtergrond ook kan centreren? Dat is een geniale oplossing! Helaas brengt IE7 wat nieuwe probleempjes met zich mee, dus: i'll stick with this one.

Mijn dank is zeer groot! Ik denk dat ik het vanaf hier wel weer zelf red. Ik zal in het vervolg mijn problemen wat beter proberen te formuleren.

Hehe graag gedaan..

De CSS properties kan je allemaal terugvinden op http://www.w3schools.com/css/default.asp
Daar staan ook dingen als background-position bij en nog veel meer leuke truukjes.