[CSS] Aantal kolommen probleem - Softwareontwikkeling

maandag 20 april 2009 12:15

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb deze vraag deels al eerder gesteld maar ben intussen een stuk verder.

Ik ben bij een klant bezig met o.a. de layout van een aantal webpagina's. Hiervoor moet een kolom worden weergegeven die:
- Geen buitenrand heeft
- Oranje vertikale tussenranden heeft
- Een oranje rand heeft onder de bovenste rij
- Onder alle andere rijen grijze tussenlijnen heeft.

Van internet heb ik een stuk code gehaald en dat ben ik gaan aanpassen - alles werkt goed, zolang er maar 3 kolommen in de tabel zitten. De eerste twee kolommen worden weergegeven, degenen daarna niet.

En ik kan niet ontdekken waar dat is vastgesteld! Vandaar mijn vraag, wie kan dat uitleggen?

Cascading Stylesheet:

html,body{text-align:center;}
html,body{text-align:left;}

* {
    margin: 0;
    padding: 0;
}

html{font-size: 75%;}

body{
    border-right: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}


.tbla caption,.tbla,.tbla th,.tbla td{
border-style:solid;
font-size:1em;
}
.tbla{border-collapse:collapse;}

.tbla th,.tbla td{padding:.5em;}

.tbla caption{border-width:0px 0px 0 0px;font-weight:600;padding-top:.7em;padding-bottom:.3em;font-size:large;}

.tbla th{}

.tbla{border-width:0px 0 0px 0px;width:920px;}

.tbla td{border-width:0px 1px 1px 0;border-color:#c0c0c0 #ff6600 ;}

.tbla th{border-width:0px 1px 1px 0;color:#000000;border-color:#ff6600;}

head+body .tbla tr td + td + td {border-width:0px 0px 1px 0;}
head+body .tbla tr th + th + th {border-width:0px 0px 1px 0;}

.x{margin:1em auto;}

.style1 {
    text-align: center;
}
.style2 {
    text-align: right;
}

Een pagina waarin ik het gebruik als voorbeeld

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dit is een titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="thisstyle.css">
</head>
<body>

<div class="x" style="width: 920px; position:absolute; padding-left:10px; height: 450px; border-bottom-style: none;">

<table cellspacing="0" summary="aa" class="tbla">
<caption>Klantdossier - Tonen inkomende en uitgaande berichten</caption>
<col class="a" /><col class="b" /><col class="c" /><col class="d" />
<thead>
<tr>
<th>Datum in/uit</th>
<th>Soort bericht</th>
<th>In/uit</th>
<th>Medium</th>
</tr>
</thead>
<tbody>
<tr>
<td>30-11-2006</td>
<td>Poststuk</td>
<td>In</td>
<td>NAW Wijziging</td>
</tr>
<tr>
<td>29-11-2005</td>
<td>Poststuk</td>
<td>Uit</td>
<td>SPG ALG z clausule callcenter</td>
</tr>
<tr>
<td>29-11-2005</td>
<td>Poststuk</td>
<td>Uit</td>
<td>SPG ALG z clausule callcenter</td>
</tr>
<tr>
<td>28-11-2005</td>
<td>Poststuk</td>
<td>In</td>
<td>Informatie algemeen</td>
</tr>
<tr>
<td>07-07-1999</td>
<td>Geautomatiseerd</td>
<td>In</td>
<td>GBA antwoord ad-hoc vraag</td>
</tr>
<tr>
<td>02-08-1998</td>
<td>Geautomatiseerd</td>
<td>In</td>
<td>GBA antwoord ad-hoc vraag</td>
</tr>
</tbody>
</table>

</div>

</body>
</html>

[ Voor 6% gewijzigd door Verwijderd op 20-04-2009 12:23 . Reden: Code iets aangepast ivm (c) werk ]

maandag 20 april 2009 12:18

Acties:

0 Henk 'm!

disjfa

be

Je hebt een stukje code van het internet gehaalt en als je het aanpast werkt het niet. Kan je dan niet beter de maker van het stukje html opbellen en vragen wat het doet, of zelf iets gaan opsteken wat je aan het doen bent?

Wat heb je verder zelf gevonden waarom het niet zou werken, en kan je de code in code tags zetten?

disjfa - disj·fa (meneer)
disjfa.nl

maandag 20 april 2009 12:22

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

disjfa schreef op maandag 20 april 2009 @ 12:18:
Je hebt een stukje code van het internet gehaalt en als je het aanpast werkt het niet. Kan je dan niet beter de maker van het stukje html opbellen en vragen wat het doet, of zelf iets gaan opsteken wat je aan het doen bent?

Wat heb je verder zelf gevonden waarom het niet zou werken, en kan je de code in code tags zetten?

Goede opmerking - ik heb de maker van de code op elke mogelijke manier benaderd - en helaas geen reactie gekregen!

Ik zou ook niet weten waarnaar ik zou moeten zoeken, er staat nergens in mijn beleving dat er precies drie kolommen zouden moeten zijn, ik heb de code helemaal nagelopen maar kan er nergens in ontdekken waar dat vastgelegd zou moeten zijn.

Als je dit gebruikt zie je dat de rij tussen de 3e en de 4e kolom niet aanwezig is. Als je er 2 kolommen uitsloopt zie je dat de rij na de 2e kolom wel wordt weergegeven.

Ik kom er dus niet uit waaraan dat ligt.

maandag 20 april 2009 12:45

Acties:

0 Henk 'm!

Ook al Bezet

Ik zie hier in Opera en FF vier kolommen met jouw HTML en CSS.
Alleen die grenzen lijken niet te doen wat je wilt.

EDIT: en dat probleem is makkelijk op te lossen. Verander

Cascading Stylesheet:

1 2	head+body .tbla tr td + td + td {border-width:0px 0px 1px 0;} head+body .tbla tr th + th + th {border-width:0px 0px 1px 0;}

in

Cascading Stylesheet:

1 2	head+body .tbla tr td + td + td + td {border-width:0px 0px 1px 0;} head+body .tbla tr th + th + th + th {border-width:0px 0px 1px 0;}

Waar dat head+body gedeelte precies voor nodig is is mij trouwens een raadsel.

[ Voor 54% gewijzigd door Ook al Bezet op 20-04-2009 12:49 ]

maandag 20 april 2009 12:59

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ook al Bezet schreef op maandag 20 april 2009 @ 12:45:
Ik zie hier in Opera en FF vier kolommen met jouw HTML en CSS.
Alleen die grenzen lijken niet te doen wat je wilt.

EDIT: en dat probleem is makkelijk op te lossen. Verander
Cascading Stylesheet:
1
2
head+body .tbla tr td + td + td {border-width:0px 0px 1px 0;}
head+body .tbla tr th + th + th {border-width:0px 0px 1px 0;}
in
Cascading Stylesheet:
1
2
head+body .tbla tr td + td + td + td {border-width:0px 0px 1px 0;}
head+body .tbla tr th + th + th + th {border-width:0px 0px 1px 0;}
Waar dat head+body gedeelte precies voor nodig is is mij trouwens een raadsel.

Haha, super! Ik had er gewoon niet naar gekeken...

Dat stuk is noodzakelijk omdat je daarmee voorkomt dat de rechter lijnen bij de meest rechter kolom worden weergegeven. Als je dat er niet in hebt staan worden die in IE6 / IE7 wel weergegeven...

Ik had er niet aan gedacht daarnaar te kijken, stom van me!

Probleem is opgelost, dank, kan evt op slot!

[ Voor 8% gewijzigd door Verwijderd op 20-04-2009 13:01 ]

maandag 20 april 2009 14:19

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op maandag 20 april 2009 @ 12:59:
Probleem is opgelost, dank, kan evt op slot!

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij