ein paar fragen/verbesserungen gesucht!!!!

lovetechno · 27 Juni 2009

Wunderschönen guten Morgen =)
Ich habe mich gestern mal wieder an html gesetzt ,gleich eine domain mit space bei alfahost bestellt !!!
So da dachte ich mir ich mach als startseite erstmal einen login Bereich !!
So da ich aber mit html ganz am Anfang bin ,(also bitte nicht das design bemengeln)weiß ich nciht wie man die einzelenen objekt oder texte richtig positioniert !!
Ich schick euch mal eben schnell meinen Code =)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Login-Hier gehts nur mit Passwort weiter</title>
<style>
body {
  background-color: #FFCC66;
}
   form {
  position:absolute;
  top: 250px;
  left: 440px;
}
 h1 {
position:absolute;
top: 20px;
left: 250px;
}
 #a{
position:absolute;
top: 100px;
left: 350px;
}
 #b{
position:absolute;
top: 180px;
left: 300px;
}
 #c{
position:absolute;
top: 350px;
left: 330px;
}
 #d{
position:absolute;
top: 400px;
left: 380px;
}
</style>
</head>
<body>
<h1>Willkommen in Luc´s kleiner Welt !!!</h1>
<h2 id="a">Du willst in sie abtauchen ?</h2>
<h4 id="b">Dann gib schnell den Wuselcode ein und Los geht der Spaß =)</h4>
<form action="input_password.htm">
  <p>Wuselcode:<br><input name="kennwort" type="password" size="12" maxlength="12"></p>
</form>
<p id="c">WAS DU HAST KEINEN WUSELCODE ???</p>
<p id="d">Dann log dich einfach als Gast an </p>
</body>
</html>

Die hp soll für meinen Kleinen bruder sein !!
Vll. könntet ihr mir ja noch sagen wie ich die einzelnen sachn besser positioniere !!
Vll. auch designtechnisch ???
und Dann die Abschluss Frage !!
Wie bekomme ich da einigermaßen 2 gute Butons hin ?????

ich hoffe ihr steigt durch mein geschriebenes noch durch ud könnt mir antworten ich danke jedem im vorraus und noch ein schönes Wochenende !!

Lg timo

_Thor_ · 27 Juni 2009

Als erstes, lass die absoluten Positionierungen weg, das führt nur zu Problemen und deine Seite kann sich nicht dem Viewport des Besuchers anpassen.

Abstände legst du per margin und padding im CSS fest, so kannst du die Elemente besser positionieren.

Zum Code, er geht schon in die richtige Richtung, allerdings verwendest du eine <h4>, obwohl du garkeine <h3> hast. Wie willst du eine Überschrift 4.Ordnung erstellen, wenn es keine Überschrift 3.Ordnung gibt? Wenn dir die <h3> zu große Schrift hat, änder sie mit CSS ab, aber nimm deswegen nicht eine <h4>.

Dein Formular kann auch noch verbessert werden, indem du ein <fieldset> verwendest, dem kannst du mit <legend> eine Beschriftung geben. Eingabefelder werden mit <label> beschriftet.

HTML:

<form ...>
  <fieldset>
    <legend>Login</legend>
    <label for="kennwort">Wuselcode:</label>
    <input type="password" id="kennwort" name="kennwort" value="" maxlength="12" />
    <button type="submit" value="submit">Submit</button>
    <button type="reset" value="reset">Reset</button>
  </fieldset>
</form>

Diese Buttons kannst du per CSS Formatieren.

lovetechno · 27 Juni 2009

schon mal vielen Dank =)
ja die <h4> habe ich genommen weil <h3> zu groß war xDD
dann werde ich mal bei google schnell suchen wie man den text vergrößert und verkleinert ! =)
ohh stimmt auf die iddee mit dem positionieren bin ich garnicht gekommen!!
Aber wenn nciht absolute wie dann ?
Hast du vll design mäßig noch nen vorschlag ???
vieln lieben Dank schon mal =)

Lg Timo

_Thor_ · 27 Juni 2009

lovetechno schrieb:
ja die <h4> habe ich genommen weil <h3> zu groß war xDD
dann werde ich mal bei google schnell suchen wie man den text vergrößert und verkleinert ! =)

Code:

h3 {font-size: 1.2em;}

ohh stimmt auf die iddee mit dem positionieren bin ich garnicht gekommen!!
Aber wenn nciht absolute wie dann ?

Mit margin und padding per CSS.

Hast du vll design mäßig noch nen vorschlag ???

Welches Design? Ich hab nur Positionierungen gesehen und es nicht im Browser getestet.

ein paar fragen/verbesserungen gesucht!!!!

lovetechno

Neues Mitglied

_Thor_

Aktives Mitglied

lovetechno

Neues Mitglied

_Thor_

Aktives Mitglied

Neueste Beiträge