[HTML] Eine Blöde Frage zu div-Boxen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von h3llr4is3r, 29. November 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 29. November 2007
    Eine Blöde Frage zu div-Boxen

    Hallo,

    Ich habe vor ein paar tagen einaml angefangen mir ne homepage mit div-boxen zu erstellen (vorher immer tabellen benutzt ).

    Nun habe ich folgendes problem:Ich will zwei boxen nebeneinander setzen. allerdings soll die kürzere immer genauso lang sein wie die längere.

    Das heisst im Klartext: Beide Boxen sollen immer die selbe größe haben.

    Habe hier mal den quelltext gepostet:

    index.html:
    HTML:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     <head>
     <meta http-equiv="content-type" content="text/html; charset=windows-1250">
     <title>Test</title>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     </head>
     <body>
    
    <div id="links">
     &nbsp;
    </div>
    
    <div id="rechts">
     &nbsp;
    </div>
    
    </body>
    </html>
    
    
    Style.css
    HTML:
    
    /* CSS Document */
    
    #links
    {
    float:left;
    width:20%;
    background:#ff0000;
    }
    
    #rechts
    {
    float:right;
    width:80%;
    background:#000000;
    }
    
    Vielen Dank schonmal im vorraus!
     
  2. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    Versteh ich nicht ganz
    Du willst eine obere Divbox, und drunter 2 Boxen nebeneinander?
    Im längenverhältniss 50:50?
    Vllt würde ne Skizze helfen was genau du vorhast, so wie es jetzt ist, hat das nichts mit gleichlang ect zu tun

    Spiel mal mit den Widthvariabeln rum ... versuchs mal mit Pixelwerten (zB 300px) oder mit zusätzlichen *-Werten, zb 300px, * , 300px .... dann ist * genau das, was nach 300 und 300 noch übrig bleibt
    hoffe ich konnte helfen

    Ausserdem stimmt bei den %Zahlen was nicht .... die eine ist 90% groß, die andere 50 ... sind schon 140

    MfG
    Erich
     
  3. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    Hab den quelltext nochmal editiert... ahb nen bissel rumprobiert, deswegen stand da noch irgendwelcher mist drinne =)

    Nehmen wir an ich habe in der einen box einen text mit 30 zeilenumbrüchen und in der anderen einen text mit 10 zeilenumbrüchen. Die box mit den 10 zeilenumbrüchen soll jetzt allerdings genauso lang werden, wie die mit den 30. Und wenn in der mit den 30 umbrüchen nun etwas dazu geschrieben wurde und jetzt meinetwegen 60 drinne sind, soll die andere genauso lang werden.


    hoffe du verstehst jetz worauf ich hinaus will
     
  4. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    .... eigentlich spam, aber naja

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html>
     <head>
     <meta http-equiv="content-type" content="text/html; charset=windows-1250">
     <title>Test</title>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     <style type="text/css">
     #links {
     float: left;
     width: 20%;
     }
     
     #rechts {
     float: left;
     width: 80%;
     }
     </style>
     </head>
     <body>
     <div id="links">
     a
     </div>
     <div id="rechts">
     b
     </div>
     </body>
    </html>
     
  5. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    Ist das nicht genau das selbe geblieben?

    e/
    hm. sieht bei mir so aus

    Download offline!
     
  6. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    Nach einem float tag muss immer ein clear tag kommen, ansonsten gibt es Probleme bei der Ausgabe. Demnach sollte dein Code so aussehen:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <title>Test</title> 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
    <style type="text/css"> 
    #links { 
     float: left; 
     width: 20%; 
    }
     
    #rechts { 
     float: left; 
     width: 80%; 
    } 
    </style> 
    </head> 
    <body> 
     <div id="links"> a </div> 
     <div id="rechts"> b </div> 
     <div style="clear:both;"></div>
    </body>
     </html>
    
    Jetzt sollten die beiden Sachen nebeneinander stehen ....
     
  7. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    ich glaube er hat nicht das problem das zwei boxen nebeneinander stehen sollen

    sondern das beide gleich lang sein sollen egal welcher inhalt drin steht.. die kürzere box soll einfach so lang wie die längere gezogen werden

    so hab ichs zumindestens jetzt verstanden


    und dieses problem ist nur durch n paar tricks zu lösen, da die zwei div boxes ja unabhängig voneinander existieren und deshalb nich so einfach auf die gleiche höhe zu bringen sind


    http://www.alistapart.com/articles/fauxcolumns/
    http://www.alistapart.com/articles/holygrail/

    schau dir die zwei sachen mal an.. leider nur auf englisch, aber vllt übersetz ich das mal die tage und blogge es ^^
     
  8. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    ich würd auf jeden fall mit festen pixel-werten arbeiten. de.selfhtml.org sag ich nur xD

    mfg
    fake
     
  9. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    kommt auch drauf an.. bei den meisten websites kann man die breite wohl in festen pixelbreiten setzen, wenn z.B. ein Header schon eine gewisse größe vorgibt (bsp 1000px breit).. weil dann sollte der rest der seite auch immer gleich breit sein

    aber wenns das design zulässt warum nicht nur prozent angaben?? dann is das ganze viel barrierefreier..

    die höhe bestimme ich beim content nie.. sollte ja dynamisch sein je nachdem wieviel text desto länger der content bereich


    grüße
    w!ns0ck
     
  10. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    Jeder erfahrene Designer wird dir sagen das feste Pixelwerte IMMER Probleme bereiten weil es keine einheitliche Definition und Interpration bei "px" gibt, somit ist dein Einzeiler eigentlich nicht so viel Wert in einer UG - Comm. für Multimedia und Technik.

    @Threadersteller, diese Designvorschläge gehören in die Zeit der Tabellenlayouts und sind bei möglichst sauberer Semantik nur mit Umwegen,Hacks,JS o.Ä. zu bewerkstelligen, oder du vergibst beiden Spalten eine feste Höhe und setzt einen ordentlich overflow .... ansonsten wurde alles ja schon gesagt.
     
  11. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    naja, so schlimm sind feste Pixelwerte auch nicht..

    die meisten Websites sind auch mit festen Pixelbreiten gecodet

    Pixelangaben sind im Gegensatz zu pt, % oder em Angaben halt auf ziemlich jedem System gleich

    und da die meisten Websites eh einen Header mit fester Breite haben kann man ruhig das Design selbst auch mit Pixelangaben erstellen..

    das einzige ist halt das Pixel bei unterschiedlichen Auflösungen anders wirkt, 1px bei einer Bildschirmauflösung von 1600x1200 Pixel ist ganz anders als bei 800x600 Pixel.

    daraus resultiert das man mit einer höheren Auflösung mehr Rand auf der Website hat

    klar sind Websites mit Prozent-angaben schöner, barrierefreier und füllt bei jeder Auflösung den gesamten Bildschirm aus

    aber die Praxis sieht nun mal so aus, das die meisten Designs so in Photoshop entworfen sind, das sie immer die gleiche Pixelbreite haben


    !!!!! was gar nicht geht, sind Schriftarten mit Pixel zu formatieren.. dann werden nämliche jegliche Browsereinstellungen bezüglich der Schriftgröße ignoriert.
    was alle benachteiligt, die etwa aus Gründen einer Sehbehinderung den Schriftgrad auf sehr groß eingestellt haben.. also überhaupt nicht barrierefrei

    Schriftformatierung immer in em
     
  12. 29. November 2007
    AW: Eine Blöde Frage zu div-Boxen

    so... problem wurde gelöst mithilfe von w!ns0ck, genau das was ich gesucht habe!

    @MakenX:
    Ja, ich habe selber öfters mal probleme mit diesen festen größenangaben, deswegen hab ich jetzt fast alles in prozent gemacht... allerdings ist der contentbereich und die navigation jetz eine feste größe, allerdings noch schmal genug, um es von 640x480 bis 1920x1200 angenehm angucken zu können



    Hab euch mal alle bewertet...

    ~closed
     
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.