[CSS] kolommen mbv CSS* - Softwareontwikkeling

zondag 19 december 2004 15:37

Acties:

Topicstarter

Ik probeer een soort tabel te maken met behulp van stylesheets. De bedoeling is dat er twee kolomen naast elkaar ontstaan. Het aantal rijen is echter onbekend. Nu krijg ik wel de twee kolomen naast elkaar, maar wordt rij 2 gewoon over rij 1 gezet.

HTML code

code:

<html>
<head>
<style type="text/css">
.item { position: relative; width: 100%; border: 1px solid Red; }
.s1 { position: absolute; top: 0px; left: 0px; width: 244; border-right: 1px solid #E0E0E0; padding-right: 4px; }
.s2 { position: absolute; top: 0px; left: 245px; width: 244; border-left: 1px solid #E0E0E0; padding-left: 4px; }
</style>
</head>

<body>
<div class="item">
    <div class="s1">kolom 1, rij 1</div>
    <div class="s2">kolom 2, rij 1</div>
</div>
<div class="item">
    <div class="s1">kolom 1, rij 2</div>
    <div class="s2">kolom 2, rij 2</div>
</div>
</body>
</html>

Ik heb geen idee in welke richting ik moet zoeken voor een oplossing, maar het zal vast heel eenvoudig zijn. Is er iemand die mij een beetje op weg wil helpen en een hint wil geven?

[ Voor 27% gewijzigd door reddevil001 op 19-12-2004 15:50 . Reden: Sorry, topic niet goed omschreven... weet iemand hoe je dit kan corrigeren? ]

None

zondag 19 december 2004 15:50

Acties:

Verwijderd

HTML:

<style type="text/css">
.item { position: relative; width: 100%; border: 1px solid Red;}
.s1 { position: relative; width: 244; border-right: 1px solid #E0E0E0; padding-right: 4px; float : left}
.s2 { position: relative; width: 244; border-left: 1px solid #E0E0E0; padding-left: 4px; float : left}
</style>

zo werkt het hier perfect

zondag 19 december 2004 16:09

Acties:

Genoil

Mag ik vragen waarom je niet gewoon een TABLE gebruikt om een tabelstructuur in HTML te maken?

zondag 19 december 2004 16:15

Acties:

reddevil001

Topicstarter

Kage: Bedankt, dat was inderdaad zoals het moest zijn.

Genoil:Ik gebruik geen tabel, omdat er tussen de twee rijen nog een lijntje moet komen. Als ik een tabel ga gebruiken heb ik daar hoogstwaarschijnlijk een extra kolom voor nodig waarin ik nog iets van een plaatjes zal moeten plaatsen om een zichtbaar lijntje neer te zetten.
Bovendien werken styles gewoon netter voor bijvoorbeeld blinden en slecht zienden.

None

zondag 19 december 2004 16:25

Acties:

faabman

reddevil001 schreef op zondag 19 december 2004 @ 16:15:
Ik gebruik geen tabel, omdat er tussen de twee rijen nog een lijntje moet komen. Als ik een tabel ga gebruiken heb ik daar hoogstwaarschijnlijk een extra kolom voor nodig waarin ik nog iets van een plaatjes zal moeten plaatsen om een zichtbaar lijntje neer te zetten.

ehmmmm????

kun je met de je css border niets doen op je td's (lijkt me wel heel sterk) zie ook : http://www.w3schools.com/css/css_reference.asp#border

Bovendien werken styles gewoon netter voor bijvoorbeeld blinden en slecht zienden.

Dan wil ik wel eens weten waar je dat gelezen hebt... Ik heb namelijk altijd begrepen dat blinden en slecht zienden veel beter af zijn met semantisch correct opgestelde documenten... Kijk daarvoor anders maar eens op http://www.w3.org/WAI/ (en eventueel http://drempelsweg.nl of het guidelines gedeelte van overheid.nl http://www.advies.overheid.nl/webrichtlijnen/)

[ Voor 3% gewijzigd door faabman op 19-12-2004 16:27 ]

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

zondag 19 december 2004 16:25

Acties:

Verwijderd

Tabulaire data in een tabel werkt voor iedereen beter. (Wist je dat je met CSS ook tabellen kunt stijlen? Dat is niet alleen niet semantische DIV elementjes besteed ;-))

zondag 19 december 2004 16:31

Acties:

Genoil

reddevil001 schreef op zondag 19 december 2004 @ 16:15:
Kage: Bedankt, dat was inderdaad zoals het moest zijn.

firefox rendert de rijen naast elkaar ipv onder elkaar...

Genoil:Ik gebruik geen tabel, omdat er tussen de twee rijen nog een lijntje moet komen. Als ik een tabel ga gebruiken heb ik daar hoogstwaarschijnlijk een extra kolom voor nodig waarin ik nog iets van een plaatjes zal moeten plaatsen om een zichtbaar lijntje neer te zetten.

mja als je met een TABLE doet krijg je het idd niet precies zo als je het nu hebt met DIVs

Bovendien werken styles gewoon netter voor bijvoorbeeld blinden en slecht zienden.

Een textbrowser of brailleregel gaat alle divjes onder elkaar renderen waardoor de tabulaire relatie van de velden verloren gaat. Maar ik weet niet of dit juist is wat je wilt in dat geval.

zondag 19 december 2004 17:26

Acties:

reddevil001

Topicstarter

Voor de duidelijkheid... Er zal geen sprake zijn van een tabel waarbij een relatie bestaat tussen de kolommen en rijen. Er worden bijvoorbeeld geen getallen in opgenomen. Er is geen sprake van tabulaire relaties.
De tabel zal er alleen voor zijn zodat twee teksten netjes naast elkaar geplaatst worden net zoals kolommen in de krant gebruikt worden. In dat geval lijkt me het gebruik van tabellen voor slecht zienden juist geen goede oplossing. Met CSS kan je juist de data correct ordenen voor iemand die niet zoveel heeft aan het visuele aspect van een pagina.

[ Voor 4% gewijzigd door reddevil001 op 19-12-2004 17:27 ]

None

zondag 19 december 2004 17:36

Acties:

Genoil

Ok da's duidelijk

.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<style type="text/css">
.item { width: 100%; border: 1px solid Red; clear:left}
.s1 { position: relative; width: 244; border-right: 1px solid #E0E0E0; padding-right: 4px; float : left}
.s2 { position: relative; width: 244; border-left: 1px solid #E0E0E0; padding-left: 4px; float : left}
</style>
</head>

* doctype
* item { clear:left;}

Zo ziet het er op FFen IE6 tenminste hetzelfde uit

zondag 19 december 2004 18:53

Acties:

Verwijderd

dan denk ik dat je net als 100.000 anderen faux collumns zoekt, google daar maar eens op

edit:

[ Voor 9% gewijzigd door Verwijderd op 19-12-2004 19:59 ]

zondag 19 december 2004 19:57

Acties:

Superdeboer

Sa-weee-tah

Verwijderd schreef op zondag 19 december 2004 @ 18:53:
dan denk ik dat je net als 100.000 anderen fauz collumns zoekt, google daar maar eens op

Als de TS op die term gaat googlen dan vindt-ie nooit wat natuurlijk. Je bedoelt waarschijnlijk "faux columns"?

When I write my code, only God and I know what it means. One week later, only God knows.
Hell yes it's a Cuban Cigar, but I'm not supporting their economy, I'm burning their fields.

zondag 19 december 2004 19:58

Acties:

Verwijderd

eeh ja, it is laat he