[CSS] voor dummies.

Lieve Belg zaterdag 27 november 2004 @ 12:12:59 #51

Jump

[Belg.] Jump (de ~ (m.))

quote:
Op zaterdag 27 november 2004 11:51 schreef Omkron het volgende:
wat is css..?

cascade style sheet

de opmaak van je webpagina kan je in een extern bestand plaatsen. als je ergens je tekstkleur wil wijzigen kan je dit eenvoudig doen in dat bestand, en alle tekst die aan dat gekoppend is wijzigd van van kleur

beter gezegd: gecentraliseerde opmaak

Op zondag 28 oktober 2007 01:07 schreef clumsy_clown het volgende:
Jump daarentegen, is wáy minder braaf en lief dan hij lijkt
          «shmoop|dingen» jawel, jij bent Superjump

zaterdag 27 november 2004 @ 12:31:39 #52

Light

quote:
Op donderdag 25 november 2004 19:39 schreef Chandler het volgende:
kleine vraag; je moet dus om zo'n boxmodel hack te hanteren de volgende regel hanteren? = hopelijk de juiste gedachte.

je moet de border*2+left&right margins/padding bij elkaar oprekenen en dan appart voor IE5/6 in en zonder quirk mode
[..]

goed gedacht, ik zie dingen graag standaard en berekenbaar

Ik hoop dat je ook met FireFox / Mozilla ofzo aan het testen bent

fokstok.nl

zaterdag 27 november 2004 @ 12:38:14 #53

Chandler

juist met firefox

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

donderdag 9 december 2004 @ 20:10:13 #54

DutchBlood

Is het mogelijk om met CSS text verticaal in een tabel te zetten?

Dus voor bijvoorbeeld een competitie schema.

donderdag 9 december 2004 @ 20:29:55 #55

Leshy

Held met sokken.

Nope, dit komt pas met CSS3. De beste oplossing die je tot dan toe hebt, is gebruik maken van plaatjes ipv tekst.

donderdag 9 december 2004 @ 21:16:36 #56

Roonaan

Strictly

quote:
Op donderdag 9 december 2004 20:29 schreef Leshy het volgende:
Nope, dit komt pas met CSS3. De beste oplossing die je tot dan toe hebt, is gebruik maken van plaatjes ipv tekst.

Kijk, dit is dus complete nonsens.

Als het een willekeurige onbekende lengte tekst betreft is het erg ingewikkeld, maar uitgaande van jouw "suggestie" - een image, dus een fixed length tekst - is het zeer zeker mogelijk om vertikaal te centreren met css. Dat jij niet weet hoe is een tweede.

Verkeerd gelezen, hoog van de toren geblazen, en hard ervanaf gewaaid op mijn bek stuiterend.

donderdag 9 december 2004 @ 21:29:57 #57

Leshy

Held met sokken.

quote:
Op donderdag 9 december 2004 21:16 schreef Roönaän het volgende:
Verkeerd gelezen

Geeft niet, deed ik ook eerst

zaterdag 11 december 2004 @ 18:08:27 #58

Joipoidoipoipoi

met broedsel incl. grote zus!

Weet iemand hoe ik in een extern css-bestand de scrollbar op 'auto' zet? (Als ik op Google zoek, kom ik alleen maar onderwerpen over een gekleurde scrollbar tegen.)

"If you don't stop lying about me, I'll start telling the truth about you."

zaterdag 11 december 2004 @ 18:14:40 #59

DutchBlood

quote:
Op zaterdag 11 december 2004 18:08 schreef Joipoidoipoipoi het volgende:
Weet iemand hoe ik in een extern css-bestand de scrollbar op 'auto' zet? (Als ik op Google zoek, kom ik alleen maar onderwerpen over een gekleurde scrollbar tegen.)

overflow: auto;

.

http://www.w3schools.com/css/pr_pos_overflow.asp

dinsdag 14 december 2004 @ 12:45:03 #60

ikke_ook

Ik heb een vraagje. Als ik een bepaalt stukje tekst een bepaalde opmaak wil geven met css doet ik dit altijd met <p class="klasse"></p> maar hier zitten altijd breaks omheen, dus je kunt op deze manier niet 2 stukken tekst van verschillende klassen zonder breaks achter elkaar typen.
Hier is vast wel een oplossing voor maar die weet ik dus niet en dat is dus waarom ik hier kom.

Vogelaars.nl

dinsdag 14 december 2004 @ 12:49:34 #61

ikke_ook

Volgens mij heb ik nu alweer het antwoord gevonden op mijn eigen vraag...
<span class="klasse"></span> Klopt dat?of moet het volgens de standaards op een andere manier?

Vogelaars.nl

dinsdag 14 december 2004 @ 13:01:00 #62

ikke_ook

Alleen dan werkt align="center" weer niet.... <span class="kop3" align="center">

Vogelaars.nl

dinsdag 14 december 2004 @ 13:04:07 #63

RM-rf

1/998001

quote:
Op dinsdag 14 december 2004 12:45 schreef ikke_ook het volgende:
Ik heb een vraagje. Als ik een bepaalt stukje tekst een bepaalde opmaak wil geven met css doet ik dit altijd met <p class="klasse"></p> maar hier zitten altijd breaks omheen, dus je kunt op deze manier niet 2 stukken tekst van verschillende klassen zonder breaks achter elkaar typen.
Hier is vast wel een oplossing voor maar die weet ik dus niet en dat is dus waarom ik hier kom.

een P is een block-level element, oftewel het neemt standaard de gehele beschikbare breedte in (tenzij specifieke width gedefinieerd is), en erna komt een automatische 'clear' (tenzij het element 'float')
Ook een DIV is standaard een block-level element, alswel een FORM, een UL, de Heading-elementen (H1,H2,H3..) etc etc....

een Block-level element kan ook margins en paddings hebben (in het geval van de P veroorzaken de margins de extra tussenruimte)

aan de andere kant bestaan er ook 'inline' elementen, die gewoon meegaan in de flow van de tekst en geen 'clear' genereren,
bekende standaard 'inline' elementen zijn bv SPAN, maar ook <strong>, <em>, <adress>..

met behulp van CSS is de gehele visuele layout van ieder element te veranderen, dus een P is door

1
2
3

P {
display: inline;
}

ook inline te maken alswel een SPAN kun je daarmee een block-element maken (mbhv "display: block;")

Maar dat moet je niet zomaar gan doen, de truc is eigenlijk dat je probeert te zorgen dat je HTML-code zelf redelijk sober en overzichtelijk blijft, het beste kun je dat doen door bv semantisch correcte code te gebruiken, dus altijd P's voor alinea's, H1,H2,H3 voor titels en subtitels

bijvoorbeeld:

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

<ul id="menu">
   <li> <a href="pagina1.html">linkje 1</a></li>
   <li> <a href="pagina2.html">linkje 2</a></li>
   <li> <a href="pagina3.html">linkje 3</a></li>
</ul>
<div id="mainBody">
   <h1>Een voorbeeldje van sematische HTML</h1>

   <h2>eerste subtitel</h2>
   <p> eerste paragraaf,die een <em>stukje tekst</em> bevat...</p>

   <h2>tweede subtitel</h2>
   <p> eerste paragraaf,welk <strong>ook</strong> weer wat tekstuele
     inhoud bevat...</p>
</div>
<div id="sideNotes">
   <h1> zijdelingse notities</h1>
   <p> bladieblah, nog wat tekst</p>
</div>

dit is dan weer te stylen door bv

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
31
32
33
34
35
36
37
38

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

vrijdag 17 december 2004 @ 01:37:48 #64

Heliospan

(-_-)

Ik ben een layout aan het ontwikkelen voor een nieuw project van me, die hier te vinden is. In Firefox ziet het er goed uit, precies zoals ik wil. Maar in IE ziet het er totaal niet uit. Contentboxen zijn zo breed als dat er tekst in staat.

Op deze manier:

1
2
3
4
5
6
7
8
9
10

         #user {
            position:       absolute;
            top:          20px;
            left:         246px;
            right:         20px;
            height:         14px;
            padding-left:   5px;
            border:       1px solid #000;
            background:      #fee;
         }

... wil ik een bepaalde DIV gevuld hebben tot de rechterkant van het scherm, op 20 pixels na. In Firefox werkt dat, maar in IE dus niet. Hoe 'zeg' ik in CSS dat ik het helemaal gevuld wil hebben? (zie de link voor duidelijkheid)

-edit-
In Opera werkt het ook prima

[ Bericht 3% gewijzigd door Heliospan op 17-12-2004 02:57:18 ]

» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen

vrijdag 17 december 2004 @ 03:21:23 #65

Leshy

Held met sokken.

Ik heb net eventjes naar je layout gekeken, en alhoewel uiteraard hulde voor het gebruik van CSS, toch een paar kleine dingetjes gezien.

CSS-waardes van 0 hebben geen achtervoegsel nodig. Dus gewoon 0 in plaats van 0px

Lettergroottes nooit in pixels weergeven, sommige browsers (MSIE) kunnen dan de lettergrootte niet meer aanpassen.

Absoluut positioneren is eigenlijk iets wat je niet of tenminste zo min mogelijk moet gebruiken. Op lagere resoluties en onder andere vage omstandigheden kan je layout dan vreemd gaan doen.

Gebruik geen XHTML-tags als je doctype HTML aangeeft. Dus gewoon <br> in plaats van <br/>.

Gebruik tags waar ze voor bedoeld zijn. <h?> tags zijn voor koppen en tussenkopjes, niet om willekeurige woorden vet en/of onderlijnd te maken.

Ik ben dus even zo vrij geweest om wat te knutselen en heb een alternatieve versie van je site in elkaar geknutseld mbv CSS, op de manier waarop ik het zou aanpakken. Deze layout werkt zowel in Opera, MSIE als Firefox als het goed is

En nee, ik kwam er zo gauw niet achter waarom in jouw versie MSIE idioot doet

vrijdag 17 december 2004 @ 09:26:47 #66

Roonaan

Strictly

Probeer het eens met een xhtml doctype

vrijdag 17 december 2004 @ 12:11:10 #67

Heliospan

(-_-)

quote:
Op vrijdag 17 december 2004 03:21 schreef Leshy het volgende:

Ik ben dus even zo vrij geweest om wat te knutselen en heb een alternatieve versie van je site in elkaar geknutseld mbv CSS, op de manier waarop ik het zou aanpakken. Deze layout werkt zowel in Opera, MSIE als Firefox als het goed is

Leshy!

Geweldig! Bedankt voor de moeite!

quote:
Lettergroottes nooit in pixels weergeven, sommige browsers (MSIE) kunnen dan de lettergrootte niet meer aanpassen.

Ah, ik zat me al een hele tijd af te vragen waarom dat zo vreemd ging in IE. Weer wat geleerd

quote:
Absoluut positioneren is eigenlijk iets wat je niet of tenminste zo min mogelijk moet gebruiken. Op lagere resoluties en onder andere vage omstandigheden kan je layout dan vreemd gaan doen.

Je hebt gelijk. Maar, ik had de pagina links uitgelijnd, waardoor de pagina er links (bij het logo, de navigatie en het menuutje) altijd hetzelfde uitzag en de rest mee zou resizen. Maar dat kan dus ook wel op een andere manier

quote:
Gebruik tags waar ze voor bedoeld zijn. <h?> tags zijn voor koppen en tussenkopjes, niet om willekeurige woorden vet en/of onderlijnd te maken.

Ik zat even te testen hoe de validators hierop zouden reageren. Als ik <b>...</b> gebruik is het fout, als ik het op deze manier deed was het wel goed. Ik vond het al zo vreemd.

Bedankt dat je hier zoveel tijd in hebt gestopt. Nu kan ik bijna weer verder met de dingen die ik veel leuker vind, scripten ipv designen

» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen

zondag 19 december 2004 @ 15:49:11 #68

Wouta

Ik ben weer is met CSS verder gaan stoeien alleen kom ik even ergens niet uit.
Ik wil graag op 1 regel iets links en rechts uitgelijnd hebben.
Ik had zelf het volgende in gedachten:

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

Er wordt wel links en rechts uitgelijnd alleen niet op 1 regel. De tekst andere tekst komt op een regel er onder, Kan Iemand mij vertellen hoe ik dit wel goed krijg ?

zondag 19 december 2004 @ 16:05:06 #69

Leshy

Held met sokken.

1
2
3
4
5
6
7
8
9
10
11

zondag 19 december 2004 @ 16:19:16 #70

Wouta

Bedank Leshy!

Ik had ook met float zitten klooien alleen ik haalde dan text-align weg...

zondag 19 december 2004 @ 16:45:20 #71

saban

hoi?

Nu we toch bezig zijn, heb ik ook een vraagje

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

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="20%" height="20">
  <tr>
    <td width="20%" height="23" align="center">
    <p align="center"><div class="menu"><a href="?surf=home">Home</a></div></td>
    <td width="20%" height="23" align="center">
    <p align="center"><div class="menu"><a href="?surf=results">Results</a></div></td>
    <td width="20%" height="23" align="center">
    <p align="center"><div class="menu"><a href="?surf=history">History</a></div></td>
    <td width="20%" height="23" align="center">
    <p align="center"><div class="menu"><a href="mailto:sinan[at]sinan06[dot]nl">Contact</a></div></td>
  </tr>
</table>

Hoe kan ik in 1 keer voor het hele tabel een lay-out meegeven.
Nu heb ik bij ieder woord/zin apart <div class="menu">...</div/> vermeldt.

ne okuyon, bokmu var?

zondag 19 december 2004 @ 17:12:50 #72

Leshy

Held met sokken.

Voor een menu is het makkelijker een unordered list te gebruiken. Dit scheelt flink wat HTML-code, zeker wanneer je de CSS netjes in een extern bestand steekt.

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

zondag 19 december 2004 @ 18:00:27 #73

saban

hoi?

quote:
Op zondag 19 december 2004 17:12 schreef Leshy het volgende:
Voor een menu is het makkelijker een unordered list te gebruiken. Dit scheelt flink wat HTML-code, zeker wanneer je de CSS netjes in een extern bestand steekt.
[ code verwijderd ]

En als ik dit voor je links wil toepassen;

1
2
3
4
5
6
7
8

a {
  color: #FFFFFF;
  border-bottom: 1px none;
  text-decoration: none;
}
a:hover {
  border-bottom: 1px dashed #FFFFFF;
}

Zo werkt het niet;

1
2
3
4
5
6
7
8

  ul#menu li a {
    color: #FFFFFF;
    border-bottom: 1px none;
    text-decoration: none;
  }
  ul#menu li a:hover {
  border-bottom: 1px dashed #FFFFFF;
}

Wat doe ik verkeerd ?

Dit is de menu

ne okuyon, bokmu var?

zondag 19 december 2004 @ 18:25:53 #74

Roonaan

Strictly

Wrom gebruik je overal single quotes?

zondag 19 december 2004 @ 18:26:54 #75

Roonaan

Strictly

Maar waarschijnlijk moet je even goed refreshen, want het menu doet het hier wel..

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

» digital corner

» digital corner