Mein CSS-Layout: Wie mache ich das

Dieses Thema im Forum "Webentwicklung" wurde erstellt von torsKen, 15. Mai 2006 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 15. Mai 2006
    Hi!
    Bin zur Zeit dabei mein mit Photoshop erstelltes Design mit css/html zu coden, jedoch komme ich jetzt irgendwie nicht mehr weiter.
    Bzw. weiß ich nicht genau wie ich es jetzt machen soll. Hat jemand vll. für mich eine Beispielseite+code zu einem css basieredem Layout, weil alles was ich finde wurde mit Tabellen gemacht, aber das will ich ja nicht bzw. kann ich eigentlich auch schon.

    So jetzt zu meinem Design:

    So sollte es mal werden (rollover effekt kann jetzt mal außenvor gelassen werden)

    Jetzt habe ich 2 Varianten angefangen, hier mal die erste die recht auflösungsunabhängig sein sollte.
    Wie ihr vll schon am code erkennen könnt klappt das alles noch nicht so wie es soll.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
 <title>Layout</title>
 <style type="text/css">
 
 #header {
 
 width: 100%;
 min-width: 800px;
 margin: 0px;
 padding: 0px;
 }
 
 #navigation {
 width: 100%;
 border: 0;
 float: left;
 min-width: 800px;
 }
 .button {
 float: left;
 width: 14.285714285714285714285714285714%;
 } 
 
 .links {
 float: left;
 padding: 0;
 margin: 0;
 }
 .rechts {
 float: right;
 }
 #content {
 float: left;
 margin-left: 262px;
 margin-right: 257px;
 }
 
 #footer {
 
 }
 </style>
 
 </head>
 <body>
 
 <img id="header" src="Bilder/header.jpg"/>
 
 
 <div id="navigation">
 <img class="button" src="Bilder/nav-home.jpg">
 <img class="button" src="Bilder/nav-news.jpg">
 <img class="button" src="Bilder/nav-spieler.jpg">
 <img class="button" src="Bilder/nav-termine.jpg">
 <img class="button" src="Bilder/nav-bilder.jpg">
 <img class="button" src="Bilder/nav-gaestebuch.jpg">
 <img class="button" src="Bilder/nav-sprueche.jpg">
 </div>
 
 
 
 <img class="links" src="Bilder/con-rasen-links.jpg">
 <img class="links" src="Bilder/con-balken-links.jpg">
 
 <div id="content">
 
 </div>
 <img class="rechts" src="Bilder/con-rasen-rechts.jpg">
 <img class="rechts" src="Bilder/con-balken-rechts.jpg"> 
 
 <div id="footer">
 
 <img class="links"src="Bilder/foot-rasen-links.jpg">
 <img src="Bilder/foot-footer.jpg">
 <img class="rechts" src="Bilder/foot-rasen-rechts.jpg">
 
 </div>
 
 </body>

</html>
    HIER ist das ehlend dann online^^

    Und hier mein zweiter Versucht:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
 <title>Soehne-Woellsteins</title>
 <style type="text/css">
 
 #header {
 
 width: 100%;
 min-width: 800px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 left: 0px;
 top: 0px;
 right: 0px;
 }
 
 #navigation {
 position: absolute;
 top: 160px;
 left: 0px;
 
 width: 100%;
 border: 0;
 margin: 0px;
 padding: 0px;
 min-width: 800px;
 }
 .button {
 float: left;
 width: 142px;
 } 
 
 #rasen-links { 
 position: absolute;
 top: 194px;
 left: 0px;
 padding: 0;
 margin: 0;
 
 #balken-links {
 position: absolute;
 top: 194px;
 left: 211px;
 }
 
 #rasen-rechts {
 position: absolute;
 right: 0px;
 top: 194px;
 }
 
 #balken-rechts {
 position: absolute;
 right: 206px;
 top: 194px;
 }
 #content {
 
 
 }
 
 #footer {
 
 }
 </style>
 
 </head>
 <body>
 
 <img id="header" src="Bilder/header.jpg"/>
 
 
 <div id="navigation">
 <img class="button" src="Bilder/nav-home.jpg">
 <img class="button" src="Bilder/nav-news.jpg">
 <img class="button" src="Bilder/nav-spieler.jpg">
 <img class="button" src="Bilder/nav-termine.jpg">
 <img class="button" src="Bilder/nav-bilder.jpg">
 <img class="button" src="Bilder/nav-gaestebuch.jpg">
 <img class="button" src="Bilder/nav-sprueche.jpg" width="144px">
 </div>
 
 
 <div id="rasen-links">
 <img class="rasen-links" src="Bilder/con-rasen-links.jpg">
 </div>
 <div id="balken-links">
 <img class="balken-links" src="Bilder/con-balken-links.jpg">
 </div>
 
 
 <div id="content">
 </div>
 
 
 
 <div id="rasen-rechts">
 <img class="rasen-rechts" src="Bilder/con-rasen-rechts.jpg">
 </div>
 <div id="balken-rechts">
 <img class="balken-rechts" src="Bilder/con-balken-rechts.jpg"> 
 </div>
 
 <div id="footer">
 
 <img class="links"src="Bilder/foot-rasen-links.jpg">
 <img src="Bilder/foot-footer.jpg">
 <img class="rechts" src="Bilder/foot-rasen-rechts.jpg">
 
 </div>
 
 </body>

</html>
    Und HIER ist das zweie online
    [edit]
    Jetzt noch mal zu meinen Fragen:
    Warum zeigt mir der browser die eine reasenfläche nicht rechts ab, obwohl ich sie dahin positioniert habe?
    [/edit]^^
    Wie mache ich allgemein so ein Layout? Am besten wäre wie gesagt ein Beispiel damit ich mir das mal anschauen kann.
    Als kleine Anmerkung:
    Mir geht es nicht um das Design, sonder ausschließlich darum wie ich dieses ordentlich coden kann. Das Design werde ich noch verändern, aber wenn ich das mit dem coden einmal hinbekomme klappt das auch wieder^^
    Hoffe dass sich einige finden die sich mir meinem Problem befassen und bin dankbar für jede Antwort (10er als Ggl.)

    ---
    mfg
    torsKen
     
  3. 15. Mai 2006
    Kannst du deine Quellcodes vielleicht online stellen? So, wie sie jetzt da stehen, wird damit niemand was anfangen können, weil die Bilder nicht geladen werden. Davon ab bin ich zu faul für copy'n paste

    Was ich auf dem Screenshot gesehen habe: ergoogle dir mal, wie man aus den unnumbered lists (<ul><li>... etc) horizontale Navigationen basteln kann - die sind verdammt cool und für deine Navigation optimal.
     
  4. 16. Mai 2006
    Das mit den unsorted lists geht über den parameter display:inline; also

    beispiel-code für ein li-element:
    Code:
    li {
padding: 0px;
margin:0px;
color:#FFF;
display:inline;
position:relative;
height:25px;
padding-left:50px;
}
     
  5. 16. Mai 2006
    wenn du listen verwenden willst dann musst du auch den style rausmachen mit
    Code:
    li {
 list-style: none;
}
     
  6. 16. Mai 2006
    Habe meine Versuche jetzt mal hochgeladen...
    Links im Thread jeweils unter dem Quellcode

    Ich habe das mti dem css float befehl gemacht, kommt das nicht auf das selbe raus?
     
  7. 16. Mai 2006
    das mit dem Rasen kommt meist davon dass die elemente meist zugroß sind (inkl. margins paddings etc.
     
  8. 18. Mai 2006
    *push*
    Das Prob hab ich immer noch
     
  9. 24. Mai 2006
    *push again* :baby:
     
  10. 24. Mai 2006
    wenn du immernoch das rasenprob meinst:

    verkleiner einmal alle breiten und gugg dann nochmal glaub nämlich das da irgendwas zu groß ist dann wird es automatisch nach unten verschoben
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.