[CSS] voor dummies #15

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  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 :).
  woensdag 26 januari 2011 @ 15:23:09 #276
134533 donroyco
dus niet Donroyco
pi_91896499
Gebruik je Web Dev Toolbar?
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_91918019
Firebug is ook handig, naast die webdev toolbar. :)
fokstok.nl
pi_91920771
Ik zou niet meer willen/kunnen leven zonder Firebug :D
Nee.
pi_92266642
vraagje ik zit nu met
1
2
3
4
5
6
7
8
9
10		<body>
<div id='container'>
<div id='menu'>
</div>
<div id='content'>
</div>
<div id='footer'>
</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
26
27
28
29
30
31
32		#container{
    width:1000px;    
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

#menu{ 
    float: left;
    width: 160px;
    height: 100%;
    font-size: 11px;
    min-height: 800px;
    padding: 5px 5px 5px 5px;
}
#content {
    float: left;
    width: 800px;
    height: 100%;
    font-size: 12px;
    padding-bottom:10px;
    padding-left:20px;
}

#footer{
    float: left;
    height: 120px;
    width: 990px;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
}

Probleem is dat hij de container niet wil weergeven :o.
het idee is een paar Divs met een witte achtergrond en dat lukt niet echt.

[ Bericht 0% gewijzigd door cablegunmaster op 03-02-2011 11:52:51 ]
Redacted
pi_92266676
Je hebt je containerdiv niet afgesloten.
pi_92266883
quote:
1s.gif Op donderdag 3 februari 2011 11:47 schreef RenRen- het volgende:
Je hebt je containerdiv niet afgesloten.
css die klopt wat ik heb gekopieerd de html is pseudo dus ja was een klein foutje :P
alsnog geen witte achtergrond.
Redacted
pi_92266932
Het is ook background-color :Y
  donderdag 3 februari 2011 @ 11:57:39 #283
134533 donroyco
dus niet Donroyco
pi_92267014
quote:
1s.gif Op donderdag 3 februari 2011 11:55 schreef RenRen- het volgende:
Het is ook background-color :Y
background pakt ie ook :)
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_92267075
quote:
1s.gif Op donderdag 3 februari 2011 11:57 schreef donroyco het volgende:

[..]

background pakt ie ook :)
In plaats dat je die gast helpt, let je liever op mij. Top!
  donderdag 3 februari 2011 @ 12:01:17 #285
134533 donroyco
dus niet Donroyco
pi_92267157
quote:
14s.gif Op donderdag 3 februari 2011 11:59 schreef RenRen- het volgende:

[..]

In plaats dat je die gast helpt, let je liever op mij. Top!
Huilen doe je maar lekker ergens anders.
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_92267484
quote:
7s.gif Op donderdag 3 februari 2011 12:01 schreef donroyco het volgende:

[..]

Huilen doe je maar lekker ergens anders.
Ja, boohoo, de grote Donroyco haat me. Boohoo.
Ga die gast helpen ipv altijd op mij te letten, je weet altijd alles toch zo goed?
pi_92267621
footer clear:both meegeven ipv float:left.
zcflevo.nl
pi_92268062
het werkt niet en de rest van de css werkt wel :o.
Redacted
pi_92268291
Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.
zcflevo.nl
pi_92269024
quote:
2s.gif Op donderdag 3 februari 2011 12:33 schreef KomtTijd... het volgende:
Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.
W3 validator fixte het dankje :). het kwam door extra scriptjes die nog niet helemaal gevalideerd waren :). Dankje voor de aandacht. en kappen met bekvechten ;) .
Redacted
  vrijdag 18 februari 2011 @ 10:43:29 #291
63192 ursel
"Het Is Hier Fantastisch!
pi_92956279
Ik heb een probleem met mijn textgrootte versus mijn achtergrond image. :P

Mijn image is op zijn smalste stuk 75px breed. Het is de bedoeling dat een aantal keywords verdeeld worden bovenop deze image. So fa so good. Alleen zijn sommige keywords een beetje lang, of meerdere worden. Meerdere worden gaat meestal nog wel goed gelukkig.

Ik heb mijn keywords div nu een breedte gegeven van 75 px. Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven. Probleem is alleen dat mijn tekst als die groter is dan 75px, aan de rechterkant uit mijn div loopt.

Wat kan ik het beste doen? Links uit de div laten lopen (en hoe doe ik dat:P), Of zijn er mogelijkheden om worden af te kappen en de regel eronder verder te gaan?
  vrijdag 18 februari 2011 @ 11:33:37 #293
63192 ursel
"Het Is Hier Fantastisch!
pi_92957952
quote:
1s.gif Op vrijdag 18 februari 2011 10:51 schreef KomtTijd... het volgende:
http://www.css3.info/preview/word-wrap/
Hmm, natuurlijk. Mja, niet zo heel erg tevree mee eigenlijk. :{
Krijg je van die rare woorden weer van.

Heb je ook nog een optie voor het aan de linkerkant uitlopen van een div? :7
pi_92958959
text-allign:right wellicht?
zcflevo.nl
  vrijdag 18 februari 2011 @ 12:11:31 #295
63192 ursel
"Het Is Hier Fantastisch!
pi_92959166
quote:
2s.gif Op vrijdag 18 februari 2011 12:04 schreef KomtTijd... het volgende:
text-allign:right wellicht?
Staat al zo
quote:
1s.gif Op vrijdag 18 februari 2011 10:43 schreef ursel het volgende:

Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven.

pi_92959304
direction: rtl;
Maar ik denk dat die niet doet wat je wilt ;)
fokstok.nl
pi_92959356
quote:
1s.gif Op vrijdag 18 februari 2011 12:16 schreef Light het volgende:
direction: rtl;
Maar ik denk dat die niet doet wat je wilt ;)
naalspo nerovetsrethca nedroow ej la nad ne heheW
zcflevo.nl
pi_92960523
Ik loop zelf ook tegen een probleem aan.

In een site heb ik een div, bovenin, die heeft een achtergrondkleur. Die hebben we een position:absolute mee moeten geven, omdat anders de achtergrondkleur maar een klein stukje opvult.

Hierdoor heb ik problemen met andere divs, die gaan erachter zitten. Geen idee hoe ik het op kan lossen.
Help?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		#imageheader {
    width:878px;
    height:auto;
    max-height:291px;
    background-color:#e8ded2;
    margin: 10px 0px 20px -5px;
    padding: 11px 11px 11px 11px;
    position:absolute;
}

#left {
    min-width:210px;
    max-width:210px;
    height:auto;
    float:left;
    background-color:#CCC;
    margin-left:6px;
}

pi_92962601
quote:
14s.gif Op vrijdag 18 februari 2011 13:42 schreef KomtTijd... het volgende:
[Geen search nodig!] De oplossing voor alle problemen!
Wat ik wil is dat die left onder de imageheader komt :')
pi_92962714
Nee het probleem is dat #imageheader iets niet goed doet met de achtergrond, en je workaround daarvoor zorgt voor een nieuw probleem. Kortom, bij de bron aanpakken. Wat gaat er mis met die achtergrond?
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies #15
Index

» digital corner

» development

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