css hulp: div en relatief midden enzo...

Pro web-ontwikkeling
#1

Na wat gedoe, besefte ik dat ik content en opmaak meer moet gaan scheiden, dus ik heb een voorzichtig beginnetje gemaakt, maar ik zie het nu even niet:

Het is de bedoeling dat de afbeelding in het middel blijft hangen… ook bij venster verschaling, echter ik heb 2 soorten maten van de afbeelding dus dat dacht ik met een id te doen

In de css…

[code:1:a7fe9c266b]
div.definemiddle {
position: absolute;
width: 1px;
height: 1px;
left: 50%;
top: 50%;
overflow: visible;
}
div.defineplace {
position: absolute;
background-color: #CCCC99;
border: 1px solid #000000;
}

#size_01 {
width: 780px;
height: 520px;
left: -390px;
top: -260px;
}

#size_02 {
width: 760px;
height: 420px;
left: -380px;
top: -210px;
}

div.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
color: #27508E;
overflow: hidden;
}
[/code:1:a7fe9c266b]

in de html:

[code:1:a7fe9c266b]
<body>
<div class="definemiddle">
<div class="defineplace" id="size_02">
<div align="center" class="text">
<a href="linkje.html"><img src="afbeelding.jpg" width="760" height="420" border="0"></a>
</div>
</div>
</div>
</body>
[/code:1:a7fe9c266b]

Hij plaatst de afbeelding wel horizontaal in het midden, maar niet verticaal…

Wie helpt dit arme schaap :moe:

#2

Ik ben niet heel erg thuis in css, maar de manier waarop ik met css mijn site centreer werkt wel horizontaal én vertikaal. [code:1:766bec9e98]<style type="text/css" media="screen"><!--

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
text-align: center;
margin-top: -225px;
margin-left: -364px;
position: absolute;
top: 50%;
left: 50%;
width: 728px;
height: 450px;
visibility: visible
}

–></style>
</head>
<body><div id="content">Hier komt dat wat je wilt centreren</div></body>
[/code:1:766bec9e98]

#3

Ja... ik krijg het op een andere methode ook wel voor elkaar (oa andere classes maken en per class alles definieren), maar ik zocht nu eigenlijk meer naar de fout in de code die ik nu heb.

Misschien heb ik het nu teveel uitgesplitst…

Overigens als ik die code van jouw copy-paste, dan centreert ie ook niet :x

#4

wat is 'het midden'?

het centrum van je scherm? Horizontaal centreren?

#5

het midden is 50% minus breedte/hoogte van afbeelding/div van je venster (dus niet van de monitor)

#6

overigens ben je geheel op het verkeerde spoor. Als het twee maten afbeeldingen zijn (en dan bedoel ik een <img> tag) dan kan je voor iedere maar image een aparte class maken:

[code:1:8fc09c2f9c]
<img src="groot.jpg" width= "300" height="300" alt="grote afbeelding" class="groot" />
<img src="klein.jpg" width="100" height="100" alt="kleine afbeelding" class="klein" />
[/code:1:8fc09c2f9c]

en je css definities aan ‘groot’ en ‘klein’ hangen.

#7

hmmm... dan gaat het alleen op bij images?

Maar als ik in die div (vandaar nested, of zie ik dat fout?) meer dan alleen images kwijt wil…

Dus ik heb bijv een opmaak size_01 en voor een andere opmaak size_02

#8

[quote:45f8ad322c="Jack4ya"]het midden is 50% minus breedte/hoogte van afbeelding/div van je venster (dus niet van de monitor)[/quote:45f8ad322c]

Dat is nog steed geen antwoord:

[code:1:45f8ad322c]

< ----- (plaatje) →
[/code:1:45f8ad322c]

of

[code:1:45f8ad322c]
/
|
|
<------(plaatje) ------>
|
|
/
[/code:1:45f8ad322c]

#9

[quote:63bbd497d1="Jack4ya"]hmmm... dan gaat het alleen op bij images?

Maar als ik in die div (vandaar nested, of zie ik dat fout?) meer dan alleen images kwijt wil…

Dus ik heb bijv een opmaak size_01 en voor een andere opmaak size_02[/quote:63bbd497d1]

Even een voorbeeld site (is geen CSS, maar het gaat me om het effect!):
http://www.petergabriel.com/

Bedoel je zoiets? een content-vlak gecentreerd, zowel horizontaal als vertikaal op je canvas?

#10

ja... dat bedoel ik, net als ik bij www.aquilect.nl wel voor elkaar kreeg...

Het gaat niet zozeer om een afbeelding, maar info in het algemeen.

Ik dacht in grote lijnen:

zoek het midden = 50% van links en 50% van top
bepaal breedte= bijv 760 px
bepaal hoogte= bijv 420 px

dan is positie
links = 50% - (helft van breedte)
top = 50% - (helft van hoogte)

En de “grap” is dan dat ik dan 2 soorten layouts moet kunnen maken, want ik wil bijv ipv eerder genoemde 760/420 ook een 800/600 kunnen weergeven…

#11

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

nadeel: wanneer het scherm kleiner is dan de hoogte van de box, dan verdwijnt je box onder het menu van je browser (maak het venster maar eens heel klein)

#12

[quote:29a8c672c9="tennapel"]http://www.wpdfd.com/editorial/thebox/deadcentre4.html

nadeel: wanneer het scherm kleiner is dan de hoogte van de box, dan verdwijnt je box onder het menu van je browser (maak het venster maar eens heel klein)[/quote:29a8c672c9]

ja, dat klopt… maar dat “mag” nu :wink:

#13

deze code werkt wel: [code:1:eb038a5d34]div.definemiddle { position:absolute; width:1px; height:1px; left: 50%; top: 50%; overflow: visible; } div.defineplace { position:absolute; width:800px; height:600px; left: -400px; top: -300px; } [/code:1:eb038a5d34]

en dan binnen je html dit plaatsen

[code:1:eb038a5d34]<div class="definemiddle">
<div class="defineplace">
KOPIJ
</div>
</div>[/code:1:eb038a5d34]

#14

Suf ik zie al wat ik kan doen....

#15

centreer de div met de code van de link. Binnen die div kan je met de content doen wat je wilt; daar heb je geen extra div's voor nodig.

Het grote verschil tussen table-based layouts en css is dat je met css juist zo simpel mogelijk moet denken. Hoe minder gedoe, hoe makkelijker. Voor table-based layouts moest je juist bergen code bakken om het voor elkaar te krijgen. Die denkswitch maken is lastig, I know.

#16

Wat zijn trouwens die 1px dingen? Is dat niet een onnauwkeurigheid?

#17

hmm ja die 1 pixels heb ik maar weggehaald... had eigenlijk geen waarde:

Kan dit nog schoner? Het werkt naar behoren, dus ik probeerde het schoner te maken, maar dat lijkt niet te lukken…

[quote:acdc49a20c]div.definemiddle {
position:absolute;
left: 50%;
top: 50%;
overflow: visible;
}

div.defineplace_01 {
position:absolute;
width: 780px;
height: 520px;
left: -390px;
top: -260px;
background-color:#FF9900;
border: 1px solid 000000;
}

div.defineplace_02 {
position:absolute;
width: 760px;
height: 420px;
left: -380px;
top: -210px;
background-color:#FF9900;
border: 1px solid 000000;
}
[/quote:acdc49a20c]

en

in de html

[quote:acdc49a20c]<div class=“definemiddle”>
<div class=“defineplace_01”> bla bla bla (tekst of beeld)</a></div>
</div>
[/quote:acdc49a20c]

of

[quote:acdc49a20c]<div class=“definemiddle”>
<div class=“defineplace_02”> bla bla bla (tekst of beeld)</a></div>
</div>
[/quote:acdc49a20c]

#18

Waarom gebruik je defineplace? Waarom niet gewoon: [code:1:1bd16b56b0] <div id="g1">

</div>

<div id="g2">

</div>
[/code:1:1bd16b56b0]

en dan

[code:1:1bd16b56b0]
#g1 {
position : aboslute;
top : 50%;
left : 50%;
width : 780px;
height : 520px;
margin : -260px 0 0 -390px;
background-color:#FF9900;
border: 1px solid 000000;
}

#g2 {
position : aboslute;
top : 50%;
left : 50%;
width : 760px;
height : 420px;
margin : -210px 0 0 -380px;
background-color:#FF9900;
border: 1px solid 000000;
}
[/code:1:1bd16b56b0]

#19

Ja... das misschien logischer... Ik had het anders opgesplitst, omdat ik dacht dat je dan minder code kreeg...

Bedankt Tennapel !!

#20

Dat éénpixel gedoe is een eigenlijk een layer die niet echt zichtbaar is, maar hij moet er wel zijn. Daarom moet hij ook overfloat:visible meekrijgen, zodat alles wat er uitsteekt (dat zal alles zijn, want 1 pixel is niet veel, en alles gaat er in komen) toch getoond word.

Snap je verder hoe het systeem in elkaar zit, en waarom je met negative margins zit?

update: je bent er blijkbaar uit, prima!