[html] problemen met tabel

woensdag 25 juni 2003 10:55

Topicstarter

Afbeeldingslocatie: http://www.excudo.net/got/voorbeeld.png

B heeft een background image die ik niet getiled wil hebben. Die wordt tegen de bovenkant aangezet en ik heb de plaatjes zo gemaakt dat de onderkant in de achtergrondkleur overloopt
De hoogte van B (wat de pijl aangeeft) heeft een min. grootte, maar wordt soms ook groter, afhankelijk van hoeveel content er is.
In het geval van de min hoogte (weinig content) moet het achtergrondplaatje bij B doorlopen in C. Ik heb al van alles geprobeerd, maar dit wil me maar niet lukken. Het wordt namelijk nogal bemoeilijkt door de twee buttons (in het wit) die daar moeten komen
Ik heb nu alles in een tabel structuur staan en dat zorgt in iedergeval voor de layout die je op het plaatje ziet, maar dan valt C over de onderkant van B heen, waardoor het achtergrondplaatje niet mooi afgebroken wordt.
Ik heb nog zitten denken aan om C bij B te trekken en die twee buttons (wit) absoluut te positioneren tov de onderkant, in een divje: maar dat werkt niet als de content zo groot wordt dat je een scrollbalk krijgt.
De plaatjes in stukken hakken is helaas ook geen optie, want het moet dynamisch blijven en het achtergrondplaatje zo klein maken dat ie bij de min. hoogte al mooi wordt afgebroken is helaas ook geen optie.

Kan iemand me een schop in de richting van de goede oplossing geven?

Acties:

Als je er nu even een werkend voorbeeld bij post is het wat makkelijk visualiseren voor de mensen hier. Overigens ben ik nog steeds van mening dat tabels voor wat betreft layout ondergeschikt zijn aan divjes. Als je je daar nu eens in zou verdiepen.....

woensdag 25 juni 2003 11:44

Acties:

woensdag 25 juni 2003 12:15

Topicstarter

willem169 schreef op 25 June 2003 @ 10:55:
Als je er nu even een werkend voorbeeld bij post

Als ik een werkend voorbeeld had, dan zat ik hier nu niet

is het wat makkelijk visualiseren voor de mensen hier.

Ik vermoedde dat ik m'n huidige opzet toch overboord moest gooien en juist om het te visualiseren voor de mensen hier heb ik dus even een plaatje gemaakt. Dat leek me een stuk eenvoudiger dan een lap html-code. maargoed, bij deze dan:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<center>
<table width="800" class="TblNul">
<tr>
 <td style="width: 125px" />
 <td style="width: 125px" />
 <td style="width: 125px" />
 <td style="width: 170px" />
 <td />
</tr>
<tr>
 <td width="250" colspan="2" valign="top">
    <div class="topSpace">&nbsp;</div>
    <div style="height: 480px;">
    Hier staan de links van het menu
    </div>
 </td>
 <td colspan="3" class="content" style="
        background-color: #F5F2C7; background-image:url('images/bg1.jpg');
        background-repeat:no-repeat;">
    <div class="topSpace">&nbsp;</div>
    <div style="
            position:relative;
            width:100%;">
        <div class="navigateBack"><a href="javascript:history.back();">terug</a></div>
        <div class="pageTitle">PageTitle</div>
    </div>
    Content
 </td>
</tr>
<tr> 
 <td>[img]"images/empty.gif"[/img]</td>
 <td colspan="2" style="border-collapse: collapse;">
    <a href="/index.html">
    [img]"images/button1.gif"[/img]</a>
 </td>
 <td style="background-color: #F5F2C7">[img]"images/empty.gif"[/img]</td>
 <td style="background-color: #F5F2C7" rowspan="4">[img]"images/logo.gif"[/img]</td>
</tr>
<tr> 
 <td height="9" colspan="2"></td>
 <td height="9" colspan="2" style="background-color: #F5F2C7"></td>
</tr>
<tr>
 <td>[img]"images/empty.gif"[/img]</td>
 <td colspan="2" style="border-collapse: collapse;">
    <a href="/detachering.html">
    [img]"images/button2.gif"[/img]</a>
 </td>
 <td style="background-color: #F5F2C7">[img]"images/empty.gif"[/img]</td>
</tr>
<tr> 
 <td height="9" colspan="2"></td>
 <td height="9" colspan="2" style="background-color: #F5F2C7"></td>
</tr>
</table>
</center>
</body>
</html>

Overigens ben ik nog steeds van mening dat tabels voor wat betreft layout ondergeschikt zijn aan divjes. Als je je daar nu eens in zou verdiepen.....

Ja, ik lees al wat vaker hier op W&G de topics door. Ik wil me eigenlijk zo min mogelijk met designen bezig houden omdat ik dat niet leuk vind, maar ontkom er niet aan merk ik, dus ben me er toch maar in gaan verdiepen. En ik weet dus dat dat nu de mode is. Probleem is alleen dat ik bezig ben met een bestaande website en die al een flink stuk heb verbeterd ivm hoe het was. In iedergeval de html valide gemaakt enzo. En ik probeer nu ook zoveel mogelijk met divjes te doen. De reden waarom de algehele layout (zoals ik ook in het plaatje weergeef) nog steeds met tabellen is , is omdat ik niet weet hoe ik die met divjes voor elkaar krijg. Ik zit heel erg met die twee (in het voorbeeld) witte buttons. Dan kan ik 'm nu wel gaan omzetten in een layout met divjes, maar dan ben ik dus nog niet verder. En vandaar dus dat ik 'm hier poste. Ik hoopte dat iemand mij op het juiste spoor kon zetten

Acties:

Verwijderd

Ik denk dat je de oplossing in de divjes moet gaan zoeken.

Ik moet bekennen dat ik ook veel gebruik maak van tabellen. Dit geeft ook vaak problemen. Dingen die ik net als jij wil maar niet voor elkaar krijg.
Als ik dan met divjes ga werken lukt het me bijna altijd.

woensdag 25 juni 2003 13:12

Acties:

woensdag 25 juni 2003 13:22

Topicstarter

ik zou dolgraag op de divjes overstappen ik heb alleen geen idee hoe ik die witte buttons (zie voorbeeldplaatje), daar dan zo krijg. Die moeten dan als het ware over de linker en rechter kolom/div heenvallen, maar de (verticale) positionering hangt wel af van hoeveel content er in de rechter kolom staat. Hoe doe ik dat dan?

Acties:

simpel: margin-left of margin-right: x %; of px of auto.. wat je wilt.
De grap is dat je hiermee alle kanten op kan en maximaal dynamisch bent.

woensdag 25 juni 2003 13:36

Acties:

woensdag 25 juni 2003 15:12

Topicstarter

willem169 schreef op 25 June 2003 @ 13:22:
simpel: margin-left of margin-right: x %; of px of auto.. wat je wilt.
De grap is dat je hiermee alle kanten op kan en maximaal dynamisch bent.

Jij heb het over margin-left en margin-right: ik over de verticale positionering.
Ik snap niet zo goed hoe die margin-left en right me daar bij gaan helpen.

Maar wellicht dat ik niet helemaal duidelijk ben.
Ik zal nog een poging doen..

Zie voorbeeldplaatje

die twee buttons moeten over de linker en rechterkolom heenvallen. Dat is opzich geen probleem, dat red ik wel. Waar voor mij alleen de moelijkheid in zit (als ik op divjes over ga), is dat de hoogte van die buttons afhangt van hoeveel content er in B zit. Die heeft een minimale hoogte van pak 'm beet 500, maar als er meer content in zit kan die hoogte ook best 600 of 700 worden (dan wordt ie dus gewoon uitgerekt). En op dat moment moeten die twee buttons dus ook zakken. En daarvan weet ik dus niet hoe ik het voor elkaar moet krijgen.
Zoals ik al eerder aangaf heb ik dat geprobeerd door 'm te positioneren vanaf de onderkant - maar als ik dan een (verticale) scrollbalk krijg, dan zet ie 'm tov de onderkant van m'n scherm neer, en niet tov de onderkant van de pagina.

Acties:

OnTracK

Is de hoogte B alles wat tussen de zwarte lijntjes zit of het hele gele vlak? Is mij nu niet helemaal duidelijk

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

woensdag 25 juni 2003 15:54

Acties:

woensdag 25 juni 2003 18:55

smile...tomorrow will be worse

Kun je even je niet-werkende voorbeeld online zetten, met afbeeldingen en al?
En dan 1 keer met zoveel content dat ie niet hoeft door te lopen en 1 keer met weinig content zodat ie wel moet doorlopen.

Dan kan ik s kijken. Nu vind ik het een beetje vaag, omdat ik de afbeeldingen niet heb en dus niet precies kan beoordelen wat de bedoeling is.

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

Acties:

woensdag 25 juni 2003 20:06

Topicstarter

wizzkizz schreef op 25 June 2003 @ 15:54:
Kun je even je niet-werkende voorbeeld online zetten, met afbeeldingen en al?
En dan 1 keer met zoveel content dat ie niet hoeft door te lopen en 1 keer met weinig content zodat ie wel moet doorlopen.

Dan kan ik s kijken. Nu vind ik het een beetje vaag, omdat ik de afbeeldingen niet heb en dus niet precies kan beoordelen wat de bedoeling is.

alles staat nog lokaal op m'n server, maar heb even wat op een website van me gezet:

http://www.excudo.net/got/vac.html (min hoogte)
http://www.excudo.net/got/vac2.html (uitgerekt)

Acties:

woensdag 25 juni 2003 20:17

smile...tomorrow will be worse

Ik denk dat ik dit wel met een JavaSciptje oid op kan lossen, maar ik heb geen tijd om dat vanavond nog te doen. Als je het niet met javascript wilt of extraordinaire browsercompatibility wenst, dan moet je het zeggen. Normaal gesproken zorg ik dat alles werkt in IE4+ en NN6+

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

Acties:

woensdag 25 juni 2003 23:50

Topicstarter

met javascript??...ehh.. nou het liefst heb ik een oplossing zonder javascript

maar kan dit niet met de heilige

divjes worden opgelost dan? Of een combinatie van tabel en css/div?

* marty heeft overigens daarnet maar eens een css boek (o'reiley) aangeschaft. Zag ze in de aanbieding liggen.

Acties:

wizzkizz dit heeft weinig met JS te maken hoor, excuse me. Maar met CSS in de zin van (absolute) positionering kan dit gewoon prima. En marty, margin-left/right geldt uiteraard ook voor top/bottom; ik ging er min of meer van uit dat dit vanzelfsprekend was.

woensdag 25 juni 2003 23:52

Acties:

drm

f0pc0dert

offtopic:
Ik snap niet hoe jij je html valide hebt weten krijgen als je dit soort dingen erin zet:
<td style="width: 125px" />. Da's een xml manier van afsluiten die wellicht wel door de validator heen komt, maar absoluut niet correct is, zeker niet met HTML 4.01 zoals je doctype aangeeft

Ik vermoed dat je hier in de war bent met het col element.

Ik moet je verklappen dat of ik je probleem niet begrijp, of je stelt het moeilijker dan het is

Je kunt B toch gewoon een hoogte geven en een overflow:visible; geven? Dat laatste is zelfs niet eens nodig als je met een tabel werkt... Alles wat daaronder komt, kun je gewoon in dezelfde container stoppen om het "naar beneden" gedrukt te laten worden door alles wat er boven staat...

Of snap ik nou iets niet

edit:

Om het tilen van je background te voorkomen kun je overigens dit in je CSS zetten:

Cascading Stylesheet:

1
2
3

background-position:top;
background-repeat:no-repeat;
background-image:url('url-relatief-aan-je-css');

[ Voor 12% gewijzigd door drm op 25-06-2003 23:54 ]

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

woensdag 25 juni 2003 23:59

Acties:

Michali

willem169 schreef op 25 juni 2003 @ 10:55:
Als je er nu even een werkend voorbeeld bij post is het wat makkelijk visualiseren voor de mensen hier. Overigens ben ik nog steeds van mening dat tabels voor wat betreft layout ondergeschikt zijn aan divjes. Als je je daar nu eens in zou verdiepen.....

offtopic:
Mwa, ik kom dan niet zo vaak op het W&G forum maar ik denk dat divjes tabellen absoluut niet kunnen vervangen. Als je alleen al kijkt naar het tweakers.net frontpage en GoT zelf uiteraard dan weet je wel wat ik bedoel. Of je moet bedoelen dat je een tabel in een divje plaats

Of weet je mischien wat leuke sites of topics waarin een beetje gediscuseerd wordt over dit soort zaken want daar ben ik eigenlijk wel geinteresseerd in dan als je echt gelijk hebt.

Noushka's Magnificent Dream | Unity

donderdag 26 juni 2003 00:02

Acties:

Om toch maar even te reageren Michali:
Kijk of ik gelijk heb daar moet je zelf maar achter komen.. maar tabellen zijn simpelweg niet bedoeld om pagina's in op te maken -het is wel een manier-. Tabellen zijn voor de weergave van gestructureerde gegevens, meer niet.

Met <div>jes kun je veel verder komen en heb je de layout veel meer onder controle en is vele malen beter en makkelijker aanpasbaar dan als wanneer je pagina layout bepaald zou worden door een tabel.

donderdag 26 juni 2003 00:25

Acties:

Verwijderd

Voor precies positioneren is een div wel handiger ja, maar meestal als ik het gebruik maak ik het menu in een table en positioneer ik het dan met een div. Table is gewoon makkelijker om alles onder elkaar te kwakken

donderdag 26 juni 2003 15:15

Acties:

donderdag 26 juni 2003 15:29

smile...tomorrow will be worse

Het probleem bij deze opzet is dat het niet 1 cel B is en daaronder 1 cel C, maar een heleboel cellen die middels rowspans en colspans met elkaar verbonden zijn. Daarom is dit niet gemakkelijk met CSS op te lossen. Met js wel, dan verander je gewoon de hoogte van die cel B. Zoals in dit voorbeeld, helaas, js, maar het werkt goed in zowel IE4+ als NN6+.

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Vacatures</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <link href="style.css" rel="stylesheet" type="text/css">
 <script language="JavaScript1.2">
    function initPage() {
        /* \/\/ DEZE TEKST KUN JE ZELF WIJZIGEN \/\/ */
        document.getElementById('sLoad').innerHTML = "Preparing page...";
        /* /\/\ DEZE TEKST KUN JE ZELF WIJZIGEN /\/\ */
    
        var iBHeight = document.getElementById('dVacatureList').offsetHeight; // hoogte van de div met vacaturegegevnes
        var iVLBottom = document.getElementById('dVacatureList').offsetTop + iBHeight; //absolute positie van onderkant div met vacaturegeg.
        
        /* \/\/ DEZE ITEMS KUN JE ZELF VERANDEREN \/\/ */
        var iBMinHeight = 500; // grootte van de achtergrondafbeelding
        var iSpacing = 10; // ruimte in pixels tussen onderkant vacaturelijst en buttons
        /* /\/\ DEZE ITEMS KUN JE ZELF VERANDEREN /\/\ */
        
        var iDivLeft = document.getElementById('tbContent').offsetLeft;//bepaal de linkerpositie van de div (= linkerrand 'hoofd'tabel)
        var iDivTop = iVLBottom + iSpacing; // bovenkant div met buttons is onderkant div met vacaturegeg. + de spacing
        var iDivBottom = iDivTop + document.getElementById('dButtons').offsetHeight; // onderkant div met buttons
        var iBBottom = document.getElementById('B').offsetTop + document.getElementById('B').offsetHeight; // bepaal onderkant van cel B
        var iBNewHeight = document.getElementById('B').offsetHeight + iDivBottom - iBBottom;
        
        // positioneer de div met de buttons
        document.getElementById('dButtons').style.left = iDivLeft;
        document.getElementById('dButtons').style.top = iDivTop;
        
        // vergroot de cel B als dat nodig is
        if (iDivBottom - iBBottom > 0){
            if (navigator.appName == "Netscape")    
                document.getElementById('B').height = iBNewHeight;
            else
                document.getElementById('B').style.setAttribute("height",iBNewHeight, "false");
        }
        // verberg de layer met de statusmelding
        if (document.layers) //NN
            document.layers['dTest'].visibility = "hide";
        else //IE
            document.getElementById('dTest').style.visibility = "hidden";
    }
</script>
</head>

<body onLoad="initPage();">
<center>
<table width="800" id="tbContent" class="TblNul">
<tr>
 <td style="width: 125px" />
 <td style="width: 125px" />
 <td style="width: 125px" />
 <td style="width: 170px" />
 <td />
</tr>
<tr>
 <td width="250" colspan="2" valign="top">
    <div class="topSpace">&nbsp;</div>
    <div style="height: 480px;">
    menu
    </div>
 </td>
 <td id="B" colspan="3" height="500" class="content" style="background-color: #D6D9E5; background-image:url('lucht.jpg'); background-repeat:no-repeat;">
    <div class="topSpace">&nbsp;</div>
    <div style="position:relative; width:100%;">
        <div class="navigateBack"></div>
        <div class="pageTitle">Vacatures</div>
    </div>
    <br>
    <div align="center">
     <div class="VacatureBox">
      Deze vacatures zijn slechts een greep uit ons vacaturebestand. De meeste vacatures worden direct via onze kandidatenbestanden ingevuld.<br>
      Wij raden u dan ook aan u <a href="/aanmelden.php">online</a> in te schrijven.
     </div>
    </div>
<br>
<div id="dVacatureList" align="center">
<a href="list.php?fid=1" class="functielink">Administratief</a> (4)<br>
<a href="list.php?fid=10" class="functielink">Gezondheid,Non-profit,Overheid</a> (7)<br>
<a href="list.php?fid=11" class="functielink">Overige</a> (2)<br>
<a href="list.php?fid=12" class="functielink">Detachering</a> (16)<br>
<a href="list.php?fid=3" class="functielink">Technische Functies</a> (2)<br>
<a href="list.php?fid=4" class="functielink">Telemarketing & Callcentre</a> (13)<br>
<a href="list.php?fid=5" class="functielink">Dienstverlenend</a> (3)<br>
<a href="list.php?fid=6" class="functielink">Financieel</a> (2)<br>
<a href="list.php?fid=7" class="functielink">Produktie / Transport</a> (26)<br>
<a href="list.php?fid=8" class="functielink">Representatief</a> (5)<br>
<a href="list.php?fid=9" class="functielink">Sales / Marketing</a> (1)<br>

</div>
 </td>
</tr>
</table>
<div id="dButtons" style="position: absolute; width: 800; left: 0; top: 500; z-index: 3;">
    <table width="800" class="TblNul">
     <tr>
      <td style="width: 125px" />
      <td style="width: 125px" />
      <td style="width: 150px" />
      <td style="width: 170px" />
      <td />
     </tr>
     <tr> 
      <td>[img]"/images/empty.gif"[/img]</td>
      <td colspan="2" style="border-collapse: collapse; background-color: #003;"><a href="/index.html">[img]"button1.png"[/img]</a></td>
      <td>[img]"/images/empty.gif"[/img]</td>
      <!-- logo kun je eventueel positioneren met bijv. padding oid -->
      <td rowspan="4" style="vertical-text: top;">[img]"logo.gif"[/img]</td>
     </tr>
    <tr> 
      <td height="9" colspan="2"></td>
      <td height="9" colspan="2"></td>
     </tr>
     <tr>
      <td>[img]"/images/empty.gif"[/img]</td>
      <td colspan="2" style="border-collapse: collapse; background-color: #003;"><a href="/index.html">[img]"button2.png"[/img]</a></td>
      <td>[img]"/images/empty.gif"[/img]</td>
     </tr>
     <tr> 
      <td height="9" colspan="2"></td>
      <td height="9" colspan="2"></td>
     </tr>
    </table>
</div>
</center>
<div id="dTest" style="visibility: visible; position: absolute; width: 250; height: 50; background-color: #ffffff; border: 2px solid #000000; z-index: 5; top: 250; left: 450;">
    <br />
    <center><span id="sLoad" style="font-weight: bold;">Loading page... </span></center>
</div>
<script language="JavaScript1.2">
    //positioneer div dTest
    var iScreenW = screen.Width;
    var iScreenH = screen.Height;
    var iDivW = document.getElementById('dTest').offsetWidth;
    var iDivH = document.getElementById('dTest').offsetHeight;
    
    document.getElementById('dTest').style.left = (iScreenW - iDivW) / 2;
    document.getElementById('dTest').style.top = (iScreenH - iDivH) / 2;
</script>
</body>
</html>

[ Voor 92% gewijzigd door wizzkizz op 26-06-2003 15:21 ]

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

Acties:

donderdag 26 juni 2003 15:38

smile...tomorrow will be worse

drm schreef op 25 June 2003 @ 23:52:

offtopic:
Ik snap niet hoe jij je html valide hebt weten krijgen als je dit soort dingen erin zet:
<td style="width: 125px" />. Da's een xml manier van afsluiten die wellicht wel door de validator heen komt, maar absoluut niet correct is, zeker niet met HTML 4.01 zoals je doctype aangeeft Ik vermoed dat je hier in de war bent met het col element.

Ik moet je verklappen dat of ik je probleem niet begrijp, of je stelt het moeilijker dan het is Je kunt B toch gewoon een hoogte geven en een overflow:visible; geven? Dat laatste is zelfs niet eens nodig als je met een tabel werkt... Alles wat daaronder komt, kun je gewoon in dezelfde container stoppen om het "naar beneden" gedrukt te laten worden door alles wat er boven staat...

Of snap ik nou iets niet

Je snapt het (volgens mij) inderdaad niet helemaal. Zij heeft een achtergrondafbeelding van 500px hoog die hij helemaal wil laten zien. Haar probleem daarbij is dat wanneer de content bijvoorbeeld maar 300px hoog is, er meer dan 200px tussen de onderkant van de content en die twee buttons zitten (zie vooorbeeld in eerste topic). En dat vindt ze dan een beetje veel en wil ze die buttons een eind naar boven hebben. Wanneer de content meer dan 500px is, is er geen enkel probleem, want dan komen die buttons in een keer in een rij onder die content te staan.

[ Voor 3% gewijzigd door wizzkizz op 26-06-2003 15:32 . Reden: hij/zij probleempje 8)7 ]

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

Acties:

drm

f0pc0dert

wizzkizz:
Je snapt het (volgens mij) inderdaad niet helemaal. Hij heeft een achtergrondafbeelding van 500px hoog die hij helemaal wil laten zien. Zijn probleem daarbij is dat wanneer de content bijvoorbeeld maar 300px hoog is, er meer dan 200px tussen de onderkant van de content en die twee buttons zitten (zie vooorbeeld in eerste topic). En dat vindtie dan een beetje veel en willie die buttons een eind naar boven hebben. Wanneer de content meer dan 500px is, is er geen enkel probleem, want dan komen die buttons in een keer in een rij onder die content te staan.

Ach so. Waarom doe je de background dan niet een element "hoger", in de tabel bijvoorbeeld? Je kunt prima een achtergrondkleur en achtergrondplaatje opgeven:

code:

<table 
   style="
      background-color:#169;
      background-image:url('../gfx/background.jpg'); 
      background-position:top;
      background-repeat:no-repeat;"
>
   ....
</table>

^{Nee, zo lijn ik mijn html normaal gesproken niet uit}
waar
#169 de kleur van de onderste regel van het achtergrondplaatje is en
'../gfx/background.jpg' de url naar het achtergrondplaatje.

Je kunt ook nog pixelprecies de achtergrond plaatsen met background-position. Zie www.w3schools.com

Vervolgens geef je de hoogte van 'B' niet expliciet op maar laat je die verschalen met de inhoud mee. Dan plak je daaronder in een cel de andere knopjes.

Of je dit nou allemaal met een tabel of met divjes doet is niet zo erg relevant imo

En nogmaals:

code:

1	<td style="width: 125px" />

is geen geldige html

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 26 juni 2003 15:50

Acties:

donderdag 26 juni 2003 15:55

smile...tomorrow will be worse

drm schreef op 26 June 2003 @ 15:38:
[...]
Ach so. Waarom doe je de background dan niet een element "hoger", in de tabel bijvoorbeeld? Je kunt prima een achtergrondkleur en achtergrondplaatje opgeven:
code:
1
2
3
4
5
6
7
8
9
<table 
   style="
      background-color:#169;
      background-image:url('../gfx/background.jpg'); 
      background-position:top;
      background-repeat:no-repeat;"
>
   ....
</table>
^{Nee, zo lijn ik mijn html normaal gesproken niet uit}
waar
#169 de kleur van de onderste regel van het achtergrondplaatje is en
'../gfx/background.jpg' de url naar het achtergrondplaatje.

Je kunt ook nog pixelprecies de achtergrond plaatsen met background-position. Zie www.w3schools.com

Vervolgens geef je de hoogte van 'B' niet expliciet op maar laat je die verschalen met de inhoud mee. Dan plak je daaronder in een cel de andere knopjes.

Of je dit nou allemaal met een tabel of met divjes doet is niet zo erg relevant imo

En nogmaals:
code:
1
<td style="width: 125px" />
is geen geldige html

Om met dat laatste te beginnen, ik weet het, maar ik heb alleen de code die Marty aangeleverd heeft een beetje bewerkt.

En nu over dat eerste. Ook dat gaat hier niet. Als je in de listing kijkt (zowel een eind van boven als mijnes net), zie je dat de tabel vier kolommen heeft. De achtergrondafbeelding staat in een <td colspan="2"> cel met de image als achtergrond. Maar die afbeelding moet dan doorlopen middels allerlei cellen (moet je de code maar eens goed bekijken) die met colspan en rowspan gecombineerd zijn en weet ik nie al. Dus dat is mijns inziens best lastig. Maar ik kan natuurlijk iets over het hoofd gezien hebben.

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

Acties:

donderdag 26 juni 2003 16:29

smile...tomorrow will be worse

Mea culpa. Misschien kun je beter die knopjes in een apart divje zetten en die in cel D zetten, waarbij je nu gaat proberen om cel B en C wel 'gewone cellen' te maken. Vervolgens laat je de achtergrond van B overlopen in C en zet je direct onder C een cel D met daarin die knopjes. Je krijgt dan zo'n idee:

-------------------------------------------

B, volledig gevuld met content

------------------------------------------- C, overloop voor de achtergrondafb (evt. maar paar px hoog)
--------------------------------------------
D, cel met die buttons
--------------------------------------------

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

Acties:

drm

f0pc0dert

* drm had dit ongeveer in gedachten:

http://gerard.yoursite.nl/got/marty/zoiets.html
't is een beetje quick'n'dirty hier en daar, maar allicht wat beter te behappen dan dat gedoe met die tabel.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 26 juni 2003 16:29

Acties: