[HTML/CSS] Afbeelding precies in het midden - Softwareontwikkeling

maandag 30 oktober 2006 00:32

Acties:

0 Henk 'm!

Lief :)

Topicstarter

De hele avond zitten ik, (en een aantal mensen waarvan ik ze normaal op CSS gebied altijd wel goed inschatte) al te tubben over het volgende.

Ik heb een HTML pagina met een splash plaatje. Verder helemaal niets. Ik wil dit plaatje in het midden van het scherm hebben. Zowel in de breedte als in de lengte. Normaal gesproken deed ik dit altijd met een tabel, maar aangezien ik ook steeds meer leer over semantiek en CSS etc leek het me slim om dit kleinigheidje in CSS aan te pakken. Helaas lukt het niet. Dmv een tabel (waar het wel werkt), ziet het er zo uit:

code:

<table width="100%" height="100%" border="0">
  <tr>
    <td> 
      <div align="center"><img src="logo.gif" width="500" height="200"></div></td>
  </tr>
</table>

In CSS heb ik het zo geprobeerd:

code:

<style>
IMG {
margin-top: 50%;
padding-top:100px;
}
</style>

En de HTML:

code:

1
2
3

<body>
<img src="logo.gif" alt="Splash" width="500" height="200">
</body>

Maar dan krijg ik niet het gewenste resultaat. Heeft iemand enig idee hoe dit waarschijnlijk zeer simpel probleem dmv CSS kan worden opgelost, of iig wat ik fout doe? Op dit moment ligt er een boek voor me over CSS, er staat ontzettend veel in maar een klein ding zoals dit is niet te vinden (misschien omdat het juist zo makkelijk zou moeten zijn?)

Alvast bedankt

[ Voor 9% gewijzigd door Virax op 30-10-2006 00:44 ]

maandag 30 oktober 2006 00:35

Acties:

0 Henk 'm!

Fuzzillogic

Cool

Je kunt tabelcellen 'nabootsen' met CSS. display: table-cell; vertical-align: middle; text-align: center; (oid)

Één probleempje: het werkt alleen in moderne browsers en dus niet in internet explorer 7 en 6.

maandag 30 oktober 2006 00:38

Acties:

0 Henk 'm!

Surkow

$µr|{0w

Deze website heb ik gecentreerd door middel van deze code in de stylesheet:

body {margin: 10px auto 10px auto; }

Waarschijnlijk kun je dus gewoon de body margin op auto zetten.

[ Voor 40% gewijzigd door Surkow op 30-10-2006 00:41 ]

"Only two things are infinite, the universe and human stupidity, and I'm not sure about the former."

"Peace cannot be kept by force. It can only be achieved by understanding."

Albert Einstein

maandag 30 oktober 2006 00:39

Acties:

0 Henk 'm!

Virax

Lief :)

Topicstarter

Hehe

, helaas komen er vaak mensen met ouderwetse browsers langs dus ik heb wel als eis gesteld dat het in ieder geval werkt in Firefox en IE (6+7).

Edit:
Surkow: misschien zie ik het verkeerd, maar je hebt hem alleen in de breedte gecentreerd? Het in de breedte centreren lukt me nog wel. Alleen in de lengte niet.

Edit 2:
Voorbeeld: http://www.pietbuijsman.nl/tweakers.html (hij is dus echt in het midden van de browser, zowel in de lengte als in de breedte).

[ Voor 54% gewijzigd door Virax op 30-10-2006 00:42 ]

maandag 30 oktober 2006 00:40

Acties:

0 Henk 'm!

Fuzzillogic

Cool

Een oplossing die net zo makkelijk en betrouwbaar werkt als met tabellen is mij iig niet bekend. Als de afbeelding toch van vaste grootte is en de positie telkens hetzelfde dan kun je de boel wel makkelijk positioneren met position: absolute.

Om het met jouw stukje CSS werkend te krijgen kun je nog proberen om er display: block bij te zetten. (<img /> is normaal een inline element)

@Surkow: ja heel goed, horizontaal gecentreerd. Nu nog verticaal

maandag 30 oktober 2006 00:44

Acties:

0 Henk 'm!

Verwijderd

Lijkt me nogal simpel op te lossen met een regeltje javascript...

[ Voor 76% gewijzigd door Verwijderd op 30-10-2006 00:45 ]

maandag 30 oktober 2006 00:45

Acties:

0 Henk 'm!

Surkow

$µr|{0w

Misschien is dit de oplossing?

"Only two things are infinite, the universe and human stupidity, and I'm not sure about the former."

"Peace cannot be kept by force. It can only be achieved by understanding."

Albert Einstein

maandag 30 oktober 2006 00:49

Acties:

0 Henk 'm!

Virax

Lief :)

Topicstarter

Verwijderd schreef op maandag 30 oktober 2006 @ 00:44:
Lijkt me nogal simpel op te lossen met een regeltje javascript...

Voordat je je bericht had aangepast wilde ik nog even toevoegen dat ik idd op google heb gezocht en daar veel tegenkwam over problemen die IE ermee geeft.

Ik zou dan bijna tot de conclusie komen dat je voor dit soort zaken nog net zo goed met een tabelletje kunt werken (ondanks dat dit momenteel al door velen als pure evil wordt gezien)? Of zouden jullie helemaal met javascript in de weer gaan vanwege het anti-tabel gevoel?

maandag 30 oktober 2006 00:52

Acties:

0 Henk 'm!

borstel

Volgens mij zou het zo moeten werken,

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>
         SplashTest
      </title>
<style type="text/css">
        <!--   
        div.centered {
                position: absolute;
                left: 50%;
                top: 50%;
                width:500px;
                height:200px;
                margin-left: -250px;
                margin-top: -100px;
                background-color: #FFFFFF;
                background-image: url(logo.gif);
        }
          
        -->
</style>
   </head>
   <body>
      <div class="centered"></div>
   </body>

</html>

/edit; lijkt op de link van surkow zie ik nu

[ Voor 5% gewijzigd door borstel op 30-10-2006 00:53 ]

maandag 30 oktober 2006 00:56

Acties:

0 Henk 'm!

Fuzzillogic

Cool

D'oh ja, CSS backgrounds.

Cascading Stylesheet:

1	background: url(whatevah.gif) center center no-repeat;

Dit is natuurlijk weer niet bruikbaar als je plaatje een symantisch onderdeel is van de tekst. Maar eigenlijk komt dat zelden voor. Tegenwoordig gebruik ik echt zeer zeer zelden <img /> in templates. De meeste afbeeldingen zijn puur voor opsmuck!

maandag 30 oktober 2006 01:00

Acties:

0 Henk 'm!

Virax

Lief :)

Topicstarter

Yess

. Het werkt. En het werkt in IE en FF, EN het is CSS.

Wel een aardig stukje code voor zo'n "simpel" iets (maar misschien zie ik het verkeerd als beginner).

Anyway, thnx a lot, dit zal ik nooit meer vergeten

maandag 30 oktober 2006 16:12

Acties:

0 Henk 'm!

Virax

Lief :)

Topicstarter

Nu is het met een plaatje dus makkelijk te realiseren omdat het als background image ingesteld kan worden. Maar stel dat het nu om een SWF bestandje zou gaan, bijvoorbeeld omdat je een bewegend logo in flash hebt (dit heb ik niet maar ik zat er wel aan te denken). Dan werkt het truucje met centreren als background image niet meer.

Is het dan wel aan te raden om het met een tabel te doen imv een waarschijnlijk nog langer stuk CSS die wellicht niet eens onder IE / FF werkt?

maandag 30 oktober 2006 16:30

Acties:

0 Henk 'm!

Fuzzillogic

Cool

Dan kun je de oplossing van drensenbrink gebruiken. Ipv die div gebruik je dan een <object /> (wellicht nog even met display: block) en laat je de background-property gewoon weg. Het is daarbij dus wel zaak dat je <object /> vaste afmetingen heeft.