[CSS] voor dummies #14

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_81534691
Ola,

Mooi dat er een CSS topic op FOK! is, nu hoop ik dat jullie mij willen kunnen helpen!

Ik heb een horizontaal menu gemaakt uit een ul:
1
2
3
4
5
6
7
8		         <div id="navigation">
            <ul>
               <li><a class="current" href="#">Menu 1</a></li>
               <li><a href="#">Menu 2</a></li>
               <li><a href="#">Menu 3</a></li>
               <li><a href="#">Menu 4</a></li>
            </ul>
         </div> <!-- #navigation ends here -->

En dat word hier gestyled:
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		#navigation {
   border: none;
   font-size: 80%;
   margin-left: 12.5em; /*200px*/
   margin-right: 1.25em; /*20px*/
   padding: .5em 0 .2em .5em; /*8px 0 3px 8px*/
   text-align: right;
}
#navigation ul li {
   display: inline;
   font-weight: bold;
}
#navigation a:link, a:visited {
   border: 1px solid #5e656b;
   color: #5e656b;
   padding: .5em .5em .2em .5em; /*8px 8px 3px 8px*/
   text-decoration: none;
}
#navigation a:hover, a:active {
   background-color: #ecf3f5;
   border: 1px solid #0073c8;
   border-bottom: 1px solid #ecf3f5;
   color: #0073c8;
   padding: .5em .5em .2em .5em; /*8px 8px 3px 8px*/
   text-decoration: none;
}
#navigation a.current {
   background-color: #ecf3f5;
   border: 1px solid #0073c8;
   border-bottom: 1px solid #ecf3f5;
   color: #0073c8;
   padding: .5em .5em .2em .5em; /*8px 8px 3px 8px*/
   text-decoration: none;
}

Zoals je ziet heeft de eerste li in ul een class genaamd current. Dat is ervoor te zorgen dat de current tab in het menu duidelijk zichtbaar is. Dat even tussen 2 haakjes, want hier komt het probleem:
Ik krijg op geen enkele manier voor elkaar dat linkjes anders gestyled worden dan het menu! Rara, waar zou ik wat moeten veranderen?

Alvast bedankt voor jullie hulp :*
  maandag 17 mei 2010 @ 15:42:25 #202
182073 invine
blablabla etc.
pi_81536953
-nvm-
Ik drink nooit meer! maar ook niet minder.
pi_81541894
@geodriehoek

1#navigation a:link, a:visited


doet niet wat jij denkt dat ie doet. Hij selecteert nu alle a:links in #navigation PLUS alle visited links (dus ook de links buiten #navigation (dit doe je overigens op meer plekken in je CSS).

1
2		#navigation a:link, 
#navigation a:visited


Zo dus.

Voor de rest begrijp ik je vraag niet echt, bij mij is de huidige actieve tab gewoon een andere kleur - of bedoel je dat niet?
Nee.
pi_81546905
quote:
Op maandag 17 mei 2010 17:28 schreef PimD het volgende:
@geodriehoek
[ code verwijderd ]

doet niet wat jij denkt dat ie doet. Hij selecteert nu alle a:links in #navigation PLUS alle visited links (dus ook de links buiten #navigation (dit doe je overigens op meer plekken in je CSS).
[ code verwijderd ]

Zo dus.

Voor de rest begrijp ik je vraag niet echt, bij mij is de huidige actieve tab gewoon een andere kleur - of bedoel je dat niet?
Te gek PimD, dit lost mijn probleem op! Kan je, als je zin hebt, misschien uitleggen waarom mijn manier niet werkte?

Mijn zinnetje over die actieve tab was simpelweg extra info voor degene die zich afvroegen waarom er een class was toegwezen. Was verder niet bedoelt als vraag

Thanks a million!
pi_81547243
Tsja wat valt er uit te leggen. Je scheidt je CSS selectors met komma's, dus

1
2
3		#content a, span { 
....
}


selecteer alle a-hrefs in de div met de ID content PLUS alle span-elementen - waar dan ook. Als je dus alleen de a's en de spans wilt hebben in de div #content dan moet je

1
2
3
4		div#content a,
div#content span {
...
}


doen :)
Nee.
pi_81547558
quote:
Op maandag 17 mei 2010 19:23 schreef PimD het volgende:
Tsja wat valt er uit te leggen. Je scheidt je CSS selectors met komma's, dus
[ code verwijderd ]

selecteer alle a-hrefs in de div met de ID content PLUS alle span-elementen - waar dan ook. Als je dus alleen de a's en de spans wilt hebben in de div #content dan moet je
[ code verwijderd ]

doen
Yeah nu snap ik hem, dank!
  dinsdag 25 mei 2010 @ 11:43:05 #207
69950 MadGuy
Fever Ray
pi_81863920
Hallo beste experts,

Misschien kunnen jullie mij ook helpen met een IE-probleempje.

Het gaat om de thumbnails op deze pagina: KLIK!

In Firefox, Chrome en Safari zien de marges tussen de thumbnails er perfect uit, alleen IE sputtert een beetje tegen. De marges onder (of boven - net hoe je er tegenaan kijkt) zijn verdwenen. Wie weet er een oplossing voor IE om deze marges toch goed te krijgen, zonder dat Firefox, Chrome en Safari dubbele marges gaan rekenen?

Dit is de bijbehorende CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		#mainbodyportf {
   width: 800px;
   min-height: 200px;
   margin-top: 30px;
   font: normal 12px Verdana;
   color: #333;
   line-height: 1.5em;
}

ul.portf {
   float: right;
   display: inline;
   width: 275px;
   list-style-type: none;
}

li.portf {
   float: left;
   margin-left: 5px;
}

li img {
   border: none;
}
last.fm
marksluymers.nl
pi_81864459
1
2
3
4
5
6
7
8
9		* {
   list-style-image: none;
   list-style-position: outside;
   list-style-type: none;
   margin: 0;
   padding: 0;
   outline-style: none;
   outline-width: 0;
}

Haal dat eens weg ofzo.

Heb helaas (gelukkig ) geen IE hier dus kan verder niet testen.
zcflevo.nl
  dinsdag 25 mei 2010 @ 12:56:35 #209
69950 MadGuy
Fever Ray
pi_81866501
Bedankt voor je suggestie. Het helpt helaas niet.

En je hebt gelijk wat betreft IE.
last.fm
marksluymers.nl
pi_81873470
Ik heb het volgende probleem: Wanneer ik met JS de CSS-style van display none naar block verander van mijn tbody elementen, dan neemt de tbody niet de opgegeven breedte over.

Een voorbeeld is hier te zien. Het gaat om als je "theoriemateriaal" helemaal onderaan aanklikt, dan fout hij hem uit zoals het hoort, alleen de breedte klopt niet i.t.t. de tbodies daarboven.

Dit is de JS:
1
2
3
4		for (i = 0; i < $("los").select("[title='sub"+ID+"']").length; i = i + 1)
{
   ("los").select("[title='sub"+ID+"']")[i].style.display = "block";
}


Dit is de CSS:
1
2
3
4		div#body div#B div.wrapper div#content div.type table tbody.sub
{
   display: none; 
}
Aan dit bericht kunnen geen rechten worden ontleend.
pi_81873628
Waar heb je de breedte van de tbody ingesteld?
fokstok.nl
pi_81873829
quote:
Op dinsdag 25 mei 2010 15:58 schreef Light het volgende:
Waar heb je de breedte van de tbody ingesteld?
Nergens, maar hij moet de totale breedte te hebben van de th + 2x td's die er in staan, de breedte van de th lijkt hij na de display: block niet te herkennen.

Als ik trouwens de tbody op 500px instel, dan drukt hij de goede tbody te breed uit.
Aan dit bericht kunnen geen rechten worden ontleend.
pi_81875463
quote:
Op dinsdag 25 mei 2010 16:03 schreef poepeneesje het volgende:

[..]

Nergens, maar hij moet de totale breedte te hebben van de th + 2x td's die er in staan, de breedte van de th lijkt hij na de display: block niet te herkennen.

Als ik trouwens de tbody op 500px instel, dan drukt hij de goede tbody te breed uit.
Da's ook niet zo raar, als je van je table-element een block-element maakt, trekt'ie zich niets meer aan van de td's en th's die daar in staan.

Oh en crossposten is ook niet nodig hoor.
zcflevo.nl
pi_81875944
quote:
Op dinsdag 25 mei 2010 16:38 schreef KomtTijd... het volgende:

[..]

Da's ook niet zo raar, als je van je table-element een block-element maakt, trekt'ie zich niets meer aan van de td's en th's die daar in staan.

Oh en crossposten is ook niet nodig hoor.
Erg stom vanmezelf dat ik er niet aangedacht heb. De oplossing is dus display: table-row-group i.p.v. block.
Aan dit bericht kunnen geen rechten worden ontleend.
  zondag 30 mei 2010 @ 22:49:06 #215
87680 Mirel
Mirel wil een bongophone.
pi_82124223
edit
When all else fails, you always have delusion.
  zondag 30 mei 2010 @ 22:50:18 #216
134533 donroyco
dus niet Donroyco
pi_82124303
SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_82307607
Vraaaaagje:

Hoe kan ik via een knop een CSS-eigenschap veranderen? Is daar java voor nodig? Of kan het met html/css alleen?

Ik wil een knop (of meerdere) die de achtergrondkleur van de website verandert
  vrijdag 4 juni 2010 @ 00:21:35 #218
87680 Mirel
Mirel wil een bongophone.
pi_82312149
Je kan heel lomp doen dat als je in pagina1.html met stylesheet1.css bent en op een knop drukt dat je naar een identieke pagina2.html met stylesheet2.css gaat. Maar da's lomp.

Ik gok PHP.
When all else fails, you always have delusion.
pi_82312719
quote:
Op donderdag 3 juni 2010 22:49 schreef lkb9000 het volgende:
Vraaaaagje:

Hoe kan ik via een knop een CSS-eigenschap veranderen? Is daar java voor nodig? Of kan het met html/css alleen?

Ik wil een knop (of meerdere) die de achtergrondkleur van de website verandert
Een knop om de achtergrondkleur te veranderen? Dat kan, met een beetje Javascript. Geen Java, da's iets heel anders.
fokstok.nl
pi_82324937
Het is me gelukt met een simpel javascriptje, bedankt!

1
2
3
4
5
6
7
8
9
10
11
12		<script language="JavaScript">
var backColor = new Array(); 

backColor[0] = '#111111';
backColor[1] = '#222222';
backColor[2] = '#333333';
backColor[3] = '#444444';

function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
</script>

1
2
3
4		<a href="#" onMouseOver="javascript:changeBG(0)">Change</a>
<a href="#" onMouseOver="javascript:changeBG(1)">Change</a>
<a href="#" onMouseOver="javascript:changeBG(2)">Change</a>
<a href="#" onMouseOver="javascript:changeBG(3)">Change</a>


Ik heb alleen nog 1 probleem, dit werkt alleen als ik de background color uit de body css haal. Dit betekent dus dat de site altijd begint met een witte achtergrond.

Is dit via html/css te veranderen? Of moet ik iets aanpassen/toevoegen in het script? (en moet ik even in het javascript voor dummies topic aankloppen?)
pi_82326194
quote:
Op vrijdag 4 juni 2010 13:01 schreef lkb9000 het volgende:
Het is me gelukt met een simpel javascriptje, bedankt!
[ code verwijderd ]


[ code verwijderd ]

Ik heb alleen nog 1 probleem, dit werkt alleen als ik de background color uit de body css haal. Dit betekent dus dat de site altijd begint met een witte achtergrond.

Is dit via html/css te veranderen? Of moet ik iets aanpassen/toevoegen in het script? (en moet ik even in het javascript voor dummies topic aankloppen?)
document.bgColor lijkt me niet echt correct, dat zou op zijn minst moeten zijn document.body.style.backgroundColor, of document.getElementById('elementID').style.backgroundColor. Als je dat gebruikt moet het gewoon de CSS overrulen.
zcflevo.nl
pi_82326616
quote:
Op vrijdag 4 juni 2010 13:31 schreef KomtTijd... het volgende:

[..]

document.bgColor lijkt me niet echt correct, dat zou op zijn minst moeten zijn document.body.style.backgroundColor, of document.getElementById('elementID').style.backgroundColor. Als je dat gebruikt moet het gewoon de CSS overrulen.
Die eerste werkt perfect, geweldig!
pi_82348432
Ik heb nog een probleem

Ik heb een iframe waar ik een Nivo Slider in heb gebouwd, en deze werkt in FF & IE goed. Behalve in Chrome als ik de online versie bekijk (offline bekijken werkt gewoon goed), dan komt er een horizontale scrollbar terwijl ik op alle mogelijke plekken overflow op hidden heb staan.

Heeft iemand ervaring met zo'n probleem? Ik kan niet bedenken waar het aan kan liggen

http://lennartb.nl/2010/index1.html
Hier gaat het om, alvast bedankt!
  donderdag 10 juni 2010 @ 14:34:58 #224
25889 Sitethief
Fulltime Flapdrol
pi_82616879
1
2
3
4
5
6
7
8
9
10
11
12
13
14		<body>
   <div id="wrapper" style="margin: 0pt auto; width: 1000px;">
      <div id="bodyPan"> 
         <div id="boxBox">  
            <div id="profileBox">       
               Content A
            </div>
            <div id="companyBox">
               Content B
            </div> 
         </div>
      </div>
   </div>
</body>


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		body{
   background:url("plaatjezoveel.jpg") repeat-x scroll 0 -73px #A8A39D;
   color:#1A1917;
   font:14px/20px Arial,Helvetica,sans-serif;
   margin:10px 0 0;
   padding:0;
}
#bodyPan {
   background:url("plaatjezoveel2.jpg") no-repeat scroll 0 0 #FFFFFF;
   color:#1A1917;
   margin:0 auto;
   padding:10px 20px 20px;
   position:relative;
width:960px;
}
#boxBox {
   position:relative;
}
#companyBox {
   position:relative;
}
#profileBox {
   float:left;
   position:relative;
}

Probleem, hoogte is dynamisch, dat gaat verder lekker. Tot dat een block element in #boxBox een float eigenschap meekrijgt, dan krijgt he t#bodyPan erboven de hoogte van het kleinste element. (of geen hoogte als beide elementen een float hebben)
Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht &gt;:)
pi_82618273
overflow:hidden
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies #14
Index

» digital corner

» development

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