[HTML] plaatje centreren verticaal - Softwareontwikkeling

woensdag 2 april 2003 18:46

Acties:

Topicstarter

Ik kan het echt niet vinden.... Misschien moet ik ook wel met tabellen werken... maar dat vind ik zo'n ge'eikel...

Maar zoals je in html een plaatje kan centreren horizontaal doe je met <center> maar heb je ook een html tag voor verticaal? anders moet je zo veel <br> (enters) geven.

[ Voor 9% gewijzigd door Ik De Buurman op 02-04-2003 18:46 ]

woensdag 2 april 2003 18:49

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

gewoon in een tabel van 3*3 zetten of frames of css of layers of ...

Huur mij in als freelance SEO consultant!

woensdag 2 april 2003 18:51

Acties:

LAN

Tabel met align=center met 1 cel erin, en dan die cel op valign=middle zetten.

edit:

ah, verticaal centreren in het algemeen

[ Voor 28% gewijzigd door LAN op 02-04-2003 18:52 ]

woensdag 2 april 2003 18:54

Acties:

Ik De Buurman

Topicstarter

jepzz gewoon verticaal.... dat het dus niet uit maakt op wat welke resolutie je draait...

woensdag 2 april 2003 19:03

Acties:

Verwijderd

En als er in dezelfde cell ook nog eens tekst naast het plaatje komt. Kun je ook het volgende attribuut toevoegen in de img tag:
align="absmiddle"

woensdag 2 april 2003 19:12

Acties:

Verwijderd

PHP:

<div class="abscenter">

div.abscenter {
  width: 300px;
  height: 300px;
  position: absolute; /* of liever position: fixed; misschien */
  top: 50%;
  left: 50%;
  margin-left: -150px; /* helft van width */
  margin-top: -150px; /* idem */
  background: black;
}

[ Voor 8% gewijzigd door Verwijderd op 02-04-2003 19:13 ]

donderdag 25 oktober 2007 18:26

Acties:

m.theloosen

Ik zit met een probleempje. Ik vind het niet nuttig om hiervoor weer een nieuw topic te maken.

Ik heb een tabel van 1 cel. en daarin staat een plaatje. Ik wil dit plaatje horizon en verticaal op het beeld centreren. Vroeger is dit me wel eens gelukt maar misschien ligt het volgende aan Explorer 7?

De code:
<style type="text/css">

</style>
</head>
<body topmargin="0" leftmargin="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: middle;" align="center" align="center" ><a href="index2.html"><img src="index.jpg" border="0" /></a></td>
</tr>
</table>

Op een of andere manier wil het plaatje niet verticaal centeren. Het blijft bovenin hangen.

donderdag 25 oktober 2007 18:31

Acties:

moozzuzz

ik heb steeds de neiging dit soort plaatjes als een bg-image te plaatsen: center center en hopsala!

donderdag 25 oktober 2007 18:32

Acties:

m.theloosen

Ja maar dit plaatje is een link. Ik vind je antwoord niet echt duidelijk.

donderdag 25 oktober 2007 18:40

Acties:

moozzuzz

Zover mijn ervaring rijkt, is dit vert. centreren enkel mogelijk in een block-element. In jouw plaats zou ik (op basis van je opgave):

HTML:

1
2
3

<body onClick="een javascript dat naar volgende pag gaat">
<a href="volgende pagina.html" class="inv">&nbsp;</a>
</body>

Cascading Stylesheet:

body {
    background-image: url(image001.jpg);
    background-position: center center;
    overflow: hidden;
}

body a.inv {
   display: block;
   width: 100%;
   height: 100%;
}

succes!

donderdag 25 oktober 2007 20:23

Acties:

Geert.H

check je code
Je hebt twee keer align staan. Je bedoelt waarschijnlijk valign="center"

Alhoewel dat niet de manier is waarop het moet.

donderdag 25 oktober 2007 23:54

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Geert.H schreef op donderdag 25 oktober 2007 @ 20:23:
Je hebt twee keer align staan.

In principe maakt dat niks uit; dat het onzinnig is is een tweede...

Geert.H schreef op donderdag 25 oktober 2007 @ 20:23:
Je bedoelt waarschijnlijk valign="center"

Dan is het nog altijd valign="middle"

Geert.H schreef op donderdag 25 oktober 2007 @ 20:23:
Alhoewel dat niet de manier is waarop het moet.

En dat ben ik dan weer wel met je eens

[ Voor 5% gewijzigd door RobIII op 25-10-2007 23:57 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 26 oktober 2007 09:39

Acties:

TeeDee

CQB 241

Geert.H schreef op donderdag 25 oktober 2007 @ 20:23:
Alhoewel dat niet de manier is waarop het moet.

Puur uit interesse: wat is dan wel de manier?

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 26 oktober 2007 09:49

Acties:

H004

Wat Fool al plaatste in 2003:

HTML:

1	<div class="abscenter">

Cascading Stylesheet:

div.abscenter {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px; /* helft van width */
  margin-top: -150px; /* helft van height */
  background: black;
}

Al vind ik deze manier ook nog steeds een trucje, en niet echt dé oplossing. Eigenlijk zou ik

Cascading Stylesheet:

div.abscenter {
  margin: auto auto;
  width: 300px;
  height: 300px;

willen kunnen gebruiken in een wrapper...

[ Voor 36% gewijzigd door H004 op 26-10-2007 09:52 ]

vrijdag 26 oktober 2007 09:52

Acties:

TeeDee

CQB 241

Right, die had ik al door

Maar als je nu eens niet de hoogte van je container weet?

H004 schreef op vrijdag 26 oktober 2007 @ 09:58:
Hmmm, volgens mij zit je dan toch vast aan een 1-cel-tabel met middle en center, of een javascript-oplossing. Beide natuurlijk geen schoonheidswondertjes. Ben ook wel benieuwd naar goede oplossingen voor dat probleem, al geloof ik niet dat het met puur css mogelijk is op dit moment...

En daarom vroeg ik het dus.

[ Voor 69% gewijzigd door TeeDee op 26-10-2007 10:02 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 26 oktober 2007 09:58

Acties:

H004

Hmmm, volgens mij zit je dan toch vast aan een 1-cel-tabel met middle en center, of een javascript-oplossing. Beide natuurlijk geen schoonheidswondertjes. Ben ook wel benieuwd naar goede oplossingen voor dat probleem, al geloof ik niet dat het met puur css mogelijk is op dit moment...

vrijdag 26 oktober 2007 13:06

Acties:

Geert.H

@RobIII
't klopt dat het niets uit maakte. Ik bedoelde dan eigenlijk ook dat er align="center" valign="middle" moest komen te staan, ipv twee keer align. En inderdaad dan moet het wel middle zijn

En de manier waarop het (volgens mij) wel kan met een afbeelding waarvan je de breedte niet weet:
margin:auto;

(dan kan je je afbeelding _niet_ absoluut positioneren, dus alleen relatief).

woensdag 23 juli 2008 20:55

Acties:

Gersomvg

Als het niet al te erg is diep ik dit topic ook weer even op

Ik had namelijk ook geen durf om een nieuw topic aan te maken xD

Ik wil dus voor een fotoalbum-overzicht thumbnails verticaal centreren in een div.

Via google kwam ik deze 3 manieren ten overvloede tegen:

manier 1:

code:

.img{
top:50%;
margin:-{helft van imghoogte}px;
}

Werkt niet want imghoogte is niet bekend

manier 2:
geklier met line-height; werkt niet

manier 3:
Plaatje als achtergrond; werkt niet want dan kan je de img geen border geven..

Verder hielp experimenteren met div relative en img absolute ook niet echt..

WIE KAN MIJ HELPEN?

woensdag 23 juli 2008 21:13

Acties:

Pkunk

Kan je het niet server-side oplossen? Mijn ervaring is dat je jezelf daarmee een hoop ellende bespaart.

Hallo met Tim

woensdag 23 juli 2008 21:17

Acties:

Gersomvg

Het probleem is dat is dat ik net een keer ALLE CSS netjes in m'n stylesheet wilde hebben waar ik dus niet met m'n php bij kan

woensdag 23 juli 2008 21:20

Acties:

Pkunk

gersompie schreef op woensdag 23 juli 2008 @ 21:17:
Het probleem is dat is dat ik net een keer ALLE CSS netjes in m'n stylesheet wilde hebben waar ik dus niet met m'n php bij kan

nouja.. ik bedoel meer dat je iets maakt in de richting van <img src="serveerPlaatje.php?image=1234"/> waarbij serveerPlaatje.php dus een plaatje met padding/borders uitserveerd.

Hallo met Tim

woensdag 23 juli 2008 21:25

Acties:

Gersomvg

Je bedoelt dat ik dan met php een stukje bovenaan het plaatje moet plakken dat dezelfde kleur heeft als de achtergrond? Ik wil eigenlijk liever de plaatjes niet door een GD script heen slepen want ik heb de ervaring dat dat wel eens hapert.. Dan heb je om de zoveel tijd half-zwarte plaatjes in de overzicht (vooral als dat script 30x per overzicht moet draaien wordt die kans groter)..
Ik maak het mezelf trouwens wel moeilijk

edit:
Kan het niet met een include? Dat ik een stukje html include?
zoiets:
include(plaatjes.php?hoogte=300px);
en dan css padding..

[ Voor 13% gewijzigd door Gersomvg op 23-07-2008 21:27 ]

woensdag 23 juli 2008 21:30

Acties:

Pkunk

gersompie schreef op woensdag 23 juli 2008 @ 21:25:
Je bedoelt dat ik dan met php een stukje bovenaan het plaatje moet plakken dat dezelfde kleur heeft als de achtergrond? Ik wil eigenlijk liever de plaatjes niet door een GD script heen slepen want ik heb de ervaring dat dat wel eens hapert.. Dan heb je om de zoveel tijd half-zwarte plaatjes in de overzicht (vooral als dat script 30x per overzicht moet draaien wordt die kans groter)..
Ik maak het mezelf trouwens wel moeilijk

edit:
Kan het niet met een include? Dat ik een stukje html include?
zoiets:
include(plaatjes.php?hoogte=300px);
en dan css padding..

Neejoh, die plaatjes maak je gewoon maar 1 keer en stop je in een cachemap. Heb je meteen performancewinst als je grote plaatjes resized.

Maargoed, het kan wel met css, maar het is een hoop gepiel. Ik heb op m'n werk wel ergens een leuk voorbeeld. Als je morgen nog geen oplossing hebt kan ik het wel even posten.

Hallo met Tim

woensdag 23 juli 2008 21:32

Acties:

TeeDee

CQB 241

Afaik is dit artikel al vrij oud, maar heb je hier wat aan?

(dit komt uit mijn oude bookmarks, dus ik heb geen idee of dit nog werkt

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 23 juli 2008 23:45

Acties:

funkwurm

Zelf ben ik over dit probleem een keer op deze pagina gekomen. Echter kun je die code niet direct knippen en plakken want IE7 pakt hem dan niet. Ik zou verwachten dat hier wel mensen rondlopen die dit verhaaltje IE7 compatible zouden kunnen maken.

Edit: Zie net dat hij al iets heeft gedaan om het IE7 compatible te maken, # hack ipv _ hack.

[ Voor 13% gewijzigd door funkwurm op 23-07-2008 23:49 ]

donderdag 24 juli 2008 09:24

Acties:

Gersomvg

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*

[ Voor 29% gewijzigd door Gersomvg op 24-07-2008 09:27 ]

donderdag 24 juli 2008 09:30

Acties:

TeeDee

CQB 241

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.

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

*kuch* conditional css statements.

[ Voor 48% gewijzigd door TeeDee op 24-07-2008 09:34 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 24 juli 2008 10:04

Acties:

Gersomvg

@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..

donderdag 24 juli 2008 10:09

Acties:

Gersomvg

HTML:

<!--[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:

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:

#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;
}
/**/

donderdag 24 juli 2008 10:11

Acties:

Gersomvg

Gersompie wil geen omslachtige code voor een site die juist het overzicht zelve moet zijn..
CASE CLOSED (ik doe het wel serverside)

[ Voor 44% gewijzigd door Gersomvg op 24-07-2008 10:12 ]

donderdag 24 juli 2008 12:54

Acties:

Verwijderd

In IE6 werkt dit:

HTML:

<!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.

donderdag 24 juli 2008 13:11

Acties:

Gersomvg

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

[ Voor 10% gewijzigd door Gersomvg op 24-07-2008 13:12 ]

donderdag 24 juli 2008 13:18

Acties:

Verwijderd

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.

donderdag 24 juli 2008 13:40

Acties:

TeeDee

CQB 241

* TeeDee vraagt zich inderdaad ook af hoe gersompie test.

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 24 juli 2008 13:44

Acties:

Bosmonster

*zucht*

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"

[ Voor 11% gewijzigd door Bosmonster op 24-07-2008 13:45 ]

donderdag 24 juli 2008 13:51

Acties:

Gersomvg

Verwijderd 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

donderdag 24 juli 2008 14:15

Acties:

Verwijderd

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.

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.

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.

[ Voor 7% gewijzigd door Verwijderd op 24-07-2008 14:16 ]

vrijdag 25 juli 2008 09:55

Acties:

Gersomvg

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..

Pagina: 1

Reageer