Antworten auf deine Fragen:
Neues Thema erstellen

Boxen floaten nicht nebeneinander

B

bonafide69

Guest

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;
        }
 
Zuletzt bearbeitet von einem Moderator:

cebito

cebito

undefined

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

CrazyLopp

Hat es drauf

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
 
Zuletzt bearbeitet:
B

bonafide69

Guest

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

CanTk

Nicht mehr ganz neu hier

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

patrick_l

Hat es drauf

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
 
B

bonafide69

Guest

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

CrazyLopp

Hat es drauf

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
Zum Vergrößern anklicken....

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?
 
B

bonafide69

Guest

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
Zum Vergrößern anklicken....

Sorry bin nicht so oft in Foren unterwegs:(
 
Zuletzt bearbeitet von einem Moderator:
B

bonafide69

Guest

AW: Boxen floaten nicht nebeneinander

cebito schrieb:
Aber wir sind ja lernfähig ;)
Zum Vergrößern anklicken....

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 von einem Moderator:
sokie

sokie

Mod | Web

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.
 
Zuletzt bearbeitet:
aliasltb

aliasltb

LTB

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?
 
B

bonafide69

Guest

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.
Zum Vergrößern anklicken....

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

sokie

Mod | Web

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?
Zum Vergrößern anklicken....

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

CanTk

Nicht mehr ganz neu hier

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

Kayko

wissbegierig

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 129 (Mitglieder: 3, Gäste: 126)
Robots: 691

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben