nicht angemeldet
DIVs nicht umbrechen
Gunnar BittersmannHallo, anbei ein funktionsfähiger Ausschnitt aus meinem Projekt:
<html>
<head>
<style>
@CHARSET "ISO-8859-1";
DIV {
font-family: Helvetica, Verdana, Tahoma, Arial, sans-serif;
font-size: 15px;
float: left;
height: auto;
width: auto;
position: relative;
text-align: center;
}
DIV.box {
background-color: rgb(238, 238, 238);
border: 1px solid rgb(0, 102, 153);
padding: 5px;
margin: 5px;
min-width: 30px;
border: 1px solid rgb(0, 102, 153);
}
DIV.content {
background-color: rgb(255, 255, 255);
white-space: nowrap;
height: 20px;
}
DIV.container{
clear: both;
overflow-x: scroll;
max-width: 1000px;
}
DIV.line {
clear: both;
height: 42px;
background-color: rgb(200, 200, 200);
}
</style>
</head>
<body>
<input id="input">
<button
onclick="new function(){document.getElementById('content1').style.width=document.getElementById('input').value;document.getElementById('content2').style.width=document.getElementById('input').value};">Update</button>
<br />
<div class="container box">
<div class="line">
<div id="content1" class="content box"></div>
<div id="content2" class="content box"></div>
</div>
<div class="line">
<div id="content3" class="content box"></div>
<div id="content4" class="content box"></div>
</div>
</div>
</body>
</html>
Wenn ich die content-DIVs vergrößere (über das Inputfeld & den Button), dann vergrößert sich automatisch auch das line-DIV und das container-box-DIV. Bei Werten von mehr als ca. 500 vergrößert sich der Container nicht mehr, was ja auch richtig ist, da max-width auf 1000 gesetzt wurde.
Dabei wird die zweite content-Box innerhalb des line-DIVs umgebrochen in eine neue "Zeile". Was ich allerdings haben möchte, ist, dass sich das line-DIV auf >1000 erweitert, sodass beide content-Boxen rein passen und der Scrollbalken des Container genutzt werden kann. (So, wie man es bei Werten von über ca. 1000 sehen kann, wenn eine einzige content-Box schon größer als der Container ist.)
Wie geht das?
-
@@Sadret:
nuqneH
Hallo, anbei ein funktionsfähiger Ausschnitt aus meinem Projekt:
<html>
Quirksmodus. Das ist nicht das, was ich „funktionsfähig“ nennen würde. Den Quirksmodus solltest du mit geeigneter DOCTYPE-Angabe verhindern. Wenn die DOCTYPE-Angabe ergänzt wird, funktioniert allerdings dein Script nicht mehr. Behebe dies. > ~~~html <style> > [code lang=css]@CHARSET "ISO-8859-1"; ~~~[/code] Doppelfehler: „Wenn Stil-Angaben in ein Dokument eingebettet sind, ist keine @charset-Regel nötig; dann darf auch keine verwendet werden. Diese Regel ist nur zur Verwendung in verlinkten Stylesheets gedacht.“ [[qa-css-charset](http://www.w3.org/International/questions/qa-css-charset)] Zum anderen denke ich, dass der Bezeichner klein geschrieben werden muss: `@charset "ISO-8859-1";`{:.language-css} Und warum verwendest du überhaupt eine veraltete Zeichencodierung? Du solltest UTF-8 verwenden, immer und überall. > ~~~html <input id="input"> > <button > onclick="[code lang=javascript]new function(){ … }; ~~~">Update</button>[/code] Sieht aus wie ein Formulareingabefeld mit Absendebutton, verhält sich aber nicht so. Beim Bestätigen der Eingabe mit [Enter] passiert – nichts. Sollte aber. Warum sollte der Nutzer das Eingabegerät wechseln müssen und nach der Tastatureingabe mit der Maus clicken müssen? Mache daraus ein Formular (d.h. `<form action="">`{:.language-html}/`</form>`{:.language-html} außenrum), dann ist der Button ein Submit-Button und die Aktion wird auch per Tastatur ausgelöst. Qapla' -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Ich habe es jetzt mit JS gelöst, wäre aber trotzdem noch froh über eine CSS-Lösung.