[CSS] Gecentreerde container mogelijk groter dan viewport

maandag 20 september 2010 11:54

Acties:

0 Henk 'm!

Topicstarter

Ik ben bezig met het maken van pagina en daarvoor heb ik de volgende wensen:

De container (geel) moet altijd gecentreerd zijn en zal een achtergrondafbeelding bevatten die groter kan zijn dan de viewport. Het content gedeelte krijgt eveneens een vaste breedte, maar ik wil graag dat de horizontale scrollbalk van de browser groter wordt terwijl het contentvak (oranje) linksboven in de hoek blijft staan en daar dus niets van verdwijnt en middels de scrollbar naar rechts 'benaderbaar' blijft.

Het volgende ben ik mee aan het testen:

Cascading Stylesheet:

* {
    padding: 0;
    margin: 0;
}

img {
    border: 0;
}

body {
    font-family: "Trebuchet MS", Verdana;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-size: 13px;
    background-color: #ffffff;
}

#container {
    position: absolute;
    left: 50%;
    width: 1200px;
    margin-left: -600px;
    background-color: yellow;
}

#header {
    width: 980px;
    height: 358px;
    margin: auto;
    background-color: orange;
    display: block;
}

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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body> 
<div id="container">
    <div id="header">
        <div id="menu">
        in center of page
        </div>
    </div>
</div>
</div>
</body> 
</html>

Het is niet eenvoudig te verwoorden, ik hoop dat jullie begrijpen wat mijn wensen zijn!

Enig idee hoe ik dit voor elkaar krijg?

[ Voor 15% gewijzigd door _Brake_ op 11-10-2010 19:41 ]

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

maandag 20 september 2010 18:25

Acties:

0 Henk 'm!

amahusu

taking over the world!

o.a. jquery carousel kan dit, je kan dan je 'viewport' opmaken in css en alles wat 'clipped' is verbergen

of de scrollTo jquery plugin is ook een optie

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

dinsdag 21 september 2010 01:06

Acties:

0 Henk 'm!

Zoefff

❤ 

Huu, jQuery plugins? Volgens mij kan je dit gewoon met wat creatieve CSS oplossen. Centreer je content met een 'auto' margin aan de linker- en rechterkant. Laat het element met fotomateriaal hier vervolgens met een negatieve margin aan de linker- en rechterzijde uitspringen, en je bereikt wat je hierboven beschrijft. Zodra de viewport smaller is dan de breedte van het fotomateriaal verschijnt er een horizontale scrollbalk. Bij het verkleinen van de viewport zal de content uiteindelijk direct aan de linkerzijde van de browser blijven staan met als netto resultaat dat je nog wel naar rechts kan scrollen om de rest van het fotomateriaal te bereiken, maar niet meer naar links (dat hoeft immers niet meer bereikbaar te zijn volgens bovenstaande beschrijving).

HTML:

<body>
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="foto">
        <p>Briljant fotomateriaal</p>
    </div>
    <div id="content">
        <h2>Content</h2>
        <p>Ladiedadieda</p>
    </div>
</body>

Cascading Stylesheet:

html {
    background: white;
}

body {
    font-size: 1em;
    width: 50em;
    background: #ddd;
    margin: 0 auto;
}

div#foto {
    background: #888;
    margin: 0 -5em;
}

De enige kanttekening hierbij is dat IE6 wellicht niet direct goed omgaat met een negatieve margin. Grote kans dat je dat kan oplossen met "zoom: 1".

Zie http://home.react.nl/~san...ases/scroll-testcase.html

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 21 september 2010 09:50

Acties:

0 Henk 'm!

_Brake_

Topicstarter

amahusu schreef op maandag 20 september 2010 @ 18:25:
o.a. jquery carousel kan dit, je kan dan je 'viewport' opmaken in css en alles wat 'clipped' is verbergen

of de scrollTo jquery plugin is ook een optie

Bedankt voor je reactie, maar ik wilde het eigenlijk met CSS oplossen

Zoefff schreef op dinsdag 21 september 2010 @ 01:06:
Huu, jQuery plugins? Volgens mij kan je dit gewoon met wat creatieve CSS oplossen. Centreer je content met een 'auto' margin aan de linker- en rechterkant. Laat het element met fotomateriaal hier vervolgens met een negatieve margin aan de linker- en rechterzijde uitspringen, en je bereikt wat je hierboven beschrijft. Zodra de viewport smaller is dan de breedte van het fotomateriaal verschijnt er een horizontale scrollbalk. Bij het verkleinen van de viewport zal de content uiteindelijk direct aan de linkerzijde van de browser blijven staan met als netto resultaat dat je nog wel naar rechts kan scrollen om de rest van het fotomateriaal te bereiken, maar niet meer naar links (dat hoeft immers niet meer bereikbaar te zijn volgens bovenstaande beschrijving).
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="foto">
        <p>Briljant fotomateriaal</p>
    </div>
    <div id="content">
        <h2>Content</h2>
        <p>Ladiedadieda</p>
    </div>
</body>
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html {
    background: white;
}

body {
    font-size: 1em;
    width: 50em;
    background: #ddd;
    margin: 0 auto;
}

div#foto {
    background: #888;
    margin: 0 -5em;
}
De enige kanttekening hierbij is dat IE6 wellicht niet direct goed omgaat met een negatieve margin. Grote kans dat je dat kan oplossen met "zoom: 1".

Zie http://home.react.nl/~san...ases/scroll-testcase.html

Zo dus! Niet helemaal wat ik in gedachten had... maar zelfs beter $_/-\o_$

En dat om 1 uur 's nachts. Bedankt!

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

Onderwerpen