tekst over afbeelding plaatsen

Status
Niet open voor verdere reacties.
J

jorisvho

Gebruiker
Lid geworden
6 mrt 2011
Berichten
28
ik ben bezig met het maken van een website waarbij ik gebruik maak van de ipad als achtergrond afbeelding. In het beeldscherm van de ipad zou ik dan de echte website willen hebben. Hierin moet de tekst komen. Helaas krijg ik dit niet voor elkaar.

Tot nu toe heb ik de volgende css:
Code: 
body { font-family:Arial, Helvetica, sans-serif; font-size: 11px; font}
.ipad { background: url(ipad.jpg) no-repeat transparent fixed center center; height: 100%; padding: 100%; position: relative; z-index:1 }

En mijn html code bestaat uit dit:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="theme.css" type="text/css" media="all" href="theme.css" />
</head>

<body>
<div class="ipad">
haay
</div>
</body>

</html>

Wie kan mij helpen om de tekst in het ipad beeldscherm te krijgen?
 
Hoi jorisvho,
Die padding van 100% kan ik niet goed plaatsen.
Maar heb je al eens zoiets geprobeerd als uitgangspunt?
Code: 
html {
	height: 100%; 
	}
body { 
	height: 100%; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 11px;
	margin:0;
	padding:0; 
	}
.ipad { 
	height: 100%;
	background: url(images/ochtendalpen.png) no-repeat transparent fixed center center; 
	}
Daarmee staat de afbeelding horizontaal en verticaal in het midden, en de "haay" in de linker bovenhoek.
Toelichting bij de percentages:
  • Als je voor iets een relatieve hoogte (in %) opgeeft, wordt het percentage berekend van het element waar het ding in staat. Dat moet dus een hoogte hebben.
  • Als de omvattende container (hier dus de body) óók een relatieve hoogte in % heeft, gaat het verder met wat daar weer boven zit, net zo lang tot je een vaste maat in px tegenkomt, of tot je bij het hoogste element van de pagina bent: de style van de <html>.
Maar je zal waarschijnlijk niet goed uitkomen met deze percentages, want de afbeelding heeft een vaste maat in px, en een achtergrond-afbeelding schaalt niet mee met de pagina. D.w.z.:
  • De pagina moet horizontaal gecentreerd worden en de breedte van de afbeelding krijgen.
  • Verticaal kan ie ook wel gecentreerd worden, maar niet zonder meer: dan kan je problemen krijgen als iemand een beeldscherm heeft dat niet zo hoog is als de afbeelding. Dan komt de bovenkant van de afbeelding (en wat daar aan tekst overheen staat) niet in beeld.
Bij het plaatsen van tekst boven een vast formaat achtergrond kan je verder in de problemen komen als de tekst groter wordt dan de afbeelding hoog is: langere pagina's zijn dan niet mogelijk.
Een oplossing daarvoor is het opsplitsen van de afbeelding in partjes die mee kunnen groeien met de hoogte van de pagina.
  • Zie bv. hier op het forum: behoorlijk vergelijkbaar met een iphone als achtergrond. :)
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan