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 woensdag 02 april 2003 18:46

Acties: [view][quote]

Door: Ik De Buurman
Berichten: 155
Reg. datum: 31 oktober 2002
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.

Ik De Buurman wijzigde dit bericht 02-04-2003 18:46 (9%)

Nederland blijft maar aan (case) modderen

offline Geplaatst op woensdag 02 april 2003 18:49

Acties: [view][quote]

Door: CrashOne
oOoOoOoOoOoOoOoOoOo
Berichten: 4.273
Reg. datum: 09 juli 2000
gewoon in een tabel van 3*3 zetten of frames of css of layers of ...

Bloggen op iPhoned.nl? | Elise Tamaëla's Site | Op zoek naar servies?

offline Geplaatst op woensdag 02 april 2003 18:51

Acties: [view][quote]

Door: LAN
Freelance Java Specialist
Berichten: 818
Reg. datum: 13 oktober 2000
Tabel met align=center met 1 cel erin, en dan die cel op valign=middle zetten.

edit:

ah, verticaal centreren in het algemeen

LAN wijzigde dit bericht 02-04-2003 18:52 (28%)

Local Area Netdork | Stanford University Network
Sun Certified Java Programmer | Sun Certified Web Component Developer | OMG Certified UML Professional | Sun Certified Developer for Java Web Services

offline Geplaatst op woensdag 02 april 2003 18:54

Acties: [view][quote]

Door: Ik De Buurman
Berichten: 155
Reg. datum: 31 oktober 2002
jepzz gewoon verticaal.... dat het dus niet uit maakt op wat welke resolutie je draait...

Nederland blijft maar aan (case) modderen

offline Geplaatst op woensdag 02 april 2003 19:03

Acties: [view][quote]

Door: bennoBuch428
Berichten: 67
Reg. datum: 08 januari 2002
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"
 

offline Geplaatst op woensdag 02 april 2003 19:12

Acties: [view][quote]

Door: FoOL
( o )( o )
Berichten: 3.035
Reg. datum: 12 november 2001

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
<?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;
}
?>

FoOL wijzigde dit bericht 02-04-2003 19:13 (8%)

No Shit! BtM909 heeft mijn ondertitel weer gestolen! 8)7

offline Geplaatst op donderdag 25 oktober 2007 18:26

Acties: [view][quote]

Door: m.theloosen
Berichten: 158
Reg. datum: 28 september 2004
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">
<!--
body {
background-color: #000000;
}
-->
</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.
 

offline Geplaatst op donderdag 25 oktober 2007 18:31

Acties: [view][quote]

Door: moozzuzz
Berichten: 530
Reg. datum: 05 januari 2005
ik heb steeds de neiging dit soort plaatjes als een bg-image te plaatsen: center center en hopsala!

ProMoozz.org - XHTML is for pussies!

offline Geplaatst op donderdag 25 oktober 2007 18:32

Acties: [view][quote]

Door: m.theloosen
Berichten: 158
Reg. datum: 28 september 2004
Ja maar dit plaatje is een link. Ik vind je antwoord niet echt duidelijk. :)
 

offline Geplaatst op donderdag 25 oktober 2007 18:40

Acties: [view][quote]

Door: moozzuzz
Berichten: 530
Reg. datum: 05 januari 2005
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:
1
2
3
4
5
6
7
8
9
10
11
body {
    background-image: url(image001.jpg);
    background-position: center center;
    overflow: hidden;
}

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

succes!

ProMoozz.org - XHTML is for pussies!

offline Geplaatst op donderdag 25 oktober 2007 20:23

Acties: [view][quote]

Door: Geert.H
Berichten: 323
Reg. datum: 06 maart 2001
check je code
Je hebt twee keer align staan. Je bedoelt waarschijnlijk valign="center"

Alhoewel dat niet de manier is waarop het moet.
 

online Geplaatst op donderdag 25 oktober 2007 23:54

Acties: [view][quote]

Door: RobIII
Moderator PRG/SEA/WEB
Papa van LucaIII \o/
Berichten: 17.013
Reg. datum: 18 december 2001
quote:
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...
quote:
Geert.H schreef op donderdag 25 oktober 2007 @ 20:23:
Je bedoelt waarschijnlijk valign="center"
Dan is het nog altijd valign="middle" ;)
quote:
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 ;)

RobIII wijzigde dit bericht 25-10-2007 23:57 (5%)

We all get along with some glue and duct tape here and there - but when the sh*t hits the fan, don’t blame the duct tape.

Trotse papa van Luca! | Pick My Icon!

offline Geplaatst op vrijdag 26 oktober 2007 09:39

Acties: [view][quote]

Door: TeeDee
CQB 241
Berichten: 6.480
Reg. datum: 19 februari 2001
quote:
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?

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

offline Geplaatst op vrijdag 26 oktober 2007 09:49

Acties: [view][quote]

Door: H004
Berichten: 278
Reg. datum: 18 maart 2006
Wat Fool al plaatste in 2003:
HTML:
1
<div class="abscenter">


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
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:
1
2
3
4
div.abscenter {
  margin: auto auto;
  width: 300px;
  height: 300px;

willen kunnen gebruiken in een wrapper...

H004 wijzigde dit bericht 26-10-2007 09:52 (36%)

 

offline Geplaatst op vrijdag 26 oktober 2007 09:52

Acties: [view][quote]

Door: TeeDee
CQB 241
Berichten: 6.480
Reg. datum: 19 februari 2001
Right, die had ik al door :)
Maar als je nu eens niet de hoogte van je container weet?
quote:
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. :)

TeeDee wijzigde dit bericht 26-10-2007 10:02 (69%)

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

offline Geplaatst op vrijdag 26 oktober 2007 09:58

Acties: [view][quote]

Door: H004
Berichten: 278
Reg. datum: 18 maart 2006
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...
 

offline Geplaatst op vrijdag 26 oktober 2007 13:06

Acties: [view][quote]

Door: Geert.H
Berichten: 323
Reg. datum: 06 maart 2001
@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).
 

offline Geplaatst op woensdag 23 juli 2008 20:55

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 177
Reg. datum: 19 december 2005
Als het niet al te erg is diep ik dit topic ook weer even op O-)
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:
1
2
3
4

.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? :P

Is de wereld al vergaan?

offline Geplaatst op woensdag 23 juli 2008 21:13

Acties: [view][quote]

Door: Timlog
Berichten: 2.204
Reg. datum: 16 december 2003
Kan je het niet server-side oplossen? Mijn ervaring is dat je jezelf daarmee een hoop ellende bespaart.

| specs | Nikon D40 kit | Nikkor AFS DX 55-200mm f/4-5.6G | De aarde is rond. Net als een pannekoek. | Bevo ergo sum

offline Geplaatst op woensdag 23 juli 2008 21:17

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 177
Reg. datum: 19 december 2005
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 :/

Is de wereld al vergaan?

offline Geplaatst op woensdag 23 juli 2008 21:20

Acties: [view][quote]

Door: Timlog
Berichten: 2.204
Reg. datum: 16 december 2003
quote:
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.

| specs | Nikon D40 kit | Nikkor AFS DX 55-200mm f/4-5.6G | De aarde is rond. Net als een pannekoek. | Bevo ergo sum

offline Geplaatst op woensdag 23 juli 2008 21:25

Acties: [view][quote]

Door: gersompie
Holy Crap!
Berichten: 177
Reg. datum: 19 december 2005
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 :P

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

gersompie wijzigde dit bericht 23-07-2008 21:27 (13%)

Is de wereld al vergaan?

offline Geplaatst op woensdag 23 juli 2008 21:30

Acties: [view][quote]

Door: Timlog
Berichten: 2.204
Reg. datum: 16 december 2003
quote:
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 :P

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.

| specs | Nikon D40 kit | Nikkor AFS DX 55-200mm f/4-5.6G | De aarde is rond. Net als een pannekoek. | Bevo ergo sum

offline Geplaatst op woensdag 23 juli 2008 21:32

Acties: [view][quote]

Door: TeeDee
CQB 241
Berichten: 6.480
Reg. datum: 19 februari 2001
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

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

offline Geplaatst op woensdag 23 juli 2008 23:45

Acties: [view][quote]

Door: funkwurm
Berichten: 141
Reg. datum: 15 december 2005
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.

funkwurm wijzigde dit bericht 23-07-2008 23:49 (13%)

 
Lees verder »

Pagina: 1 2 last

VNU Media logo Powered by True

© 1998 - 2008 Tweakers.net - Alle rechten voorbehouden

Uitgever van: