PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : css lösung


Roberto
01-08-2009, 22:13
Hallo
Hab das bis jetzt immer mit tablen gemacht aber will das jetzt mit css machen aber bekomme es einfach nicht hin.




<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>
msi
01-08-2009, 23:20
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
Roberto
02-08-2009, 09:02
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


<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>
msi
02-08-2009, 13:59
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.