[CSS] liste mit 3 blöcken pro zeile

karuso

Captain
Registriert
Juni 2001
Beiträge
4.071
da ich mal ohne tabelle auskommen wollte versuche ich etwas ähnliches über div tags mit css.
dabei soll eine liste erstellt werden die pro zeile(li) 3 blöcke nebeneinander hat.
das mit der liste funktioniert auch schon so wie es soll, nur werden die blöcke untereinander aufgelistet. wenn ich nun mit absolute die position bestimme werden alle immer ganz nach oben geschoben, bei relative sind se verschoben.

html:
Code:
<div id="tabelle">
anderes zeugs
<div id="liste">
 <ul>
  <li>
    <div id="listenheader">
	<div id="listpart1">
	 ID
	</div>
	<div id="listpart2">
	 Sensor
	</div>
	<div id="listpart3">
	 Status
	</div>
    </div>
  </li>
 <ul>
</div>
</div>

css:
Code:
#tabelle liste {
	position: absolute;
	top: 15px;
	left: 5px;
	width: 700px;
	background: #ff00ff;
}

#liste ul {
	margin: 0px 0px 0px 28px;
	padding: 0px;
	width: 200px;
}

#liste li {
	display: block;
	padding: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #D2C598;
}

#listpart1 {
 position: relative;
 left: 5px;
 top: 1px;
 width: 20px;
 background: #98bc9d;
 }

#listpart2 {
 position: relative;
 left: 30px;
 top: 1px;
 width: 135px;
 }

#listpart3 {
 position: relative;
 left: 170px;
 top: 1px;
 width: 30px;
 }
wie müsste ich das ganze ändern damit es funktioniert(falls es geht)

sollte dann so ausgerichtet sein:
zeile1 ID - Sensor - Status
zeile2 ID - Sensor - Status...
 
Zuletzt bearbeitet:
Re: [css] liste mit 3 blöcken pro zeile

Dafür solltest du "float" benützen, nicht absolute Positionierung! Float:left bedeutet, dass der Absatz möglichst links oben positioniert wird, wo's Platz hat. Mit clear:both wird sozusagen ein Abschluss gemacht, alle neuen float:left fangen unterhalb davon an.

Die ul, li kannst auch weglassen, die werden nicht benötigt. Du kannst ja zum Beispiel eine Bilddatei als Aufzählungszeichen verwenden.
HTML:
<style>
#listenheader { clear:both; margin-left:15px;  background:url(liste.gif) no-repeat; }
#listpart1, #listpart2, #listpart3 { float:left; width:120px; text-align:left; }
</style>

anderes zeugs

<div id="listenheader">
	<div id="listpart1">ID</div>
	<div id="listpart2">Sensor</div>
	<div id="listpart3">Status</div>
</div>

<div id="listenheader">
	<div id="listpart1">405</div>
	<div id="listpart2">asdf</div>
	<div id="listpart3">22</div>
</div>
 
Re: [css] liste mit 3 blöcken pro zeile

thx

die liste hatte ich gewählt da es mir sinnvoll erschien, immerhin werden automatisch noch einige zeilen dazu kommen. werde das float mal ausprobiern, scheint vielversprechend...

//edit:
das mit dem float funzt einwandfrei.
hab jetzt nur noch ein kleines problem:
wie bekomme ich es hin, dass die div container in einem anderen div immer die volle höhe haben? ein einfaches height: 100% hat keine wirkung...
 
Zuletzt bearbeitet:
Re: [css] liste mit 3 blöcken pro zeile

*schieb*
die frage von oben steht immernoch aus:
wie bekomme ich es hin, dass die div container in einem anderen div immer die volle höhe haben? ein einfaches height: 100% hat keine wirkung...

ausserdem kommt noch folgendes hinzu:
je nach browser bildet sich ein durchsichtiger rand um die container. beim firefox ist wie gewünscht keiner, bei opera ein kleiner und beim ie bildet sich ein deutlich sichtbarer rand. das an sich ist nicht das problem, sondern dass dadurch die breite sich ändert und nicht mehr in den darumliegenden container passt, welcher einen rahmen bildet. padding: 0px bringt nix, muss also noch was anderes sein dass ich nicht kenne...
 
Re: [css] liste mit 3 blöcken pro zeile

karuso schrieb:
wie bekomme ich es hin, dass die div container in einem anderen div immer die volle höhe haben? ein einfaches height: 100% hat keine wirkung...
Derzeit gar nicht.
Es gibt Möglichkeiten, solche Effekte zu simulieren, wenn du im Voraus weisst, welche der inneren DIVs die höchste sein wird, aber ansonsten musst du genauso wie ich darauf warten, dass sich die entsprechenden display:-Attribute durchsetzen... oder erstmal weiterhin Tables benutzen...
 
Re: [css] liste mit 3 blöcken pro zeile

Für die Mozilla Browser kannst du iirc "min-heigh:100%;" benutzen. Es gibt auch die Möglichkeit über sogenannte Browserweichen für jeden Browser eigene Attribute zu anzugeben. Ist aber eher umständlich und noch suboptimal.
 
Re: [css] liste mit 3 blöcken pro zeile

schade auch, dann werd ich wohl auch mal warten, da es nicht nur für den mozilla sein soll.

wenn ihr mir jetzt noch sagen könnt warum bei den browsern verschiedene freiräume zwischen den containern sind bin ich erst mal zufrieden(firefox keinen(so wie ich es will), opera nen kleinen und der ie nen ziemlich großen)
 
Re: [css] liste mit 3 blöcken pro zeile

probier mal

margin: 0px;
padding: 0px;
border: 0px;

dann sollten alle Browser definitiv gleich sein.
 
Re: [css] liste mit 3 blöcken pro zeile

GeYe schrieb:
probier mal

margin: 0px;
padding: 0px;
border: 0px;

dann sollten alle Browser definitiv gleich sein.
hatte ich schon probiert, bringt nix.
das border ist bei mir aber nicht 0px, sondern 1px solid #dbdcaf;
der ie setzt trotzdem um den border noch einen rand.. :(
 
Zurück
Oben