css basic vragen

[knackje]

Ik ben mij aan het verdiepen in CSS. Nu zat ik even met het volgende:

Vraag 1

Als ik geen css gebruik worden alle teksten en objecten door de browser met de "browser default waarde" weergegeven. Verschillende browsers kunnen verschillende resultaten geven. Klopt deze gedachten gang?

Ik zou dus alle tags die ik gebruik in mijn css style sheet moeten defineren?

Alle tekst op mijn website zet ik tussen <P> </P> tags.

Ik heb de <P> tag in mijn css file gedefinieerd. Nu wil ik een uitzondering maken op deze standaard. Ik zie op internet 2 (?) verschillende opties.

Optie1 : ID

p #p01 {
color:red;
}

Optie2 : class

p.error {
color:red;
}


Nu las ik dat je id gebruikt bij een enkel element en een class indien je deze wil gebruiken bij meerde elementen. Ik kan alleen niet vinden waarom? Ze lijken erg op elkaar en de werking is hetzelfde.


Vraag 2

Onderaan mijn pagina heb ik een Div voor de footer. Nu wil ik in deze footer links mijn copyright info hebben en rechts (op dezelfde regel) een drietal linkjes

Nu lees ik op internet (en heb ik tevens zelf uitgeprobeerd) dat ik dit kan bereiken met 2 opties:

Optie1 display:
Binnen de footer div: eerst div Links aanmaken. links uitlijnen. display: online-block. breedte opgeven (2/3 van de footer lang).

tweede div (div rechts) aanmaken: links uitlijnen, display: online-block

Optie2 float:
zoals hierboven beschreven maar dan zonder display, maar met alleen float: left. Het is dan alleen moeilijk om die stukken tekst op 1 regel te krijgen. Daarnaast vraag ik mij af of je wel div moet 'floaten' binnen een div.

Wat is de juiste / beste manier?


Edit: ik bedoel idd float ipv flow. Ik heb dit even in de tekst aangepast.

[TERW_DAN]

Je gedachtengang klopt inderdaad, als je geen CSS toepast dan pakt hij de browserdefault, en gezien een user die ook nog kan instellen weet je dan niet hoe je page eruit komt te zien.

Stylen doe ik bij voorkeur op classes, die kun je makkelijk hergebruiken. Ids moeten uniek zijn op een pagina, dus daarop stylen heeft in de meeste gevallen niet mijn voorkeur, maar het kan wel, en als je er een reden voor hebt om dat te doen kan dat ook prima.

voor het flowen, of liever floaten moet je float gebruiken, niet flow. Floaten is met namelijk praktisch voor dynamische content of responsive designs. Je kunt dingen ook positioneren als je dat wilt, maar ook daar geldt dat het is waar je je voorkeur voor hebt. Het is niet dat je per se de ene moet gebruiken en de andere niet. Beide zijn mogelijk, maar dat ligt eraan wat je wilt bereiken. In veel geval is dit gewoon een kwestie van best practices gemixt met trial en terror.

[Soundless]

Daarbij heeft id een hogere prio dan class


Vb:

HTML:

<p id="foo" class="bar">TEST</p>

Cascading Stylesheet:

#foo {
    color: red;
}
.bar {
    color:blue;
}

Omdat id een hogere prio heeft wordt de tekst rood en niet blauw.

Als je 2 classes zou hebben zou het dus blauw worden:

HTML:

<p class="foo bar">TEST</p>

Cascading Stylesheet:

.foo {
    color: red;
}
.bar {
    color:blue;
}

Extra info: Je kan meerdere classes aan een element toewijzen door er een spatie tussen te zetten. Kan met `id` niet.

[knackje]

TERW_DAN schreef op maandag 08 december 2014 @ 13:12:
Je gedachtengang klopt inderdaad, als je geen CSS toepast dan pakt hij de browserdefault, en gezien een user die ook nog kan instellen weet je dan niet hoe je page eruit komt te zien.

Ok top... dan ben ik daarmee op de goede weg.

Stylen doe ik bij voorkeur op classes, die kun je makkelijk hergebruiken. Ids moeten uniek zijn op een pagina, dus daarop stylen heeft in de meeste gevallen niet mijn voorkeur, maar het kan wel, en als je er een reden voor hebt om dat te doen kan dat ook prima.

Ok vandaar dat ze dus zeggen dat je een id maar voor een enkel element mag gebruiken. Geldt dit ook voor div id?

Ik heb namelijk een pagina met 6 div. Dit zijn 6 blokken. 3 naast elkaar en daaronder nog 3 naast elkaar.
In css heb ik drie id aangemaakt: links midden en rechts. Zoals je begrijpt de 2 blokken links krijgen id links, de twee in het midden: id midden etc...

Dit gaat eigenlijk prima en ik gebruik de id's dus dubbel op deze pagina. Wat voor effect had het dubbel gebruik van id's moeten veroorzaken.

Soundless schreef op maandag 08 december 2014 @ 13:21:
Daarbij heeft id een hogere prio dan class....

handige info

Bedankt voor deze toevoeging. Dit wist ik ook nog niet...

[ Voor 9% gewijzigd door knackje op 08-12-2014 13:30 ]

[Soundless]

knackje schreef op maandag 08 december 2014 @ 13:29:
Ok vandaar dat ze dus zeggen dat je een id maar voor een enkel element mag gebruiken.

Dit is niet perse de reden. Id's kunnen ook als anchor dienen en kunnen bij dubbelingen voor ongewenst gedrag veroorzaken. Ook is je html gewoon invalid als je duplicate ids hebt. Er is nooit(?) een goede reden om duplicate ids te hebben.

Geldt dit ook voor div id?

Dit geldt voor alle elementen dus ook divs

Ik heb namelijk een pagina met 6 div. Dit zijn 6 blokken. 3 naast elkaar en daaronder nog 3 naast elkaar.
In css heb ik drie id aangemaakt: links midden en rechts. Zoals je begrijpt de 2 blokken links krijgen id links, de twee in het midden: id midden etc...

Dit gaat eigenlijk prima en ik gebruik de id's dus dubbel op deze pagina. Wat voor effect had het dubbel gebruik van id's moeten veroorzaken.

Hier zou ik dus classes gebruiken in plaats van ids.

[ Voor 6% gewijzigd door Soundless op 08-12-2014 13:35 ]

[Rannasha]

knackje schreef op maandag 08 december 2014 @ 13:29:
[...]


Ok top... dan ben ik daarmee op de goede weg.


[...]


Ok vandaar dat ze dus zeggen dat je een id maar voor een enkel element mag gebruiken. Geldt dit ook voor div id?

Ik heb namelijk een pagina met 6 div. Dit zijn 6 blokken. 3 naast elkaar en daaronder nog 3 naast elkaar.
In css heb ik drie id aangemaakt: links midden en rechts. Zoals je begrijpt de 2 blokken links krijgen id links, de twee in het midden: id midden etc...

Dit gaat eigenlijk prima en ik gebruik de id's dus dubbel op deze pagina. Wat voor effect had het dubbel gebruik van id's moeten veroorzaken.

Met HTML/CSS krijg je, in tegenstelling tot programmeertalen, geen foutmelding als je iets doet wat eigenlijk niet mag. In plaats daarvan probeert de browser er maar het beste van te maken, maar omdat je buiten de standaarden treedt, kun je niet verwachten dat verschillende browsers hetzelfde resultaat geven.

In het geval van het dubbel gebruiken van id's... Via JavaScript kun je elementen aanspreken via hun id. Als een id meer dan eens voorkomt, is het niet duidelijk welk element bedoelt wordt en krijg je onvoorspelbaar gedrag. Daarom id's enkel gebruiken om individuele elementen mee te identificeren en classes gebruik je om elementen of groepen elementen te classificeren.

[knackje]

@allemaal:
bedankt voor jullie reacties. Ik ben er goed mee geholpen. Kan ik weer verder

[TERW_DAN]

Soundless schreef op maandag 08 december 2014 @ 13:21:
Daarbij heeft id een hogere prio dan class

Daar had ik inderdaad nog even niet aan gedacht. Waarschijnlijk loop je daar met wat simpele opmaak nog niet tegenaan, maar als je wat ingewikkeldere dingen gaat doen kom je dat geheid tegen.

[gitaarwerk]

Daarom is het vertandig om zo min mogelijk selectoren te gebruikenen zo veel mogelijk classnames toe te voegen. Rendert sneller. Met slimme benamingen laat je gzip weer het meeste goed maken.

[knackje]

Nog een vraag waar ik niet uit kom. Mogelijk hebben jullie een idee.

Zie de afbeelding: klik hier


De div 'blok_uitgelicht_zonder' is dus die dunne zwarte lijn en gaat dwars door de button heen. Dat is niet de bedoeling.

Alle floats staan links. De button zit binnen de div 'youtube_tekst'. Ik had verwacht dat door de 'width' van 'blok_uitgelicht_zonder' deze op de volgende regel zou komen en dus onder de button.

Hebben jullie een idee?


html code:

code:

<iframe src="http://www.youtube.com/embed/7UzSekc0LoQ" frameborder="0" allowfullscreen></iframe>


<div id="youtube_tekst"><!--begin youtube tekst-->
     <h1>Blake Lively in The Age of Adeline!</h1><br> 
     <p class="intro">Ent. Fictota tumquas post omnitiumquas dlupta nonse laut vit omnisto taeperum rest      am, totatquibusa nempossin cuptatem.</p><br>
     <p class="basis">Nam as ella voloris aliciet remped ut as nobistiume voloris dolupti cusamus et accat etur, offic te coreperum fugit aut ex et que nonsequam etust, seri volorei citiusapiet ventio. Itatiur sit, nonsed quid qui offictotat.
     Ut reium impore corpos aliquias rendendis volut rehent asime ventinctam fugiantem dolorei usciur, to quam haria volorehendae invelitat. Tur santotat oditam lacepedis dit consequam. et ut exped magnimi ntorectur aute.</p><br>
<div id="button"><!--inhoud button-->
     <ul><!--inhoud ul-->
     <li><a href="https://www.youtube.com/results?search_query=the+age+of+adeline"  target="new">Bekijk meer</a></li>
     </ul><!--afsluiting ul-->
</div><!--afsluiting button--> 
</div><!--afsluiting youtube tekst-->


<div id="blok_uitgelicht_zonder"><!--begin blok uitgelicht-->
</div><!--afsluiting blok uitgelicht-->

css code:

code:

iframe{
    position: relative;
    width: 583.5px;
    height: 324px;
    float: left;
    margin-top: 40px;
    margin-right: 14.75px;
    margin-left: 35px;
    margin-bottom: 40px;
}

#youtube_tekst{
    position: relative;
    width: 277px;
    float: left;
    height: 324px;
    margin-top: 40px;
    margin-right: 35px;
    margin-left: 14.75px;
    margin-bottom: 40px;
}


#button{
    position: relative;
}

#button ul {
    list-style: none;
    margin: 0; padding: 0;
}

#button ul li {
    float: left;
}

#button ul li a {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 13px;
    text-decoration: none;
    display: block;
    padding-top: 7px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 7px;
    background-color: #B5008C;
    width: 80px;
    text-align: left;
    color: #FFFFFF;
    height: 15px;
}

#button ul li a:hover {
    background-color: #383838;
    color: #FFFFFF;
}


#blok_uitgelicht_zonder{
    position: relative;
    width: 890px;
    float: left;
    margin-left: 35px;
    border-top: thin solid #383838;
}

[MarcoC]

Je afbeelding doet het niet. Tip: gebruik JSFiddle. Ideaal voor dit soort dingen!

Ik heb ook meteen de oplossing geplaatst. Wat ik heb gedaan: een container om je div-elementen heen geplaatst en deze als eigenschap "overflow: hidden" gegeven. Het probleem is namelijk dat een float element doorgaans bijna letterlijk "zweeft", en de afmetingen van het element dat je float dus geen invloed hebben op de flow van de pagina.

Hier staat uitgelegd hoe je dat oplost. De simpelste en beste methode (vind ik dan) is mijn oplossing: een container om je elementen heen met als eigenschap "overflow: hidden".

[knackje]

MarcoC schreef op maandag 15 december 2014 @ 11:01:
Je afbeelding doet het niet. Tip: gebruik JSFiddle. Ideaal voor dit soort dingen!

Ik heb ook meteen de oplossing geplaatst. Wat ik heb gedaan: een container om je div-elementen heen geplaatst en deze als eigenschap "overflow: hidden" gegeven. Het probleem is namelijk dat een float element doorgaans bijna letterlijk "zweeft", en de afmetingen van het element dat je float dus geen invloed hebben op de flow van de pagina.

Hier staat uitgelegd hoe je dat oplost. De simpelste en beste methode (vind ik dan) is mijn oplossing: een container om je elementen heen met als eigenschap "overflow: hidden".

Bedankt voor je hulp. Ik heb me even verdiept in je oplossing, maar als ik overflow: hidden mee geef. Dan is het overlappende stuk niet meer zichtbaar. Het ziet er mooier uit maar het is niet wat ik wil.

Maar in de uitleg over clearing zag ik iets staan:

We want the black border to go around both our floating columns. That doesn't happen, though. The container div itself has no height, since it only contains floating elements. Therefore the border stubbornly stays at the top of the floating columns.

Ik bedacht me dat ik div youtube_tekst een height heb meegegeven. De div blok_uitgelicht_zonder gaat vanaf de onderkant van deze maat starten. (de inhoud van de div youtube_tekst is dus langer dan de opgegeven hoogte). Zoals jij als zei: het zijn eigenlijke zwevende objecten. In zit de hele tijd in vaste blokken te denken.

Wat ik nu dus heb gedaan is de height verwijderd van de div youtube_tekst. Nu start de div blok_uitgelicht_zonder onder de knop.

[n8n]

Algemene tip: probeer floats waar het kan te vermijden. In principe komt het zelden voor dat een float nodig is, met name (of alleen) waneer een inline afbeelding naast tekst komt te staan oid.

Dit—om maar aan te geven—zijn alle floats in een project waar ik momenteel mee aan de slag ben:


Floats zijn vaak onhandig om mee te werken omdat je een hele doos aan trucs open moet trekken om het allemaal recht te trekken.

[ Voor 3% gewijzigd door n8n op 27-12-2014 15:28 ]

[MarcoC]

n8n schreef op zaterdag 27 december 2014 @ 15:27:
Algemene tip: probeer floats waar het kan te vermijden. In principe komt het zelden voor dat een float nodig is, met name (of alleen) waneer een inline afbeelding naast tekst komt te staan oid.

Dit—om maar aan te geven—zijn alle floats in een project waar ik momenteel mee aan de slag ben:
[afbeelding]

Floats zijn vaak onhandig om mee te werken omdat je een hele doos aan trucs open moet trekken om het allemaal recht te trekken.

Wat zijn goede alternatieven voor floats? Hangt natuurlijk af van de use case, maar ben benieuwd .

[Caelorum]

display: inline-block?

[NMe]

n8n schreef op zaterdag 27 december 2014 @ 15:27:
Floats zijn vaak onhandig om mee te werken omdat je een hele doos aan trucs open moet trekken om het allemaal recht te trekken.

Een héééle doos inderdaad...

Cascading Stylesheet:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

[n8n]

NMe schreef op zondag 28 december 2014 @ 21:15:
[...]

Een héééle doos inderdaad...

Cascading Stylesheet:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Tot het een keer niet werkt en dan ben je zo 2 uur verder. Omdat je elementen uit de flow haalt vind ik het nogal destructief, zeker wanneer er breakpoints bij komen kijken en de hele boel ineen dondert omdat er toch een andere flow nodig blijkt. Leren leven met floats kan, ik heb het al lang opgegeven. Chrome heeft ook een bug dat floats soms random ergens zweven, dat is dan weg met een refresh maar geeft toch een nare bijsmaak. Met display: inline-block; moet veel al mogelijk zijn. Voor lay-out gebruik ik ze eindelijk alleen in combinatie met absolute siblings.

aside: volgens mij ben ik van de oude stempel, classnames om presentatie aan te duiden vind ik nog steeds een nogo.

[ Voor 8% gewijzigd door n8n op 29-12-2014 12:02 ]

[NMe]

Ik ben juist van de oude stempel omdat ik bij het copy/pasten van de welbekende site waar die snippet vandaan komt "group" heb veranderd in "clearfix" (zoals 'ie vroeger heette). Juist omdat dat de enige reden is waarom je die class gebruikt, en IMO is het daarom fundamenteel anders dan een class met de naam "purple". Als je design ooit verandert en die clearfix is niet meer nodig, dan kun je de class weghalen van je element, in tegenstelling tot "purple" die zonder hernoeming van de class na een redesign ineens tekst blauw maakt.

Begrijp me niet verkeerd: floats mijd ik ook als dat kan. Maar ik ga me ook niet in allerlei bochten wringen door inline-block te gebruiken waar dat eigenlijk helemaal niet zo'n goed idee is, alleen om floats te ontwijken.

[R4gnax]

NMe schreef op maandag 29 december 2014 @ 13:13:
Juist omdat dat de enige reden is waarom je die class gebruikt

Niet precies; het zorgt er ook voor dat margins niet meer collapsen maar binnen het containing block blijven. Het is dus een beetje meer dan enkel een 'fix' voor floats.

Eigenlijk klopt zelfs de term 'fix' niet, want er is niets stuk aan hoe floats zich normaal gedragen. Het normale gedrag dat volgens specificatie is, komt alleen niet overeen met wat mensen normaliter zouden verwachten.

Zelf gebruik ik daarom consistent de term 'containment' in mijn classname en heb ik in mijn CSS een kort commentaar bij de selector staan dat dit zowel float als margin containment inhoudt.

[g4wx3]

ik heb niet alles gelezen,

maar als best kun je eerst een browser resetter eerst inladen.

normalizer of resetter.css,

op internet veel te vinden

[NMe]

g4wx3 schreef op dinsdag 30 december 2014 @ 17:15:
ik heb niet alles gelezen,

Blijkbaar ook de vraag niet?