Anzeige

CSS Layout Probleme

CSS Layout Probleme | PSD-Tutorials.de

Erstellt von Laxila, 30.12.2009.

  1. Laxila

    Laxila Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    13
    Geschlecht:
    männlich
    Ort:
    Nds / Cuxhaven
    Software:
    Photoshop CS3
    CSS Layout Probleme
    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?

    [​IMG]

    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.

    [​IMG]

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

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    CSS Layout Probleme
    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...
     
    #2      
  3. Laxila

    Laxila Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    13
    Geschlecht:
    männlich
    Ort:
    Nds / Cuxhaven
    Software:
    Photoshop CS3
    CSS Layout Probleme
    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?
     
    #3      
  4. GrafiKman

    GrafiKman Aktives Mitglied

    Dabei seit:
    26.08.2009
    Beiträge:
    268
    Geschlecht:
    männlich
    Software:
    PS, Geany
    Kameratyp:
    keine
    CSS Layout Probleme
    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...
     
    #4      
  5. Laxila

    Laxila Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    13
    Geschlecht:
    männlich
    Ort:
    Nds / Cuxhaven
    Software:
    Photoshop CS3
    CSS Layout Probleme
    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?
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    CSS Layout Probleme
    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...
     
    #6      
  7. Laxila

    Laxila Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    13
    Geschlecht:
    männlich
    Ort:
    Nds / Cuxhaven
    Software:
    Photoshop CS3
    CSS Layout Probleme
    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?

    [​IMG]


    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:

    Code (Text):
    1. <style type="text/css">
    2.  
    3. #header {
    4. width:905px;
    5. height:300px
    6. margin-left:auto; margin-right:auto;
    7. }
    8.  
    9. #navi-links {float:left;
    10. width:191px;
    11. height:461px;
    12. }
    13.  
    14. #navi-rechts {float:left;
    15. width:192px;
    16. height:461px;}
    17.  
    18. #content {float:left;
    19. height:522px;
    20. height:461px;}
    21.  
    22. #mitte {width:905px; height:461px;
    23. margin-left:auto; margin-right:auto;}
    24.  
    25. body {text-align:center;}
    26.  
    27. </style>
    28. </head>
    29. <body bgcolor="#000000">
    30. <div id="mitte">
    31. <div id="header">
    32. <img src="Bilder/Index_02.jpg">
    33. <img src="Bilder/Index_04.jpg">
    34. </div>
    35.  
    36. <div id="navi-links">
    37. <img src="Bilder/Index_05.jpg">
    38. </div>
    39. <div id="content">
    40. <img src="Bilder/Index_06.jpg"><br/>
    41. <img src="Bilder/Index_08.jpg"></div>
    42. <div id="navi-rechts"><img src="Bilder/Index_07.jpg"></div>
    43. </div>
    44.  
    45.  
    EDIT: Hat sich soweit alles erldigt kann geschlossen werden!
     
    Zuletzt bearbeitet: 02.01.2010
    #7      
x
×
×