Hallo,
ich möchte meinen Login-Bereich formatieren, damit es so aussieht:
[Blockierte Grafik: http://img241.imageshack.us/img241/8143/loginkt.jpg]
Kann mir einer sagen wie ich das machen kann?
Hallo,
ich möchte meinen Login-Bereich formatieren, damit es so aussieht:
[Blockierte Grafik: http://img241.imageshack.us/img241/8143/loginkt.jpg]
Kann mir einer sagen wie ich das machen kann?
Ich habe mal schnell was erstellt:
Das ist nur das Grundgerüst. Die Farben markieren die Bereiche.
Abstände, Höhen und Breiten kannst du natürlich noch ändern.
HTML-Code im body:
<div id="oben">
<p>user login</p>
</div>
<div id="links">
<p>
ID Box
<br />
PW Box
</p>
</div>
<div id="rechts">
<p>
SIGN UP
<br />
LOST PW
<br />
login button
</p>
</div>
Alles anzeigen
CSS Datei:
html, body
{
background-color: blue;
text-align: center;
width: 400px;
}
#oben {
background-color: red;
width: 400px;
}
#oben p {
color: white;
text-align: left;
margin-left: 0.5em;
}
#links {
text-align: left;
float: left;
margin: 4px 8px;
width: 300px;
background-color: green;
height: 80px;
}
#links p {
margin-left: 1em;
}
#rechts {
text-align: center;
margin: 4px 8px 4px 0;
background-color: yellow;
width: 76px;
float: right;
height: 80px;
}
Alles anzeigen
Wobei ich den HTML Code jetzt nicht für den besten halten würde.. ja nachdem was man vorhat, ist da einiges wahrscheinlich semantisch nicht ganz richtig...
Aber das sieht man wahrscheinlich erst dann, wenn der Inhalt drin ist.
Mein Code war ja auch eher nur ein grober Tipp, wie man das machen könnte.
Was meinst du denn, ist semantisch nicht ganz richtig?
Danke für deinen Versuch, aber das hätte ich auch gewust -.-'
Was mich eher interessiert ist der Login-Buttom und die beiden Felder, den rest habe ich schon.
Pelgro: schau mal hier: <!-- m --><a class="postlink" href="http://de.selfhtml.org/html/formulare/formatieren.htm">http://de.selfhtml.org/html/formulare/formatieren.htm</a><!-- m -->
Sören: Das ganze ist ein Formular, würde also schonmal das <form> fehlen (p wäre hier fehl am Platz). Und die <input>s durch <br /> zu trennen ist auch nicht die feine Art.
Dieses Loginformular besteht hauptsächlich aus Bildern..
Also rann an die Arbeit
Das mit dem Loginbutton wird dann so geregelt, dass du anstatt <input type="submit"...> <input type="images" src="#"...> verwendest [:
Zitat von "lauras"Pelgro: schau mal hier: <!-- m --><a class="postlink" href="http://de.selfhtml.org/html/formulare/formatieren.htm">http://de.selfhtml.org/html/formulare/formatieren.htm</a><!-- m -->
Hatte ich schon gefunden gehabt. Da steht aber nur was von Farben, nicht von Bildern -.-'
Dachte es muss anders gemacht werden.
Sarkkan
Warum #?
weil mir sonst keine Methode bekannt ist, wie man das sonst machen könnte... =/
Achsoo.... ich dachte es hätten 'nen Grund.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.