pagina check

  • Onderwerp starter Onderwerp starter xvilo
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
xvilo

xvilo

Gebruiker
Lid geworden
14 dec 2008
Berichten
492
hoi,
ik ben hier tot nu toe best wel trots op,
ik heb een .psd bestand omgetoverd tot een .html bestand.
ik heb wat divjes gebruikt etc.

zou iemand hem willen na cheken en kijken of dingen goed zijn gelukt.
binnen kort zet ik de style nog in een apart .css bestand

het lukt met nog niet helemaal om de "avatar" en "login" blokjes goed te krijgen:confused:
die moeten namelijk precies in het midden van de pagina gecentreerd worden als je hem opent.
weet niet hoe dat kan.

je kunt hem hier bekijken
hier zo
Dit is wat ik heb gerbuikt als template. (psd-tje op deviantart)
hier zo
 
Wel leuk thema, Alleen het plaatje loopt iets verder uit.

Jammer dat de inlog niet doet... (wil ik je wel mee helpen)
Het is niet zo heel moeilijk om het plaatje tot HTML te maken.

Maar wel een leuk thema.
 
xvilo zei:
het lukt met nog niet helemaal om de "avatar" en "login" blokjes goed te krijgen
Klik om te vergroten...

als je de bestaande style van #avatar
Code: 
 #avatar {
    background: url("images/avatar.png") repeat scroll 0 0 transparent;
    height: 228px;
    left: 50%;
    position: relative;
    top: 150px;
    width: 239px;
}

verandert in

Code: 
#avatar {
    background: url("images/avatar.png") repeat scroll 0 0 transparent;
    height: 228px;
    margin: 0 auto;
    position: relative;
    top: 150px;
    width: 239px;
}

dan komt hij in het midden te staan.

Left: 50% heeft tot gevolg dat de linkerrand pas begint op de helft van het beeld
en dan staat het hele blok dus niet precies in het midden.
Margin: 0 auto; betekent dat de linker- en rechterkant automatisch op gelijke afstanden worden uitgelijnd. (de 0 is voor boven en onder).
 
het lukt me niet goed om de login bar goed te krijgen!

ik heb nu dit in de style

HTML: 
#login
{
	width: 621px;
	top: 200px;
        margin: 0 auto;
	position: relative;
	height: 242px;
	Background: url("images/login.png");
}

allen krijg ik hem dus niet goed gecentreerd of ligt dit juist aan mijn plaatje??
 
in z'n geheel:

Wil je deze eens proberen?

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>Inlog scherm</title>
<style>
#avatar
{
width: 239px;
margin: 0 auto;
top: 150px;
position: relative;
height: 228px;
Background: url("images/avatar.png");
}
#login
{
position: relative;
margin: 0 auto;
padding-top: 40px;
width: 621px;
top: 200px;
height: 242px;
Background: url("images/login.png") no-repeat;
}
#login p
{
margin: 20px auto;
text-align: center;
}
#footer
{
width: 508px;
left: 300px;
top: 400px;
margin-left: -250px; /* - (width/2) */
position: relative;
height: 129px;
}
body {
background-image: url(images/bg.png);
}
</style>
</head>
<body>
<div id="avatar"></div>
<div id="login">
<p><input type="text" value="gebruikersnaam" disabled="" name="gebruikersnaam"></p>
<p><input type="password" value="Password" disabled="" name="Password"></p>
</div>
<div id="footer"> </div>
</body>
</html>
 
Weet iemand hoe ik dan de text in het midden kan zetten??
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan