Seitengestaltung

[OhneName]

Hallo,

von Tabellenlayout auf CSS umzusteigen ist schon mal ein guter Ansatz. Dein Problem ist jedoch, dass du immernoch zu viel in Tabellen denkst, so kann das noch nichts werden.

+--------------+
|  TOP-Grafik  |
+-+----------+-+
|G| Login    |G|

• +----------+ +
  |G| Username |G|
  |G| [Feld]   |G|
  |G| Passwort |G|
  |G| [Feld]   |G|
  |G| Button   |G|
  +-+----------+-+
  | BUTTON-Grafik|
  +--------------+

Der erste Schritt bevor du dich an die Gestaltung mittels CSS machst ist es den Inhalt semantisch auszuzeichnen. In deinem Fall haben wir hier scheinbar ein einfaches Formular, also:

  
<form action="..." method="post">  
    <fieldset>  
        <legend>Login</legend>  
        <label for="username">Username</label>  
        <input type="text" id="username" name="username" />  
        <label for="password">Password</label>  
        <input type="password" id="password" name="password" />  
    </fieldset>  
</form>  

Jetzt müssen wir dem ganzen das passende Aussehen mit CSS verpassen. Dabei kann es eventuell nötig werden weitere Elemente hinzuzufügen um ein gewisses Aussehen zu erreichen. Das sollte aber soweit wie möglich vermieden werden. Die Grafiken haben alle keinen inhaltlichen Zweck, sind also Gestaltung und damit Sache von CSS.

Ich will dir hier kein fertiges CSS hinschreien, du sollst es ja lernen. Trotzdem ein paar Tipps:

• die Bilder bindest du per background-image als Hintergrundbilder ein
• label und input musst du display:block geben, damit sie Absätze erzeugen
• css-angaben gehören in den head oder besser noch in ein externes Stylesheet

Weiteren Inhalt neben das Formular bekommst du, indem du das Formular floaten lässt und dem restlichen Inhalt ein passendes margin-left verpasst.

Gruss,
OhneName