Hoofdcategorieën

[RSS] Forum » Devschuur® » Webdesign, Markup & Clientside Scripting » [HTML] plaatje centreren verticaal

Topicacties

[HTML] plaatje centreren verticaal

Pagina: 1 2 last

Reageer Nieuw Topic

offline Geplaatst op donderdag 24 juli 2008 09:24

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 176
Reg. datum: 19 december 2005
IE7 is juist de enigste browser bij mij waar die manier van TeeDee's link bij werkt xD
FF Opera en Safari laten het afweten :/

*Gersompie haat hacks omdat hij dan o.a. css in z'n htmldocument moet zetten*

gersompie wijzigde dit bericht 24-07-2008 09:27 (29%)

Is de wereld al vergaan?

offline Geplaatst op donderdag 24 juli 2008 09:30

Acties: [view][quote]

Door: TeeDee
CQB 241
Berichten: 6.457
Reg. datum: 19 februari 2001
quote:
gersompie schreef op donderdag 24 juli 2008 @ 09:24:
IE7 is juist de enigste browser bij mij waar die manier van TeeDee's link bij werkt xD
FF Opera en Safari laten het afweten :/
Dan doe je toch iets anders niet goed, want in IE7, FF3, Opera en Safari (win) werkt de gelinkte pagina prima.
quote:
*Gersompie haat hacks omdat hij dan o.a. css in z'n htmldocument moet zetten*
*kuch* conditional css statements.

TeeDee wijzigde dit bericht 24-07-2008 09:34 (48%)

Website TweakU2, met Bio! Heart..pumps blood.Has nothing to do with emotion! I'm Bored

offline Geplaatst op donderdag 24 juli 2008 10:04

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 176
Reg. datum: 19 december 2005
@Teedee; sorry, ik was in de war met een andere pagina die ik voor me had. Jou manier krijg ik sowieso niet goed verwerkt in m'n eigen code (ik zal misschien ff code posten) maar het voorbeeld werkt bij mij toch echt niet in IE7. Bovendien valt in opera de border van de outerdiv weg..

Is de wereld al vergaan?

offline Geplaatst op donderdag 24 juli 2008 10:09

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 176
Reg. datum: 19 december 2005

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--[if IE]>
    <style>
     .wraptocenter span {
     display: inline-block;
     height: 100%;
     }
    </style>
<![endif]-->

<div id="div_img" onmouseover="thumb_over(this);" onmouseout="thumb_out(this);" onclick="thumb_click(\'hallo\');">

<span></span> <img src="albums/1234/klein/1235.jpg" alt="afbeelding">

</div>


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
function thumb_over(thumb){
thumb.style.backgroundColor = "#CBDCDC";
}

function thumb_out(thumb){
thumb.style.backgroundColor = "#E7EDED";
}

function thumb_click(thumb){
document.location = "index.php?foto=" + thumb;
}

Dit moet goed zijn volgens je link;
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#div_img{
width:139px;
height:139px;
border:1px solid #A2C1CE;
background:#E7EDED;
float:left;
margin-top:4px;
margin-left:4px;
cursor:pointer;
display: table-cell;
text-align: center;
vertical-align: middle;
}

.div_img * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/

Is de wereld al vergaan?

offline Geplaatst op donderdag 24 juli 2008 10:11

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 176
Reg. datum: 19 december 2005
Gersompie wil geen omslachtige code voor een site die juist het overzicht zelve moet zijn..
CASE CLOSED (ik doe het wel serverside)

gersompie wijzigde dit bericht 24-07-2008 10:12 (44%)

Is de wereld al vergaan?

offline Geplaatst op donderdag 24 juli 2008 12:54

Acties: [view][quote]

Door: BARTdG
USB-apparaat voor massaopslag
Berichten: 179
Reg. datum: 25 mei 2006
In IE6 werkt dit:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>center vertically</title>
<style type="text/css">
div,span,img {
    padding:0;
    margin:0;
}
body {
    background-color:lightblue;
}
div.outer {
    position:relative;
    width:400px;
    height:300px;
    background-color:#aaa;
}

div.inner {
    position:relative;
    background-color:cornsilk;
    top:50%;
    height:50%;
}

div.inner span {
    background-color:pink;
    position:relative;
}

div.inner span div {
    position:absolute;
    top:0px;
    bottom:0px;
    width:100%;
    background-color:pink;
    text-align:center;
}

div.inner img {
    position:relative;
    top:-50%;
}
</style>
</head>

<body>

<div class="outer">
    <div class="inner">
        <span>
            <div>
                <img src="http://images.google.nl/intl/nl_ALL/images/images_hp.gif" alt="test">
            </div>
        </span>
    </div>
</div>
</body>
</html>

De kleurtjes zijn om duidelijk te krijgen wat alle divs en de span doen:
  • div.inner heeft zijn top in het midden van de div.outer;
  • de span neemt de hoogte aan van het plaatje;
  • de div daarin neemt de hoogte aan van de span;
  • met top: -50% spring het plaatje precies de helft van de div (dus van de span, dus van zichzelf) boven de rand van de div (dus van de span, dus van de div.inner) uit.
Of dit werkt in IE7 weet ik niet.

In FF, SF, OP kun je gewoon werken met display: table, table-row en table-cell en vervolgens kun je gewoon verticaal uitlijnen in de div met vertcal-align:middle. Voor Safari moet je wel al deze 3 gebruiken in geneste divs, anders werkt het niet.

Wij Tweakers doen elkaar permanent de groeten. http://www.artsalas.com/w_esculturas/esc_011.htm

offline Geplaatst op donderdag 24 juli 2008 13:11

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 176
Reg. datum: 19 december 2005
table, table-row en table-cell werken alleen in IE.. Had ik al op alle mogelijke manieren die ik kon vinden en bedenken uitgeprobeerd.. Maar ik heb het nu al serverside.. Dat scheelt zo'n 40 regels (a)

Maar ik hou hem erin ^^ ;) Dank iedereen :)

gersompie wijzigde dit bericht 24-07-2008 13:12 (10%)

Is de wereld al vergaan?

offline Geplaatst op donderdag 24 juli 2008 13:18

Acties: [view][quote]

Door: BARTdG
USB-apparaat voor massaopslag
Berichten: 179
Reg. datum: 25 mei 2006
Hmmm, table, table-row en table-cell werken bij mij in Firefox 3, Opera 9 en Safari 4 (developers preview) en juist niet in IE6.

Zie ook http://www.quirksmode.org/css/display.html.

Wij Tweakers doen elkaar permanent de groeten. http://www.artsalas.com/w_esculturas/esc_011.htm

offline Geplaatst op donderdag 24 juli 2008 13:40

Acties: [view][quote]

Door: TeeDee
CQB 241
Berichten: 6.457
Reg. datum: 19 februari 2001
* TeeDee vraagt zich inderdaad ook af hoe gersompie test.

Website TweakU2, met Bio! Heart..pumps blood.Has nothing to do with emotion! I'm Bored

offline Geplaatst op donderdag 24 juli 2008 13:44

Acties: [view][quote]

Door: Bosmonster
azijnzeikerd
Berichten: 15.781
Reg. datum: 05 juni 2001
een div in een span mag niet

Overigens snap ik niet zo goed waarom een aardige oplossing compleet genegeerd werd:

moozzuzz in "[HTML] plaatje centreren verticaal"

Bosmonster wijzigde dit bericht 24-07-2008 13:45 (11%)

Zo, nu eerst even wat anders.

offline Geplaatst op donderdag 24 juli 2008 13:51

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 176
Reg. datum: 19 december 2005
quote:
BARTdG schreef op donderdag 24 juli 2008 @ 13:18:
Hmmm, table, table-row en table-cell werken bij mij in Firefox 3, Opera 9 en Safari 4 (developers preview) en juist niet in IE6.

Zie ook http://www.quirksmode.org/css/display.html.
Ik had het over IE7 ;)

Is de wereld al vergaan?

offline Geplaatst op donderdag 24 juli 2008 14:15

Acties: [view][quote]

Door: BARTdG
USB-apparaat voor massaopslag
Berichten: 179
Reg. datum: 25 mei 2006
quote:
Bosmonster schreef op donderdag 24 juli 2008 @ 13:44:
een div in een span mag niet
Touché. Niet aan gedacht.
Van de binnenste div kun je dan ook een span maken met display:block. dat zou ook moeten werken.
quote:
Bosmonster schreef op donderdag 24 juli 2008 @ 13:44:
Overigens snap ik niet zo goed waarom een aardige oplossing compleet genegeerd werd:

moozzuzz in "[HTML] plaatje centreren verticaal"
Omdat hij volgens de TS met een border wil werken.
quote:
gersompie schreef op donderdag 24 juli 2008 @ 13:51:
Ik had het over IE7 ;)
Dus IE7 ondersteunt die table, table-row, table-cell ook?

FF, OP en SF doen dat in elk geval.

BARTdG wijzigde dit bericht 24-07-2008 14:16 (7%)

Wij Tweakers doen elkaar permanent de groeten. http://www.artsalas.com/w_esculturas/esc_011.htm

offline Geplaatst op vrijdag 25 juli 2008 09:55

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 176
Reg. datum: 19 december 2005
IE7 is bij mij de enigste die het doet bij table, table-row enzo...
Maar ik doe het wel serverside want ik moest nu toch al persé in in een style zetten wat variabel was d.m.v. php dus nu maakt het toch niets meer uit..

Is de wereld al vergaan?

Pagina: 1 2 last

VNU Media logo Powered by True

© 1998 - 2008 Tweakers.net - Alle rechten voorbehouden

Uitgever van: