[Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von HuNdI, 16. Januar 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 16. Januar 2009
    Also ich habe da eine Html Seite, folgend aufgebaut:

    <div 1>
    <div 2>bla</div 2>
    <div 3>bla</div 3>
    <div 4>bla</div 4>
    <div 5>bla</div 5>
    </div 1>


    Div 1 hat dabei eine bestimmte Breite und Höhe.
    Wenn diese Breite nach Div 3 überschritten wird, wird ein Zeilenumbruch und damit eine verticale Scrollleiste erzeuget. X(

    Dies möchte ich verhindern und stattdessen eine horizontale Scrollleiste haben.


    Jmd eine Idee? ?(
     
  3. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    PHP/HTML/CSS->Webtechnik.

    ~moved~
     
  4. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Was passiert mit div2 wenn du 1 überschreitest, weil du meinst, dass nur 3 dann nach unten rutscht.
    Wenn die Container in div1 die Breite von max div1 überschreiten werden sie automatisch weiter unten unter dem anderen div eingeordnet.
     
  5. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    So gehts:

    HTML:
    <!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>

.test {
 overflow-x:scroll;

 height:50px;
 width:100px;
}

div.c {
 display:incline;
 line-height:25px;
}

</style>
</head>

<body>

<div class="test">
 <div style="width:500px;">
 <div class="c">aaaaaaaa</div>
 <div class="c">aaaaaaaa</div>
 <div class="c">aaaaaaaa</div>
 <div class="c">aaaaaaaa</div>
 <div class="c">aaaaaaaa</div>
 </div>
</div>
</body>
</html>
    Wichtig ist die Breite des 2. Divs und inline in der class c.
     
  6. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    @H5N1: Ich erklär vll noch mal mit Zahlen^^

    Also:

    Div 1 ist 500px breit.

    Alle anderen sind 200px breit.

    Da div1+div2+div3 eine Breite von 600px haben, wird Div 3 in die nächste Zeile verschoben.

    Stattdessen möchte ich aber das Div 2-5 in der selben Zeile bleiben und man horizontal hin- und herscrollen kann.


    @StrikeFreedom:

    Sry aber das klappt bei mir nicht.
    Ich habe zwar einen horizontalen Scrollbalken aber die Divs liegen auch dort weiterhin untereinander.
     
  7. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Wie kann div1 500px und 600px breit sein?
    Wenn dann müsstest du
    div2-->600px
    div3-->600px
    div4-->200px
    div5-->200px
    +_________
    = 1600px
    also div1 gleich 1600px groß machen.

    Den Befehl für eine horizontale Scorllbar kenne ich den Befehl leider nicht.
    Bin nicht so gut in CSS, wird aber besser, also falls was falsch ist bitte nicht hauen
     
  8. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Hast dich shconmal mit Div-Elementen auseinandergesetzt? nicht wirklich oder? ;o]

    SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

    Wenn du richtig verstanden wurdest soll es so aussehen:
    position


    Les dir das mal durch:

    SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen


    z-index (Schichtposition bei Überlappung,
    overflow (Elementbereich mit übergroßem Inhalt),
    und sehr vieles mehr

    Gruß


    EDIT: Oder wie H5N1 sagt, du musst das erste DIV zwingend so breit machen damit überhaupt eine Horizontale scrollleiste erzeugt wird, wobei Scrollleisten im allgemeinen sehr nervend sind und Webseiten ohne auskommen sollten ;o]
     
  9. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Oh Sry ich meinte div2+div3+div4.


    Aber die genauen Größen sind auch egal.

    Geht einfach nur darum, dass die drei innenliegenden Divs breiter sind als das außenliegende und es deshalb zum Zeilenumbruch bei den Divs kommt.


    Das Div 1 darf übrigens nicht größer gemacht werden.



    @Acid Crash: Ich habe mich schon sehr viel mit Css auseinander gesetzt und SelfHtml bin ich auch von vorn bis hinten durch.


    Ich glaub aber ich muss das Problem noch mal ganz genau beschreiben^^
    Dazu eine Frage.. Wie kann ich hier ein Bild an den Beitrag anhängen? Oder anderswo ablegen.
     
  10. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    dann bleibt dir nur wie eben geschrieben z-index, sprich Überlappung weil du sonst den Browser nicht zwingend kannst die Divs nebeneinander zu stellen da er sich der Auflösung anpasst, denke ich

    Du willst die integrierten Blöcke Breiter machen als den übergeordneten Block, geht nicht, wie auch wenn der übergeordnete eine Größe vorgibt, bleibt nur überlappen ;o]


    EDIT

    einfach ImageShack - Best place for all of your image hosting and image sharing needs hochladen und mit
    [.img]adresse[./img] verlinken ^^ (punkte aus bbcode entfernen ;o])
     
  11. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    So funktioniert es bei mir im Firefox3 und IE (6 oder so)
    HTML:
    <style>
 .a{
 display:block; 
 width:500px;
 overflow-x:scroll;
 }
 .b{
 display:inline;
 float:left;
 }
 .c{
 display:block;
 width:200px;
 }
 </style>
</head>
<body>
 <div class="a">
 <div style="width:1000px;">
 <div class="b"><div class="c">aaaa1aaaa</div></div>
 <div class="b"><div class="c">aaaa2aaaa</div></div>
 <div class="b"><div class="c">aaaa3aaaa</div></div>
 <div class="b"><div class="c">aaaa4aaaa</div></div>
 <div class="b"><div class="c">aaaa5aaaa</div></div>
 </div>
 </div>
    Hoffe ich konnte helfen.
    MFG Ralphwiggum
     
  12. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Na mit den Bildern hat sich wohl erledigt.. das was Ralphwiggum geschrieben hat ist genau das was ich suche.. Ich bekomme es nur einfach nicht bei mir hin. (FF3)
     
  13. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?


    Also ich zitiere mich auch gerne selber, denn ich hab genau selbiges gesagt wie Ralph nur vertan mit dem das man es nicht scrollen kann.
    Nächstesmal musst du nur anmerken das man es vorkauen soll ;o]


    PS: bei mir funzt es in FF 3 ;o]
     
  14. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Tut mir leid ich hab diese Aussage anders interpretiert^^

    Und das Beispiel funktioniert bei mir auch.. Nur wenn ich dieses auf meinen Code umsetze klappt es nicht mehr.
     
  15. 16. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Hmm das poste mal den Code, aber bitte nicht im Thread, mach copy&link auf Frubar Paste oder so ]
     
  16. 17. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Werde ich am Montag tun.
     
  17. 19. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Also ich hab den da mal eingefügt den Code (nur relevante Ausschnitte).

    Einfach nach hundi suchen.
    (Link oder so geht nicht oder?)
     
  18. 19. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Verlinken wäre noch einfacher ;o]

    Hier der Code von Hundi: Frubar Paste


    leider gerade keine Zeit, aber findet sich sicher wer der den eben checken kann.
     
  19. 19. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Also, wenn ich das richtig hast du einen Fehler:

    Code:
    #pageZoom #zoomScroller {
    <---wenn du das so in rohform testest siehst du das es nicht erkannt wird. Ohne pageZoom gehts ;o]

    ID können im Gegensatz zu CLASS nicht kombiniert werden.



    Einmal mit deinem Code ohne #pageZoom


    PHP:
    < style >
     #zoomScroller {
             width : 606px ;
             overflow - x : scroll ;    
             height : 140px ;
             margin - left : 30px ;
             display : block ;
    }

    .     div_for_zoom_pics  {
             display : block ;
             width : 85px ;
    }

    .     zoom_slide_in  {
             display : inline ;
             float : left ;
    }
    </     style >

    <     div id = "zoomScroller" >
        <     ul id = "zoom_slide_list" >
            <     li  class= "zoom_slide_in" >
                <     div  class= "div_for_zoom_pics" >
                    <     img id = "pic0"  class= "zoomSmall selected"  height = "120"  alt = ""  src = "https://estore.rhiem.com/mandant/simonsig/images/products/3_22_3.jpg"  style = "opacity: 1;" />
                </     div >
            </     li >
            <     li  class= "zoom_slide_in" >
                <     div  class= "div_for_zoom_pics" >
                    <     img id = "pic1"  class= "zoomSmall"  height = "120"  alt = ""  src = "https://estore.rhiem.com/mandant/simonsig/images/products/3_22_2.jpg"  style = "opacity: 0.5;" />
                </     div >
            </     li >
            <     li  class= "zoom_slide_in" >
      .
      .
      .
      .
        </     ul >
    </     div >

    Einmal mit der Vorlage von Ralph, geht beides ;o]


    PHP:
    < style >
    .     zoomScroller  {
             width : 606px ;
             overflow - x : scroll ;    
             height : 140px ;
             margin - left : 30px ;
             display : block ;
    }

    .     zoom_slide_in  {
             display : inline ;
             float : left ;
    }

    .     div_for_zoom_pics  {
             display : block ;
             width : 85px ;
    }


    </     style >



      <     div  class= "zoomScroller" >
        <     div style = "width:1000px;" >
          <     div  class= "zoom_slide_in" >< div  class= "div_for_zoom_pics" > aaaa1aaaa </ div ></ div >
          <     div  class= "zoom_slide_in" >< div  class= "div_for_zoom_pics" > aaaa2aaaa </ div ></ div >
          <     div  class= "zoom_slide_in" >< div  class= "div_for_zoom_pics" > aaaa3aaaa </ div ></ div >
          <     div  class= "zoom_slide_in" >< div  class= "div_for_zoom_pics" > aaaa4aaaa </ div ></ div >
          <     div  class= "zoom_slide_in" >< div  class= "div_for_zoom_pics" > aaaa5aaaa </ div ></ div >
        </     div >
      </     div >
     
  20. 19. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Hmm.. ich glaube es hakt woanders.

    Die beiden Ids stellen keine Kombi sondern eine Historie dar.
    #pageZoom ist ein übergeordnetes Div, welches sich um den Code oben legt.
    Außerdem wurde der Style auch schon vorher angenommen. (Mit Firebug geprüft)

    Trotzdem hab ich mal mit Class und ohne vorhergehendes Div ausprobiert aber beides klappt nicht.
    Der Style wird in jedem Fall übernommen, aber nie bekomme ich die Divs dazu in einer Zeile zu bleiben.
     
  21. 19. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    hmmmm, schon sehr seltsam, die oben geposteten beiden Beispiele funktionieren 1A, samt Scrollbalken
     
  22. 19. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Es hat auf jeden Fall iwas mit den Divs um die Bilder zu tun.
    Ohne diese kann man nämlich auch ausrichten.

    Nur hab ich ka warum das auch mit Divs in diesen Beispielen klappt und bei mir nicht.
     
  23. 20. Januar 2009
    AW: [Html/Css] Zeilenumbruch mit mehreren Divs - wie verhindern?

    Ich habe es nun endlich gelöst
    Hier meine Lösung:

    Code:
    <style>
#zoomScroller {
 width:606px;
 overflow-x:auto; 
 overflow-y:hidden;
 height:140px;
 margin-left:30px;
}

.zoom_slide_in {
 display:inline;
 float:left;
 width:85px;
}
</style>

<div id="zoomScroller">
 <div id="zoom_slide_list" style="[COLOR="Red"]width: 850px[/COLOR];">
 <span class="zoom_slide_in">
 <img id="pic0" class="zoomSmall selected" height="120" alt="" src="bildpfad/3_22_3.jpg" />
 </span>
 <span class="zoom_slide_in">
 <img id="pic1" class="zoomSmall" height="120" alt="" src="bildpfad/3_22_4.jpg" />
 </span>
 <span class="zoom_slide_in">
 .
 .
 .
 .
 </div>
</div>

    Die Weite wird berechnet:     Anzahl Bilder * festgelegter Größe.
    Dort muss auf jeden Fall eine fest definerte Größe angegeben werden.


    Aber wieso dasw genau jetzt klappt und das andere Bsp nicht weiß ich jetzt auch nicht genau.. vll wegen den overflow-x & -y.

    Dank noch von mir fürs helfen
     
  24. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.