Loginscreen mit Photoshop - jetzt in HTML und CSS

Joined
Apr 21, 2007
Messages
2,585
Points
0
Hallo,

hab folgenden Loginscreen mit Photoshop erstellt:

vorschaura1n.png


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
 
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...

uh44337,1227729183,hippo_bump.jpg


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>
<style type="text/css">
@charset "utf-8";
/* CSS Document */


#lolinfield {
	background:url(uh44337,1227729183,hippo_bump.jpg);
	height:9001px;}
 
#lolinfield form {
	color:#fff;
	font-family:"Lithos Pro Regular";
	background:rgba(0,0,0,0.5);
    width:185px;
    height:183px;
	margin:auto;
	text-align:center;
	border-radius: 10px;
	border: 1px solid #777;
	box-shadow: 0px 2px 14px #fff;}
	
a:link{
	color:#fff;
	text-shadow: 0px 2px 3px #000;}
	
	
.loginfield {
    font-family:"Lithos Pro Regular";
	text-shadow: 0px 2px 3px #000;
}

input[type="submit"] {
    background:rgba(255,255,255,0.4);
	float:right;
}

#lolinfield form label { 
	float:left;
	padding: 2px;}

</style>
</head>
<body>
<div id="lolinfield">
	<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" />
        
        <a href="#" style="float:right;">Passwort vergessen?</a>
    <br />
	</form>
</div>
</body>
</html>
geschrieben für chrome; also is nich für firefox optmiert, d.h. da gibts keine runden ecken zu sehen...
 
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.
 
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
 

Attachments

  • gekloeppelt..PNG
    gekloeppelt..PNG
    162.3 KB · Views: 8
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? :(
 
Last edited:
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;
 
Back
Top Bottom