Seitengestaltung

[Peter]

Hallo Leute,

stehe gerade vor einem kleinen Problem und zwar:

Ich gestalte gerade meine alten Seite von einem verschachtelten Tabellen-Design in CSS um. Bei dem ersten Menu auf der linken Seite gerade ich schon in die Predoulle...

Warum wird bei folgendem Menu der Inhalt von "Username" & "Passwort" nicht unter "Login" angezeigt sondern neben "die Tabelle" sozusagen ? Ich hätte dies nämlich gerne untergeordnet...

Mein Design der Tabelle sollte so ungefähr ausschauen:

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

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

Login ist nur ein Text, G links und Rechts steht für eine kleine, schmale Grafik die einen Schatten darstellt...

Ach ja, und in "login_text" und "rubrik_login" stehen lediglich Textformatierungen (Farbe, Hintergrund, etc.).

-------------------

<div style:"width:207; margin-bottom:5px;"><img src='pix/ly_menue_top.gif' alt='' height="8"></div>

<div style="float:left; width:10;"><img src='pix/login_menue_left.gif' alt=''></div>
        <div id='rubrik_login'>Login</div>

<div style="float:left; width:10;"><img src='pix/login_menue_right.gif' alt=''></div>

<div id='login_text'>Username
  <input name='username' value='' type='text'>
  </div>
  <div id='login_text'>Passwort
  <input type='password' name='passwort'>
  </div>
  <div style='width:188; background-color:#86AAC5;'><input type='checkbox' name='save_login' value='1'>
  <span style='color:#FFF; font-size:11px;'>Autologin</span>
  <input type='image' name='submit' value='Login' src='pix/login.gif' style='margin-top:2px;'>
  </div>
  <div style:"width:0; margin-bottom:5px;'"><img src='pix/login_menue_bottom.gif' alt='' width='194' height='10'></div>

-------------------------

Ich hoffe mir kann jemand helfen, bin langsam verzweifelt. Vor allem wie ich danach eventuell noch NEBEN dieses Menu etwas platzieren kann ? Sozusagen den Hauptbereich der Seite wo großer Text steht, etc.

Wäre auch sehr verbunden wenn mir jemand helfen könnte.

Vielen Dank im Voraus!

Gruß Peter

[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