Anzeige

noob-css-frage

noob-css-frage | PSD-Tutorials.de

Erstellt von Mermei, 29.03.2006.

  1. Mermei

    Mermei Aktives Mitglied

    Dabei seit:
    01.11.2005
    Beiträge:
    438
    Geschlecht:
    männlich
    noob-css-frage
    hallo zusammen, hab folgendes problem/frage: ich amch grad ndesign, und tja, es funzt einfach net, hab versucht mir selber bei selfhtml zu helfen, ging nicht, mitt css4u bin ich auch net weitergekommen, könnt ihr mir schnell helfen?das problem is voll komisch, das "float-zeugs" hab ich glaub net richtig kapiert, guckt es euch selber an, so sieht es im browser aus:

    [​IMG]
    hmmm, es geht um die schwarze und die grauen boxen, is für die navi...eien graue box, die schon an der richtigen stelle ist, steht richtig, die schwarze ist unter der versteckt, wobei sie grad nach der grauen kommen sollte, und die graue box, die rechts sein sollte, welche ich mit float: right versehen habe, müsste ne "linie" weiter oben sein, das grüne is einfach die ganze navi zusammen...=(

    hier das stylesheet:

    Code (Text):
    1.  
    2. body {
    3. [...]
    4. }
    5. #header_upper {
    6. [...]
    7. }
    8. #header_bottom {
    9. [...]
    10. }
    11. #navigation {
    12.   width: 782px;
    13.   height: 55px;
    14.   margin: 0 auto;
    15.   padding: 0px;
    16.   background-color: green;
    17.   border: none;
    18.   text-align: left;
    19. }
    20. #navigation_left {
    21.   float: left;
    22.   width: 220px;
    23.   height: 55px;
    24.   padding: 0px;
    25.   background-color: grey;
    26.   border: none;
    27.   text-align:left;
    28. }
    29. #navigation_middle {
    30.   width: 310px;
    31.   height: 55px;
    32.   padding: 0px;
    33.   background-color: black;
    34.   border: none;
    35.   text-align:left;
    36. }
    37. #navigation_right {
    38.   float: right;
    39.   width: 250px;
    40.   height: 55px;
    41.   padding: 0px;
    42.   background-color: grey;
    43.   border: none;
    44.   text-align:left;
    45. }
    46. #content {
    47. [...]
    48. }
    und hier ist die html-datei:
    Code (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    3. <html>
    4. <head>
    5. [...]
    6. </head>
    7. <body>
    8.  
    9. <div id="header_upper">
    10. </div>
    11.  
    12. <div id="header_bottom">
    13. </div>
    14.  
    15. <div id="navigation">
    16.  <div id="navigation_left">
    17.  </div>
    18.  <div id="navigation_middle">
    19.  </div>
    20.  <div id="navigation_right">
    21.  </div>
    22. </div>
    23.  
    24. <div id="content">
    25. hallllllllllllooooooooo wie gehts
    26.  
    27.  
    28. boop
    29. </div>
    30. </body>
    31. </html>
     
    #1      
  2. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    noob-css-frage
    mach mal float: left für beide graue elemente
     
    #2      
  3. Mermei

    Mermei Aktives Mitglied

    Dabei seit:
    01.11.2005
    Beiträge:
    438
    Geschlecht:
    männlich
    noob-css-frage
    habs probiert, dann ist das graue element trotzdem eine linie untendran und einfach links statt rechts... :(
     
    #3      
  4. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    noob-css-frage
    dann ist das elternelement zu klein, um beide nebeneinander darzustellen ;)
     
    #4      
  5. Stroker

    Stroker Guest

    noob-css-frage
    Also das wäre mein Vorschlag:

    Code (Text):
    1. #navigation {
    2.   width: 782px;
    3.   height: 55px;
    4.   margin: 0 auto;
    5.   padding: 0px;
    6.   background-color: green;
    7.   border: none;
    8.   text-align: left;
    9. }
    10. .navigation_left {
    11.   float: left;
    12.   width: 220px;
    13.   height: 55px;
    14.   padding: 0px;
    15.   background-color: grey;
    16.   border: none;
    17.   text-align:left;
    18.  
    19.   float: left;
    20. }
    21. .navigation_middle {
    22.   width: 310px;
    23.   height: 55px;
    24.   padding: 0px;
    25.   background-color: black;
    26.   border: none;
    27.   text-align:left;
    28.  
    29.   float: left;
    30. }
    31. .navigation_right {
    32.   float: right;
    33.   width: 250px;
    34.   height: 55px;
    35.   padding: 0px;
    36.   background-color: grey;
    37.   border: none;
    38.   text-align:left;
    39.  
    40.   float: left;
    41. }
    Erstmal die Boxen in der großen Box zu Klassen machen und dort jeweils nur float: left; einfügen.
     
    #5      
  6. Mermei

    Mermei Aktives Mitglied

    Dabei seit:
    01.11.2005
    Beiträge:
    438
    Geschlecht:
    männlich
    noob-css-frage
    @Trex: das hätte ich nichtma verifiziert, aber sie waren trotzdem alle zusammen kleiner als das elternelement=)=)

    @Stroker: Wenn ich bei allen Float: left mache funktionierts
    :D aber wieso soltle ich sie zu klassen amchen?also ich begreifs einfach net, ich schick dir ne pm=)

    danke für eure hilfe!!!
    gruss mermei
     
    #6      
x
×
×