Boxen floaten nicht nebeneinander

bonafide69 · 09.01.2011

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:

<div id="unten">

               <ul id="box1"><img src="http://www.psd-tutorials.de/modules/Forum/images/box1.png"
                 <li><a href="#"></a></li>
               </ul>

               <ul id="box2"><img src="http://www.psd-tutorials.de/modules/Forum/images/box2.png"
                 <li><a href="#"></a></li>
               </ul>

               <ul id="box3"><img src="http://www.psd-tutorials.de/modules/Forum/images/box3.png"
                 <li><a href="#"></a></li>
               </ul>

         </div>

CSS:

Code:

#unten {
         border: 0px dashed silver;
         width: 870px;
         height: 144px;
         margin-top: 10px;
         margin-left: 15px;
         background-color: #99CC66;
         border: 0px solid #b30202;
         }
#box ul {
         margin: 0px;
         padding: 0px;
         list-style-type: none;
         border: 0px;
         display: inline;
         }

#box1 li {
         display: inline;
         }

#box2 li {
         display: inline;
         }

#box3 li {
         display: inline;
         }

#box1 li a {
         background-image: url(../images/);
         background-repeat: no-repeat;
         color: #000000;
         font-size: 14px;
         font-weight: normal;
         display: block;
         list-style: none;
         text-align: center;
         padding-top: 15px;
         width: 280px;
         height: 144px;
         float: left;

         }

#box2 li a {
         background-image: url(../images/);
         background-repeat: no-repeat;
         color: #000000;
         font-size: 14px;
         display: block;
         list-style: none;
         text-align: center;
         padding-top: 15px;
         width: 310px;
         height: 144px;
         float: left;

         }

#box3 li a {
         background-image: url(../images/);
         background-repeat: no-repeat;
         color: #000000;
         font-size: 14px;
         font-weight: normal;
         display: block;
         list-style: none;
         text-align: center;
         padding-top: 15px;
         width: 280px;
         height: 144px;
         float: left;
         }

#box1 li a:visited {

        background-image: url(../images/);
        background-repeat: no-repeat;
        color: #000000;
        font-size: 14px;
        font-weight: normal;
        display: block;
        list-style: none;
        text-align: center;
        padding-top: 15px;
        width: 280px;
        height: 144px;
        float: ;
        }

#box2 li a:visited {

        background-image: url(../images/);
        background-repeat: no-repeat;
        color: #000000;
        font-size: 14px;
        font-weight: normal;
        display: block;
        list-style: none;
        text-align: center;
        padding-top: 15px;
        width: 310px;
        height: 144px;
        float: ;
        }

#box3 li a:visited {

        background-image: url(../images/);
        background-repeat: no-repeat;
        color: #000000;
        font-size: 14px;
        font-weight: normal;
        display: block;
        list-style: none;
        text-align: center;
        padding-top: 15px;
        width: 280px;
        height: 144px;
        float: ;
        }

#box1 li a:hover {

        background-image: url(../images/);
        background-repeat: no-repeat;
        text-decoration: none;
        }

#box2 li a:hover {

        background-image: url(../images/);
        background-repeat: no-repeat;
        text-decoration: none;
        }

#box3 li a:hover {

        background-image: url(../images/);
        background-repeat: no-repeat;
        text-decoration: none;
        }

cebito · 09.01.2011

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.

CrazyLopp · 09.01.2011

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:

#box1 {float: left; height: 10px; width: 10px;}
#box2 {float: left; height: 10px; width: 10px;}
#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

bonafide69 · 09.01.2011

AW: Boxen floaten nicht nebeneinander

Danke aber ich hab doch oben schon einen Link zu einem Screen, wie es Ausehen soll, geposted! hier nochmal der Link:

CanTk · 09.01.2011

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.

patrick_l · 09.01.2011

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:

#box3 li a:visited {

        background-image: url(../images/);
        background-repeat: no-repeat;
        color: #000000;
        float: ;
        }

kürzen in:

Code:

#box3 li a:visited {

        background: #000000 url(../images/) no-repeat;
        float: ;
        }

Grüße Otto

bonafide69 · 09.01.2011

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.

CrazyLopp · 09.01.2011

AW: Boxen floaten nicht nebeneinander

DerOtto schrieb:
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:

#box3 li a:visited { background-image: url(../images/); background-repeat: no-repeat; color: #000000; float: ; }

kürzen in:

Code:

#box3 li a:visited { background: #000000 url(../images/) no-repeat; float: ; }

Grüße Otto

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?

patrick_l · 09.01.2011

AW: Boxen floaten nicht nebeneinander

CrazyLopp schrieb:
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?

Hast recht. Aber Rest passt soweit. :rolleyes:

bonafide69 · 09.01.2011

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

bonafide69 schrieb:
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

cebito · 09.01.2011

AW: Boxen floaten nicht nebeneinander

bonafide69 schrieb:
Sorry bin nicht so oft in Foren unterwegs

Aber wir sind ja lernfähig

bonafide69 · 09.01.2011

AW: Boxen floaten nicht nebeneinander

cebito schrieb:
Aber wir sind ja lernfähig

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

sokie · 10.01.2011

AW: Boxen floaten nicht nebeneinander

bei dem code

HTML:

<div id="unten">

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

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:

#boxmenu li{
  list-style: none;
  display: block;
  width: 280px;
}
#boxmenu li.mitte{
  width:310px;
}

Code:

border: 0px dashed silver;

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:

*{
  margin: 0;
  padding 0;
}

bitte für code & html die entsprechenden Bereiche benutzen.

aliasltb · 10.01.2011

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?

bonafide69 · 10.01.2011

AW: Boxen floaten nicht nebeneinander

sokie schrieb:
bei dem code

HTML:

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

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:

#boxmenu li{ list-style: none; display: block; width: 280px; } #boxmenu li.mitte{ width:310px; }

Code:

border: 0px dashed silver;

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:

*{ margin: 0; padding 0; }

bitte für code & html die entsprechenden Bereiche benutzen.

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.

sokie · 10.01.2011

AW: Boxen floaten nicht nebeneinander

aliasltb schrieb:
Habe ich mir das nicht richtig durchgelesen oder müssten nicht die a-Tags für die Anker auch wieder geschlossen werden?

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.

CanTk · 10.01.2011

AW: Boxen floaten nicht nebeneinander

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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Unbenanntes Dokument</title> 
 <style type="text/css">

#gruen {
	width:180px;
	background-color:#0F0;
	height:200px;}
	
#gruen ul {
	display:inline;}
#gruen li {
float:left;
list-style:none;
}

#gruen li a {
display:block;
width:100%;}
</style>
</head> 
<body> 

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





</body> 
</html>

Weiß nich was daran jetzt das Problem war, das meiste steht schon in meinem ersten Post.
Gruß Can

Kayko · 10.01.2011

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:

* { margin:0; padding: 0; }

#gruen{
 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*/
 height: 150px;
 background-color:#0C0;
} 
/* 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*/
* html #gruen {    
width: 890px;}

#gruen ul{
    display: inline;    
}

#gruen li{
display:inline;    
}

#gruen img,
#gruen a{
    border: none;
    text-decoration: none;
}
#gruen a img{
    border: 1px solid #FF0;
    
} /*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.*/

und hier der HTML-Code (als Doctype habe ich

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

verwendet.

Code:

<div id="gruen">
<ul>
<li><a href="#"><img src="Grafiken/transpx.gif" width="280" height="144" alt="" /> </a></li>
<li><a href="#"><img src="Grafiken/transpx.gif" width="310" height="144" alt="" /> </a></li>
<li><a href="#"><img src="Grafiken/transpx.gif" width="280" height="144" alt="" /> </a></li>
</ul>
</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.