[CSS] voor dummies - Deel 2 | Digital Corner (DIG)

zaterdag 17 september 2005 @ 16:59:49 #276

Chandler

@Roonaan: lijkt wel alsof het dus niet echt goed mogelijk is

gatsie

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zaterdag 17 september 2005 @ 17:15:26 #277

Leshy

Held met sokken.

Verticaal centreren is wel degelijk mogelijk, alleen werkt het zoals gewoonlijk niet in MSIE. Via display: table-cell; en vertical-align: center; kun je items verticaal centreren, omdat je dan gewoonweg een 100% hoogte <div> het gedrag van een table-cell kunt laten emuleren.

Je zult dan eventueel via CSS hacks een andere oplossing voor MSIE moeten aandragen, zoals het element op 50% laten beginnen, en dan een negatieve topmargin van de helft van de hoogte daarvan geven, zoals volgens mij al eerder vermeld is. Niet de mooiste oplossing, maar ja.

zaterdag 17 september 2005 @ 17:23:56 #278

WheeleE

StrikeE

quote:
Op zaterdag 17 september 2005 16:22 schreef Leshy het volgende:
Sluit het rechterplaatje aan op het linkerplaatje? Ergo, moet de linkerrand van het rechterplaatje per se aan de rechter rand van het linker plaatje vast zitten, of maakt het niet uit waar de linker afbeelding de rechter overlapt?

Ja, het moet aan de rechterkant zitten. Het rechterplaatje herhaalt zich, net zo vaak als nodig is om op te vullen tot de rand van het venster.
Zie www.rolstoelhockey.nl. Dat principe probeer ik te krijgen. De bovenste balk dus. Het rood/blauwe stukje herhaald zich tot de rand van het venster.

Ik hoop dat ik het duidelijk genoeg heb uitgelegd

.

[ Bericht 31% gewijzigd door WheeleE op 17-09-2005 17:45:07 ]

"...while I'm supposed to marry her brother, a renowned pillow biter." Cersei Lannister
"Float like a butterfly, sting like a bee, look ridiculous." Rory the Roman
"It's smaller on the outside." Clara Oswin Oswald

zondag 18 september 2005 @ 15:20:10 #279

HuHu

Ik probeer een tabel met DIV en SPAN tags te maken, maar het wil niet echt lukken. Kan iemand mij vertellen wat er fout gaat?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="tabel">
<div class="tabel_header">
   <span class="item_1">Naam:</span>
   <span class="item_2">Code is erg lang:</span>
   <span class="item_3">Blok:</span>
   <span class="item_4">Niveau:</span>
   <span class="item_5">Nog iets:</span>
   <span class="item_6">En nog iets:</span>
</div>
<div>
   <span class="achtergrondkleur">
      <span class="item_1">De naam van iets</span>
      <span class="item_2">code</span>
   </span>
   <span class="item_3">1</span>
   <span class="item_4">1</span>
   <span class="item_5">10</span>
   <span class="item_6">7,5</span>
</div>
</div>

En de bijbehorende CSS:

1
2
3
4
5
6
7
8
9
10
11
12

.achtergrondkleur {background-color:#669900;}

.tabel {line-height:1.3em;}

.tabel_header{border-bottom: 2px solid gray; width:670px;}

.item_1 {float:left; width:200px; margin:0;}
.item_2 {border-left:1px solid gray; padding:1em; width:100px;}
.item_3 {border-left:1px solid gray; padding:1em; width:100px;}
.item_4 {border-left:1px solid gray; padding:1em; width:100px;}
.item_5 {border-left:1px solid gray; padding:1em; width:100px;}
.item_6 {border-left:1px solid gray; padding:1em; width:100px;}

Maar nu wil ik daar dus een mooi tabelletje van maken en nog meer rijen toevoegen dan de ene die er nu is. De eerste 2 kolommen van een rij moeten een achtergondkleur krijgen.

Het probleem is nu dat de items niet mooi op elkaar aansluiten. In de header is item 2 veel breder dan de inhoud van item 2 bij de eerste rij van de tabel. Nu begint item 3 dus ongelijk met het kopje wat erboven hoort. Het zit nu dus zo:

1
2
3

| | | | |
-------------------------------------
| | | | |

Dat ziet er niet netjes uit, maar het gekke is dat het width attribuut bij item 1 wel gepakt wordt, maar bij de rest niet.

zondag 18 september 2005 @ 15:49:41 #280

Berkery

Fat bastard

'Width' werkt normaal geproken niet op inline elementen zoals <span>, maar misschien dat het door de float: left wel werkt op .item_1.

Maar wat is precies het nut hiervan?

No Dukes of Hazzard in the classroom

zondag 18 september 2005 @ 15:53:03 #281

HuHu

Oké, dat vermoedde ik al. Maar ik wil dus een tabel achtig iets maken, met behulp van DIV's, SPAN's en CSS. Dus zonder de TABLE tag te gebruiken.

zondag 18 september 2005 @ 16:15:00 #282

DionysuZ

Respect my authority!

quote:
Op zondag 18 september 2005 15:53 schreef HuHu het volgende:
Oké, dat vermoedde ik al. Maar ik wil dus een tabel achtig iets maken, met behulp van DIV's, SPAN's en CSS. Dus zonder de TABLE tag te gebruiken.

wat is daar het nut van? De Table tag is juist bedoeld voor het maken van tabellen, vandaar ook "table" tag

.

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

zondag 18 september 2005 @ 16:16:32 #283

HuHu

quote:
Op zondag 18 september 2005 16:15 schreef DionysuZ het volgende:

[..]

wat is daar het nut van? De Table tag is juist bedoeld voor het maken van tabellen, vandaar ook "table" tag .

Ik kan voor een opdracht een bonuspunt scoren als ik geen tabellen maar DIV's enzo gebruik. Maar het wil nog niet echt lukken, vandaar mijn vraag.

zondag 18 september 2005 @ 17:35:22 #284

SuperRembo

Sinds 1998

quote:
Op zondag 18 september 2005 16:16 schreef HuHu het volgende:

[..]

Ik kan voor een opdracht een bonuspunt scoren als ik geen tabellen maar DIV's enzo gebruik. Maar het wil nog niet echt lukken, vandaar mijn vraag.

Kan je ook een bonuspunt verdienen als je kan uitleggen dat tabulaire data in een tabel thuis hoort? Als je wordt geleerd dat je nooit meer tabellen mag gebruiken dan heeft je leraar het duidelijk niet begrepen.

zondag 18 september 2005 @ 19:11:55 #285

PuPu

quote:
Op zondag 18 september 2005 17:35 schreef SuperRembo het volgende:

[..]

Kan je ook een bonuspunt verdienen als je kan uitleggen dat tabulaire data in een tabel thuis hoort? Als je wordt geleerd dat je nooit meer tabellen mag gebruiken dan heeft je leraar het duidelijk niet begrepen.

Ik citeer even de opdracht:

quote:
Als je in plaats van tabellen overal gebruik maakt van blokken, wordt je cijfer met een (1) bonuspunt verhoogd.

Met blokken wordt het box-model genoemd wat in de uitleg als volgt staat:

quote:
Natuurlijk is het een optie (en niet per se een slechte) om tabellen te gebruiken, maar het kan ook anders (met behulp van CSS). Het model waar je dan in CSS mee werkt, heet het CSS box model. Dat box model gaat o.a. uit van:
- positionering van een blok in een ruimte (canvas): de afstand van de rand van een blok tot aan de rand van het canvas wordt margin genoemd.
- de positie van de content van een blok t.o.v. de rand van dat blok: de ruimte tussen de content en de rand van het blok wordt padding genoemd.

Oftewel, maak een tabel met DIV dingen.

Het slaat natuurlijk nergens op, de TABLE tag is veel beter. Maar 1 punt is toch mooi meegenomen. Maargoed, ik zal nog eens doordringend vragen of dit wel echt de bedoeling is. Zelf weet ik niet of het überhaupt mogelijk is, vandaar dat ik de vraag hier stelde.

zondag 18 september 2005 @ 20:16:19 #286

Leshy

Held met sokken.

Als je tabellen gebruikt om layout te regelen, ben je verkeerd bezig. Als je tabellen gebruikt om informatie in tabelvorm weer te geven, ben je goed bezig

quote:
Op zaterdag 17 september 2005 16:15 schreef WheeleE het volgende:
Ik krijg het echter niet voor elkaar. Hoe krijg ik dat rechterplaatje zover dat het herhaald wordt tot de breedte van het venster, hoe breed dat ook is?

Okay, gezien je uitleg is het vrij eenvoudig.

1
2
3
4
5
6
7
8
9

#header {
  width: 100%; height: 100px;
  background: url('herhalendplaatje.jpg') repeat-x;
  }

<div id='header'>
  <img src='header-plaatje.jpg' width='200' height='100'
    alt='Afbeelding van blabla' title='Naam van site'/>
</div>

zondag 18 september 2005 @ 20:25:03 #287

SuperRembo

Sinds 1998

quote:
Op zondag 18 september 2005 19:11 schreef PuPu het volgende:

[..]

Ik citeer even de opdracht:
[..]

Met blokken wordt het box-model genoemd wat in de uitleg als volgt staat:
[..]

Oftewel, maak een tabel met DIV dingen.

Het slaat natuurlijk nergens op, de TABLE tag is veel beter. Maar 1 punt is toch mooi meegenomen. Maargoed, ik zal nog eens doordringend vragen of dit wel echt de bedoeling is. Zelf weet ik niet of het überhaupt mogelijk is, vandaar dat ik de vraag hier stelde.

Nou, lekkere opleiding dan

Welke opleiding doe je precies?
Volgens mij stond er vanmiddag nog "student informatica" in je profiel

zondag 18 september 2005 @ 20:55:02 #288

HuHu

quote:
Op zondag 18 september 2005 20:25 schreef SuperRembo het volgende:

[..]

Nou, lekkere opleiding dan Welke opleiding doe je precies?
Volgens mij stond er vanmiddag nog "student informatica" in je profiel

Dat staat nog steeds in m'n profiel, kijk maar even naar het verschil in de user-names

Maar ik doe dus Informatica, maar dit is een vak dat behoort bij Informatiekunde. Ik heb het voor de lol gekozen, maar het wordt wel wat vaag op deze manier. Ik ben dan tweedejaars, maar dit is officieel het eerste vak wat eerstejaars Informatiekunde studenten krijgen.

dinsdag 20 september 2005 @ 10:42:48 #289

Wouta

Hoi,

Ik heb een CSS probleempje waar ik even niet uit kom. Ik heb de volgende code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
<head>
<title>Mijn homepage</title>
<style type="text/css">
.contentheading {
   background-color: yellow;
   padding: 10px;
   border-width: 5px;
   border-style: solid;
   border-color: green;
}
</style>
</head>
<body bgcolor="white">

<table cellSpacing="0" cellPadding="0" width="100%" id="table17" border="1">
               <tr>
                  <td vAlign="top" width="50%">
                  <table class="contentpaneopen" id="table18">
                     <tr>
                        <td class="contentheading" width="100%">
                        een tekst komt hier.
                        </td>
                     </tr>
                  </table>

Nu wil ik graag dat gekleurde tebalettjes helemaal word gevuld met groen/geel. Ik snap even totaal niet hoe ik dit voor elkaar moet krijgen.

Ik heb wel aan iets met width zitten proberen maar dan heb ik weer een probleem als toevallog het iets langer of korter moet zijn....

dinsdag 20 september 2005 @ 11:08:14 #290

Roonaan

Strictly

????????????

woensdag 21 september 2005 @ 15:32:32 #291

dujour

Nou daaaaag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/* General definitions */
.bar
{
   margin-top: 0;
   background-color: #F1EA3F;
   width: 100%;
   padding: 0px;
   background-image: url(/images/bar.gif);
   margin-top: 0px;
}

.info
{
   text-align: left;
}

.footer
{
   background-color: #538AC8;
}

.header
{
}

.head_table
{
   border-width: 3px;
   border-color: #0F0F0F;
}

hier doen het een paar dingen niet.

ik divineer zeg maar <table class=head_table>

maar een border geven hoe maar.

margin doet het ook niet bij de eerste iemand die me uit de brand kan helpen

Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

woensdag 21 september 2005 @ 16:35:05 #292

HuHu

Probeer in plaats van margin-top eens padding-top.

Doe in plaats van

1
2
3
4
5

.head_table
{
border-width: 3px;
border-color: #0F0F0F;
}

eens

1
2
3
4

.head_table
{
border: 3px solid #0F0F0F;
}

woensdag 21 september 2005 @ 21:37:12 #293

Chandler

Weet iemand waarom http://services.bruggema.nl er wel goed uitziet in IE en niet in FF (het overflow gedeelte?

) Super veel tnx..

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 september 2005 @ 21:39:17 #294

Chandler

Tnx SuperRembo voor de font=family

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 september 2005 @ 21:42:55 #295

Roonaan

Strictly

gebrek aan doctype, uppercase tags, tablebased layout? nog meer?

woensdag 21 september 2005 @ 21:58:59 #296

Chandler

ik weet het, morgen ga ik het document helemaal afmaken als ik maar een lokale W3C validator kan regelen... anders zit ik nog op me werk te shitten

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 22 september 2005 @ 11:33:50 #297

hr15

Ik heb altijd tabellen gebruikt voor mijn opmaak en wil hiervoor nu eens met css aan de gang.
Echter ben ik nog steeds aan het prutsen met hoe het precies werkt. En misschien een hele domme vraag, maar ik kom er niet meer uit.

http://www.xs4all.nl/~hugog/probeersel/probeersel2.html

Het ene werkt onder internet explorer wel juist en het andere niet en zo is het andersom onder Opera ook. Ik krijg het echter niet voor elkaar dat het in beiden juist werkt.
- In IE hebben bepaalde divjes niet de juiste hoogte
- En onder Opera sluiten de divjes niet op elkaar aan.

Hoe kan ik dit nu het beste oplossen?

donderdag 22 september 2005 @ 13:33:32 #298

Leshy

Held met sokken.

Ten eerste zie ik wat fouten in je CSS-code. Er staat verschillende malen _ in plaats van - (als in padding_left: in plaats van padding-left:), en ook een paar keer opx in plaats van 0px (dus o, in plaats van nul). Bovendien is het handiger om gewoon al die margins en paddings weg te laten, en gewoon een regel aan te maken met div {margin: 0; padding: 0;}, en eventuele margins en paddings apart te zetten.

Bovendien bestaat float: top in het geheel niet, dus die kun je er ook allemaal uit halen

donderdag 22 september 2005 @ 13:58:44 #299

hr15

Oops dat met die o en 0 enzo helemaal niet gezien

Heb volgens mij alle dingen er nu uitgehaald, in ieder geval alvast bedankt voor de tips

donderdag 22 september 2005 @ 14:44:03 #300

WheeleE

StrikeE

quote:
Op zaterdag 17 september 2005 17:23 schreef WheeleE het volgende:

[..]

Ja, het moet aan de rechterkant zitten. Het rechterplaatje herhaalt zich, net zo vaak als nodig is om op te vullen tot de rand van het venster.
Zie www.rolstoelhockey.nl bijvoorbeeld. Dat principe probeer ik te krijgen. De bovenste balk dus. Het rood/blauwe stukje herhaald zich tot de rand van het venster.

Ik hoop dat ik het duidelijk genoeg heb uitgelegd .

Iemand die mij hier nog iets verder mee kan helpen?

"...while I'm supposed to marry her brother, a renowned pillow biter." Cersei Lannister
"Float like a butterfly, sting like a bee, look ridiculous." Rory the Roman
"It's smaller on the outside." Clara Oswin Oswald

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

[CSS] voor dummies - Deel 2

» digital corner

» digital corner