[html/css] meerdere backgrounds in 1 table - Softwareontwikkeling

donderdag 4 mei 2006 15:44

Acties:

Matched: Blah blah

Topicstarter

Hoi!

Ik heb een html / css vraag over hoe ik meerdere background images in een table kan gebruiken.
Wie o wie wijst mij in de juiste richting?

Ik heb een (dmv een template gegenereerde) html paginas waar een behoorlijke tabel in gebruikt wordt voor de layout.
Deze paginas moet ik van een leuk vormgevinkje voorzien, door wat kleurtjes aan te passen en vaak door met achtergrondplaatjes te klooien.

Als achtergrond plaatjes wil gebruiken zijn er 3 opties voor zover ik weet:
- 1 plaatje zich eindeloos laten herhalen
heeft als nadeel dat dit bij een pagina van 6 A4tjes wel eens saai kan worden
- 1 samengesteld plaatje waarin alle plaatjes onderelkaar staan.
werkt goed, maar dan kan ik niet precies in de gaten houden waar het volgende plaatje begint
- de tabel afsluiten en opnieuw beginnen, zodat ik een nieuw plaatje kan opgeven.
heeft als nadeel dat de 2e tabel soms net ff een klein beetje breder of smaller kan zijn als de eerste

hebben jullie nog suggesties?
(behalve dan de voor de hand liggende: kijk op csszengarden.com en gooi de hele template om)

hieronder een opgeschoond voorbeeld van de htmlcode zoals ik hem gebruik.
Ik zou dus bijvoorbeeld willen hebben dat vanaf "onderwerpsbalkje 1" background1.jpg begint, en dat dan bij "onderwerpsbalkje 3" we verder gaan met background2.jpg

HTML:

<html>
<head>
<title>Tabellentestje</title>
<style type="text/css">
    .tabel{
        border: 1px solid #003399;
    }
    .balkje{
        background-color: #003399;
        color:#FFFFFF;
        text-align:center;
    }
    .content{
        text-align:left;
    }
</style>
</head>
<body>
<table width="95%" border="0" cellpadding="2" cellspacing="0" class="tabel">
    <tr class="balkje">
        <td>dit is onderwerpsbalkje 1</td>
    </tr>
    <tr class="content">
        <td>hier staat dingetje 1.1</td>
    </tr>
    <tr class="content">
        <td>hier staat dingetje 1.2</td>
    </tr>
    <tr class="balkje">
        <td>dit is onderwerpsbalkje 2</td>
    </tr>
    <tr class="content">
        <td>hier staat dingetje 2.1</td>
    </tr>
    <tr class="content">
        <td>hier staat dingetje 2.2</td>
    </tr>
    <tr class="balkje">
        <td>dit is onderwerpsbalkje 3</td>
    </tr>
    <tr class="content">
        <td>hier staat dingetje 3.1</td>
    </tr>
    <tr class="content">
        <td>hier staat dingetje 3.2</td>
    </tr>
</table>
</body>
</html>

When I roll my head across my keyboard, it says: aerfcdv5y8iuh7y6t5rf4e3

donderdag 4 mei 2006 15:53

Acties:

Tjeemp

BEER N TEA

gebruik als het dan echt moet inherited tables... dus je hebt

HTML:

<td class='balkje'>
  <table>
    <tr>
      <td></td>
    </tr>
  </table>
</td>

[ Voor 92% gewijzigd door Tjeemp op 04-05-2006 15:55 ]

www.timovanderzanden.nl | Beer 'n' Tea

donderdag 4 mei 2006 19:05

Acties:

JHS

Splitting the thaum.

Ik zou, zoals het hoort, hier geen tables voor gebruiken

. Dat levert volgens mij gewoon veel te veel problemen op. Kijk naar de relevante blocklevel, en inline, elementen, om die vervolgens met CSS te stijlen. Zie overigens dit artikel over semantiek.

Je kan het breder of smaller zijn volgens overigens oplossen met een fixed table layout, of door de breedte op 100% te zetten in een table / division met een fixed width.

DM!

vrijdag 5 mei 2006 09:09

Acties:

Koesper

Matched: Blah blah

Topicstarter

thanx voor jullie replies.

Ben het helemaal met jullie eens, eigenlijk hoort de layout niet door tabellen opgebouwd te worden.
Dit is ook iets dat ik zeker wil aanpassen, maar aangezien dat een extreem tijdrovende klus zal zijn, ben ik nu op zoek naar een "quick and even dirtier" oplossing.

Voorlopig zal ik idd de layout van de table verder vastleggen zodat er geen gekke verspringingen in zitten. en ik hem gewoon kan afbreken waar ik wil

When I roll my head across my keyboard, it says: aerfcdv5y8iuh7y6t5rf4e3