[CSS]div's ter opvulling

dinsdag 21 december 2010 15:52

Acties:

0 Henk 'm!

Topicstarter

Op dit moment ben ik bezig met een weblayout waarbij over de volledige breedte een foto te zien is. Deze is 500px hoog. De rest boven en onder de foto wil ik graag opvullen met 2 verschillende patterns.

Afbeeldingslocatie: http://i641.photobucket.com/albums/uu133/Benjaminr87/layout.png

Afbeeldingslocatie: http://i641.photobucket.com/albums/uu133/Benjaminr87/layout.png

Dit werkt nu redelijk. De foto werkt over de volledige breedte, alleen div1 en div3 krijg ik niet even groot bij het resizen van het browserscherm. Ik dacht dit op te kunnen lossen door met percentages te werken. Bijvoorbeeld Div1 & 3 op 25% ieder, en de foto div2 op 50%. Helaas werkt dit niet zoals ik wil, omdat de foto eigenlijk gewoon een fixed height moet zijn.

Via verschillende zoekopdrachten kom ik niet op het antwoord wat ik zoek, dus ik hoop dat jullie me hiermee kunnen helpen.

dinsdag 21 december 2010 15:59

Acties:

0 Henk 'm!

TERW_DAN

Met een hamer past alles.

Hier ben ik ook wel eens tegenaan gelopen. De oplossing die ik tot nu toe heb toegepast is dmv een stukje script de hoogte van de div instellen, dat werkt in elk geval altijd.

dinsdag 21 december 2010 16:07

Acties:

0 Henk 'm!

MoietyMe

zij/haar

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            html {
                padding:0;
                background:#0f0 url(../images/pattern-bottom.png);
            }
            
            body {
                margin:0;
                height: -- met JS even de hoogte van je viewport opvragen /2 --;
                background:#f00 url(../images/pattern-top.png);
            }
            
            div {
                position:absolute;
                top:50%;
                left:0;
                right:0;
                margin-top:-250px;
                width:100%;
                height:500px;
                background:#00f;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="photo.jpg" />
        </div>
    </body>
</html>

Iets in die geest.

dinsdag 21 december 2010 16:12

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Pattern divs 50% hoogte, foto er absoluut op zetten?

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 21 december 2010 16:13

Acties:

0 Henk 'm!

Gamebuster

http://kutcomputers.nl/tests/verticalalign.html

Heb even mijn hersenen moeten laten kraken, maar ik denk dat je dit bedoeld.

100% HTML+CSS2, geen JS. Getest in Safari, niet getest in andere browsers. Ik denk echter dat dit zelfs in IE6 zou werken.

(dit is overigens wat MueR ook adviseerde, lees ik nu)

[ Voor 41% gewijzigd door Gamebuster op 21-12-2010 16:38 ]

Let op: Mijn post bevat meningen, aannames of onwaarheden

dinsdag 21 december 2010 16:16

Acties:

0 Henk 'm!

GateKeaper

#1 Procastinator

Gamebuster schreef op dinsdag 21 december 2010 @ 16:13:100% HTML+CSS2, geen JS. Getest in Safari, niet in andere browsers.

In internet explorer 8 werkt hij :-)

dinsdag 21 december 2010 16:31

Acties:

0 Henk 'm!

MoietyMe

zij/haar

MueR schreef op dinsdag 21 december 2010 @ 16:12:
Pattern divs 50% hoogte, foto er absoluut op zetten?

Zit je nog steeds met twee zinloze <div>'s.

dinsdag 21 december 2010 16:32

Acties:

0 Henk 'm!

Gamebuster

Good Fella schreef op dinsdag 21 december 2010 @ 16:31:
[...]

Zit je nog steeds met twee zinloze <div>'s.

Liever 2 zinloze divs dan zinloos stuk Javascript, niet?

Let op: Mijn post bevat meningen, aannames of onwaarheden

dinsdag 21 december 2010 16:39

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Gamebuster schreef op dinsdag 21 december 2010 @ 16:32:
[...]

Liever 2 zinloze divs dan zinloos stuk Javascript, niet?

Nou hier dan één met één div minder:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            html {
                padding:0;
                height:100%;
                background:#0f0 url(../images/pattern-bottom.png);
            }
            
            body {
                margin:0;
                height:100%;
            }
            
            div#root {
                width:100%;
                height:50%;
                background:#f00 url(../images/pattern-top.png);
            }
            
            div#photo {
                position:absolute;
                top:50%;
                left:0;
                right:0;
                margin-top:-250px;
                width:100%;
                height:500px;
                background:#00f;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <div id="photo">
                <img src="photo.jpg" />
            </div>
        </div>
    </body>
</html>

Dit is er van uitgaand dat je de foto altijd over de volle breedte wilt hebben. Moet je eigenlijk nog een overflow:hidden; op #photo zetten (als je de foto stretched that is).

Preview: http://dev.agosto.nl/valign/

[ Voor 10% gewijzigd door MoietyMe op 21-12-2010 16:53 ]

dinsdag 21 december 2010 16:45

Acties:

0 Henk 'm!

Gamebuster

gehehe, alleen heb je wel de backround in de HMTL-tag zitten. Vind ik persoonlijk niet netjes. Ik kan ook wel <div>'s weghalen door <body> en <html> als container te gebruiken.

> http://kutcomputers.nl/tests/tinyvalign.html

HTML:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#topding, #bottomding, #centerding
{
    position: absolute;
    height: 50%;
    width: 100%;
}

#topding
{
    top: 0%;
    background: red;
}

#bottomding
{
    bottom: 0%;
    background: green;
}

#centerding
{
    top: 50%;
    height: 500px;
    margin: -250px 0 0 0;
    background: #eee;
}
</style>
</head>
<body>
    <div id=topding></div>
    <div id=bottomding></div>
    <img id=centerding src="" alt="image">
</body>
</html>

Nou hebben we allebei 2 divs, alleen zitten bij mij de background-patterns in de divs en niet in het <html> element, waardoor je het ook meerdere keren kunt gebruiken binnen je pagina of binnen andere html elementen met variable grootte. (een lightbox bijv.)

[ Voor 15% gewijzigd door Gamebuster op 21-12-2010 16:50 ]

Let op: Mijn post bevat meningen, aannames of onwaarheden

dinsdag 21 december 2010 16:50

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Tel je <div>'s nog eens na, zijn er echt 3 hoor

Ik kan niet tellen. Nu is het alleen zo dat als je de foto gaat oprekken dat hij hoger wordt dan 500px, of dat hij plat wordt gedrukt. Dat heb je met mijn opzet niet zoals je kunt zien. Daarnaast kun je background ook gewoon op de <body> zetten als jij dat netter vind. Al zie ik het probleem met een background op de <html> niet zo. Is ook gewoon stijlbaar element.

[ Voor 33% gewijzigd door MoietyMe op 21-12-2010 17:00 ]

dinsdag 21 december 2010 16:50

Acties:

0 Henk 'm!

martijn2008

HTML:

<table height="100%" border="1px" width="100%">
 <tr>
    <td>Test</td>
 </tr>
 <tr height="500px" bgcolor="red">
    <td>Foto</td>
 </tr>
 </tr>
    <td>Test</td>
 </tr>
</table>

Dit is eigenlijk niet helemaal wat je wilde, maar dit is toch wel wat je zocht of niet?
... Maar iemand anders heeft al een mooiere oplossing gevonden

[ Voor 10% gewijzigd door martijn2008 op 21-12-2010 16:54 ]

dinsdag 21 december 2010 16:54

Acties:

0 Henk 'm!

MoietyMe

zij/haar

martijn2008 schreef op dinsdag 21 december 2010 @ 16:50:
HTML:
1
2
3
4
5
6
7
8
9
10
11
<table height="100%" border="1px" width="100%">
 <tr>
    <td>Test</td>
 </tr>
 <tr height="500px" bgcolor="red">
    <td>Foto</td>
 </tr>
 </tr>
    <td>Test</td>
 </tr>
</table>
Dit is eigenlijk niet helemaal wat je wilde, maar dit is toch wel wat je zocht of niet?

Dan kun je imo nog beter twee zinloze <div>'s hebben.

dinsdag 21 december 2010 17:05

Acties:

0 Henk 'm!

Gamebuster

Good Fella schreef op dinsdag 21 december 2010 @ 16:50:
Tel je <div>'s nog eens na, zijn er echt 3 hoor Ik kan niet tellen. Nu is het alleen zo dat als je de foto gaat oprekken dat hij hoger wordt dan 500px, of dat hij plat wordt gedrukt. Daarnaast kun je background ook gewoon op de <body> zetten als jij dat netter vind. Al zie ik het probleem met een background op de <html> niet zo. Is ook gewoon stijlbaar element.

<html> is stijlbaar, maar ik vind jou gebruik daarvan niet netjes.

Ik weet niet wat de TS hiermee wil doen, maar ik zou zoiets als dit gebruiken als een lightbox over een bestaande pagina heen; er is dan dus al een hele pagina onder. Het HTML element ligt helemaal onderin de pagina, daar bovenop liggen de contents van de pagina en daarbovenop wil je dan die lightbox hebben.

Bij mijn voorbeeld kan je gewoon de 3 tags (div, div, img) kopieren naar het de content van de lightbox zonder enig probleem, bij die van jou moet je de CSS aanpassen.

Let op: Mijn post bevat meningen, aannames of onwaarheden

dinsdag 21 december 2010 17:18

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Gamebuster schreef op dinsdag 21 december 2010 @ 17:05:
[...]

<html> is stijlbaar, maar ik vind jou gebruik daarvan niet netjes.

Ik weet niet wat de TS hiermee wil doen, maar ik zou zoiets als dit gebruiken als een lightbox over een bestaande pagina heen; er is dan dus al een hele pagina onder. Het HTML element ligt helemaal onderin de pagina, daar bovenop liggen de contents van de pagina en daarbovenop wil je dan die lightbox hebben.

Bij mijn voorbeeld kan je gewoon de 3 tags (div, div, img) kopieren naar het de content van de lightbox zonder enig probleem, bij die van jou moet je de CSS aanpassen.

Mijn interpretatie is dat dit een stand-alone pagina is. Anders kom je inderdaad bij zoiets als dat van jou uit.

Met mijn interpretatie kan hij nog korter btw:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            html {
                padding:0;
                height:100%;
                background:#e8e5c0 url(pattern.png);
            }
            
            body {
                margin:0;
                height:100%;
                width:100%;
                height:50%;
                background:#e8c0c0 url(pattern.png);
            }
            
            div#photo {
                position:absolute;
                top:50%;
                left:0;
                right:0;
                margin-top:-250px;
                width:100%;
                height:500px;
                background:#9cebff;
            }
        </style>
    </head>
    <body>
        <div id="photo">
            <img src="photo.jpg" />
        </div>
    </body>
</html>

En als overlay: http://dev.agosto.nl/valign/index2.html

Ja; het is één <div> meer dan jouw opstelling, maar dit is toch iets netter als het om semantiek gaat. Daarnaast is het verschil van één <div> alleen omdat die van mij de foto netjes cropt. Dat doet die van jou niet. Als dat geen vereiste is (waar het wel op lijkt als ik de OP lees) dan kan er één <div> weg. Dan nog vind ik deze beter vanwege de semantiek.

[ Voor 41% gewijzigd door MoietyMe op 21-12-2010 17:32 ]

dinsdag 21 december 2010 17:23

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

martijn2008 schreef op dinsdag 21 december 2010 @ 16:50:
HTML:
1

Dit is eigenlijk niet helemaal wat je wilde, maar dit is toch wel wat je zocht of niet?
... Maar iemand anders heeft al een mooiere oplossing gevonden

Misschien kun jij je beter even inlezen in de afgelopen 7 jaar ontwikkeling op het gebied van webdevelopment.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 21 december 2010 18:37

Acties:

0 Henk 'm!

Reb87

Topicstarter

Bedankt voor de antwoorden iedereen. Ik ben voor de oplossing van gamebuster gegaan, werkt perfect. Het is idd voor een homepage, niet voor een lightbox oid.

@martijn2008: bedankt voor je input, maar tables worden al jaren niet meer gebruikt voor layout doeleinden.

dinsdag 21 december 2010 22:33

Acties:

0 Henk 'm!

martijn2008

Ik weet het, maar ik wist het beste antwoord niet...
en ik had nog niet door dat er al een beter antwoord was gegeven.
graag gedaan btw.

woensdag 22 december 2010 09:08

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Reb87 schreef op dinsdag 21 december 2010 @ 18:37:
Bedankt voor de antwoorden iedereen. Ik ben voor de oplossing van gamebuster gegaan, werkt perfect. Het is idd voor een homepage, niet voor een lightbox oid.

@martijn2008: bedankt voor je input, maar tables worden al jaren niet meer gebruikt voor layout doeleinden.

Hoe ga je die foto dan stretched over de volledige breedte zonder dat hij hoger wordt dan 500px?

woensdag 22 december 2010 12:30

Acties:

0 Henk 'm!

X-Lars

Just GoT it.

Dit soort dingen (multiple bg images of images als border) zijn overigens makkelijk met CSS3 te bereiken. Dit heeft al behoorlijk goede ondersteuning in non-IE browsers.

woensdag 22 december 2010 12:41

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

X-Lars schreef op woensdag 22 december 2010 @ 12:30:
Dit soort dingen (multiple bg images of images als border) zijn overigens makkelijk met CSS3 te bereiken. Dit heeft al behoorlijk goede ondersteuning in non-IE browsers.

Ja, want IE gebruikt natuurlijk niemand.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 22 december 2010 12:58

Acties:

0 Henk 'm!

X-Lars

Just GoT it.

NMe schreef op woensdag 22 december 2010 @ 12:41:
[...]

Ja, want IE gebruikt natuurlijk niemand.

Dat zeg ik toch ook niet? Je kunt het promoten en je kunt het vermijden. Anyway, dit is helemaal geen discussie waard. Ik probeer alleen maar aan te geven dat het kan, het lijkt mij goed dat mensen het gebruiken zodra het in hun specifieke situatie (hobby, intranet, public, ...) een viable optie is. En dat kan ik in deze post niet opmaken.

woensdag 22 december 2010 13:06

Acties:

0 Henk 'm!

MoietyMe

zij/haar

X-Lars schreef op woensdag 22 december 2010 @ 12:30:
Dit soort dingen (multiple bg images of images als border) zijn overigens makkelijk met CSS3 te bereiken. Dit heeft al behoorlijk goede ondersteuning in non-IE browsers.

Dat kan zeker. Voor IE kun je toch makkelijk een fall-back maken.

woensdag 22 december 2010 13:33

Acties:

0 Henk 'm!

Gamebuster

Good Fella schreef op woensdag 22 december 2010 @ 13:06:
[...]

Dat kan zeker. Voor IE kun je toch makkelijk een fall-back maken.

En dan heb je alsnog 2 versies

Nee, ik hou het voorlopig bij HTML4, CSS2 en simpele IE6-compatible JS.

HTML5 en CSS3 is erg leuk, maar als oudere browsers gezeik krijgen is er weinig lol meer aan. Tot over een paar jaar, zeg ik dan maar.

Let op: Mijn post bevat meningen, aannames of onwaarheden

woensdag 22 december 2010 13:34

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Als je er toch een fallback voor moet maken dan kun je beter meteen een CSS2-oplossing maken zodat je niet conditioneel een fallback moet toepassen. CSS3 is heel leuk om vast toe te passen voor simpele hobbyprojecten maar zolang IE het niet ondersteunt moet je het gewoon niet gebruiken als je het niet nodig hebt. Kost je extra requests, extra devtijd, en dan heb ik het nog niet over de extra moeite die het kost als de draft aangepast wordt.

Gamebuster schreef op woensdag 22 december 2010 @ 13:33:
[...]

Nee, ik hou het voorlopig bij HTML4, CSS2 en simpele IE6-compatible JS.

IE6-support heb ik al jaren geleden afgezworen, en op kantoor hebben we dat vorig jaar gelukkig ook gedaan. Een browser uit 2001 ga ik niet meer supporten.

HTML5 en CSS3 is erg leuk, maar als oudere browsers gezeik krijgen is er weinig lol meer aan. Tot over een paar jaar, zeg ik dan maar.

HTML5 en CSS3 kun je prima gebruiken, maar niet voor zaken die belangrijk zijn voor je layout. Een blokje dat geen box-shadow laat zien, #care. Een layout die compleet breekt omdat je geen CSS3-ondersteuning hebt is een ander verhaal.

[ Voor 45% gewijzigd door NMe op 22-12-2010 13:37 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 22 december 2010 13:36

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Gamebuster schreef op woensdag 22 december 2010 @ 13:33:
[...]

En dan heb je alsnog 2 versies

Nee, ik hou het voorlopig bij HTML4, CSS2 en simpele IE6-compatible JS.

HTML5 en CSS3 is erg leuk, maar als oudere browsers gezeik krijgen is er weinig lol meer aan. Tot over een paar jaar, zeg ik dan maar.

Dat is waar, je moet met dat soort dingen ook wel een beetje realistisch blijven. Ik gebruik CSS3 dagelijks op mijn werk. Beetje leuke fall-back met CSS2 of JS en je zit goed.

Al doe ik tegenwoordig meer aan progressive enhancement dan aan graceful degradation.

vrijdag 24 december 2010 13:44

Acties:

0 Henk 'm!

Reb87

Topicstarter

Nu ik weer een fase verder ben loop ik tegen het volgende probleem aan. De verschillende patterns die ik aan div 1 & div3 wil geven alignen niet goed. Kies ik voor "top", dan verdwijnt bij div3 de pattern, en bij div1 via "bottom". Andersom werkt het wel, want dan pakt hij de top & bottom van het browserraampje ipv de foto. Ter illustratie:

Afbeeldingslocatie: http://i641.photobucket.com/albums/uu133/Benjaminr87/pattern.jpg

Afbeeldingslocatie: http://i641.photobucket.com/albums/uu133/Benjaminr87/pattern.jpg

Misschien niet helemaal duidelijk, maar tussen de pattern en foto zit nu een loze ruimte, terwijl de pattern aan zou moeten sluiten aan de foto

Ik had niet verwacht dat zo'n simpel idee nog zoveel voeten in de aarde zou hebben.

Ik heb wel het gevoel dat hiervoor een heel simpele oplossing is. Echter ben ik door al de probeersels even de draad kwijt, dus alle hulp is welkom.

[ Voor 10% gewijzigd door Reb87 op 24-12-2010 14:10 ]

vrijdag 24 december 2010 14:53

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

En hoe ziet je CSS eruit? Lijkt me niet meer dan even je margins en paddings goed zetten?

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 24 december 2010 14:59

Acties:

0 Henk 'm!

Reb87

Topicstarter

NMe schreef op vrijdag 24 december 2010 @ 14:53:
En hoe ziet je CSS eruit? Lijkt me niet meer dan even je margins en paddings goed zetten?

Cascading Stylesheet:

html
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
}

body
{
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0;
}

#container
{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: absolute;
}

#top
{
    background-image:url('../images/pat_top_m.jpg');
    background-repeat:repeat-x;
    background-position :top center;
    background-attachment   :fixed;
    background-color: #000;
    position: absolute;
    top: 0%;
    height: 50%;
    width: 100%;
}

#logo
{
    position: absolute;
    background-image:url('../images/logo.png');
    width: 200px;
    height: 76px;
    margin-left: 10px;
    margin-top: 10px;
}

#bottom
{
    position: absolute;
    bottom: 0%;
    height: 50%;
    background-image:url('../images/pat_bottom_m.jpg');
    background-repeat   :repeat-x;
    background-position :bottom center;
    background-attachment   :fixed;
    background-color: #000;
    width: 100%;
}

#photo
{
    position: absolute;
    top: 50%;
    height: 400px;
    margin: -200px 0 0 0;
    background: #000;
    width: 100%;
    background-image:url('../images/photo.jpg');
}

vrijdag 24 december 2010 15:02

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Bedoel je zoiets? http://azwart.nl/got/vertimg/

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 24 december 2010 15:07

Acties:

0 Henk 'm!

Reb87

Topicstarter

Precies Okke

Dat zowel het onderste als bovenste pattern aansluiten op de foto en er geen ruimte tussen zit.

-edit-

Toch niet helemaal. In jouw voorbeeld resized de foto. Iets wat dan weer net niet de bedoeling is.

[ Voor 71% gewijzigd door Reb87 op 24-12-2010 15:45 ]

vrijdag 24 december 2010 15:43

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

In mijn voorbeeld resized de foto nu in de breedte mee ja, in de hoogte niet. Dat is ook anders in te stellen. Gewoon de width van de image vast zetten (ipv 100% zoals nu), en dan de #image een background meegeven. Verder kan je alles downloaden en overnemen als je wil.

[ Voor 4% gewijzigd door OkkE op 24-12-2010 15:43 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 24 december 2010 15:47

Acties:

0 Henk 'm!

Reb87

Topicstarter

Ik heb nog even verder gekeken naar jouw voorbeeld (echt, ik ben de draad kwijt), maar voornamelijk het mee-resizen van de patterns is onwenselijk. ze mogen horizontaal herhalen niet rekken) en moeten verticaal altijd 100px blijven. Daar zit ook precies het probleem, want als je deze properties meegeeft krijg je ze niet netjes meer tegen de foto aan.

vrijdag 24 december 2010 15:50

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

In mijn voorbeeld resizen te patterns niet, ze staan tegen de boven- en onderkant van de image aan. Ik heb alleen gekozen voor een gradient en de background color van de <div>'s op de zelfde kleur ingesteld, zodat het een mooi geheel vormt. Als je mijn voorbeeld pakt en de background van de <div>'s op grijs of wit zet, zal je zien hoe het werkt.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 24 december 2010 16:21

Acties:

0 Henk 'm!

Reb87

Topicstarter

Ik krijg het niet voor elkaar met jouw voorbeeld Okke. De pattern plaatjes verschijnen niet zodra ik de hoogte van de foto aanpas (400px), of zowel de onder als bovenpattern komen bij elkaar te staan. Om eerlijk te zijn zie ik ook de logica van je voorbeeld niet (maar da's mijn gebrek aan css skill

).

Cascading Stylesheet:

    * { margin: 0px; }
    html, body, div { height: 100%; }
    .top,
    .bottom { height: 25%; width: 100%; }
    .top { background: #000 url('images/pat_top_m.jpg') repeat-x left bottom; }
    .bottom { background: #c37300 url('images/pat_bottom_m.jpg') repeat-x left top; }
    #image { position: absolute; top: 50%; left: 0px; height: 400px;
             margin-top: -200px; width: 100%; background: #000; }
    #image img { width: 100%; height: 400px; }

Ik zie nu de bovenkant precies zoals ik het wil, maar de onderkant is helemaal weg.

[ Voor 47% gewijzigd door Reb87 op 24-12-2010 16:27 ]

vrijdag 24 december 2010 18:59

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Hier een plaatje ter verduidelijking:

Afbeeldingslocatie: http://azwart.nl/got/vertimg/layers.png

1. Grijs is de website.
2. Rood is een <div> van 50% hoog en bevat partoon A (onder uitgelijnd).
3. Blauw is een <div> van 50% hoog en bevat partoon B (boven uitgelijnd).
4. Groen is de image (position: absolute) van hoogte X.
5. Patroon A bevat aan de onderkant precies X gedeeld door 2 aan "lege ruimte".
6. Patroon B bevat aan de bovenkant precies X gedeeld door 2 aan "lege ruimte".

Door nu patroon A onder uit te lijnen op een <div> van 50%, zal deze vanuit het midden van de image beginnen, door de lege ruimte van precies de helft, zal die ruimte achter de image vallen en het partoon precies aansluiten aan de bovenkant van de image. Zelfde geldt voor B maar dan aansluiten aan de onderkant.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

zaterdag 25 december 2010 15:21

Acties:

0 Henk 'm!

Reb87

Topicstarter

Bedankt voor de uitleg Okke. Niet alleen maakt dit jouw script duidelijk, maar ook CSS in het algemeen een stuk duidelijker voor mij.

Bedankt voor de moeite en de hulp!

Onderwerpen