-
css lösung
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.