Strukturumsetzung

[maggie]

Hi,

Hallo, ich versuche aufgrund der Layoutaufzeichnung
http://www.formfalt.net/css_aufbau.gif
die Struktur in css umzusetzen.

das ist Unfug. Die Struktur wird in HTML umgesetzt, und zwar aufgrund der zu erwartenden Inhalte.

Danke für den sehr nützlichen Link http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/
Ich werde also die ContainerPositionierung nach der logischen Inhaltsreihenfolge richten.

Beim masthead-container fängst schon an zu haken.
<div id="masthead">
   <h2 id="pageName"><img src="bild.gif" width="150" height="60">
   Überschrift</h2>

Handelt es sich bei dem Bild tatsächlich um einen zu vermittelnden Inhalt,

Ja, das ist das Logo (alt-Text ist natürlich wichtig). oder ist es nur eine Verzierung? Im letztgenannten Fall hat das Ding im HTML-Code nichts verloren, im erstgenannten fehlt das zwingend benötigte alt-Attribut. Zudem ist zu überlegen, ob es tatsächlich Teil der Überschrift ist.

<div id="info">Link<br/>Link</div>

Hast Du nun XHTML oder nicht? Beim <img> war es noch HTML. Darüber hinaus werden Listen von Links genauso wie andere Listen mit <ol>, <ul> oder <dl> strukturiert, nicht mit Zeilenende-Markierungen.

Das habe ich alles noch nicht berücksichtigt, weil ich erstmal die Positionierungen der Inhaltsboxen richtig erstellen wollte.

Der div-Bereich "info" soll eine Hintergrundfarbe bekommen. Wie ichs jetzt habe, fängt "info" von ganz links an.

Wie hast Du's denn? Darstellungsbezügliche Informationen sind im HTML-Code nicht zu finden, weil sie dort nichts zu suchen haben.

Die Positionierung habe ich im masthead container, pageName mit float: left, info ohne positionsangabe.
<div id="masthead">
  <h2 id="pageName"><img src="logo.gif" width="150" height="60">
  Überschrift</h2>
  <div id="info">Hier kommt die Navigation Kontakt und Impressum hin</div>
</div>

Dieser "info" Bereich muss immer gleich groß der 3. Spalte unten sein.

Sorry, ich meinte die gleiche Breite.
Wie sollte ich das am Besten lösen?

Komisch, auf der von Dir gezeigten Grafik ist die dritte Spalte sehr viel größer als der Info-Bereich.

Wie kann ich das lösen?

Solange Du nur HTML-Code nennst, muss die Antwort lauten: Mit CSS. Aufgrund der etwas spärlichen Informationen, die Du noch innerhalb der Grafik untergebracht hast, vermute ich, dass Du Dich mit der float-Eigenschaft noch sehr viel intensiver beschäftigen möchtest, und dabei evtl. auch an z.B. margin denkst.

Könnt Ihr mir Tipps geben wie ich den gesamt Aufbau angehen soll.

ad 1: http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/

Cheatah