• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout - wie am besten gestalten

C

c3h5no33

Neues Mitglied
Hi, mein Name ist Rainer, und ich beschäftige mich nun seit einiger Zeit mit html /css. Das klappt eigentlich schon recht gut. Aber ich wollte jetzt eine Seite basteln, bei der ich keinen Anfang finde. Im Anhang findet Ihr eine Skizze. Nun wie soll ich die HP aufteilen? In Head, Body und Footer? Wenn ich das mach, bekomm ich Probleme mit der Navi, die auf der Linken seite stehen soll, da der Hintergrund wegflitscht.
Ich weis im Moment nicht weiter. Vielleicht habt Ihr ein paar Ideen?!??

CU
Rainer
 

Anhänge

  • entwurf..jpg
    entwurf..jpg
    80,9 KB · Aufrufe: 7
Der Anfang liegt eigentlich auf der Hand: Schreibe Deinen Inhalt und zeichnet ihn semantisch mit HTML aus, so wie es gedacht ist. CSS ist für das Aussehen zuständig, CSS funktioniert aber nur mit einer Basis aus HTML und die kann man erst erstellen, wenn man Inhalt hat.

Also fang mit Deinem Inhalt an. Dann kommt die logische Aufteilung der Seite auch von selber.
 
Hi Efchen,
vielen Dank für Deine Antwort. Ich werd´s versuchen umzusetzten. Aber hast Du dir den Anhang angesehen? Das ist kein einfaches Layout. Der Body hat einen abgesetzten Teil, und es sind 3 Teile zu verwirklichen.
CU Rainer
 
Ja, habe ich. Das Layout ist trivial. Das klassische Mehrspaltenlayout.
Aber wenn Du mit dem Layout anfängst, lernst Du HTML nicht.
 
So, hier mein HTML - Soweit so gut? Dann muss ich nun mit CSS weitermachen - richtig ? Du hast das Stichwort schon gegeben: 3 Spalten Layout. Ich versuch´s
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]" xml:lang="de" lang="de">
<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
 
</head>
<body>
<img src="logo.png" alt="Logo" width="252" height="101" style="border: 0px;" /> <br />
<img src="linie_oben.png" width="800" height="32" style="border: 0px;" alt="Linie" />
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<img src="bild.jpg" alt="Mein Bild" width="168" height="303" style="border: 0px;" />
Das ist ein sehr sch&ouml;nes Haus!!!
  <br />
<img src="linie_unten.png" width="800" height="70" style="border: 0px;"alt="Linie"  />
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</body>
</html>
 
c3h5no33 schrieb:
So, hier mein HTML - Soweit so gut?
Zum Vergrößern anklicken....
Nein. :-)

1. Warum nimmst Du einen Übergangsdialekt von XHTML? Nimm doch besser XHTML 1.0 Strict. "Transitional" heißt "Übergangs~", ist eigentlich gedacht gewesen für uralte Seiten, nicht für neue.
2. Deine beiden Images vor der Liste sind nicht ausgezeichnet. XHTML 1.0 Strict wird Dir sagen, dass da ein Container fehlt. Was sollen die Images bedeuten? Haben sie überhaupt Content? Wenn sie keinen Content enthalten, werden sie auch nicht per HTML eingebunden. Möglicherweise steht was auf dem Logo drauf. Das sollte dann auch in das alt-Attribut (nicht einfach "Logo", damit kann kein Mensch was anfangen!). Dann dient das vermutlich als Überschrift? Also zeichne es als Überschrift aus!
Das zweite Image ist reine Zierde, hat also im HTML-Code nichts verloren. HTML ist für den Content. Das Aussehen machst Du mit CSS, also muss es als background-image eingebunden werden. Es würde sich anbieten, es als Hintergrundbild der Überschrift, die Du mit dem anderen Image auszeichnest, einzubauen.
3. Der eigentliche Inhalt ist nicht ausgezeichnet. Du hast da ein Bild. Dann hast Du einen TExt, der nicht als Textabsatz ausgezeichnet ist, verwendest <br> um einen Abstand zu erzeugen (dazu ist CSS da!).
Dann folgt wieder ein Bild, das nur zum Design gehört, also als background-image eingebunden werden muss.
Es findet sich sicher ein Element, wo man das anhängen kann.

Wie Du siehst, so ganz trivial ist es nicht. Mach erstmal diese Verbesserungen, sonst hast Du im CSS später doppelte Arbeit.

Ach ja, ich hab bei Images ein Inline-style-Attribut gesehen. Wirf das raus. Man trennt Inhalt und Layout strikt voneinander. Setze das gewünschte Aussehen für das Image in ein externes Stylesheet.
 
c3h5no33 schrieb:
So, hier mein HTML - Soweit so gut? Dann muss ich nun mit CSS weitermachen - richtig ? Du hast das Stichwort schon gegeben: 3 Spalten Layout. Ich versuch´s
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]" xml:lang="de" lang="de">
<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
 
</head>
<body>
<img src="logo.png" alt="Logo" width="252" height="101" style="border: 0px;" /> <br />
<img src="linie_oben.png" width="800" height="32" style="border: 0px;" alt="Linie" />
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<img src="bild.jpg" alt="Mein Bild" width="168" height="303" style="border: 0px;" />
Das ist ein sehr sch&ouml;nes Haus!!!
  <br />
<img src="linie_unten.png" width="800" height="70" style="border: 0px;"alt="Linie"  />
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</body>
</html>
Zum Vergrößern anklicken....


1. du hast Syntaxfehler:
The W3C Markup Validation Service

2. Sowas wie &ouml; nutzt man nicht mehr, das hat man früher genutzt, als die alten Browser nur Zeichenkodierungen, die ASCII nutzten, konnten.
Bei ASCII gibt es keine Umlaute.

Ich würde dir empfehlen als Kodierung UTF-8 zu nehmen, das speichert sehr platzsparend Unicode ab.

Dazu musst du eben dein Dokument als UTF-8 abspeichern, ein gutes Programm kann das.

Dann noch über den Doctype folgendes PHP
PHP: 
<?php header('Content-Type: text/html;  charset=utf-8');?>
.

(dadurch schickt dein Server auch die richtigen Zusatzinfos)

Dann brauchst du nur noch folgendes MetaElement
HTML: 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Und du bist in Sachen Kodierung auf neuem Stand.


MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben