Anzeige

Boxen floaten nicht nebeneinander

Boxen floaten nicht nebeneinander | PSD-Tutorials.de

Erstellt von bonafide69, 09.01.2011.

  1. bonafide69

    bonafide69 Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    8
    Geschlecht:
    männlich
    Software:
    Photoshop 8
    Kameratyp:
    Digikam
    Boxen floaten nicht nebeneinander
    Hallo!
    Habe hier ein Floatproblem und weiss nicht wo der fehler liegt. Hab diverse Floatvarianten ausprobiert und nix funzt. Bitte um Hilfe auch wenn dieses Thema schon x mal behanelt worden ist und ich dies auch gegoogelt habe. Sorry aber ich check den Fehler nicht. :'( Danke :)

    HTML Code:

    HTML:
    1. <div id="unten">
    2.  
    3.                <ul id="box1"><img src="http://www.psd-tutorials.de/modules/Forum/images/box1.png"
    4.                 <li><a href="#"></a></li>
    5.                </ul>
    6.  
    7.                <ul id="box2"><img src="http://www.psd-tutorials.de/modules/Forum/images/box2.png"
    8.                 <li><a href="#"></a></li>
    9.                </ul>
    10.  
    11.                <ul id="box3"><img src="http://www.psd-tutorials.de/modules/Forum/images/box3.png"
    12.                 <li><a href="#"></a></li>
    13.                </ul>
    14.  
    15.          </div>
    CSS:

    Code (Text):
    1. #unten {
    2.          border: 0px dashed silver;
    3.          width: 870px;
    4.          height: 144px;
    5.          margin-top: 10px;
    6.          margin-left: 15px;
    7.          background-color: #99CC66;
    8.          border: 0px solid #b30202;
    9.          }
    10. #box ul {
    11.          margin: 0px;
    12.          padding: 0px;
    13.          list-style-type: none;
    14.          border: 0px;
    15.          display: inline;
    16.          }
    17.  
    18. #box1 li {
    19.          display: inline;
    20.          }
    21.  
    22. #box2 li {
    23.          display: inline;
    24.          }
    25.  
    26. #box3 li {
    27.          display: inline;
    28.          }
    29.  
    30. #box1 li a {
    31.          background-image: url(../images/);
    32.          background-repeat: no-repeat;
    33.          color: #000000;
    34.          font-size: 14px;
    35.          font-weight: normal;
    36.          display: block;
    37.          list-style: none;
    38.          text-align: center;
    39.          padding-top: 15px;
    40.          width: 280px;
    41.          height: 144px;
    42.          float: left;
    43.  
    44.          }
    45.  
    46. #box2 li a {
    47.          background-image: url(../images/);
    48.          background-repeat: no-repeat;
    49.          color: #000000;
    50.          font-size: 14px;
    51.          display: block;
    52.          list-style: none;
    53.          text-align: center;
    54.          padding-top: 15px;
    55.          width: 310px;
    56.          height: 144px;
    57.          float: left;
    58.  
    59.          }
    60.  
    61. #box3 li a {
    62.          background-image: url(../images/);
    63.          background-repeat: no-repeat;
    64.          color: #000000;
    65.          font-size: 14px;
    66.          font-weight: normal;
    67.          display: block;
    68.          list-style: none;
    69.          text-align: center;
    70.          padding-top: 15px;
    71.          width: 280px;
    72.          height: 144px;
    73.          float: left;
    74.          }
    75.  
    76. #box1 li a:visited {
    77.  
    78.         background-image: url(../images/);
    79.         background-repeat: no-repeat;
    80.         color: #000000;
    81.         font-size: 14px;
    82.         font-weight: normal;
    83.         display: block;
    84.         list-style: none;
    85.         text-align: center;
    86.         padding-top: 15px;
    87.         width: 280px;
    88.         height: 144px;
    89.         float: ;
    90.         }
    91.  
    92. #box2 li a:visited {
    93.  
    94.         background-image: url(../images/);
    95.         background-repeat: no-repeat;
    96.         color: #000000;
    97.         font-size: 14px;
    98.         font-weight: normal;
    99.         display: block;
    100.         list-style: none;
    101.         text-align: center;
    102.         padding-top: 15px;
    103.         width: 310px;
    104.         height: 144px;
    105.         float: ;
    106.         }
    107.  
    108. #box3 li a:visited {
    109.  
    110.         background-image: url(../images/);
    111.         background-repeat: no-repeat;
    112.         color: #000000;
    113.         font-size: 14px;
    114.         font-weight: normal;
    115.         display: block;
    116.         list-style: none;
    117.         text-align: center;
    118.         padding-top: 15px;
    119.         width: 280px;
    120.         height: 144px;
    121.         float: ;
    122.         }
    123.  
    124. #box1 li a:hover {
    125.  
    126.         background-image: url(../images/);
    127.         background-repeat: no-repeat;
    128.         text-decoration: none;
    129.         }
    130.  
    131. #box2 li a:hover {
    132.  
    133.         background-image: url(../images/);
    134.         background-repeat: no-repeat;
    135.         text-decoration: none;
    136.         }
    137.  
    138. #box3 li a:hover {
    139.  
    140.         background-image: url(../images/);
    141.         background-repeat: no-repeat;
    142.         text-decoration: none;
    143.         }
    http://img820.imageshack.us/i/floatproblem.png/
     
    Zuletzt bearbeitet: 09.01.2011
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Was soll wie wo floaten? Mach mal ne Skizze (oder nen Bild von deiner PS-Vorlage) und bezeichne die Sachen so, wie du sie jetzt bezeichnet hast. Das da oben ist ziemlicher Kauderwelsch, der zeigt, das du nicht weißt, was wie zusammenhängt.
     
    #2      
  3. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Wenn deine ul´s floaten sollen musst du es nicht in die li schreiben sondern in die ul, weil so floaten die li´s nur in den ul´s...!

    Und wie schon cebito gesagt hat poste mal einen Screen wie es sein soll, denn so ganz will mir dein code nicht klar sein :uhm:

    wenn ich dein bild richtig deute müsste es so sein:

    Code (Text):
    1. #box1 {float: left; height: 10px; width: 10px;}
    2. #box2 {float: left; height: 10px; width: 10px;}
    3. #box1 {float: right; height: 10px; width: 10px;} /* Wenn es über die volle Breite geht, sonst left anstatt right */
    Die Werte sind nur Platzhalter und müssen durch deine ersetzt werden...!

    Beste Grüße
    Crazylopp
     
    Zuletzt bearbeitet: 09.01.2011
    #3      
  4. bonafide69

    bonafide69 Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    8
    Geschlecht:
    männlich
    Software:
    Photoshop 8
    Kameratyp:
    Digikam
    Boxen floaten nicht nebeneinander
    #4      
  5. CanTk

    CanTk Nicht mehr ganz neu hier

    Dabei seit:
    20.08.2009
    Beiträge:
    59
    Geschlecht:
    männlich
    Software:
    Notepad++, DW, PS, InD, Illu
    Kameratyp:
    Nikon D40
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Völlig falsch. o0

    Wozu so viele UL?


    <div id="gruen">
    <ul>
    <li><a href="ä"><img src="bild.jpg" width="" height="" alt="" /> </a></li>
    <li><a href="ä"><img src="bild.jpg" width="" height="" alt="" /> </a></li>
    <li><a href="ä"><img src="bild.jpg" width="" height="" alt="" /> </a></li>
    </ul>
    </div>



    im CSS dann

    #gruen li {
    float:left;
    }

    #gruen li a {
    display:block;
    width:100%;}


    So hab ichs mal frei hand geschrieben, sollte funktionieren.
     
    #5      
  6. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Auch wenn es nur nebensächlich ist, trotzdem wollte ich es dir gerne sagen.
    Du kannst dein Stylesheet etwas schlanker gestalten was die einzelnen Angaben angeht.

    Beispiel statt:
    Code (Text):
    1.  
    2. #box3 li a:visited {
    3.  
    4.         background-image: url(../images/);
    5.         background-repeat: no-repeat;
    6.         color: #000000;
    7.         float: ;
    8.         }
    9.  
    kürzen in:

    Code (Text):
    1.  
    2. #box3 li a:visited {
    3.  
    4.         background: #000000 url(../images/) no-repeat;
    5.         float: ;
    6.         }
    7.  
    Grüße Otto
     
    #6      
  7. bonafide69

    bonafide69 Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    8
    Geschlecht:
    männlich
    Software:
    Photoshop 8
    Kameratyp:
    Digikam
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Danke aber auch hier sind die boxen nicht nebeneinander angeordnet vielleicht solltest Du Deinen Code mal probieren, vielleicht ist nur bei mir der wurm drin.
     
    #7      
  8. CrazyLopp

    CrazyLopp Hat es drauf

    1
    Dabei seit:
    07.10.2009
    Beiträge:
    2.104
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Ps, Coda, Blender, Maya, phpDesigner 8 und co.
    Kameratyp:
    Canon 1000D, 450D
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Du hast du etwas verwechselt und zwar den Hintergrund und die Textfarbe ;) Da besteht ja immer noch ein kleiner unterschied...

    @bonafide69 was funktioniert bei dir denn nicht?
     
    #8      
  9. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Hast recht. Aber Rest passt soweit. :rolleyes:
     
    #9      
  10. bonafide69

    bonafide69 Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    8
    Geschlecht:
    männlich
    Software:
    Photoshop 8
    Kameratyp:
    Digikam
    Boxen floaten nicht nebeneinander
    Ich möchte ein Menü erstellen das nur aus drei Bildern besteht die in den Boxen 1-3 platziert werden. Diese Bilder sollen nebeneinander platziert werden. Diese besagte Platzierung funktioniert nicht richtig. Immer sprengt es mir die Boxen auseinander.

    Stimmt wohl aber trägt nicht zur Lösung des Problems bei

    //Edit: Bitte Edit-Button benutzen!
    mfg Crazylopp


    Sorry bin nicht so oft in Foren unterwegs:(
     
    Zuletzt von einem Moderator bearbeitet: 09.01.2011
    #10      
  11. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Aber wir sind ja lernfähig ;)
     
    #11      
  12. bonafide69

    bonafide69 Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    8
    Geschlecht:
    männlich
    Software:
    Photoshop 8
    Kameratyp:
    Digikam
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    mit Antworten die zur Lösung beitragen gerne ;)

    Also Cebito da Du anscheinend ein richtiger CSS Fachmann bist kannst Du mir evtl einmal auch eine schlaue Antwort bezüglich meines Problems geben.
    Habe es nun soweit hinbekommen allerdings zeigt mir nur der Firefox Browser die Boxen nebeinander und alle anderen Browser nicht woran kann das liegen immer noch ein Fehler im Code?

    Hier aktuelle Code:

    <div id="unten">

    <div id="boxmenu">
    <ul>
    <li><a href="#"><img src="http:/images/bild1.png"></li>
    <li><a href="#"><img src="http:/images/bild2.png"></li>
    <li><a href="#"><img src="http:/images/bild3.png"></li>
    </ul>
    </div>
    </div>

    CSS:

    #unten {
    border: 0px dashed silver;
    width: 870px;
    height: 144px;
    margin-top: 10px;
    margin-left: 15px;
    background-color: #;
    border: 0px solid #b30202;
    }

    #boxmenu ul {
    display: inline;
    list-style-type: none;

    }

    #boxmenu li {
    float:left;
    display: block;
    }



    #boxmenu li a {
    display:block;
    width: 100%;
    height: 144px;
    }

    img {
    border:none;
    }

    Die Drei Bilder haben eine Höhe von 144px; Bild 1 und 3 eine Breite von 280px und das Bild in der Mitte eine Breite von 310px ur zur Info

    Wenn Du es weisst wäre ich froh für eine Antwort, wenn nicht dann na ja
     
    Zuletzt bearbeitet: 09.01.2011
    #12      
  13. 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
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    bei dem code
    HTML:
    1.  
    2. <div id="unten">
    3.  
    4.                <div  id="boxmenu">
    5.                       <ul>
    6.                           <li><a href="#"><img src="http:/images/bild1.png"></li>
    7.                           <li class="mitte"><a href="#"><img src="http:/images/bild2.png"></li>
    8.                           <li><a href="#"><img src="http:/images/bild3.png"></li>
    9.                        </ul>
    10.               </div>
    11. </div>
    12.  
    kannst du die sache so angehen:
    - die "ul" muss als block angezeigt werden (also display:inline raus).
    die Listenelemente mit dem display:block brauchen eine Breite, damit sie überhaupt floaten können (ohne breitenangabe nehmen sie bei display:block die volle breite des umgebenden Elements ein, und könnten dann folglich nur untereinander dargestellt werden.)
    Code (Text):
    1.  
    2. #boxmenu li{
    3.   list-style: none;
    4.   display: block;
    5.   width: 280px;
    6. }
    7. #boxmenu li.mitte{
    8.   width:310px;
    9. }
    10.  
    Code (Text):
    1.  
    2. border: 0px dashed silver;
    3.  
    wenn ein Border keine Dimension hat (0) dann wird er weder "dashed" noch farbig angezeigt (das selbe zweimal in einem Selktor zweimal zu machen ist doppelt unsinnig.)
    wenn deine paddings und margins in der css nicht auf 0 gesetzt sind, wäre es eine gute Sache das noch nachzuholen
    Code (Text):
    1.  
    2. *{
    3.   margin: 0;
    4.   padding 0;
    5. }
    bitte für code & html die entsprechenden Bereiche benutzen.
     
    Zuletzt bearbeitet: 10.01.2011
    #13      
  14. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Habe ich mir das nicht richtig durchgelesen oder müssten nicht die a-Tags für die Anker auch wieder geschlossen werden?
     
    #14      
  15. bonafide69

    bonafide69 Noch nicht viel geschrieben

    Dabei seit:
    23.12.2009
    Beiträge:
    8
    Geschlecht:
    männlich
    Software:
    Photoshop 8
    Kameratyp:
    Digikam
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Danke für die Antwort aber auch diese Variante funktioniert nicht. Box3 wird immer unten darunter angeordnet. Habe alles so geändert wie Du es mir beschrieben hast. Hast Du den Code von Dir probiert? Ich verzweifle, :uhm: ist das denn so schwer? Wenn es geht vielleicht könntest Du den funktionierenden Code kurz posten. Danke im voraus.
     
    #15      
  16. 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
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    ja, die müssen natürlich geschlossen werden.

    @bonafide
    bevor du an der Sache weitergrübelst, solltest du das html/css deiner Seite validieren The W3C Markup Validation Service / The W3C CSS Validation Service
    und natürlich eine geeignete Doctype verwenden.

    für weitere Anfragen zu der Sache poste doch bitte den vollständigen code der ganzen Seite (nachdem er validie ist), besser noch hochladen und hier einfach den Link posten.
     
    #16      
  17. CanTk

    CanTk Nicht mehr ganz neu hier

    Dabei seit:
    20.08.2009
    Beiträge:
    59
    Geschlecht:
    männlich
    Software:
    Notepad++, DW, PS, InD, Illu
    Kameratyp:
    Nikon D40
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6.  <style type="text/css">
    7.  
    8. #gruen {
    9.     width:180px;
    10.     background-color:#0F0;
    11.     height:200px;}
    12.    
    13. #gruen ul {
    14.     display:inline;}
    15. #gruen li {
    16. float:left;
    17. list-style:none;
    18. }
    19.  
    20. #gruen li a {
    21. display:block;
    22. width:100%;}
    23. </style>
    24. </head>
    25. <body>
    26.  
    27. <div id="gruen">
    28. <ul>
    29. <li><a href="#"><img src="bild.jpg" width="60" height="60" alt="" border="0" /> </a></li>
    30. <li><a href="#"><img src="bild.jpg" width="60" height="60" alt="" border="0" /> </a></li>
    31. <li><a href="#"><img src="bild.jpg" width="60" height="60" alt="" border="0" /> </a></li>
    32. </ul>
    33. </div>
    34.  
    35.  
    36.  
    37.  
    38.  
    39. </body>
    40. </html>
    Weiß nich was daran jetzt das Problem war, das meiste steht schon in meinem ersten Post.
    Gruß Can
     
    #17      
  18. Kayko

    Kayko wissbegierig

    Dabei seit:
    23.11.2010
    Beiträge:
    105
    Geschlecht:
    weiblich
    Ort:
    Holsteinische Schweiz
    Software:
    CS 5.5
    Boxen floaten nicht nebeneinander
    AW: Boxen floaten nicht nebeneinander

    Hallo,

    vielleicht versuchst du es mal ohne Floaten:
    Zur Verdeutlichung habe ich den Hintergrund des umschließenden Div's grün gefärbt!
    CSS:
    Code (Text):
    1.  
    2. * { margin:0; padding: 0; }
    3.  
    4. #gruen{
    5.  min-width: 890px;          /*Verhindert das bei zu wenig Platz die Bilder untereinander rutschen, wenn kein Rahmen um die Bilder ist, kann es auf ca 870px geändert werden*/
    6.  height: 150px;
    7.  background-color:#0C0;
    8. }
    9. /* Mindestbreite für den IE6 für die Bilder mit Rändern - er versteht aber keine min-width - ohne Ränder kann die Weite reduziert werden*/
    10. * html #gruen {    
    11. width: 890px;}
    12.  
    13. #gruen ul{
    14.     display: inline;    
    15. }
    16.  
    17. #gruen li{
    18. display:inline;    
    19. }
    20.  
    21. #gruen img,
    22. #gruen a{
    23.     border: none;
    24.     text-decoration: none;
    25. }
    26. #gruen a img{
    27.     border: 1px solid #FF0;
    28.    
    29. } /*Die Ränder sind nur zur Verdeutlichung - wenn kein border, dann kann #gruen um einige Pixel kleiner gemacht werden. Dann aber auch keine Ränder bei hover und active.*/
    30.  
    und hier der HTML-Code (als Doctype habe ich
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2.     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    verwendet.

    Code (Text):
    1. <div id="gruen">
    2. <ul>
    3. <li><a href="#"><img src="Grafiken/transpx.gif" width="280" height="144" alt="" /> </a></li>
    4. <li><a href="#"><img src="Grafiken/transpx.gif" width="310" height="144" alt="" /> </a></li>
    5. <li><a href="#"><img src="Grafiken/transpx.gif" width="280" height="144" alt="" /> </a></li>
    6. </ul>
    7. </div>
    Bei mir funktioniert es im IE6 (das größte Problemkind der IEs!) und im neusten FF. Du solltest noch den hover-Effekten etc. eine evt. vorhandenen Rahmen bzw. die "text-decoration" nehmen.
     
    #18      
x
×
×