[HTML/CSS] Vaste TD width en colspan-achtig-iets - Softwareontwikkeling

zondag 16 april 2006 13:56

Acties:

Topicstarter

Beste mensen.

Ik zit met een probleem (no shit anders zou ik hier niet posten

).

Ik wil graag een TD maken met content van m'n website er in, in dit geval nieuws en updates maar dat maakt verder niet uit. Daarvoor wil ik een vaste width gebruiken die niet meerekt, maar dat krijg ik niet voor elkaar. Ik heb alles wat op GoT stond al geprobeerd maar ik gok dat ik iets fout doe want hij houdt alleen de width van de tabel aan, verder trekt hij zich niks van m'n opgegeven CSS aan. Nou kan ik de tabel wel op een bepaalde width zetten maar dan is m'n probleem simpelweg niet opgelost aangezien ik dan mijn ontwerp niet verder uit kan werken.

M'n 2e probleem is dat ik graag de 'header' en de 'downer' op een aparte manier wil uitlijnen. De header, bovenaan dus, bestaat uit een TD met daarin een afbeelding en verder eigenlijk niets. Deze wil ik laten verschijnen vanaf rechts in het scherm, ongeacht de resolutie en deze moet dan eindigen aan de linkerkant van de content TD die ik hierboven heb genoemt. Deze content TD moet overigens gecentreerd zijn. De downer wil ik percies het tegenovergestelde doen, dus onderaan en dat hij begint links en eindigt aan de rechterkant van de content TD. Hoe kan ik dit het beste doen? Ik zat er al aan te denken om aan beide kanten nog een lege TD te maken zodat ik colspan kan gebruiken, maar dat lijkt me geen ideale oplossing want ze moeten wel browser onafhankelijk zijn...

Iemand die me kan helpen? Ik heb zoals gewoonlijk natuurlijk gezocht op internet en GoT, maar ik kon het niet vinden. Ook heb ik even lopen spelen met de webdevelopper toolkit van FireFox maar dat heeft ook niet mogen baten.

Hieronder de (relevante) codes zoals ze nu zijn.

Cascading Stylesheet:

table           { border: none; 
                border-collapse: collapse; 
                border-spacing: 0px; 
                table-layout: fixed; 
                width: 800px; 
                margin-top: 30px; 
                margin-bottom: 30px; }

table tr, table td  { font-size: 12px; }

td.header       { height: 100px; background-color: #3d5369; 
                border-top-width: 1px; border-top-style: solid; border-top-color: black;
                border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; 
                border-left-width: 1px; border-left-style: solid; border-left-color: black; }

td.downer       { height: 100px; background-color: #3d5369; 
                border-top-width: 1px; border-top-style: solid; border-top-color: black;
                border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black;
                border-right-width: 1px; border-right-style: solid; border-right-color: black; }
            
td.content      { width: 800px;
                border: none;
                border-left-width: 1px; border-left-style: solid; border-left-color: black;
                border-right-width: 1px; border-right-style: solid; border-right-color: black;
                text-align: left; 
                height: 500px;
                overflow: scroll; }

HTML:

    <body>
        <table align="center">
            <tr>
                <td class="header" align="right">
                    [img]"img/splash.gif"[/img]
                </td>
            </tr>
            <tr>
                <td class="content">*insert een boel dummy text*
                </td>
            </tr>
            <tr>
                <td class="downer" align="left">
                    [img]"img/splash.gif"[/img]
                </td>
            </tr>
        </table>
    </body>

Overigens kloppen die afbeeldingen, die splash.gif, niet maar dat maakt niet uit verder.
Sorry voor m'n wat rare topic titel maar kon het niet beter verzinnen

[ Voor 8% gewijzigd door sOid op 16-04-2006 13:56 ]

zondag 16 april 2006 14:07

Acties:

Gonadan

Admin Beeld & Geluid, Harde Waren

Als je wilt dat de cellen zich onafhankelijk kunnen gedragen dan kan je beter gaan kijken naar DIV's

Look for the signal in your life, not the noise.

Canon R6 | RF 24-70 f/2.8 L | 50 f/1.8 STM | 430EX II
Sigma 85 f/1.4 Art | 100-400 Contemporary
Zeiss Distagon 21 f/2.8

zondag 16 april 2006 14:29

Acties:

sOid

Topicstarter

Ja daar had ik ook al over gehoord maar ik kan er gewoon geen goede tutorial over vinden... Enige die nog een beetje in de buurt komt is http://www.sitemasters.be...als/tutorials&cat=2&id=90 maar daarmee kom ik er nog niet uit

Oh en dan met name de vraag over die DIV is wat ik er in moet zetten? Een TD/TR of een hele table?

[ Voor 18% gewijzigd door sOid op 16-04-2006 14:30 ]

zondag 16 april 2006 14:32

Acties:

Kvn

sOid schreef op zondag 16 april 2006 @ 14:29:
Ja daar had ik ook al over gehoord maar ik kan er gewoon geen goede tutorial over vinden... Enige die nog een beetje in de buurt komt is http://www.sitemasters.be...als/tutorials&cat=2&id=90 maar daarmee kom ik er nog niet uit

Oh en dan met name de vraag over die DIV is wat ik er in moet zetten? Een TD/TR of een hele table?

Geen tabel elementen misschien?

Dus gewoon

code:

<div id="header">
  headerstuff
</div>

</div id="content">
  content
</div>

etc.

zondag 16 april 2006 14:45

Acties:

Gonadan

Admin Beeld & Geluid, Harde Waren

sOid schreef op zondag 16 april 2006 @ 14:29:
Ja daar had ik ook al over gehoord maar ik kan er gewoon geen goede tutorial over vinden... Enige die nog een beetje in de buurt komt is http://www.sitemasters.be...als/tutorials&cat=2&id=90 maar daarmee kom ik er nog niet uit

Oh en dan met name de vraag over die DIV is wat ik er in moet zetten? Een TD/TR of een hele table?

Ik moet zeggen dat die site een wel heel erg duidelijke handleiding heeft.
Een DIV is niet meer dan een cel waar je mee kan doen wat je wilt.
Ze kunnen overlappen of netjes naast elkaar, het maakt allemaal niets uit.

Look for the signal in your life, not the noise.

Canon R6 | RF 24-70 f/2.8 L | 50 f/1.8 STM | 430EX II
Sigma 85 f/1.4 Art | 100-400 Contemporary
Zeiss Distagon 21 f/2.8

zondag 16 april 2006 18:57

Acties:

sOid

Topicstarter

Hmm... Even wezen spelen met de DIV's en ik heb al wel ongeveer door hoe het werkt

Komt er al een stuk beter uit te zien dan eerst, heb nog wel een paar dingetjes die niet kloppen maar daar kom ik denk ik wel uit.

zondag 16 april 2006 23:37

Acties:

sOid

Topicstarter

Ik zit nog met een paar (kleine) foutjes op het moment.

Het betreft de website www.berkenbosch.net en dan de 2e pagina, directe link is www.berkenbosch.net/news.html.

In FireFox geeft hij helemaal onderaan wél de 15px lege ruimte, maar in Opera niet. Nou kan ik hier wel mee leven maar Opera doet het aan de bovenkant wel en dat vind ik vrij vreemd. Zoals je kan zien lijnt die content div ook niet goed uit met die onderste balk. Dit komt doordat ik er padding aan toegevoegt heb, als ik die weghaal ziet het er wel prima uit (zowel Opera als FireFox dit trouwens). Dit kan ik oplossen door die onderste balk in pixels te zetten maar dat wil ik niet aangezien hij automatisch mee moet resizen afhankelijk van de gebruikte resolutie.

In InternetExplorer ziet het er helemaal vreemd uit, en dat terwijl ik volgensmij W3C CSS gebruik en verder geen hacks oid. Iemand enig idee wat er daar fout is gegaan?

De CSS van m'n DIV's

Cascading Stylesheet:

/* DIV's */
                
#header         { float: right;
                margin-top: 15px;
                width: 80%; height: 85px;
                border-top: 1px solid #c6c6c6;
                border-bottom: 1px solid #c6c6c6; 
                border-left: 1px solid #c6c6c6;
                background-color: black; }
                
#downer         { float: left;
                margin-bottom: 15px;
                width: 80%; 
                height: 40px;
                border-top: 1px solid #c6c6c6;
                border-bottom: 1px solid #c6c6c6;
                border-right: 1px solid #c6c6c6;
                background-color: black; }

#content        { float: left;
                margin-left: 20%;
                width: 60%; 
                border-left: 1px solid #c6c6c6;
                border-right: 1px solid #c6c6c6;
                overflow: auto; 
                padding-top: 15px;
                padding-bottom: 15px;
                padding-left: 10px;
                padding-right: 10px; }

Anyone?

dinsdag 18 april 2006 17:34

Acties:

sOid

Topicstarter

Ok ik heb het inmiddels goed opgelost, alleen heb ik nu een probleem in Internet Explorer waar ik compleet niet uit kom.

Als je http://www.berkenbosch.net/news.html in IE bekijkt zie je wel wat er niet klopt; de content DIV wil zich niet goed uitlijnen. in FF en Opera ziet het er prima uit

Iemand enig idee wat ik het beste kan doen?

dinsdag 18 april 2006 17:49

Acties:

JHS

Splitting the thaum.

Ik vermoed dat het te maken heeft met de double margin bug, en dat het op te lossen is door #content display: inline; mee te geven

.

DM!

dinsdag 18 april 2006 18:00

Acties:

sOid

Topicstarter

JHS schreef op dinsdag 18 april 2006 @ 17:49:
Ik vermoed dat het te maken heeft met de double margin bug, en dat het op te lossen is door #content display: inline; mee te geven .

Je bent een held