| Autor |
Nachricht |
123456
Threadersteller
Dabei seit: 15.01.2006
Ort: Dresden
Alter: -
Geschlecht: 
|
Verfasst Fr 24.09.2010 22:58
Titel 100% width elemente nebeneinander |
  |
|
Hallo,
ich hab ein div in dem mehrere divs enthalten sind, welche nebeneinander platziert werden.
Die divs können eine feste Breite erhalten, hauptsache ist aber dass die breite jeweils mindestens 100% beträgt (also immer mindestens volle fensterbreite ..oder breiter)...also eine min-width
Ohne min-width funktionierts bereits...wie bekomme ich das MIT min-width hin? Dann bekomme ich die divs nicht mehr nebeneinander. (Das äußere Div kann man zur Not auch weglassen, brauch ich aber vlt später mal)
Dass das äußere Div keine feste Breite mehr haben kann, ist klar.
Code:
| Code: | <!--
<div id="inhalt">
-->
<div class="eins">
</div>
<div class="zwei">
</div>
<div class="drei">
</div>
<div class="vier">
</div>
<!--
</div>
-->
|
und
| Code: | #inhalt {
height:768px;
width:8032px;
background-color: #ffffff;
border: none; /*1px solid #564b47;*/
position:relative;
clear:left;
}
.eins, .zwei, .drei, .vier{
position:relative;
float:left;
border:1px solid green;
display:inline;
min-width:100%;
} |
Danke!!
|
|
| |
  |
 |
itek
Dabei seit: 08.03.2006
Ort: 127.0.0.1
Alter: -
Geschlecht:
|
Verfasst Sa 25.09.2010 19:24
Titel Re: 100% width elemente nebeneinander |
|
|
| 123456 hat geschrieben: | | Ohne min-width funktionierts bereits... |
Das bezweifel ich aber wirklich ganz stark!
| 123456 hat geschrieben: | Hallo,
Die divs können eine feste Breite erhalten, hauptsache ist aber dass die breite jeweils mindestens 100% beträgt (also immer mindestens volle fensterbreite ..oder breiter)...also eine min-width
|
Die Dinger sind verschachtelt, folglich bezieht sich die Breite immer auf das Elternelement ("inhalt"). Und 100% von 8032px sind nunmal 8032px. Alle Divs stehen somit untereinander – egal ob mit width oder min-width.
|
|
| |
|
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst So 26.09.2010 00:34
Titel Re: 100% width elemente nebeneinander |
|
|
| itek hat geschrieben: | | Alle Divs stehen somit untereinander – egal ob mit width oder min-width. |
Nein, ohne min-width passen die divs nebeneinander, da float die sog. shrink-to-fit-width hervorruft. Erst wenn er min-width: 100%; dazugibt, nimmt jedes div die vollen 8032px Breite ein (plus 2px für die seitlichen border-Werte, was seine Konstruktion unsauber werden lässt).
Was das Ziel der Aktion ist, ist mir allerdings unklar.
Zuletzt bearbeitet von heiko_rs am So 26.09.2010 00:38, insgesamt 2-mal bearbeitet
|
|
| |
|
|
itek
Dabei seit: 08.03.2006
Ort: 127.0.0.1
Alter: -
Geschlecht:
|
Verfasst So 26.09.2010 17:29
Titel
|
|
|
Da stand ich wohl etwas auf dem Schlauch.
Bin (fälschlicherweise) davon ausgegangen dass er eine width angibt - folglich keine "auto"-Angabe hat und deshalb auch kein shrink-to-fit.
Daher auch die Aussage: "egal ob width oder min-width".
[quote=heiko_rs]Was das Ziel der Aktion ist, ist mir allerdings unklar.[/quote]
Horizontale Scrollbox? 
|
|
| |
|
|
123456
Threadersteller
Dabei seit: 15.01.2006
Ort: Dresden
Alter: -
Geschlecht:
|
Verfasst So 26.09.2010 19:12
Titel
|
|
|
Sinn der Aktion ist mein Problem 
Danke erstmal für eure Antworten! ...genau horizontal scrollbare Box.
Also das was ich will, ist denke ich mal garnicht möglich nach weiterer Recherche. Also mehrere 100%width Elemente nebeneinander zu positionieren ist wohl nicht möglich. Oder? Lasse mich gern eines besseren belehren 
Denke ich werde es mittels Javascript umsetzen...Fensterbreite auslesen und dann als minwidth eintragen.
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst So 26.09.2010 20:38
Titel
|
|
|
Es geht auch per CSS, sofern es nicht zufällig auch in Opera 8 laufen muss Folgenden Code können ansonsten auch alte Browser wie Firefox 1.0 und IE 5.5.
Um die üblichen kleinen horiz. Abstände zwischen Elementen auf inline-(block-)Level exakt und zuverlässig zu entfernen, stehen die > jeweils in der neuen Zeile - alternativ den Whitespace auskommentieren (valide ist beides).
white-space: nowrap; wird erst später als eigentlich nötig auf "normal" zurückgesetzt, weil der IE < 8 das so will.
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
#wrapper {
width: 100%;
overflow: auto;
white-space: nowrap;
}
.alt-1,
.alt-2 {
width: 100%;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
}
.alt-1 *,
.alt-2 * {
white-space: normal;
}
.alt-1 {
background: #c0c0c0;
color: #000;
}
.alt-2 {
background: #000;
color: #c0c0c0;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#wrapper {
overflow-x: scroll;
overflow-y: visible;
}
.alt-1,
.alt-2 {
display: inline;
zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div class="alt-1">
<p>Text</p>
</div
><div class="alt-2">
<p>Text</p>
</div
><div class="alt-1">
<p>Text</p>
</div
><div class="alt-2">
<p>Text</p>
</div>
</div>
</body>
</html> |
|
|
| |
|
|
123456
Threadersteller
Dabei seit: 15.01.2006
Ort: Dresden
Alter: -
Geschlecht:
|
Verfasst Mo 27.09.2010 19:11
Titel
|
|
|
|
Danke Dir
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
definitonsliste elemente nebeneinander
[css] width: 100%
width unterschiedlich
CSS Width in links
CSS 100% width auch für IE
CSS: Width 100% bezogen auf den Inhalt
|
|
Willkommen auf dem Portal für Mediengestalter
