[CSS] voor dummies #15

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_91505647
quote:
1s.gif Op dinsdag 18 januari 2011 10:46 schreef mstx het volgende:

[..]

Frame, popupje (met daarin de player) of alle content met AJAX laden zijn de enige oplossingen denk ik zo. Ben eigenlijk van elke methode geen voorstander...
Frame is misschien een optie... Even op googlen, dankje
  dinsdag 18 januari 2011 @ 12:54:21 #252
134533 donroyco
dus niet Donroyco
pi_91510151
quote:
1s.gif Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
Content inladen dmv jQuery?
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_91510447
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
  dinsdag 18 januari 2011 @ 13:01:52 #254
134533 donroyco
dus niet Donroyco
pi_91510474
quote:
1s.gif Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
Soms moet je van tevoren bedenken hoe het moet.
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_91510496
quote:
3s.gif Op dinsdag 18 januari 2011 13:01 schreef donroyco het volgende:

[..]

Soms moet je van tevoren bedenken hoe het moet.
Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.
  dinsdag 18 januari 2011 @ 13:16:25 #256
134533 donroyco
dus niet Donroyco
pi_91510966
quote:
1s.gif Op dinsdag 18 januari 2011 13:02 schreef RenRen- het volgende:

[..]

Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.
Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?
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_91511018
quote:
7s.gif Op dinsdag 18 januari 2011 13:16 schreef donroyco het volgende:

[..]

Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?
Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.
  dinsdag 18 januari 2011 @ 13:23:19 #258
134533 donroyco
dus niet Donroyco
pi_91511224
quote:
1s.gif Op dinsdag 18 januari 2011 13:17 schreef RenRen- het volgende:

[..]

Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.
Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
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_91511286
quote:
14s.gif Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Ik kan op voorhand niet zulke dingen in gedachten houden, als die dingen niet in de planning stonden, dat schrijf ik net. Anders had ik echt wel wat anders bedacht voor de content en dergelijken, ik ben toch zeker niet achterlijk. Daarom zoek ik een oplossing die niet inhoudt dat ik de site helemaal opnieuw moet bouwen. Ik ga toch niet elke site zo bouwen dat er eventueel nog een keer ooit een muziekje onder kan, dat snap jij ook wel :')

En als jij dus niet goed wilt lezen, moet je mij daar niet mee lastig vallen.
pi_91513299
quote:
1s.gif Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.
zcflevo.nl
pi_91513427
quote:
1s.gif Op dinsdag 18 januari 2011 14:09 schreef KomtTijd... het volgende:

[..]

Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.
Nee, het is een heel simpele site eigenlijk.
pi_91513628
quote:
14s.gif Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Je kunt niet alles in gedachten houden. Als je bij de buurman een vierkant terras van 4 x 4 meter gaat leggen en de buurman besluit, als je nog 3 tegels moet leggen, dat hij toch liever een rond terras met dezelfde oppervlakte heeft, kun je ook weer opnieuw beginnen. :)
fokstok.nl
pi_91736768
eens :).
Ik zou een klein (misschien zelfs leeg, maar ik zou wel ergens een uit-optie inbouwen) framepje gebruiken. Dat kan denk ik nog wel makkelijk zonder heel veel aan alle pagina's aan te moeten passen.
Finally, someone let me out of my cage
pi_91736900
Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.
zcflevo.nl
  maandag 24 januari 2011 @ 23:12:07 #265
71610 Black-Hole
Deep in my soul
pi_91827530
Zit al de hele avond te klooien om een 3 column layout voor elkaar te krijgen met floats en het lukt maar niet om de recht kolom goed te krijgen zodat hij echt naast de middelste kolom komt in plaats van rechts ter hoogte van waar de middelste kolom is geëindigd.

Dit is de (versimpelde) HTML code die ik gebruik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<div id="wrapper">

<div id="left">

<p>Lorem .....  ultrices, orci.</p>

</div> <!-- end left -->

<div id="middle">

<p>Lorem ...... placerat ultrices, orci.
</p>

</div> <!-- end middle -->

<div id="right">

<p>Lorem ....... ultrices, orci.</p>

<p>Pellentesque ...... felis.</p>

</div> <!-- end right -->

</div> <!-- end wrapper -->

en de CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		#wrapper{
width: 960px;
margin: auto;
}

#left {
float: left;
width: 260px;
background: red;
}

#middle {
margin: 0px 260px;
width: 440px;
background: green;
}

#right {
float: right;
width: 260px;
background: yellow;
}

Volgens mij is de oplossing zo simpel maar ik kom er nu echt niet uit :{
pi_91828882
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		#left {
  float: left;
  width: 260px;
  background: red;
}
#middle {
  float: left;
  width: 440px;
  background: green;
}
#right {
  float: left;
  width: 260px;
  background: yellow;
}
fokstok.nl
pi_91829178
quote:
13s.gif Op zondag 23 januari 2011 02:46 schreef KomtTijd... het volgende:
Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.
ok misschien is ajax ook wel een optie, maar waarom werken frames vreselijk?
Finally, someone let me out of my cage
  dinsdag 25 januari 2011 @ 06:40:30 #268
71610 Black-Hole
Deep in my soul
pi_91835556
quote:
1s.gif Op maandag 24 januari 2011 23:39 schreef Light het volgende:

[ code verwijderd ]

Zo makkelijk dus :% Thanks!
pi_91861297
Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

1
2
3
4
5
6		    <div class="menu">
        <div class="active"><a href="index.html">Home</a></div>
        <div class="noactive"><a href="#">Over mij</a></div>
        <div class="noactive"><a href="portfolio.html">Portfolio</a></div>
        <div class="noactive"><a href="#">Contact</a></div>
    </div>

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		.menu {
float: left;
width: 100%;
height: 80px;
font: 12px Arial;
}

.active { 
font: 12px Arial; 
width: 90px; 
height: 80px;
float: left; 
color: #FFFFFF; 
background: #410400; 
text-decoration: none; 
}

.active a:link, a:active, a:visited, a:hover { color: #FFFFFF; text-decoration: none; }

.noactive { 
font: 12px Arial; 
width: 90px; 
height: 80px; 
float: left; 
color: #410400; 
background: #fff; 
text-decoration: none; 
}

.noactive a:link, a:active, a:visited, a:hover { color: #410400; background: #fff; text-decoration: none }

Kan iemand me aub helpen? ;(
pi_91861759
quote:
1s.gif Op dinsdag 25 januari 2011 19:31 schreef Nashje het volgende:
Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

[ code verwijderd ]

[ code verwijderd ]

Kan iemand me aub helpen? ;(
En wat gaat er dan precies mis? Zonder te testen kan ik al zeggen dat het probleem waarschijnlijk is dat je alleen onderscheid maakt in .active a:link en .noactive a:link. a:hover, a:visited en a:active worden gewoon volgens de regels van specificity gestijld.

En nog wat algemene opmerkingen:
- voor een menu gebruikt men doorgaans een unordered list (<ul>)
- een hele rij elementen dezelfde classname geven lijkt me een beetje overbodig.
zcflevo.nl
pi_91863737
Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?
1
2
3
4
5
6		    <ul id="menu"> 
            <li class="active"><a href="index.html">Home</a></li> 
            <li><a href="#">Over mij</a></li> 
            <li><a href="#">Portfolio</a></li> 
            <li><a href="#">Contact</a></li> 
    </ul> 

Eén menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

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		#menu { 
    padding:0; 
    margin:0;
    list-style-type: none;
} 

#menu li { 
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    display: inline;
} 

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}

#menu li a:hover { 
    color: #fff;
    background: #410400;
    text-decoration: none;
}
pi_91870454
quote:
1s.gif Op dinsdag 25 januari 2011 20:11 schreef Nashje het volgende:
Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?

[ code verwijderd ]
ja dat is prima zo
quote:
Eén menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

[ code verwijderd ]

inline-elementen vormen zich naar hun inhoud. Maak er inline-block elementen van. Of laat ze lekker block, en gebruik float:left om ze naast elkaar te krijgen.

verder snap ik nog steeds niet wat je hier mee wilt:
1
2
3
4
5		#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}
Maar het lijkt me gewoon een fout. Ik denk dat dat hele gedeelte eruit kan en dat je bovendien eens wat moet lezen over CSS selectors. Goeie startplaats zoals altijd: http://www.w3schools.com/css/default.asp
zcflevo.nl
pi_91895304
Even mbv van een plaatje.

De actieve pagina moet dus zichtbaar zijn en wanneer je met de cursor over de overige knoppen gaat moet deze gemarkeerd worden. Dat is wat ik met die hover wil krijgen. Met die display:inline komen ze langs elkaar, maar ik wil elke item dezelfde grootte en breedte meegeven (90x80px).

pi_91896284
Tis me voor een gedeelte gelukt!

Heb nu:
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		#menu { 
    padding:0; 
    margin:0;
    list-style-type: none;
} 

#menu li { 
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    float: left;
    display: block;
} 

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a { float: left; display: block; width: 90px; height: 80px; }

#menu li a:hover { 
    color: #fff;
    background: #410400;
    text-decoration: none;
}

Alleen die class="active" op Home pakt ie niet. Hmmz.
pi_91896476
OMG, tis me gewoon gelukt.

Had:
1
2
3
4		#menu li .active {
    color: #fff;
    background: #410400;
}

Veranderd in:
1
2
3
4		#menu .active a {
    color: #fff;
    background: #410400;
}

Voila. Bedankt :).
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies #15
Index

» digital corner

» development

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