Druckbare Version
Hallo
Hab das bis jetzt immer mit tablen gemacht aber will das jetzt mit css machen aber bekomme es einfach nicht hin.
Code:<div width="99%">
<div>K</div>
<div>1/0</div>
<div>f/b</div>
<div>l/n</div>
<div>T/B</div>
<div>b/t</div>
<div>M/M</div>
</div>
<table width="99%">
<tr>
<td colspan="6">K</td>
</tr>
<tr>
<td width="50">1/0</td>
<td>f/b</td>
<td width="150">l/n</td>
<td width="50">T/B</td>
<td width="50">b/t</td>
<td width="100">M/M></td>
</tr>
</table>
versuchs mal so:
<div style="border:1px solid red; width:30%;">
<div style="width:100%; clear:both; background-color:red">K</div>
<div style="width:11%; background-color:green; float:left;">1/0</div>
<div style="width:33%; background-color:yellow; float:left;">f/b</div>
..
</div>
die css anweisungen kannst ud dann natürlich auslagern
Das Große Problem momentan ist halt das dass zweite div sich nicht so weit ausbreiten lässt bis das div container voll ist.
Ich kann dem div 2 nicht sagen wie viel px oder em bis das es am Rand ist
Code:<style type="text/css">
/* Basic Elements */
html, body {
margin: 0;
}
.container {
margin: 0 auto;
width: 85%;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="container">
<div style="float:left;width:50px;background-color:#ff0000;">1</div><!-- 1 -->
<div style="float:left;width:auto;background-color:#00ff00;">2</div><!-- F -->
<div style="float:left;width:100px;background-color:#0000ff;">3</div><!-- L -->
<div style="float:left;width:50px;background-color:#FF00ff;">4</div><!-- T -->
<div style="float:left;width:50px;background-color:#00FFff;">5</div><!-- B -->
<div style="float:left;width:100px;background-color:#ffFF00;">6</div><!-- M -->
</div>
<br />
<div class="container">
aDSF
</div>
würd ich dann einfach so machen:
<div id="c" class="container">
<div style="float:left;width:50px;background-color:#ff0000;">1</div><!-- 1 -->
<div id="s" style="float:left;width:auto;background-color:#00ff00;">2</div><!-- F -->
<div style="float:left;width:100px;background-color:#0000ff;">3</div><!-- L -->
<div style="float:left;width:50px;background-color:#FF00ff;">4</div><!-- T -->
<div style="float:left;width:50px;background-color:#00FFff;">5</div><!-- B -->
<div style="float:left;width:100px;background-color:#ffFF00;">6</div><!-- M -->
</div>
<script>
$('#s').width( $('#c').width() - 350 );
</script>
jquery wird hier verwendet, geht aber natürlich auch ohne
window resize event noch entsprechend programmieren.