[HTML/CSS] Variabele breedte

[Avalaxy]

Wat ik probeer te bereiken is het volgende:



Aan de bovenkant komt dus een header die uit 3 blokken bestaat. Een middengedeelte die altijd in het midden van de pagina getoond moet worden en 915px breed is, en twee zijkanten die de rest van het scherm op moeten vullen.

Ik heb al een hoop geprobeerd, maar ik heb geen idee hoe ik dit voor elkaar krijg. De zijkanten een fixed width geven gaat natuurlijk niet, en een percentage meegeven ook niet omdat elke computer een andere resolutie heeft.

Heeft iemand enig idee hoe ik dit oplos?

Dit is overigens wat ik concreet probeer te bereiken:



Het gaat dus om een transparante balk.

[ Voor 12% gewijzigd door Avalaxy op 17-07-2011 22:18 ]

[posttoast]

Zoek eens op faux columns.

[Avalaxy]

posttoast schreef op zondag 17 juli 2011 @ 22:18:
Zoek eens op faux columns.

Faux columns hebben toch gewoon te maken met kolommen die met elkaar mee stretchen? Ik zie niet in hoe ik dat hierop toepas.

Edit: voor de duidelijkheid; ik wil dat ze horizontaal stretchen. Verticaal niet, dat is gewoon een fixed height.

[ Voor 18% gewijzigd door Avalaxy op 17-07-2011 22:21 ]

[Acid_Burn]

Komt er nog wat in de zijbalken? Anders kan je gewoon 1 div met margin: auto doen.

[R4gnax]

Mocht er content in de zijkanten moeten staan, dan kun je het gewenste effect denk ik enkel bereiken met het flexible box model wat CSS3 introduceert. Niet alle browsers ondersteunen dit nieuwe layout mechanisme al.

[ Voor 16% gewijzigd door R4gnax op 17-07-2011 22:42 ]

[Avalaxy]

Acid_Burn schreef op zondag 17 juli 2011 @ 22:40:
Komt er nog wat in de zijbalken? Anders kan je gewoon 1 div met margin: auto doen.

Nope er komt niks in die zijbalken. Maar een enkele div gaat niet, want het zijn 3 afbeeldingen. In de middelste afbeelding moet je de achtergrond door de afbeelding heen kunnen zien en moet een licht gradient effect zitten.

R4gnax schreef op zondag 17 juli 2011 @ 22:41:
Mocht er content in de zijkanten moeten staan, dan kun je het gewenste effect denk ik enkel bereiken met het flexible box model wat CSS3 introduceert. Niet alle browsers ondersteunen dit nieuwe layout mechanisme al.

Hmm, CSS3 zit ik niet zo op te wachten. Ik probeer juist al die interessante snufjes te ontwijken omdat er anders jankbrouwsers zijn die het niet kunnen handlen.

[ Voor 39% gewijzigd door Avalaxy op 17-07-2011 22:43 ]

[Acid_Burn]

Div in een div dan..

code:

<div id="background">
  <div id="header">
     text bla bla
  </div>
</div>

Stylesheet

code:

div#background{
  width: 100%
  background-image: url(/gradient.png);
}

div#header{
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}

[deCube]

Mocht je aan bovenstaande niets hebben omdat je toch content kwijt wilt aan de zijkanten dan kun je van de volgende link wel iets moois maken:

http://www.dynamicdrive.c...out-36-fluid-fixed-fluid/

@R4gnax, het flexible box model is in nog geen niet echt mainstream, lijkt me niet iets voor een productie website. Wel leuk om mee te spelen, though.

[8088]

Acid_Burn schreef op zondag 17 juli 2011 @ 22:45:
Div in een div dan..

Als je de buitenste div vervangt door body ben je er toch ook?

[Avalaxy]

Acid_Burn schreef op zondag 17 juli 2011 @ 22:45:
Div in een div dan..

code:

<div id="background">
  <div id="header">
     text bla bla
  </div>
</div>

Stylesheet

code:

div#background{
  width: 100%
  background-image: url(/gradient.png);
}

div#header{
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}

edit: nevermind, ik dacht verkeerd.

Ik ga even over je oplossing nadenken

[ Voor 14% gewijzigd door Avalaxy op 18-07-2011 01:47 ]

[Acid_Burn]

Van je hoofdachtergrond maak je een plaatje met in het midden je kolom van 915px breed. Die stel je in als achtergrond van je body bijvoorbeeld. Als dat plaatje maar breed genoeg is vult die altijd het hele beeld. Die center je en repeat je op y. In de headerdiv zet je dan een half transparante div als achtergrond waarmee je dan een deel van je achtergrond ziet..

Dan heb je toch wat je wilt of mis ik dan iets?

[Avalaxy]

Acid_Burn schreef op zondag 17 juli 2011 @ 23:13:
Van je hoofdachtergrond maak je een plaatje met in het midden je kolom van 915px breed. Die stel je in als achtergrond van je body bijvoorbeeld. Als dat plaatje maar breed genoeg is vult die altijd het hele beeld. Die center je en repeat je op y.

Dat gaat al niet lukken omdat ik in de main body 3 verschillende achtergronden heb gebruikt. Dat is dus niet een simpele eenkleurige kolom.

edit: Yeaaa, ik heb het opgelost met behulp van Acid_Burn in "\[HTML/CSS] Variabele breedte". Ik had het anders aangepakt, ik wilde namelijk naast de middelste div 2 zij-divjes zetten die een bepaald percentage van het scherm pakten, maar het is natuurlijk vele makkelijker je middelste div gewoon te centreren *ahum*

Af en toe is een andere kijk op je denkwijze best fijn

[ Voor 29% gewijzigd door Avalaxy op 18-07-2011 01:55 ]

[8088]

Avalaxy schreef op maandag 18 juli 2011 @ 01:46:
Dat gaat al niet lukken omdat ik in de main body 3 verschillende achtergronden heb gebruikt. Dat is dus niet een simpele eenkleurige kolom.

Wat heeft het aantal kleuren ermee te maken? De voorbeelden die je in je eerste post liet zien zijn prima te realiseren met één div.

[ Voor 13% gewijzigd door 8088 op 18-07-2011 03:14 ]

[Verwijderd]

-

[ Voor 100% gewijzigd door Verwijderd op 26-05-2021 13:57 ]