Loginscreen mit Photoshop - jetzt in HTML und CSS

OG Loc · 05.04.2011, 12:21

Hallo,

hab folgenden Loginscreen mit Photoshop erstellt:

habs gesliced und mit Photoshop HTML-Code erstellen lassen. hab aber gehört das soll nur müll sein und man solls lieber selbst machen. Aber wie tue ich das ? Momentan sieht meine HTML-Datei so aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>
Hell vs. Heaven - Free Online Strategy Role Play Browsergame. Spiele fuer die Hoelle oder fuer den Himmel und fuehre deine Partei zum Sieg!
</title>

<link href="index_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="loginfield" align="center">
	<form target="_self">
    	<label for="username" class="loginfield">USERNAME</label><br />
        <input type="text" id="username" /><br />
        
        <label for="password" class="loginfield">PASSWORD</label><br />
        <input type="password" id="password" /><br />
        
      <input name="Senden" type="submit" id="Login" value="Login" /><br />
        
        <a href="#">Passwort vergessen?</a>
    <br />
	</form>
</div>
</body>
</html>

Meine CSS-Datei

Code:

@charset "utf-8";
/* CSS Document */

.loginfield {
    width:185px;
    height:183px;
    font-family:"Lithos Pro Regular";
    background:url(../48750495bf252,angels-heaven.jpg);
    opacity:50%
}

input[type="submit"] {
    background:url(../Log-In/images/Loginscreen_10.gif)
}

Aber es sieht nicht mal annährend so aus wie es sollte... Help Pls :x

deamon · 05.04.2011, 14:09

du hast die klassenbezeichner durcheinander geworfen... class="xx" bezeichnet mehrere elemente der klasse xx die sich alle gleich verhalten... id="xx" existiert dagegen explizit nur einmal für ein element xx... ich rotz die lösung jetzt hier einfach hin und hoffe du lernst dadraus was fürs nächste mal...

Spoiler:

geschrieben für chrome; also is nich für firefox optmiert, d.h. da gibts keine runden ecken zu sehen...

OG Loc · 05.04.2011, 14:26

Deine Lösung hat mir nicht geholfen, allerdings das davor mit class & id. Da hab ich jetzt einfach die Zeile in

<div class="loginfield" align="center">

geändert und jetzt läufts

ty.

deamon · 05.04.2011, 14:34

du kopierst den code in eine datei, benennst sie in *.html und packst das hippobild in den gleichen ordner..

in deinem css fehlen teilweise auch einfach nur semikolons... und opacity:.... naja kannste benutzen, kannst dir auch nen brennenden löffel ins ohr stecken, ich würd beides vermeiden

OG Loc · 05.04.2011, 14:35

E: Sehe jetzt dein Bild.

Hm, bei mir siehts komplett anders aus ôO - Ich lads mal hcoh wie es bei mir ausschaut.

Ok, alles klar, jetzt läufts. Ty.

Aber 1zu1 wie bei PS kriegt mans nich hin, right?

deamon · 05.04.2011, 14:56

is halt nur fummelei..
custom fonts einbinden is halt auch sone sache... kannst die aufm server hinterlegen
oder halt bilder dafür verwenden..

spiel einfach n bisschen an den tags rum bis du verstehst was se tun
border-radius: 10px;
border: 1px solid #777;
box-shadow: 0px 2px 14px #fff;
text-shadow: 0px 2px 3px #000;

Loginscreen mit Photoshop - jetzt in HTML und CSS

Themen-Optionen

Loginscreen mit Photoshop - jetzt in HTML und CSS

Berechtigungen