login  Naam:   Wachtwoord: 
Registreer je!
 Forum

image gecentreerd in midden van pagina

Offline lau - 18/10/2004 20:02
Avatar van lauHTML interesse Hoi,

Even iets heel simpels alleen ben ik zelf vergeten hoe ik het moet doen.
Ik heb een afbeelding, soort grote vierkante logo dat in het midden van een lege pagina moet zijn. En dit moet ook in het midden staan als je een andere resolutie hebt of/en als je je window resized.
Verder is er nix op de pagina, alleen 1 vierkante logo (of splash screen) voor het naar binnen gaan van de echte site.
Hoe moet dit ook simpel met HTML?

Bedankt.

31 antwoorden

Gesponsorde links
Offline Dennisvb - 18/10/2004 20:04 (laatste wijziging 18/10/2004 20:19)
Avatar van Dennisvb MySQL ver gevorderde <p align="center"> ?

//edit op je volgene post: WOW, wordt er toch nog de search functie gebruikt. Klasse 
Offline lau - 18/10/2004 20:05
Avatar van lau HTML interesse neej.. sorry.. heb het al gevonden: http://sitemast...&id=61

Toch voortaan beter zoeken 
Offline lau - 18/10/2004 20:17 (laatste wijziging 18/10/2004 20:17)
Avatar van lau HTML interesse hmm.. hij doet het niet zodra ik alles converteer naar XHTML 

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Exchange, the new project!</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <meta http-equiv="imagetoolbar" content="no">
  6. </head>
  7.  
  8. <body style="margin:0px;padding:0px;">
  9. <table style="height:100%;width:100%;" border="0" cellspacing="0" cellpadding="0">
  10.   <tr>
  11.     <td style="height:100%;width:100%;" align="center" valign="middle"><img src="splashscreen.png" alt="Go!... get a partner!" width="485" height="337"></td>
  12.   </tr>
  13. </table>
  14. </body>
  15. </html>

Zo doet hij het wel.. en zo niet:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Exchange, the new project!</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <meta http-equiv="imagetoolbar" content="no" />
  7. </head>
  8.  
  9. <body style="margin:0px;padding:0px;">
  10. <table style="height:100%;width:100%;" border="0" cellspacing="0" cellpadding="0">
  11.   <tr>
  12.     <td style="height:100%;width:100%;" align="center" valign="middle"><img src="splashscreen.png" alt="Go!... get a partner!" width="485" height="337" /></td>
  13.   </tr>
  14. </table>
  15. </body>
  16. </html>


Iemand die het probleem ziet?
Offline Maarten - 18/10/2004 20:23
Avatar van Maarten Erelid Gebruik dan de bovenste versie? 
Offline lau - 18/10/2004 20:25
Avatar van lau HTML interesse wil ik wel, maar ik wil een goed XHTML valid product afleveren.
het probleem doet zich alleen voort als ik doctype toevoeg... iemand een oplossing?
Offline Thomas - 18/10/2004 20:25
Avatar van Thomas Moderator Kent XHTML tables?

Gooi dat ding eens door een XHTML validator? Volgens mij krijg je dan een waslijst aan errors :].
Offline lau - 18/10/2004 20:35 (laatste wijziging 18/10/2004 20:35)
Avatar van lau HTML interesse jah.. XHTML kent tables:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. http://validator.w3.org/check?uri=http%3A%2F%2Fdragonlau.d-brane.net%2Fsplash.php
Offline lau - 18/10/2004 21:51
Avatar van lau HTML interesse het centreren naar het midden van de pagina werkt wel, alleen in de hoogte (dus valign="middle") wil het niet werken.
Offline numlockrond - 18/10/2004 21:55
Avatar van numlockrond Onbekend valign is toch standaard middle ?

probeer anders met CSS: vertical-align
Offline lau - 18/10/2004 23:15
Avatar van lau HTML interesse werkt ookniet met CSS.
afbeelding komt dan gecentreerd in top v/d pagina te staan.
Offline bwfighter - 19/10/2004 09:03
Avatar van bwfighter HTML interesse om de foto te centreren doe je zo

<style>

#foto{ position: absolute;
left:50%;
margin: 0 0 0 -350px als uw foto 700px width is
}
</style>

in de bodytags
<div id="foto"></div>
Offline xSc - 19/10/2004 09:08
Avatar van xSc Onbekend Er zijn hier hardhorende mensen, die gewoon stug door blijven gaan met fouten maken. Dat geldt niet voor mensen als FangorN, bwfighter, Proximus e.a.

Maar oke:

Houd beschrijving en opmaak strict gescheiden. Dus geen <font>, geen align="center", geen inline stylesheets maar externe, geen tabellen voor het positioneren van elementen.


Tabellen gebruik je alleen voor het weergeven van rauwe tekst! In alle andere gevallen gebruik je divjes
Offline Metalhead - 19/10/2004 09:51
Avatar van Metalhead HTML gevorderde Hey Henri, een tabel is een tabel, daar mag je mee doen wat je wilt.
Als je een tabel wilt gebruiken voor plaatjes of voor iets anders mag dat ook. Je hoeft hier niet anderen jouw wil op te leggen.

Ik heb tot nog toe bijna nooit gewerkt met DIV's en ik heb het ook nog niet gemist...
Offline xSc - 19/10/2004 10:54
Avatar van xSc Onbekend @Metalhead, een tabel is inderdaad een tabel. Je mag echter niet met een tabel doen wat jij wilt.

Citaat:
Je hoeft hier niet anderen jouw wil op te leggen.


Dit is mijn wil niet, maar dat is een standaard, die uitgegeven is door W3. Maar het is hier een bekend feit dat er niets met reacties gedaan wordt.
Offline Frisbee - 19/10/2004 11:22
Avatar van Frisbee HTML beginner @metalhead

je mag met een table doen wat je wilt maar ik vind het nogal stom als je iemand die er niet zoveel van weet het op de verkeerde manier gaat leren.

tabellen zijn bedoeld om grote hoeveelheden data in nette rijen en kolommen te zetten. als jij het leuk vind je hele pagina met tabellen op te maken moet je dat vooral doen maar laat dan iemand anders uitleggen hoe je op een nette manier een pagina opmaakt
Offline barry - 19/10/2004 11:42 (laatste wijziging 19/10/2004 11:44)
Avatar van barry PHP interesse Je kan ook gewoon je afbeelding in een tabel plaatsen op deze manier:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  2.   <tr>
  3.     <td align="center" valign="middle"><img src="je_afbeelding.png" width="384" height="384"></td>
  4.   </tr>
  5. </table>


Enneemm... iedereen zijn eigen manier toch...
Ik snap het probleem niet Henri... 

En Frisbee...
Wij geven zelf suggesties hoe je creatief met je HTML elementen om kan gaan... Op deze manier maken wij gewoon duidelijk dat er heel veel manieren zijn...
Als je een goede webdesigner wilt zijn/worden... Zal je toch creatief moeten zijn en zelf ook dingen uitvinden...

Maar goed... als je het echt op de makkelijkste manier wilt doen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="je_afbeelding.png" width="256" height="256" style="position:absolute; left:50%; top:50%;">
Offline Metalhead - 19/10/2004 11:43
Avatar van Metalhead HTML gevorderde Als iemand mij wil zeggen waar W3 zegt dat je tabellen alleen mag gebruiken voor tekst, zal ik nooit meer tabellen gebruiken.

W3 gebruikt zelfs dit als voorbeeld:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. Setting the indent option to yes can also cause problems with table layout for some browsers:
  2.  
  3. <td><img src="foo.gif"></td>
  4. <td><img src="foo.gif"></td>
  5.  
  6. will look slightly different from:
  7.  
  8. <td>
  9.   <img src="foo.gif">
  10. </td>
  11. <td>
  12.   <img src="foo.gif">
  13. </td>
Offline b4nkr0bz0r - 19/10/2004 11:47
Avatar van b4nkr0bz0r PHP gevorderde <div align=""center"><img src="http://www.domein.nl/header.jpg"></div>
Offline barry - 19/10/2004 11:52
Avatar van barry PHP interesse n33p... dan zit hij niet exact in het midden...
Dan zit hij alleen horizontaal in het midden 
Offline Frisbee - 19/10/2004 11:53
Avatar van Frisbee HTML beginner gaan jullie maar lekker n00bie htmlen als jullie dat leuk vinden.. ik zal er niks meer van zeggen
Offline barry - 19/10/2004 11:58
Avatar van barry PHP interesse Ik vind het gewoon onzin dat je je aan regels moet houden bij het schrijven van html-codes...

Zou lekker wezen dat wanneer je een website aan het maken bent je constant moet opletten of je het wel doet "zoals het hoort"...

Maarja... dat is alleen maar mijn meninkje...
Offline Metalhead - 19/10/2004 12:03
Avatar van Metalhead HTML gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. gaan jullie maar lekker n00bie htmlen als jullie dat leuk vinden.. ik zal er niks meer van zeggen


Als je een reden hebt, om te denken dat de genoemde manier 'n00bie' is, moet je die even noemen, ipv hem af te kraken zonder be-argumentatie.
En jij vindt dus dat W3 'noobie' is? Want die gebruiken dus ook plaatjes in tabellen, als voorbeeld zelfs.
Offline Frisbee - 19/10/2004 12:05
Avatar van Frisbee HTML beginner er worden niet voor niks nieuwe manieren ontwikkeld om een website te maken. het kost misschien even wat tijd om nieuwe technieken (zoals css) goed onder de knie te krijgen maar als je dat eenmaal kunt heb je heel veel voordelen. ik zeg niet dat het verkeert is om het op de oude manier te doen (heb ik ook lang gedaan) maar ik doe het liever op de beste manier (zoals ik denk dat het hoort)

maar meningen verschillen inderdaad

ik vind het alleen niet slim om mensen die het nog moeten leren het op de makkelijke, maar minder goeie manier te leren
Offline Frisbee - 19/10/2004 12:10
Avatar van Frisbee HTML beginner @metalhead, ja en? ze gebruiken die tabel toch niet om ze uit te lijnen?

en <p align="center"> is gewoon de kutste code die er is.. als dat xhtml is ben ik een vliegtuig..
Offline barry - 19/10/2004 12:20
Avatar van barry PHP interesse
php code - Bekijk de code zonder highlighting - Klap code in 
  1. Frisbee:
  2. ik vind het alleen niet slim om mensen die het nog moeten leren het op de makkelijke, maar minder goeie manier te leren


Mja daar moet ik je gelijk in geven...
Maar ik ben een webdesigner met veel opdrachtjes... Ik heb geen tijd om de beste manier te leren of bij te houden, whatever...

Ik schrijf mijn code zoals het op dat moment het beste uitkomt...
Ik geloof nooit dat op de oude manier van schrijven je website dramatisch trager wordt...
Zo wel, zit je website echt shite in elkaar...

Maar ik snap wel wat je bedoeld, maar... ik kan me ook voorstellen dat een leek op dit script staat te klapperen met zijn oren:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2.  
  3. #foto{ position: absolute;
  4. left:50%;
  5. margin: 0 0 0 -350px als uw foto 700px width is
  6. }
  7. </style>
  8.  
  9. in de bodytags
  10. <div id="foto"></div>


Het lijkt zo vanzelf sprekend... maar een echte leek snapt dit niet hoor...
Offline lau - 19/10/2004 16:38
Avatar van lau HTML interesse Hmm... don't fight 
Geldt ...
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2.  
  3. #foto{ position: absolute;
  4. left:50%;
  5. margin: 0 0 0 -350px als uw foto 700px width is
  6. }
  7. </style>
  8.  
  9. in de bodytags
  10. <div id="foto"></div>

ook als je veranderd van resolutie, want voor elke res (of het nou 800x600 of 1240x1024 is) moet afbeelding in het midden staan.
Offline Fenrir - 19/10/2004 17:02 (laatste wijziging 19/10/2004 17:05)
Avatar van Fenrir PHP expert
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #foto{ position: absolute;
  2. left:50%;
  3. margin: 0 0 0 -350px als uw foto 700px width is
  4. }


ja, het staat zo altijd in het midden, maar moet het ook verticaal gecentreerd?

uitleg: eerst zet hij de LINKER rand van de foto in het midden, dus nu staat hij te veel naar rechts, met:
margin-left: -350px; zet hij het weer 350 px naar links, zodat de foto in het midden staat (aangenomen dat de foto 700px is)

en als je het echt simpel wilt (ik raad dit niet aan, maja):

<center><img src="foto.jpg" alt="foto" /></center>
Offline Frisbee - 19/10/2004 17:06
Avatar van Frisbee HTML beginner
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <style>
  4.  
  5. #foto {
  6.                position: absolute;
  7.                top:50%;
  8.                left:50%;
  9.                height: 200px;
  10.                width: 300px;
  11.                margin: -100px -150px;
  12. }
  13.  
  14. </style>
  15. </head>
  16. <body>
  17.  
  18. <div id="foto">Test</div>
  19.  
  20. </body>
  21. </html>


met position, left en top geef je aan waar de div begint. 50% is dus precies in het midden van de pagina. de hoek links-boven van je div staat nu in het middenpunt van je pagina maar omdat de div 200 pixels hoog is moet ie 100 pixels opschuiven om in het midden te staan. bij margin geeft de -100px -150px aan dat ie verticaal 100 pixels (de helft van de hoogte) moet schuiven en horizontaal 150 pixels (de helft van de breedte). dan komt ie dus precies in het midden.
Offline Frisbee - 19/10/2004 17:07
Avatar van Frisbee HTML beginner als je er een border (border: 1px solid #000;) omheen zet en het venster van je browser vergoot en verkleint zie je direct het effect.
Offline lau - 20/10/2004 00:55
Avatar van lau HTML interesse @Fenrir: plaatje moet idd verticaal gecentreerd worden en daar zit het probleem eigenlijk al die tijd, want plaatje krijg ik wel horizontaal gecentreerd, alleen verticaal is een probleem. Plaatje geeft alleen weer aan top v/d pagina en dat moet niet....
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.487s