✔ Grafisches Layout in CSS darstellen.

Status
Nicht offen für weitere Antworten.
A

AbsolutelyMy

Grünschnabel
Hallo Liebe Tutorials.de Community,

Und zwar habe ich ein problem meine Grafischen Layouts in CSS darzustellen, dar ich vorher nur mit Tabellen gearbeitet die ich mir vorher in Dreamweaver so zurechet gezeichnet habe das es so grob passt (aber diese Methode ist nicht die schönste). Und deswegen wollte ich auf CSS umsteigen und mein Grafische Layout mit DivLayern darstellen. Damit es für jede Auflösung und sogut wie jedem Browser halbwegs ansehbar ist und man nicht vor Augenkrebs verzweifelt das X sucht und den Browser schließt.

Dazu muss ich sagen das ich nur grundkenntnisse mitbringe:
HTML
PHP (basics)
und ein wenig CSS (basics)
Photoshop (beherrsche ich)

Hier das Layout das ich in Divlayern (css) darstellen will. Falls ihr eine bessere Methode kennt sprecht sie ruhig aus.
Hier klicken um das Layout zu begutachten.

Ich habe auch noch keine vorstellung wie ich es hinbekomme das alles in der Mitte sitzt. Ich habe schon daran gedacht es in Prozenten zu machen, aber villeicht kennt ihr ja eine bessere Methode.

Ich bin euch schonmal sehr dankbar fürs durch Lesen und hoffe ihr habt einen guten rat für mich.

Mit freundlichen Grüßen,
Jean Michele 'AbsolutelyMy' .M
 
Zuletzt bearbeitet:
Danke für die schnelle Antwort.

Hab mir gerade mal das Tutorial durch gelesen und muss sagen das es sehr verständlich ist, aber mir nicht verrät wie ich den Header in CSS an die Navigationen dran packen könnte.

Ich habe soweit versucht selber damit klar zu kommen doch bin leider gescheitert.

Hier meine versuche:
Code: 
div#header {
height: 200px;
background-color: #666666;
padding: 0;
mirgin: 0;
}

doch klappt es irgendwie nicht :/

hatte auch versucht per float: top das ganze zu regeln , aber hat auch nicht geklappt.

Mit den Navigationen bin ich soweit zufrieden, funktioniert auf allen auflösungen was mir schonmal sehr sehr wichtig ist ;)

Danke für die schnelle und effektive hilfe.
 
Zuletzt bearbeitet:
Hi,

hast Du Dich hier nur vertippt oder wirklich genauso geschrieben?

HTML: 
div#header {
height: 200px;
background-color: #666666;
padding: 0;
mirgin: 0;
}


Es sollte wohl "margin: 0" heißen. :)

Gruß
Loveboat
 
Was den Header- und Footerbereich betrifft, dürfte mein zweites Tutorial CSS-Layout mit 100%-Höhe ganz interessant sein, das auf dem ersten Tutorial aufbaut, auch wenn du keine 100%-Höhe einrichten möchtest, denn im Anhang stelle ich drei Variationen vor. ;)

Was genau klappt denn mit dem Header nicht?

Die Eigenschaft für den Randabstand heißt margin, und nicht "mirgin".

Einen Wert "top" für die float-Eigenschaft gibt es überhaupt nicht, sondern:

  • left
  • right
  • none
  • inherit
mfg Maik
 
Danke Maik, habe mir gestern Abend deine Tutorials sorgfälltig durch gelesen und habe soweit alles verstanden.

Aber nun besteht ein anderes problem, das Layout sieht bis jetzt super aus, nichts verscheibt sich, alles bleibt an seiner stelle.

Hier ein Bild von dem Problem:
http://www.abload.de/image.php?img=problen3q8.jpg

Das problem ist, wenn ich versuche die Linke Navigation mit margin 0 140px; zu versetzen , versetze ich das DivLayer in der Mitte gleich mit, das heißt wenn ich jetzt Navi Left mit Text fülle ist der Content immer unter der Navigation.

Hoffe du/Ihr könnt mir weiter helfen.

Vielen dank schonmal
 
Soll der horizontale Außenabstand für #leftCol zu beiden Seiten gelten, oder vielleicht eher nur zu einer?

Gemäß dem CSS-Boxmodell beträgt nämlich die Breite für dieses Element derzeit 240px (140px + 2*50px), womit der linke Außenabstand von #centerCol entsprechend erhöht werden muß.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück