Ergebnis 1 bis 9 von 9

Thema: div der grösse des übergeordneten divs anpassen

  1. #1
    Teeny
    Registriert seit
    08.09.2006
    Ort
    Zürich [ch]
    Beiträge
    47
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard div der grösse des übergeordneten divs anpassen

    ja ich schon wieder...

    Wenn ich zwei div's nebeneinander in einem anderen div habe, kann ich ja mit "*" festlegen, dass sich die höhe dem inhalt anpasst.
    Wie mache ich es jetzt, dass das div daneben gleichgross ist?
    ich dachte mal das müsste mit "100%" gehen dass es sich der maximalen grösse des übergeordneten div's anpasst, aber geht ned...

    Irgendwer vorschläge?
    merci


    hier Quelltext:
    css:
    #over {
    background-color: blue;
    padding: 5px;
    float: left;
    }

    #ab {
    background-color: green;
    width: 50px;
    height: 150px;
    float: left;
    }

    #ba {
    background-color: yellow;
    width: 50px;
    height: "100%";
    float: left;
    }
    html:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" lang="de" xml&#58;lang="de">
    <head>
             <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
             <meta http-equiv="content-language" content="de" />
             <title>Testi</title>
             <link rel="stylesheet" href="probe.css" type="text/css" />
    </head>
    <body>
    	<div id="over">
    	<div id="ab">
    		
    
    text 1</p>
    	</div>
    	<div id="ba">
    		
    
    text 2</p>
    	</div>
    	</div>
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ähm, liegt das nur in deiner Veranschaulichung, oder willst du wirklich für den ersten div nen festen Pixelwert haben? - Dann wäre es aber wohl zu einfach

    Also wenn, dann müssen ja beide 100% gesetzt werden.

    Ansonsten lies mal hier http://xhtmlforum.de/32115-netscape-...spaltigem.html
    das müsste dir helfen
    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    08.09.2006
    Ort
    Zürich [ch]
    Beiträge
    47
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hmmm okey, es funktioniert, wenn ich dem übergeordneten div eine feste grösse gebe.
    Aber kann ich es jetzt auch machen, dass das übergeordnete div die höhe annimmt, welche das div mit text darunter hat?
    Ich meine dass sich das ganze anpasst, je mehr text es hat?
    weil sonst ist es ein wenig mühsam

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Der übergeordnete div nimmt die Höhe der untergeordneten an, sofern dessen Höhe nicht durch einen height-Wert begrenzt wird.
    begrenzt wird.

    Bei variablem Text zweier div's kannst du mit Faux columns arbeiten.

    Eine weitere Möglichkeit bietet dieser Code:
    CSS
    Code:
    body
    &#123;margin&#58;0;
    padding&#58;0;&#125;
    
    
    #wrapper
    &#123;
    width&#58;900px;
    margin&#58;0 50px;
    background&#58; #CAFF70;
    border-right&#58; 210px solid #98F5FF;
    &#125;
    
    #innenbox
    &#123;
    margin-left&#58; -50px;
    margin-right&#58; -160px;
    padding&#58; 5px;
    
    &#125;
    
    #rechtsbox
    &#123;
    position&#58; relative;
    left&#58;5px;
    float&#58; right;
    width&#58; 200px;
    margin-right&#58; -200px;
    &#125;
    
    #contentbox
    &#123;
    width&#58;px;
    height&#58; 1%;
    margin-left&#58;50px;
    
    &#125;
    
    .clear
    &#123;
    clear&#58;both;
    &#125;
    HTML
    Code:
    <body><h1 style="text-align&#58;center;">header</h1>
    <div id="wrapper">
            <div id="innenbox">
    
    
                    <div id="rechtsbox">
    
    erste Zeile Rechtsbox</p>
    
    zweite Zeile Rechtsbox</p>
    
    dritte Zeile Rechtsbox</p></div>
    
                    <div id="contentbox">
    
    erste Zeile Contentbox</p>
    
    zweite zeile Contentbox</p>
    
    
    erste Zeile Contentbox</p>
    
    zweite zeile Contentbox</p>
    
                    </div>
    
                    <div class="clear"></div>
    
    </div>
    </body>

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    08.09.2006
    Ort
    Zürich [ch]
    Beiträge
    47
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich habe das ganze jetzt mal anders gelöst...
    einfach dem übergeordneten div die farbe des rechten div's zugeordnet.
    Jetzt muss man einfach schauen, dass das linke div immer länger ist *gg*
    (wobei das wohl kaum ein problem sein wird)

    Aber zu deinem Vorschlag sejuma, da habe ich noch nicht gerade den durchblick ^^
    Denn was ist zum beispiel das "clear:both;"?
    Angehängte Grafiken Angehängte Grafiken

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Probier's nochmal damit:
    Code:
    body
    &#123;margin&#58;0;
    padding&#58;0;&#125;
    
    
    #wrapper
    &#123;
    width&#58;700px;
    margin&#58;0 50px;
    background&#58; #CAFF70;
    border-right&#58; 210px solid #98F5FF;
    &#125;
    
    #innenbox
    &#123;
    margin-left&#58; -50px;
    padding&#58; 5px;
    
    &#125;
    
    #rechtsbox
    &#123;
    position&#58; relative;
    left&#58;10px;
    float&#58; right;
    width&#58; 200px;
    margin-right&#58; -200px;
    &#125;
    
    #contentbox
    &#123;
    
    height&#58; 1%;
    margin-left&#58;50px;
    
    &#125;
    
    .clear
    &#123;
    clear&#58;both;
    &#125;
    </style>
    
    </head>
    <body><h1 style="text-align&#58;center;">header</h1>
    <div id="wrapper">
            <div id="innenbox">
    
    
                    <div id="rechtsbox">
    
    erste Zeile Rechtsbox</p>
    
    zweite Zeile Rechtsbox</p>
    
    dritte Zeile Rechtsbox</p></div>
    
                    <div id="contentbox">
    
    erste Zeile Contentbox</p>
    
    zweite zeile Contentbox</p>
    
    
    erste Zeile Contentbox</p>
    
    zweite zeile Contentbox</p>
    
                    </div>
    
                    <div class="clear"></div>
    
    </div>
    Wichtig ist, dass die Seite einen doctype hat.

    Das clear brauchst du, wenn du unter den div's z.B. noch einen footer anbringen möchtest, da vorher mit float gearbeitet wurde. http://css-technik.de/css-examples/219_9/

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    08.09.2006
    Ort
    Zürich [ch]
    Beiträge
    47
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    danke, ich werds mir nochmals in ruhe angucken

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    08.09.2006
    Ort
    Zürich [ch]
    Beiträge
    47
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    lol, über ein Jahr später und ich finde mit dem gleichen Problem meinen eigenen Post xD
    Page komplett überarbeitet, aber wieder mal zum gleichen Problem gefunden...
    Das letzt mal konnte ich das Problem umgehen, wie ich gerade im Quelltext der alten Datei gemerkt habe...

    -----------------------------------------------------------

    Fast gleiches Problem...
    ein div für den Inhalt wird je nach Text grösser oder kleiner.
    in diesem div hats 2 divs auf der gleichen ebene, die halt so gross sein sollen wie das übergeordnete div...

    Code:
    <div id="content">
      <div id="txt">
        blabla
      </div>
      <div id="border">
      </div>
    </div>
    Oder was natürlich auch toll wäre, ist, wenn man einen rahmen per css erstellen könnte, der aus einer grafik aufgebaut ist, das würde mein problem auch lösen...

    Wer eine idee?
    Ich danke jetzt schon

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    08.09.2006
    Ort
    Zürich [ch]
    Beiträge
    47
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ou... falscher Alarm xD
    konnte mein problem mit dem Rahmen lösen...
    Habe bei google nichts gefunden, aber dann fiels mir was ein, was geht xD
    Natürlich die Grafik im div als Hintergrund-grafik einfügen...
    und im css entsprechend formatieren xD

    Ich schreibe die Lösung mal hier rein, vielleicht kanns ja jemand brauchen oder ich selbst stosse wieder drüber xD

    css:
    Code:
    #content &#123;
      background-image&#58; url&#40;media/images/border.png&#41;;
      background-repeat&#58; repeat-y;
      background-position&#58; right;
      &#125;
    und html:
    Code:
    <div id="content">
      blabla
    </div>
    dann brauchts die anderen zwei divs auch ned mehr...

    Grüsse und gut Nacht

Ähnliche Themen

  1. Grösse des Bildes anpassen
    Von MaryJane im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 11.01.2008, 16:27
  2. KB Grösse verkleinern
    Von Simple Plan im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 6
    Letzter Beitrag: 26.08.2007, 18:54
  3. 3 divs + seitengröße anpassen?!
    Von Muskatnussnolog im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 25.08.2007, 21:20
  4. Programm grösse
    Von ::RMB:: im Forum Computer - Internet Forum
    Antworten: 7
    Letzter Beitrag: 08.06.2005, 00:00
  5. Grösse von Bildern herausfinden
    Von ::RMB:: im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 06.04.2005, 13:21

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •