[CSS] Verschil tussen class en id?

maandag 7 januari 2008 20:56

Watch out Guys...

In welke browsers test je en geef eens een kant en klaar voorbeeld (of desnoods printscreens). Het enige wat dubieus zou kunnen zijn (in een dubieuze browser) is dezelfde naam voor je class en id, maar kan me niet herinneren dat dat ooit een probleem geweest moest zijn

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

Verwijderd

Onzin, wat wel is is dat een ID belangrijker wordt gevonden, en dus niet overschreven kan worden (ja kan wel, maar simpel gezegd

)

#main ul.lijstje { margin: 0 }

ul.lijstje { margin: 10px }

blijft 0

waar schijnlijk is dit dus ook het geval bij jou. het is op te lossen met !important, maar dat is een nogal ranzige oplossing vind ik.

[ Voor 25% gewijzigd door Verwijderd op 07-01-2008 21:00 ]

maandag 7 januari 2008 21:02

Acties:

Verwijderd

Reveller schreef op maandag 07 januari 2008 @ 19:39:

Cascading Stylesheet:

#foo {                     .foo {
  width: 100%;               width: 100%;
  display: block;            display: block;
  background: red;           background: red;
}                          }

Misschien een hele stomme vraag maar staat het in je CSS ook zo naast elkaar?

maandag 7 januari 2008 22:30

Acties:

maandag 7 januari 2008 22:46

Hopla!

Topicstarter

Jullie hebben gelijk - het probleem zat ergens anders. @Blues - nee, mijn css staat gewoon onder elkaar; dit was alleen om de topicstart niet te lang te maken

Mijn probleem is dit:

HTML:

<html>
  <head>
    <style>
    ul.bar {
      width: 100%;
      background: #bbb;
      margin: 0;
      padding: 0;
    }    
    </style>
  </head>
  <body>
    <div class="foo">
      <ul class="bar"><li>bar</li><li>bar</li></ul>
      <textarea class="fubar"></textarea>
    </div>
    <input type="submit">
  </body>
</html>

Bovenstaande ziet er in FF en IE hetzelfde uit: een rode balk (schermbreed) met twee li-items onder elkaar. Daaronder een textarea en daaronder een button. Wat ik wil is de li-items naast elkaar zetten (dit wordt de topnav van mijn site). Dat doe je met li float: left:

HTML:

<html>
  <head>
    <style>
    ul.bar {
      width: 100%;
      background: #bbb;
      margin: 0;
      padding: 0;
    }
    
    ul.bar li {
      float: left;
    }
    </style>
  </head>
  <body>
    <div class="foo">
      <ul class="bar"><li>bar</li><li>bar</li></ul>
      <textarea class="fubar"></textarea>
    </div>
    <input type="submit">
  </body>
</html>

Het gevolg is dat IE het weergeeft zoals bedoeld (rechts), maar FF doet iets heel anders (links):
Afbeeldingslocatie: http://www.danandan.luna.nl/got/foobar.jpg

Afbeeldingslocatie: http://www.danandan.luna.nl/got/foobar.jpg

Hoe los ik dit op?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

Acties:

Verwijderd

Dit is een manier:

Cascading Stylesheet:

    ul.bar {
      width: 100%;
      background: #bbb;
      margin: 0;
      padding: 0;
      overflow:auto;
      list-style:none;
    }

De reden dat je de achtergrondkleur niet zag bij Firefox is dat gefloate elementen geen hoogte hebben (maar het wel innemen). De UL krijgt dus ook geen hoogte (en is er dus ook geen achtergrond te tekenen). Hiervoor is de overflow:auto. Firefox tekent ook de bullet over de achtergrond heen, itt IE dus we halen ook de list-style even weg.

maandag 7 januari 2008 22:47

Acties:

crisp

Devver

Pixelated

Door je floats te clearen

Doordat je de list-items uit de flow haalt heeft je <ul> feitelijk geen hoogte meer. Firefox rendered het dus goed en IE niet...

Intentionally left blank

maandag 7 januari 2008 22:50

Acties:

maandag 7 januari 2008 23:13

Watch out Guys...

Verwijderd schreef op maandag 07 januari 2008 @ 20:56:
Onzin, wat wel is is dat een ID belangrijker wordt gevonden, en dus niet overschreven kan worden (ja kan wel, maar simpel gezegd )

#main ul.lijstje { margin: 0 }

ul.lijstje { margin: 10px }

blijft 0

waar schijnlijk is dit dus ook het geval bij jou. het is op te lossen met !important, maar dat is een nogal ranzige oplossing vind ik.

Dat heeft niks met id oid te maken, maar met specificity van je CSS

Reveller: ik zou trouwens gewoon wat meer gaan verdiepen in CSS. Dit soort dingen loop je vaak eenmaal tegenaan en vergeet ze hopelijk maar 1 keer daarna

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

maandag 7 januari 2008 23:33

Hopla!

Topicstarter

Bedankt voor jullie hulp. Een laatste vraag: de ul en textarea worden omspannen door <div id="foo">. Ik zou dus verwachten dat de submit-button onder deze div zou komen te staan. Toch gebeurt dit niet. Hoe kan ik ervoor zorgen dat dat gebeurt en dat de breedte van de ul zich aanpast aan de breedte van de foo-div? Ik probeerde het al met onderstaande maar dat werkt niet.

Cascading Stylesheet:

.foo {
  display: block;
  background: #ddd;
}

Voor de duidelijkheid: ik bedoel dus (geel = foo, groen = bar ul, rood = fubar texarea, blauw = button):

Afbeeldingslocatie: http://www.danandan.luna.nl/got/divs.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/divs.gif

[ Voor 15% gewijzigd door Reveller op 07-01-2008 23:18 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

Acties:

maandag 7 januari 2008 23:57

Watch out Guys...

Je geeft heel leuk vier kleurtjes weer, plaats dan ook even de volledige html + css source (in één code blok) zodat we weten wat je allemaal probeert. Beter nog, zet het ff online

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

dinsdag 8 januari 2008 00:49

Hopla!

Topicstarter

BtM909 schreef op maandag 07 januari 2008 @ 23:33:
Je geeft heel leuk vier kleurtjes weer, plaats dan ook even de volledige html + css source (in één code blok) zodat we weten wat je allemaal probeert. Beter nog, zet het ff online

Oke, even heel duidelijk. Links hoe het er nu uit ziet; rechts hoe het eruit zou moeten zien. Daaronder de html / css die ik nu heb:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/divs2.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/divs2.gif

HTML:

<html>
  <head>
    <style>
    .foo {
      display: block;
      background: #F1FF00;
    }
    
    ul.bar {
      width: 100%;
      background: #00A737;
      margin: 0;
      padding: 0;
      overflow:auto;
      list-style:none;
    }
    
    ul.bar li {
      float: left;
    }
    
    textarea.fubar {
      clear: both;
      float: left;
      background: #FF002A;
    }
    
    input {
      background: 60A0FF;
    }
    </style>
  </head>
  <body>
    <div class="foo">
      <ul class="bar"><li>bar</li><li>bar</li></ul>
      <textarea class="fubar"></textarea>
    </div>
    <input type="submit">
  </body>
</html>

Bedankt voor ieders hulp tot nu toe

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

Acties:

Boelie-Boelie

Jouw verwachting was dat de div alles erin zou omvatten. Wanneer je merkt dat een div niet als een blo(c)k reageert en niet alles erin omvat, én je gebruikt floats, dan moet je zorgen dat je een float-clearingmethode gebruikt.

Dus clear die floats nog eens... zelfde trucje als hierboven wordt genoemd, maar dan op de foo.

Btw een div is al een block-level-element; die hoef je niet nogmaals 'display:block' mee te geven...

Cogito ergo dubito

dinsdag 8 januari 2008 01:42

Acties:

dinsdag 8 januari 2008 09:08

Hopla!

Topicstarter

Boelie-Boelie schreef op dinsdag 08 januari 2008 @ 00:49:
Jouw verwachting was dat de div alles erin zou omvatten. Wanneer je merkt dat een div niet als een blo(c)k reageert en niet alles erin omvat, én je gebruikt floats, dan moet je zorgen dat je een float-clearingmethode gebruikt.

Dus clear die floats nog eens... zelfde trucje als hierboven wordt genoemd, maar dan op de foo.

Btw een div is al een block-level-element; die hoef je niet nogmaals 'display:block' mee te geven...

Ik snap niet goed wat je bedoelt. Ik heb nu alle elementen gefloat en gecleared, maar er treedt geen verandering in rendering op. Kun je iets preciezer zijn?

HTML:

<html>
  <head>
    <style>
    .foo {
      background: #F1FF00;
      clear: left;
    }
    
    ul.bar {
      width: 100%;
      background: #00A737;
      margin: 0;
      padding: 0;
      overflow:auto;
      list-style:none;
    }
    
    ul.bar li {
      float: left;
    }
    
    textarea.fubar {
      clear: left;
      float: left;
      background: #FF002A;
    }
    
    input {
      clear: left;
      background: 60A0FF;
    }
    </style>
  </head>
  <body>
    <div class="foo">
      <ul class="bar"><li>bar</li><li>bar</li></ul>
      <textarea class="fubar"></textarea>
    </div>
    <input type="submit">
  </body>
</html>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

Acties:

moozzuzz

Volgens mij zou je enkel de input moeten clear:both 'en.

dinsdag 8 januari 2008 11:56

Acties:

dinsdag 8 januari 2008 14:48

Watch out Guys...

Er zijn meerdere manieren, maar je moet je wel gaan verdiepen wat clear precies doet

Zoek het even op in de specs en kijk wat andere websites erover zeggen.

Mooiste en netste vind ik om je containing element een overflow:

Cascading Stylesheet:

1	overflow: auto \| hidden;

mee te geven

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

dinsdag 8 januari 2008 15:26

Smells Like Team America

BtM909 schreef op dinsdag 08 januari 2008 @ 11:56:
Mooiste en netste vind ik om je containing element een overflow:
Cascading Stylesheet:
1
overflow: auto | hidden;
mee te geven

Mijn ervaring is dat overflow: hidden; nog weleens problemen kan geven in print. Wanneer het element namelijk groter is dan de printable area houdt de print er ook mee op. Dit doet zich bij Firefox voor meen ik. Hoewel dit misschien niet vaak het geval zal zijn is het wel iets om rekening mee te houden alvorens je de overflow voor dit doel inzet.

-- einde bericht --

Acties:

Verwijderd

BtM909 schreef op maandag 07 januari 2008 @ 22:50:
[...]

Dat heeft niks met id oid te maken, maar met specificity van je CSS

ik weet, maar dat zou een fout kunnen zijn, aangezien dit wel vaker verkeerd wordt gedaan, zo heb ik ervaren!

dinsdag 8 januari 2008 21:47

Acties:

woensdag 9 januari 2008 00:46

Watch out Guys...

7.01D schreef op dinsdag 08 januari 2008 @ 14:48:
[...]
Mijn ervaring is dat overflow: hidden; nog weleens problemen kan geven in print. Wanneer het element namelijk groter is dan de printable area houdt de print er ook mee op. Dit doet zich bij Firefox voor meen ik. Hoewel dit misschien niet vaak het geval zal zijn is het wel iets om rekening mee te houden alvorens je de overflow voor dit doel inzet.

Klopt, maar ik gaf alleen maar antwoord op de mogelijke oplossingen

Goede toevoeging als noot aan de oplossing die ik typte

Verwijderd schreef op dinsdag 08 januari 2008 @ 15:26:
[...]

ik weet, maar dat zou een fout kunnen zijn, aangezien dit wel vaker verkeerd wordt gedaan, zo heb ik ervaren!

Dat zou een fout kunnen zijn

Waar baseer je dat dan op?

en nou niet antwoorden dat het komt omdat jij het zo hebt ervaren

[ Voor 75% gewijzigd door BtM909 op 08-01-2008 21:48 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

Boelie-Boelie

7.01D schreef op dinsdag 08 januari 2008 @ 14:48:
Mijn ervaring is dat overflow: hidden; nog weleens problemen kan geven in print. [...] wel iets om rekening mee te houden alvorens je de overflow voor dit doel inzet.

Zowel 'hidden' als 'auto'?

Ik deed eigenlijk altijd 'overflow:hidden', ooit geleerd via Mr Fronteer

. 'auto' bleek problemen te geven in IE/mac, vandaar 'hidden'. Maar ja, anno 2008 slaat dat natuurlijk nergens meer op en bij print had ik nooit zo stil gestaan, dus dan dus beter 'auto'?

Cogito ergo dubito

woensdag 9 januari 2008 04:13

Acties:

woensdag 9 januari 2008 19:04

Smells Like Team America

Boelie-Boelie schreef op woensdag 09 januari 2008 @ 00:46:
[...]
Zowel 'hidden' als 'auto'?

[...] dan dus beter 'auto'?

Ik dacht eigenlijk altijd dat alleen 'hidden' voor dit doel gebruikt kon worden omdat 'auto' volgens mij al de default waarde is. Ik zou het dus eerlijk gezegd niet weten.

Overigens doet dat print-probleem zich volgens mij alleen voor als het bewuste element zelf groter is dat de printable area en niet wanneer het een kleiner element betreft dat toevallig ergens onderaan de pagina begint en er dan vervolgens niet meer helemaal op past. In dat geval gaat het volgens mij en zijn geheel naar de volgende pagina, maar ook dat weet ik eerlijk gezegd niet helemaal zeker zo uit m'n hoofd.

-- einde bericht --

Acties:

Verwijderd

BtM909 schreef op dinsdag 08 januari 2008 @ 21:47:
[...]

Klopt, maar ik gaf alleen maar antwoord op de mogelijke oplossingen Goede toevoeging als noot aan de oplossing die ik typte

[...]

Dat zou een fout kunnen zijn Waar baseer je dat dan op?

en nou niet antwoorden dat het komt omdat jij het zo hebt ervaren

ik doe dit voor me werk al zo'n 2 jaar fulltime, en zie van mensen om me heen dat dit een veel voorkomende fout is! maar ik hoef me niet tegen over jou te verantwoorden, dus genoeg hierover.

[ Voor 6% gewijzigd door Verwijderd op 09-01-2008 19:04 ]

donderdag 10 januari 2008 14:54

Acties:

donderdag 10 januari 2008 15:00

Watch out Guys...

Verwijderd schreef op woensdag 09 januari 2008 @ 19:04:
[...]
ik doe dit voor me werk al zo'n 2 jaar fulltime, en zie van mensen om me heen dat dit een veel voorkomende fout is! maar ik hoef me niet tegen over jou te verantwoorden, dus genoeg hierover.

Wat heeft je hoeveelheid jaren ervaring te maken met het feit hoe CSS werkt? Als jij zegt dat het een veelvoorkomende fout is, doel je dan op fout vanuit CSS of fout vanuit de mensen die het gebruiken (precies wat ik zeg met mijn posts)?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

moozzuzz

fout door de mensen denk ik zo :^)

donderdag 10 januari 2008 18:26

Acties:

Verwijderd

sjonge jonge, ik ga hier niet eens op in.

vrijdag 11 januari 2008 10:09

Acties:

TeeDee

CQB 241

Verwijderd schreef op donderdag 10 januari 2008 @ 18:26:
sjonge jonge, ik ga hier niet eens op in.

Dat is wel erg makkelijk. Als je een statement/reactie plaatst en daar wordt op gereageerd, dan is het wel zo netjes om ook de boel te onderbouwen. Ik heb serieus 4x het e.e.a. nagelezen en ik begrijp niet wat je nu wilt zeggen.

een forum is geen fire and forget. Iets met hoor en wederhoor

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 11 januari 2008 11:09

Acties:

curry684

left part of the evil twins

7.01D schreef op dinsdag 08 januari 2008 @ 14:48:
[...]

Mijn ervaring is dat overflow: hidden; nog weleens problemen kan geven in print. Wanneer het element namelijk groter is dan de printable area houdt de print er ook mee op. Dit doet zich bij Firefox voor meen ik. Hoewel dit misschien niet vaak het geval zal zijn is het wel iets om rekening mee te houden alvorens je de overflow voor dit doel inzet.

Daarom pikt iedere moderne browser ook moeiteloos losse stylesheets op medium 'print'.

Professionele website nodig?

vrijdag 11 januari 2008 11:14

Acties:

vrijdag 11 januari 2008 11:22

Watch out Guys...

Verwijderd schreef op donderdag 10 januari 2008 @ 18:26:
sjonge jonge, ik ga hier niet eens op in.

Omdat je het niet verder kan onderbouwen? Dat is een wel heel makkelijke manier van discussieren

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

vrijdag 11 januari 2008 14:42

Smells Like Team America

curry684 schreef op vrijdag 11 januari 2008 @ 11:09:
[...]

Daarom pikt iedere moderne browser ook moeiteloos losse stylesheets op medium 'print'.

Natuurlijk, maar als je voor je print.css weer een andere oplossing voor het 'clearen' moet gaan zoeken, kun je die misschien beter meteen al in je standaard stylesheet toepassen.

-- einde bericht --

Acties:

Joopieboy

No smoke, no poke

Ik vind dat BtM909 wel een punt heeft hoor, eerlijk is eerlijk, als jij 2 jaar lang al websites bouwt hoeft het toch niet te beteken dat jij zo "goed" bent? Jij hbent ook niet perfect en jij weet af en toe ook wel eens dingen niet, zoals nu. En die reacties, tja je lokt het zelf uit....

Mja, genoeg offtopic.

Het leven is te kort om geduld te hebben!

vrijdag 11 januari 2008 17:04

Acties: