Foto in het midden van de site.

Status
Niet open voor verdere reacties.
P

pauzemenu

Gebruiker
Lid geworden
11 feb 2008
Berichten
115
Hallo,

Ik ben sinds kort begonnen met een eigen website te maken, aangezien ik hier niet echt veel ervaring mee heb gebruik ik verschillende handleidingen op internet. Nu heb ik een foto op me website geplaatst maar die staat helemaal links en ik zou hem graag in het midden willen hebben. Hoe doe ik dit precies?

Dit is de code die ik momenteel gebruik:

<table>
<tr>
<td style="text-align: center;"> <img src="mijn eerste ochtend.jpg" height="450" width="554" align="middle">
</tr>
</table>
 
Wat gebruik je om je site te editen. En wie is je provider? (Van je website dan)
 
pauzemenu zei:
Hallo,

Ik ben sinds kort begonnen met een eigen website te maken, aangezien ik hier niet echt veel ervaring mee heb gebruik ik verschillende handleidingen op internet. Nu heb ik een foto op me website geplaatst maar die staat helemaal links en ik zou hem graag in het midden willen hebben. Hoe doe ik dit precies?

Dit is de code die ik momenteel gebruik:

<table>
<tr>
<td style="text-align: center;"> <img src="mijn eerste ochtend.jpg" height="450" width="554" align="middle">
</tr>
</table>
Klik om te vergroten...

Wat je eigenlijk gedaan hebt is een table aangemaakt... en tegen de table gezet dat alles wat erin moet gecentreerd moet worden BEHALVE de table zelf. Probeer dit eens:


<center>
<table>
<tr>
<td style="text-align: center;"> <img src="mijn eerste ochtend.jpg" height="450" width="554" align="middle">
</tr>
</table>
</center>
 
Probeer het eens zo:

- Verwijder eens heel gauw die tabel ;) Tabellen zijn voor data-presentatie, niet voor layout.
- Zet alleen maar <img src="mijn eerste ochtend.jpg" height="450" width="554"> in je body
- Zet vervolgens in de <head>:

Code: 
<style type="text/css">
img {
  display: block;
  margin: auto;
}
</style>

of

Code: 
<style type="text/css">
img {
  position: absolute;
  left: 50%;
  margin-left: -277px;
}
</style>

want CSS is wat je gebruikt voor weergave (dus ook positionering).
 
Het is geluk de foto staat nu in het midden. Bedankt.

Dus ik moet juist niet beginnen met <Table>?

Ik wil aan de linkerkant een menu maken met verschillende vakken waar dan een tekst in komt te staan, moet ik hier dan wel <table> voor zetten of ook juist niet?
 
Nee, ook daar moet je geen table voor gebruiken.

Wat je daar mooi voor kunt gebruiken is een unordered list (<ul>) met daarin voor elk item een listitem (<li>).

Die kun je dan met CSS weer stylen.
 
Die methode met table stamt uit de tijd dat er geen andere mogelijkheden waren. Tabellen helpen ook niet om hoog in Google en zo te komen en programma's voor gehandicapten kunnen er ook niet mee overweg.
'n table hoort tegenwoordig alleen gebruikt te worden voor 'n tabel, daar is hij voor bedoeld.
Tegenwoordig kun je met divs, spans en css werken. Dat is even lastiger in het begin, misschien, maar na enige oefening echt veel en veel makkelijker dan tabellen. En ook veel en veel makkelijker om later te veranderen. Bovendien is het beter voor zoekmachines en mensen met 'n handicap die speciale programma's gebruiken.
 
haal dat andere center spull weg, en typ aan de voorkant van de regel van het plaatje: <center>
en aan het einde van de regel: </center>

(dat werkt als het goed is bij alles, ook bij plaatjes)

pauzemenu zei:
Hallo,

Ik ben sinds kort begonnen met een eigen website te maken, aangezien ik hier niet echt veel ervaring mee heb gebruik ik verschillende handleidingen op internet. Nu heb ik een foto op me website geplaatst maar die staat helemaal links en ik zou hem graag in het midden willen hebben. Hoe doe ik dit precies?

Dit is de code die ik momenteel gebruik:

<table>
<tr>
<td style="text-align: center;"> <img src="mijn eerste ochtend.jpg" height="450" width="554" align="middle">
</tr>
</table>
Klik om te vergroten...
 
En in het komende (en deels al in gebruik zijnde) html5 zijn alle tags als <center>, <font>, enz. gewoon niet meer mogelijk. Dus als je die dingen gebruikt, sluit je gelijk alle nieuwe mogelijkheden van html 5 uit.
Als je nou toch nieuw begint te leren, begin dan gelijk op ' n manier die niet doodlopend is en die je later weer af moet leren. En als 't niet gelijk lukt met css kan er altijd gevraagd worden.
 
pilootnour5 zei:
Wat gebruik je om je site te editen. En wie is je provider? (Van je website dan)
Klik om te vergroten...

heeft daar niks mee te maken toch leuk geprobeerd ;)

@pauzemenu: plak deze code eens ergens in de HTML van je pagina hoeft helemaal niet zo moeilijk ::rolleyes:
HTML: 
<p align="center"><img src="mijn eerste ochtend.jpg" height="450" width="554"></p>
 
Laatst bewerkt:
align = "center" is 'n volstrekt verouderde oplossing, die bovendien niet in alle browsers goed werkt.
Bovendien was hier de oplossing al gegeven, dus waarom je dit oude topic weer opent is me eerlijk gezegd 'n volslagen raadsel.
 
MegaByter zei:
heeft daar niks mee te maken toch leuk geprobeerd ;)

@pauzemenu: plak deze code eens ergens in de HTML van je pagina hoeft helemaal niet zo moeilijk ::rolleyes:
HTML: 
<p align="center"><img src="mijn eerste ochtend.jpg" height="450" width="554"></p>
Klik om te vergroten...
Goeroeboeroe zei:
align = "center" is 'n volstrekt verouderde oplossing, die bovendien niet in alle browsers goed werkt.
Bovendien was hier de oplossing al gegeven, dus waarom je dit oude topic weer opent is me eerlijk gezegd 'n volslagen raadsel.
Klik om te vergroten...

de manier van ErikBooy007 is de enige correcte manier op het moment.
kan dit topic op vraag beantwoord?
 
pauzemenu zei:
Hallo,

Ik ben sinds kort begonnen met een eigen website te maken, aangezien ik hier niet echt veel ervaring mee heb gebruik ik verschillende handleidingen op internet. Nu heb ik een foto op me website geplaatst maar die staat helemaal links en ik zou hem graag in het midden willen hebben. Hoe doe ik dit precies?

Dit is de code die ik momenteel gebruik:

<table>
<tr>
<td style="text-align: center;"> <img src="mijn eerste ochtend.jpg" height="450" width="554" align="middle">
</tr>
</table>
Klik om te vergroten...

Verander ten eerste dit maar eens:
<img src="mijn eerste ochtend.jpg" height="450" width="554" align="middle">

In dit:
<img src="mijn eerste ochtend.jpg" height="450" width="554" align="center">

En deze:
<td style="text-align: center;">

In deze:
<td align="center">


Probeer dat eens, en kijk of het je bevalt ^^

Succes :thumb:
 
Wat is er nou toch het nut van om 'n oud, opgelost topic opnieuw te openen. Een topic waarin een goede oplossing is gegeven door ErikBooy.
Om vervolgens die goede oplossing te vervangen door een volstrekt verouderde, in meerdere browsers niet goed werkende - met alle respect - flut-oplossing?
Ik word hier wat kriegel van, want dit is nou de derde keer dat zonder enige reden 'n goede oplossing wordt vervangen door 'n slecht, die gewoon niet goed werkt.
align is volstrekt verouderd en levert in allerlei browsers problemen op.
Centreren doe je voor 'n blok-element (zoals 'n div of 'n p) met:
Code: 
margin: 0 auto;
Of. als 't absoluut is gepositioneerd:
Code: 
left: 50%; margin-left: -... px;
(Op de plaats van de puntjes helft van de breedte invullen).

Voor inline-elementen als tekst en afbeeldingen gebruik je text-align. (Voor afbeeldingen soms ook margin: 0 auto; )
Meestal is een van deze methoden prima bruikbaar, heel soms moet je ingewikkelder dingen gaan bedenken.
Maar align werkt gewoon niet altijd goed in goede browsers bij gebruik van 'n doctype. En zonder doctype wordt 't ook 'n puinhoop.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan