Toon posts:

Een afbeelding echt helemaal in het midden krijgen

Pagina: 1

Acties:

41 views sinds 30-01-2008
Reageer

zaterdag 29 juni 2002 18:06

Acties:

Verwijderd

Topicstarter

K het is de bedoeling dat ik voor mijn index.html puur een afbeelding laat zien waar op geklikt moet worden.

De pixelgrootte is 778 bij 519

Het plaatje moet niet alleen gecentreerd zijn hij moet ook van bovenaf in het midden staan, dus boven en ondermarge gelijk.

Nou is dat nog niet zo moeijlijk maar ik wil dat het plaatje op elke res vanaf 800x600 precies in het midden staat.

Hier een voorbeeld waarbij het plaatje al gecentreerd is maar hij boven aan de pagina staat: www.johanbakker.nl/test.html

En hier de code:
------------------------------------------
<html>

<head>
<title>Nieuwe pagina 1</title>
</head>

<body>

<DIV ALIGN="center">[img]"plaat.jpg"[/img]</DIV>

</body>

</html>
-----------------------------------------

Wie helpt mij?
BTW het plaatje is een voorbeeld.

zaterdag 29 juni 2002 18:07

Acties:

Verwijderd

Ja kan een grote tabel maken, 100% weid en hoog, en daarin de afbeelding doen.

zaterdag 29 juni 2002 18:08

Acties:

mulder

ik spuug op het trottoir

valign, zoek eens op inet naar een html cursus ofzo

oogjes open, snaveltjes dicht

zaterdag 29 juni 2002 18:09

Acties:

supakeen

Iets met valign

En dan in een table zetten en in de td dus de valign=middle zetten

zaterdag 29 juni 2002 18:09

Acties:

Verwijderd

align="center" valign="middle"

zaterdag 29 juni 2002 18:15

Acties:

crisp

Devver

Pixelated

code:

1	valign="middle"

Echter moet dan je tabel of div ook een hoogte van 100% hebben; iets wat op dit moment alleen door IE ondersteund wordt. Beter is je div te sizen naar de hoogte/breedte van je body, of nog beter, de positie van je div aan te passen:

code:

<html>
<head>
<title>In 't midden</title>
<script type="text/javascript">

funtion doSize() {

  var theWidth = document.body.clientWidth? document.body.clientWidth:window.innerWidth;
  var theHeight = document.body.clientHeight? document.body.clientHeight:window.innerHeight;

  document.getElementById('theDiv').style.left = (theWidth-778)/2;
  document.getElementById('theDiv').style.top = (theHeight-519)/2;

}

</script>
</head>
<body onLoad="doSize()" onResize="doSize()">
<div id="theDiv" style="position: absolute; margin: 0px">[img]"plaat.jpg"[/img]</div>
</body>
</html>

Intentionally left blank

zaterdag 29 juni 2002 18:18

Acties:

Verwijderd

Topicstarter

Op zaterdag 29 juni 2002 18:08 schreef Don Facundo het volgende:
valign, zoek eens op inet naar een html cursus ofzo

Op zo'n cursus site zie je, jammergenoeg, vaak het bos door de bomen niet meer.

zaterdag 29 juni 2002 18:29

Acties:

kauwgomballen

zelf heb ik het gedaan door een tabel hoogte 100% te maken met 3 regels:
1e regel hoogte=*
2e regel hoogte=(hoogte van plaatje)
3e regel hoogte=*

en dan in het middelste deel van de tabel je plaatje gewoon align=center doen

code:

<TABLE WIDTH="100%" HEIGHT="100%" CELLSPACING="0" CELLPADDING="0">
  <TR WIDTH="100%" HEIGHT="*">
  </TR>
  <TR WIDTH="100%" HEIGHT="519">
    <TD WIDTH="100%" HEIGHT="100%" ALIGN="CENTER">
    [img]"plaatje.jpg">
[/img]
  </TR>
  <TR WIDTH="100%" HEIGHT="*">
  </TR>
</TABLE>

zoiets dus

zaterdag 29 juni 2002 18:35

Acties:

kauwgomballen

kheb de code ff getest, en het werkt perfect in IE...

zaterdag 29 juni 2002 18:37

Acties:

Verwijderd

valign is wel deprecated geloof ik he?

zaterdag 29 juni 2002 18:43

Acties:

Verwijderd

Op zaterdag 29 juni 2002 18:37 schreef FoOL het volgende:
valign is wel deprecated geloof ik he?

Nee? Hoe kom je daarbij dan?

Height bij tabellen bestaat niet, en terecht, want tabellen zou je niet op deze manier moeten gebruiken.

zaterdag 29 juni 2002 18:49

Acties:

Verwijderd

Topicstarter

Op zaterdag 29 juni 2002 18:29 schreef Kauwgomballen het volgende:
zelf heb ik het gedaan door een tabel hoogte 100% te maken met 3 regels:
1e regel hoogte=*
2e regel hoogte=(hoogte van plaatje)
3e regel hoogte=*

en dan in het middelste deel van de tabel je plaatje gewoon align=center doen
code:
1
2
3
4
5
6
7
8
9
10
11
<TABLE WIDTH="100%" HEIGHT="100%" CELLSPACING="0" CELLPADDING="0">
  <TR WIDTH="100%" HEIGHT="*">
  </TR>
  <TR WIDTH="100%" HEIGHT="519">
    <TD WIDTH="100%" HEIGHT="100%" ALIGN="CENTER">
    [img]"plaatje.jpg">
[/img]
  </TR>
  <TR WIDTH="100%" HEIGHT="*">
  </TR>
</TABLE>
zoiets dus

Dit werkt dus echt. Thnx.

zaterdag 29 juni 2002 18:54

Acties:

Guillome

test

code:

<body leftmagin=0 topmargin=0>
<table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>
  <tr height=100%>
    <td height=100% width=100% align=center valign=middle>
    <img blabla>
    </td>
  </tr>
</table>
</body>

Das toch het simpelst?

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

zaterdag 29 juni 2002 18:59

Acties:

Verwijderd

Op zaterdag 29 juni 2002 18:43 schreef Cheatah het volgende:

[..]

Nee? Hoe kom je daarbij dan?

Height bij tabellen bestaat niet, en terecht, want tabellen zou je niet op deze manier moeten gebruiken.

ik was idd in de war met height

zaterdag 29 juni 2002 19:02

Acties:

Verwijderd

Op zaterdag 29 juni 2002 18:54 schreef XLerator het volgende:

Das toch het simpelst?

Dat is een oplossing die dus gewoon niet werkt in Mozilla of Netscape. Zo ken ik er nog wel een paar.

zaterdag 29 juni 2002 19:10

Acties:

Guillome

test

Is dat zo cheatah??
Wist ik niet, wat werkt er niet dan? Die valign ofzo?

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

zaterdag 29 juni 2002 20:26

Acties:

Norjee

Dit werkt wel in mozilla..

code:

<html>
<body>
<center style="position:fixed; top:0px; left:0px; right:0px; bottom:0px;">
<table height=100%>
<tr>
<td valign=middle>[in het midden]</td>
</tr>
</table>
</center>
</body>
</html>

zaterdag 29 juni 2002 20:56

Acties:

Verwijderd

dit heb ik ook gedaan en denk dat dit de schoonste code is:
http://www.ib2.nl/

zaterdag 29 juni 2002 21:37

Acties:

Verwijderd

Ik quote deze twee even:

Op zaterdag 29 juni 2002 20:56 schreef sharky_k_ het volgende:
dit heb ik ook gedaan en denk dat dit de schoonste code is:
http://www.ib2.nl/

Op zaterdag 29 juni 2002 20:26 schreef Norjee het volgende:
Dit werkt wel in mozilla..

code:

<html>
<body>
<center style="position:fixed;
top:0px; left:0px; right:0px; bottom:0px;">
<table height=100%>
<tr>
<td valign=middle>[in het midden]</td>
</tr>
</table>
</center>
</body>
</html>

Leuk dat dat volgens jou de schoonste code is, maar ga je geen vraagtekens zetten als je op de site van het W3C dit tegenkomt?

5.5.24 'height'

Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A

Ik wel namelijk

Wat je doet is dus _niet_ conform de standaards... Ik heb hier alleen NS7 en IE6, dus ik zou niet weten hoe andere browsers dit weergeven. Het zou in ieder geval niet moeten kunnen

[sub]
/me denkt vooralsnog dat de oplossing van Crisp de beste is.[/sub]

edit: en in HTML 4.01 is height helemaal deprecated voor TABLE en TD.

zondag 30 juni 2002 10:43

Acties:

Verwijderd

Op zaterdag 29 juni 2002 21:37 schreef FoOL het volgende:
<html>
<body>
<center style="position:fixed;
top:0px; left:0px; right:0px; bottom:0px;">
<table height=100%>
<tr>
<td valign=middle>[in het midden]</td>
</tr>
</table>
</center>
</body>
</html>

maar als ik dan de validator gebruikt zegt hij dat dat niet mag.

en je zegt height niet in procenten mag volgens W3C, waarom zeg je dan dat het wel in table mag?

zondag 30 juni 2002 10:55

Acties:

Verwijderd

volgens http://jigsaw.w3.org/css-validator/validator-uri.html is mijn css goed.

zondag 30 juni 2002 11:27

Acties:

Verwijderd

Op zondag 30 juni 2002 10:43 schreef sharky_k_ het volgende:

[..]

maar als ik dan de validator gebruikt zegt hij dat dat niet mag.

en je zegt height niet in procenten mag volgens W3C, waarom zeg je dan dat het wel in table mag?

1) Je quote hier de code van Norjee
2) Ik zei niet dat dat wel mag, ik zeg dat height voor tabellen deprecated is.

Op zaterdag 29 juni 2002 21:37 schreef FoOL het volgende:
[..] en in HTML 4.01 is height helemaal deprecated voor TABLE en TD.

zondag 30 juni 2002 13:47

Acties:

Verwijderd

ik vind deprecated een hele mooie term hoor, maar hebben we daar niet een gewone hollands roodje voor? verouderd ofzo?

zondag 30 juni 2002 14:00

Acties:

crisp

Devver

Pixelated

Op zondag 30 juni 2002 13:47 schreef sandalen het volgende:
ik vind deprecated een hele mooie term hoor, maar hebben we daar niet een gewone hollands roodje voor? verouderd ofzo?

jawel: achterhaald

Intentionally left blank

zondag 30 juni 2002 14:01

Acties:

Verwijderd

Op zondag 30 juni 2002 14:00 schreef crisp het volgende:

[..]

jawel: achterhaald

ook goed

Pagina: 1

Reageer