Anzeige:
Ergebnis 1 bis 4 von 4

Thema: css lösung

  1. #1
    Registrierter Benutzer
    Registriert seit
    12.04.2007
    Beiträge
    22

    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>

  2. #2
    Registrierter Benutzer
    Registriert seit
    14.01.2002
    Beiträge
    657
    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

  3. #3
    Registrierter Benutzer
    Registriert seit
    12.04.2007
    Beiträge
    22
    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>

  4. #4
    Registrierter Benutzer
    Registriert seit
    14.01.2002
    Beiträge
    657
    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.

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •