[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_67561238
Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS
pi_67566276
quote:
Op maandag 30 maart 2009 22:14 schreef Roy_T het volgende:
Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS
wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)

we hebben het hier over HTML en niet case-sensitive XML of dat nutteloze XHTML (dat sowieso een doodlopend pad geworden is op het WWW)

er stond wel een foutje in mn code... ik had .hover staan ipv :hover, dus een dubbele punt
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  dinsdag 31 maart 2009 @ 02:11:54 #28
230788 n8n
Pragmatisch
pi_67566416
Er wordt naar mijn weten bij namen van elementen, id's en classes altijd aangeraden alles met onderkast letters te schrijven. Dat staat naar mijn opinie ook een stuk netter.

tevens TerugVindCss
“Specialization is for insects”.—Robert Heinlein
pi_67567537
quote:
Op dinsdag 31 maart 2009 01:54 schreef RM-rf het volgende:

wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)
Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders ).
pi_67570060
quote:
Op dinsdag 31 maart 2009 08:13 schreef Roy_T het volgende:

[..]

Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders ).
tech is er geen enkele plicht ... ik heb die gewoonte al heel lang en in de CSS1 spec wordt het ook heel consequent toegepast : http://www.w3.org/TR/CSS1/#contextual-selectors ... in de CSS2 specificatie ook: http://www.w3.org/TR/CSS2/selector.html#type-selectors (in latere versies van de CSS-specificatie staat soms een mengeling, vreemd genoeg worden soms kapitalen voor elementen gebruikt en soms undercast... er staat wel in dat CSS zelf en selectoren case-insensitive zijn)

Het grootste voordeel voor mij is de duidelijke afscheiding tussen verschillende soort selectoren..
zelf prefereer ik ook zoveel mogelijk via element-selectoren te definieren en pas als dat niet lukt terug te vallen op classnames en/of id's als selectoren ...

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67571257
quote:
Op dinsdag 31 maart 2009 10:11 schreef RM-rf het volgende:

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.
Klopt, voorkeur en conventie. Ik moedig mensen over het algemeen aan om de conventies zoveel mogelijk te volgen, maar da's ook persoonlijk.
pi_67579773
quote:
Op maandag 30 maart 2009 22:11 schreef RM-rf het volgende:

[..]

je wil een lijst, dat is dus altijd een UL of OL... géén DIV (die tag kies je als je gen andere optie hebt)


wat je wilt is gewoon heel simpel te doen door datgene wat je nu verteld in code op te schrijven:
[ code verwijderd ]

en dan de CSS-code
[ code verwijderd ]


Dit werkt prima, bedankt . Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?
pi_67581005
quote:
Op dinsdag 31 maart 2009 15:09 schreef hello_moto1992 het volgende:

[..]

Dit werkt prima, bedankt . Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?
ja hoor... daarvoor kun je de positionering verder met behulp van CSS 'stylen'....

wil je dat 'fine-tunen' kun je bv de elementen (UL, LI of de IMG ) 'border: 1px solid green;' (of andere kleuren) toewijzen zodat je precies ziet hoe groot elemente precies zijn en waar ze precies staan..
de IMG's worden nu op basis van de breedte van de UL gepositioneerd (doordat dit het bovenliggende element met een 'position' is) relatief afhankelijk van de 'top' en rechterzijde...

dat is echter allemaal via CSS aan te passen/ te stylen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_67586472
Halp please! Ik heb een lijst genest in een div van ~200px. In die lijst staat weleens een lange link en die wordt in Firefox gewoon netjes afgebroken zodat het in de div blijft. In IE7 echter niet Die laat de link gewoon uit de div lopen zonder het af te breken. Valt dit te fixen?
シ
pi_67602241
Ik heb een poll gemaakt middels html/css, echter krijg ik de footer niet precies op de juiste plek en heb werkelijk geen idee waarom deze naar rechts verspringt.

Ik heb al clear:both geprobeerd,margins, padding,left, etc maar niets werkt.

voorbeeld


Live voorbeeld:
http://htmlpoll.testertje.nl/pollview.php?code=6a6fa00b

HTML code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		        <div id="poll">
            <h1 id="poll-header">1234567890123</h1>
            <dl id="poll-content">
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-1.html">dit is een test vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-2.html">dit is een 123 vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            </dl>
            <br style="clear:both;" />
            <ul id="poll-footer">
                <li id="votes">Aantal stemmen: 0</li>
                <li id="views">Keer bekeken: 13</li>
                <li id="advertisement">Maak ook een gratis poll op <a href="http://www.htmlpoll.nl">htmlpoll.nl</a></li>
            </ul>
        </div>


Css 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87		#poll { 
    width: 400px; 
    border: 2px solid black; 
} 

/* header */ 
#poll-header { 
    background: gray; 
    height: 40px; 
    color: #FFF; 
    margin: 0px 0px 10px 0px; 
    padding:10px 0px 0px 10px;     
    font-size: 24px; 
    float:none; 
} 

/* content */ 

#poll-content { 
    padding:0; 
    margin:0; 
} 

#poll-contenta, 
#poll-content a:link, 
#poll-content a:active {   
    color: gray; 
    text-decoration: none; 
} 

#poll-content a:hover { 
    text-decoration: underline; 
} 

#poll-content dt { 
    clear: both; 
} 
    
#poll-content dd.bar { 
    text-indent: -90000px; 
    background: #000; 
    float: left; 
    height: 18px; 
    line-height: 0;
    width: 300px; 
} 
#poll-content dd.votes { 
    float: right;   
    padding-right: 10px;     
} 

/* footer */ 
#poll-footer { 
    background: gray; 
    height: 55px; 
    margin: 0; 
    padding: 10px 5px 5px 10px; 
    clear:both;
    left:0;
} 

#poll-footer li {
    list-style-type: none;
}

#poll-footer a, 
#poll-footer a:link, 
#poll-footer a:active {   
    color: white; 
    text-decoration: none; 
} 


#poll-footer #votes 
{ 
    float: left; 
} 

#poll-footer #views { 
    float: right; 
    text-align: right; 
} 

#poll-footer #advertisement { 
    clear: both; 
    margin-top: 10px; 
} 


Hopelijk kan iemand mij vertellen wat ik fout doe!
Just say hi!
pi_67602356
Wat op die URL staat lijkt nog niet bijna op je screenshot?
pi_67605489
Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.
pi_67606818
@Roy_T: klopt idd, zat een ( te veel in de CSS import
Just say hi!
pi_67607687
quote:
Op woensdag 1 april 2009 11:04 schreef Nashje het volgende:
Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.
Een div bedoel je? Gewoon geen height geven
pi_67608156
quote:
Op woensdag 1 april 2009 12:08 schreef Roy_T het volgende:

[..]

Een div bedoel je? Gewoon geen height geven
Ja dat had ik al geprobeerd. Zal het even schetsen:

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

<div class="container">
   <div class="content">
      <div class="welkom"></div>
   </div>
</div>

info pagina

<div class="container">
   <div class="submenu"></div>
   <div class="content">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
   </div>
</div>


Home pagina is een klein stukje tekst. Op de info pagina heb ik dus 3 divs, maar daardoor wordt het een stuk langer dan op de home pagina. Nu moet de container dus automatisch naar beneden gaan door die 3 divs.
pi_67608850
Dat doet 'ie ook standaard, tenzij je zaken uit de natuurlijke flow gehaald hebt met "float" bijvoorbeeld.
pi_67609479
Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?
pi_67609944
@Roy_T; ik heb het voorbeeld, nu moet de output wel duidelijk zijn met de padding/margin fout
Just say hi!
pi_67610171
quote:
Op woensdag 1 april 2009 13:05 schreef Nashje het volgende:
Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?
Je kunt het eens proberen door géén height te gebruiken, en "overflow: auto" op je container te zetten.
pi_67612307
Je bent een held . Ik was al bezig om alles opnieuw te gaan maken, fucking hell zeg. Was al bang dat dat niet kon als je floats gebruikt.

Enige fucked up probleem is nu dat Bill Gates met zijne IE zegt dat het toch niet helemaal de bedoeling is . JEZUS, ik word gek van die browserbattles .
pi_67613315
Hmm ik heb een discussie met m'n collega over positions of floats. Ik gebruik áltijd floats om alles neer te zetten, en hij gaat voor positions. Is er ergens een brede uitleg te vinden over wat nu het beste is?
pi_67614814
Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.

Over float of position: kwestie van smaak denk ik. Ik gebruik ook altijd float, omdat er dan tenminste een flow in zit en elementen kunnen schalen. Als je position gebruikt is dat imo vaak een stuk lastiger.
pi_67615234
1
2
3
4
5
6
7
8
9
10		#contentmid ul li a img {
  display: none; /* verberg afbeelding */
  position: fixed; / positioneer afbeelding */
position:fixed;
top:30px;
right:50px;
}
#contentmid ul li a:hover img {
  display: block ; /* toon afbeelding bij hover */
} 


Dit heb ik nu dus. Zoals je ziet staat er bij top: 30px; en right: 50px;. Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee ?
pi_67615901
quote:
Op woensdag 1 april 2009 15:42 schreef Roy_T het volgende:
Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.
Die overflow weghalen heeft wel goede gevolgen ja . Super. Alleen in IE is het nog een bende.

Om mijn container (waar alles in staat) te centeren gebruik ik::
body, html { margin: 0px, padding: 0px } en in de .container { margin: 0 auto; }

FF doet het goed, IE niet. En als ik een nieuw html bestandje aanmaak met alleen deze 2 dingen, en dus verder geen divs of elementen, staat ie wel gecentreerd !
pi_67616434
quote:
Op woensdag 1 april 2009 15:52 schreef hello_moto1992 het volgende:

Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee ?
"position: relative" op het element zitten ten opzicht van wat je wilt positioneren.
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 12
Index

» digital corner

» development

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