CSS Layout Probleme

[Laxila]

Hey Leute,
Seit kurzem beschäftige ich mich mit CSS, weil ich gelesen habe, dass ein CSS Layout gegenüber eines Tabellenlayoutes viele Vorteile mit sich bringt.
Jetzt wollte ich mein fertiges Design in CSS coden und habe die ersten Schweirigkeiten.

1. Hat mir Jemand gesagt das es nicht möglich wäre dieses (siehe Bild) Design, so wie ich es gesliced habe in CSS zu coden. Stimmt das? Und wenn ja, was mussich ändern?



2. Habe ich ab der 5. Bildreihe die ersten Probleme. Die Navigation richtet sich ständig unterhalb des Slice Nr. 18 aus. Gibt es eine Möglichkeit das zu unterbinden, sprich das die Navigation nach oben rutscht? Und wie mache ich dann weiter mit den nächsten Bildern, denn diese müssen sich ja auch dementsprechend anpassen.
Also alles in allem gibt es eine Möglichkeit Bilder nach oben zu schieben, jedoch bleibt der untere Teil des Slice Nr. 18 weiterhin als Richtlinie.



Hoffe ich habe das verständlich formuliert. Bedanken mich im vorraus für die Antworten

 

[Herr_D]

AW: CSS Layout Probleme

Du mußt wirklich anders slicen... das da oben per css ohne Tabelle umzusetzen ist wirklich kaum machbar...


Verusch mal dein Denken zu ändern...


Du brauchst 5 Grundteile

head:

Bauch
-Navi links | Inhalte | Navi / Player rechts

Footer




So mußt du auch slicen...



Die Navipunkte (links) setzt du dann als eigenständige Grafiken in einer Liste ein... und legst sie in den div navi links



Dann brauchst du Teile, die sich wiederholen können für links bauch und rechts... Extragrafiken...





Das ist viel Arbeit, aber vor dem Layout solltest du dir vielleicht mal css/ html zu Gemüte führen... dann setzt du beim Grafikenerstellen schon anders an...

 

[Laxila]

AW: CSS Layout Probleme

hmm also eigentlich hatte ich gedacht ich mache das mit css, weil der hauptgrund war, dass ich vorher das design in einer tabelle gecodet habe und denn oben die düsen kommen als flash animation einsetzen wollte und der IE das Layout denn ständig verzieht und weil ich gelesen habe das dies bei css nicht pasiert wollte ich es halt damit versuchen oder gibt es eine möglichkeit das layout in einer tabelle zu coden und diesen fehler vom IE zu umgehen?

 

[GrafiKman]

AW: CSS Layout Probleme

wie schon gesagt ... lies dir bitte mal die Grundlagen von HTML /css durch dann wirst du auch besser verstehn was gemeint ist und warum der IE alles verschoben und man keine Tabellen nimmt um dinge anzuordnen sondern divs verwendet...

 

[Laxila]

AW: CSS Layout Probleme

also die grundlagen habe ich mir schonmal durchgelesen und hab jetzt eben auch noch ein bissl geblätter.
Mir ist nur aufgefallen, wenn ich meine Seite jetzt in verschiedene Teile unterteile, wie soll ich dann z.b. eine Flash - Animation noch dazwischenlegen?
Oder kann ich die ganz einfach dann über das Stück der Grafik legen?
Z. B. oben die düsen bei meinem design wenn ich den oberen teil in ein bild fasse und das als header nehme kann ich dann die flash - animation einfach drüber packen? z.b. wenn ich den header als background für den div nehme?

 

[sokie]

AW: CSS Layout Probleme

Deine flash dekorationen könntest du zB per absoluter positionierung in die Seite bringen.
was virl wichtiger ist, ist die frage in welchen Berichen der Seite die Inhalte unterschiedlich viel Platz einnehmen, und deshalb eine flexible Gestaltung benötigen.
der kopfbereich, für den du alleine schon 11slices vorgesehen hast ist mit einem einzigen image umzusetzen. fü den footer gilt das entsprechend. usw...

 

[Laxila]

AW: CSS Layout Probleme

ganz großes danke!!!

ich glaube nämlich das ich jetzt den ganzen sinn von css verstanden habe besonder mit der position: absolut war ich mir ständig unsicher.
d.h. so sieht das schon besser aus?




Die Navi - Texte würde ich denn als Liste anordnen, da habe ich die texte einzelnd als bilder gespeichert (so wie im oben geposteten Bild). Denn könnte ich die ja später auch mit position:absolut drüber packen oder?

Allerdings habe ich immernoch das Problem das zwischen Content und Header es auf IE und FF unterschiedlich angezeigt wird. Bei Firefox sitzen die Bilder genau aneinander, Beim IE ist Platz zwischen Header und Content. Was mache ich falsch bzw. wie kann ich das ändern?

Mein Code bis jetzt:

<style type="text/css">

#header {
width:905px; 
height:300px
margin-left:auto; margin-right:auto;
}

#navi-links {float:left;
width:191px;
height:461px;
}

#navi-rechts {float:left;
width:192px;
height:461px;}

#content {float:left;
height:522px;
height:461px;}

#mitte {width:905px; height:461px;
margin-left:auto; margin-right:auto;}

body {text-align:center;}

</style>
</head>
<body bgcolor="#000000">
<div id="mitte">
<div id="header">
<img src="Bilder/Index_02.jpg">
<img src="Bilder/Index_04.jpg">
</div>

<div id="navi-links">
<img src="Bilder/Index_05.jpg">
</div>
<div id="content">
<img src="Bilder/Index_06.jpg"><br/>
<img src="Bilder/Index_08.jpg"></div>
<div id="navi-rechts"><img src="Bilder/Index_07.jpg"></div>
</div>

EDIT: Hat sich soweit alles erldigt kann geschlossen werden!