[CSS] voor dummies #16

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_97868684
M'n nieuwe site toont wat gebreken in IE8 en IE9 (oudere versies doen het prima), maar ik heb echt geen flauw idee waar het vandaan kan komen. Het gekke is namelijk dat het ene blok wel goed is neergezet, maar het andere niet. Dit terwijl ze zijn gegenereerd door PHP en dus precies dezelfde opmaak hebben.

Iemand enig idee?
site
stuk uit stylesheet:
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.
Php stuk:
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.
pi_97875802
Ik zou eens beginnen met wat orde te scheppen in je chaos.
Je hebt <a> tags zonder href, <a> tags die uberhaupt helemaal leeg zijn, <a> tags genest in <a> tags, divs zonder inhoud, div's genest in <a>tags, kortom 't is gewoon een janboel. En die CSS van 90 regels moet je ook makkelijk in 20 regels kunnen samenvatten.

Zul je zien, gaat het gelijk al een stuk beter.
zcflevo.nl
pi_97876370
Ik ben dus bezig met een site, die met de transparantie, en die boxen hebben ook een box-shadow.

Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.

Met overflow:auto en height:1%:


Zonder een van beiden:


Code van de div:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		#content{
  width:692px;
  height:533px;
  margin-left:12px;
  float:left;
  box-shadow: 0px 0px 10px #c7c7c7;
  -moz-box-shadow: 0px 0px 10px #c7c7c7;
  -webkit-box-shadow: 0px 0px 10px #c7c7c7;
  background:rgba(255,255,255,0.85);
  margin-top:12px;
  margin-bottom:12px;
  padding-left:10px;
  padding-right:10px;
  padding-top:15px;
  overflow:auto;
  height:1%;
}

Iemand enig idee hoe dit komt?
  woensdag 8 juni 2011 @ 09:24:58 #204
230788 n8n
Pragmatisch
pi_97876412
probeer :hidden;, of haal de float weg van de content in de transparente box
“Specialization is for insects”.—Robert Heinlein
pi_97876454
quote:
0s.gif Op woensdag 8 juni 2011 09:22 schreef RenRen- het volgende:
Ik ben dus bezig met een site, die met de transparantie, en die boxen hebben ook een box-shadow.

Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.

Met overflow:auto en height:1%:
[ afbeelding ]

Zonder een van beiden:
[ afbeelding ]

Code van de div:
[ code verwijderd ]

Iemand enig idee hoe dit komt?
Weer een voorbeeldje van je probleem bij de wortel aanpakken:
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem

Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
zcflevo.nl
pi_97876469
quote:
14s.gif Op woensdag 8 juni 2011 09:24 schreef n8n het volgende:
probeer :hidden;, of haal de float weg van de content in de transparente box
Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan. ;( Het moet echt perse naast elkaar.
pi_97876487
quote:
0s.gif Op woensdag 8 juni 2011 09:27 schreef KomtTijd... het volgende:

[..]

Weer een voorbeeldje van je probleem bij de wortel aanpakken:
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem

Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
Even zien welke ik dan clear:both moet geven... Ik denk de footer, thanks

Edit, footer heeft al clear:both... Hm. Ik ben confused :') Overflow:visible werkt ook niet, schaalt-ie ook niet van mee.
  woensdag 8 juni 2011 @ 09:29:14 #208
230788 n8n
Pragmatisch
pi_97876494
quote:
0s.gif Op woensdag 8 juni 2011 09:28 schreef RenRen- het volgende:

[..]

Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan. ;( Het moet echt perse naast elkaar.
is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodig
“Specialization is for insects”.—Robert Heinlein
pi_97876535
quote:
7s.gif Op woensdag 8 juni 2011 09:29 schreef n8n het volgende:

[..]

is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodig
height auto werkte niet, 1% werkte wel, maar dus met die lelijkheid :r
Ik denk helaas dat de meeste mensen die die site gaan gebruiken IE gebruiken, vast ook oudere versies. Even zoeken wat die fix is dan :) Bedankt voor het meedenken ook!
  woensdag 8 juni 2011 @ 09:34:32 #210
230788 n8n
Pragmatisch
pi_97876630
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
“Specialization is for insects”.—Robert Heinlein
pi_97876676
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		#left{
width:215px;
height:533px;
-moz-box-shadow: 0px 0px 10px #c7c7c7;
-webkit-box-shadow: 0px 0px 10px #c7c7c7;
box-shadow: 0px 0px 10px #c7c7c7;
background:rgba(255,255,255,0.85);

margin-top:12px;
margin-bottom:12px;
padding-left:10px;
padding-right:10px;
  padding-top:15px;
display:inline-block;

}

#content{
width:692px;
height:533px;
margin-left:12px;
box-shadow: 0px 0px 10px #c7c7c7;
-moz-box-shadow: 0px 0px 10px #c7c7c7;
-webkit-box-shadow: 0px 0px 10px #c7c7c7;
background:rgba(255,255,255,0.85);
margin-top:12px;
margin-bottom:12px;
padding-left:10px;
padding-right:10px;
padding-top:15px;
display:inline-block;
height:auto;

}

Dit zou dan toch de nieuwe code moeten zijn? Zo ja, dit werkt niet :o
pi_97876692
quote:
7s.gif Op woensdag 8 juni 2011 09:34 schreef n8n het volgende:
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
Welke div staat dan niet in het midden? Wacht, ik geef jullie een url.
pi_97876718
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.

-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
zcflevo.nl
pi_97876903
quote:
0s.gif Op woensdag 8 juni 2011 09:38 schreef KomtTijd... het volgende:
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.

-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
Ik heb dus 2 blokken in het grote blok, en die moeten gefloat zijn, net als het grote blok, dat moet ook naast elkaar komen te staan. Hoe maakt me niet uit, als het maar naast elkaar blijft :D Tabellen zijn geen optie vrees ik.
  woensdag 8 juni 2011 @ 09:50:29 #215
230788 n8n
Pragmatisch
pi_97876990
display: inline-block;

enkel ie6 werkt heeft dan een inline nodig meen ik

snap niet waarom de overflow-truc niet werkt http://webdesignerwall.co(...)floats-with-overflow
“Specialization is for insects”.—Robert Heinlein
  woensdag 8 juni 2011 @ 09:55:29 #216
230788 n8n
Pragmatisch
pi_97877091
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
“Specialization is for insects”.—Robert Heinlein
pi_97877152
quote:
7s.gif Op woensdag 8 juni 2011 09:55 schreef n8n het volgende:
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast. :')
  woensdag 8 juni 2011 @ 10:00:37 #218
230788 n8n
Pragmatisch
pi_97877204
quote:
0s.gif Op woensdag 8 juni 2011 09:58 schreef RenRen- het volgende:

[..]

Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast. :')
dan helpt dit ook niet, gooi ff die inline-block er tegenaan ipv de float, dan heb je een block element naast elkaar. Voor IE moet dan maar een hack komen :')

http://blog.mozilla.com/w(...)rowser-inline-block/
“Specialization is for insects”.—Robert Heinlein
pi_97877852
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.

Mooie website wel trouwens!
zcflevo.nl
pi_97878026
quote:
0s.gif Op woensdag 8 juni 2011 10:27 schreef KomtTijd... het volgende:
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.

Mooie website wel trouwens!
Ohja, dan is het opgelost! Dankjeweeel O+ Maar. Wtf, er is maar 1 css, en #1 en #2 verwijzen naar hetzelfde bestand. Arghhhh, straks even een topic over openen elders :')

thanks :D Ik ben er wel blij mee.
pi_97882607
quote:
0s.gif Op dinsdag 7 juni 2011 22:14 schreef Tegan het volgende:
Eerst gecentreerd totdat het beeldvullend is bedoel je? Dat wordt lastig... Omdat de inhoud van de container variabel is.
Nee :'). Altijd gecentreerd, en de height moet meeschalen met de contentdiv die erin staat, en op elke pagina een andere grootte height heeft.
  woensdag 8 juni 2011 @ 12:45:18 #222
230788 n8n
Pragmatisch
pi_97882755
width: 900px;
margin: 0 auto;
“Specialization is for insects”.—Robert Heinlein
pi_97888429
Ja dat dacht ik dus ook. Zo heb ik het ook ingesteld (met een height met vaste grootte), maar als ik die height eruit gooi dan verdwijnt heel m'n container.

Ik centreer mijn container altijd op deze manier:
1
2
3
4
5
6
7
8
9
10
11		body, html {
margin: 0px;
padding: 0px;
text-align: center;
}

.container {
margin: 0 auto;
width: xxpx;
height: xxpx;
}

Als ik nu de height van de container weg haal, en daar een position: absolute toevoeg, dan schaalt mijn container's height wel mee met de hoeveelheid tekst die er is. Maar dan is de container niet meer gecentreerd en ploft ie naar links.
pi_97889136
Als je container alleen floats bevat is het logisch dat ie verdwijnt. Absoluut positioneren is nergens voor nodig, je moet gebruik maken van een clearfix, bijvoorbeeld:

1
2
3
4
5
6
7
8		.group:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
}

Door de class .group (of net wat je er van maakt, ik vind group mooier dan bijv. clearfix) toe te voegen zorg je er voor dat een container de floats die ie bevat bevat.
Nee.
pi_97889786
Oke, dat klinkt logisch. Ik gebruik inderdaad alleen floats.

Waar zou ik die clearfix precies moeten toevoegen?
pi_97890363
Op je container.
Nee.
pi_97893808
Yes, tis gelukt! Hartelijk dank!
  woensdag 8 juni 2011 @ 22:26:17 #228
71610 Black-Hole
Deep in my soul
pi_97912399
Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?

Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
pi_97912889
quote:
0s.gif Op woensdag 8 juni 2011 22:26 schreef Black-Hole het volgende:
Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?

Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
wutwutwut?

Een paragraph een border ter grootte van de text in een div met vaste breedte en hoogte...

Dus:
- je hebt een paragraph (<p>) met tekst,
- je hebt een div,
- je wilt een border op de paragraph.
- De border komt op de div ipv op de paragraph.

Snap ik het zo goed?
Zo ja kom eens met een voorbeeld. En zo nee eigenlijk ook.
zcflevo.nl
  woensdag 8 juni 2011 @ 22:34:45 #230
71610 Black-Hole
Deep in my soul
pi_97913272
Je snapt hem helemaal, hier een voorbeeld:

1
2
3
4
5
6		<div id="advert2text">
            
    <p>IK Oude straatjes vol leuke boetiekjes.<br>
        JIJToe aan 'n dagje uit. Datum prikken?</p>
                
</div> <!-- end text -->

1
2
3
4
5
6
7		#advert1text{
float: left;
width: 315px;
height: 94px;
margin-bottom: 22px;
background: url('../images/advertbg.jpg') no-repeat;
}

Heb al wat gevonden al werkt het niet helemaal, text-decoration: underline overline.

Edit: nu met CSS van de div. P is verder niet gestyled.

[ Bericht 10% gewijzigd door Black-Hole op 08-06-2011 22:49:15 ]
pi_97914155
We zitten in een CSS-topic, wat is de bijbehorende CSS-code?
zcflevo.nl
pi_97914851
Wat is er mis met underline & overline dan?
  woensdag 8 juni 2011 @ 23:02:06 #233
71610 Black-Hole
Deep in my soul
pi_97915298
quote:
0s.gif Op woensdag 8 juni 2011 22:55 schreef Tegan het volgende:
Wat is er mis met underline & overline dan?
Er mag nog wat padding rondom te tekst nodig, stylen met line-height heeft helaas geen effect. Weet niet of dat effect heeft op een border-top/bottom eigenlijk...
pi_97915475
Geef eens wat je probeerde met line-height?
  woensdag 8 juni 2011 @ 23:07:42 #235
71610 Black-Hole
Deep in my soul
pi_97915693
1
2
3
4
5		#advert1text p{
padding: 18px 0px 0px 10px;
line-height: 30px;
text-decoration: underline overline;
    }
pi_97915763
1line-height:200%;
  woensdag 8 juni 2011 @ 23:11:00 #237
71610 Black-Hole
Deep in my soul
pi_97915925
quote:
14s.gif Op woensdag 8 juni 2011 23:08 schreef Tegan het volgende:

[ code verwijderd ]

Helaas, geen effect. Kan het heel simpel oplossen met een plaatje maar daar heb ik geen zin in eigenlijk.
pi_97916659
Eerder: wat is er mis met simpelweg border-top en border-bottom op je p-element?
zcflevo.nl
pi_97916877
Hij wil het toch op de tekst (iedere regel) en niet om de hele container (p of div) toch? Zo begrijp ik het iig...
  woensdag 8 juni 2011 @ 23:30:42 #240
71610 Black-Hole
Deep in my soul
pi_97917104
quote:
0s.gif Op woensdag 8 juni 2011 23:23 schreef KomtTijd... het volgende:
Eerder: wat is er mis met simpelweg border-top en border-bottom op je p-element?
Dan krijg ik dus een border rondom de div...en niet de p-text.
  woensdag 8 juni 2011 @ 23:37:28 #241
230788 n8n
Pragmatisch
pi_97917548
p {display:inline; border-top: ~; border-bottom: ~;}
“Specialization is for insects”.—Robert Heinlein
pi_97919303
quote:
0s.gif Op woensdag 8 juni 2011 23:30 schreef Black-Hole het volgende:

[..]

Dan krijg ik dus een border rondom de div...en niet de p-text.
Dan is de vraag: "waarom gaat die boder rondom de div staan?"
en niet: "watvoor hack ga ik gebruiken zodat ik bovenstaande vraag niet hoef te beantwoorden?"
zcflevo.nl
  donderdag 9 juni 2011 @ 16:56:43 #243
87680 Mirel
Mirel wil een bongophone.
pi_97943574
Het n8n, het is uiteindelijk gelukt met m'n css. Uiteindelijk had ik dat float gedoe niet eens hoeven te doen omdat Wordpress posts zelf rangschikt: www.mirelmasic.nl De nieuwste staat dus helemaal links :)

Ik heb wel een probleempje: In Firefox en IE staat alles naar beneden zoals het moet, maar in Opera niet. Opera is mijn standaard browser en het zou handig zijn als ik het daar ook goed kan krijgen :)

edit: ineens is na een update alles naar de klote. Heb nog een backupje: http://1577359.huweb.nl

[ Bericht 6% gewijzigd door Mirel op 09-06-2011 17:01:45 ]
When all else fails, you always have delusion.
  donderdag 9 juni 2011 @ 16:59:26 #244
87680 Mirel
Mirel wil een bongophone.
pi_97943715
OK wtf, mijn hele layout is weg. :') Ik heb wel toevallig Wordpress net nog geupdate. Het vreemde is dat dit bij een klasgenoot vandaag ook gebeurd is. Hmm.

Edit: ineens weer terug.
When all else fails, you always have delusion.
  vrijdag 10 juni 2011 @ 17:17:31 #245
110933 F4T4L_3RR0R
R.I.P. webicon ;(
pi_97988253
Wat is de netste of correcte methode?

1: style achter scr, met ;
1<a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000;" /></a>

2: style achter scr, zonder ;
1<a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000" /></a>

3: style voor scr, met ;
1<a href="www.bla.bla"><img style="border: 1px solid #000000;" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a>

4: style voor scr, zonder ;
1<a href="www.bla.bla"><img style="border: 1px solid #000000" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a>
Een ballonvaarder die door de mand valt is nooit grappig...
pi_97988308
Het is allemaal om te huilen.

CSS hoort in een aparte stylesheet te staan. De enige reden waar ik inline CSS voor gebruik is voor bijv. dynamische achtergronden uit een CMS o.i.d. en eventueel via Javascript dingen aanpassen (hoewel ik dat indien het mogelijk is liever doe met het toevoegen van een class).
Nee.
  vrijdag 10 juni 2011 @ 17:20:00 #247
110933 F4T4L_3RR0R
R.I.P. webicon ;(
pi_97988379
Verklaar u nader.

Edit: je hebt je bericht al ge-edit met verklaring.
Een ballonvaarder die door de mand valt is nooit grappig...
  zaterdag 11 juni 2011 @ 00:56:03 #248
270782 Tazar_Yoot
Je moet wat.
pi_98011563
Vraagje, ik snap het niet meer.
ben sinds een kleine maand bezig met wat html5, css. Alleen ik snap niet waarom het volgende gebeurd: (getest in safari en chrome)

Het 'vlaggetje' moet gecentreerd op die grijze balk bovenaan.
Die 2 knoppen moeten gewoon netjes worden uitgelijnd op die grijze balk:
HTML:
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		<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Area 007</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="container">
    
    <div id="navigation">
    <img class="banner" src="../../../../../Desktop/flag.png" width="60" height="80" alt="banner">
<nav>
         <ul>
            <li><img src="img/bttn/spacer.gif">
            <li class="home"><a href="http://google.com"><img src="img/bttn/portfolio.jpg" width="150" height="50" alt="portfolio"></a>
            <li><img src="img/bttn/spacer.gif">
      <li class="portfolio"><a href="http://google.com"><img src="img/bttn/about.jpg" width="150" height="50" alt="about"></a>
            <li><img src="img/bttn/spacer.gif">
    </ul>
        </nav>
    </div>
    <div id="content">
    <header>
    <h1> Header Tekst </h1>
    </header>
  <section id="portfolio">
        <article> <h2> Article one. </h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium ipsum vitae tellus sollicitudin cursus. Proin ac odio nec quam auctor placerat vel et risus. Vestibulum quis sem vel neque venenatis tincidunt malesuada sed leo. Etiam quis eros vel orci euismod fermentum. Donec eu dignissim est. 
</article>
    </section>
    </div>
</div>

</nav>

</body>
</html>

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
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		@charset "UTF-8";
/* CSS Document */

body{
    background-image: url(img/bg.gif);
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
    margin:0px;
    padding:0px;
}

#container{
    width:800px;
    height:500px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    margin-top:60px;

        -moz-box-shadow: 0 0 100px #888;
        -webkit-box-shadow: 0 0 100px#888;
        box-shadow: 0 0 100px #888;
}

#navigation{
    padding-top:150px;
    float:left;
    width:150px;
    background-color:#999999;
    background-image:url(img/navbg.png);
    background-repeat:repeat-y;
    height:350px;
    
    -webkit-box-shadow: inset -5px -0px 5px #000000;
    -moz-box-shadow: inset -5px -0px 5px #000000;
    box-shadow: inset -5px -0px 5px #000000;
    }

section {
padding:30px;

}
#content{
    float:left;
    width:650px;
    
}

header {
    background-color:#FFFFFF;
    padding:10px 0px 0px 30px;
}

nav{
    padding:0px;
    margin:0px;
    float:left;
}

a {
    color:#7f7f7f;
    text-decoration:none;
    }

a:hover 
{
    color:#494949;
    text-decoration:none;
}

ul 
{
    list-style-type:none;
    float:left;
}

li 
{
} 

.banner{
padding:10px 5px 200px 50x;
}

Wie snapt hem ;) ?

(Sorry voor de rommelige code. en wie ziet van welke Mac App deze layout komt ;)?)

[ Bericht 0% gewijzigd door Tazar_Yoot op 11-06-2011 01:13:40 ]
  zaterdag 11 juni 2011 @ 09:48:40 #249
87680 Mirel
Mirel wil een bongophone.
pi_98016953
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.

When all else fails, you always have delusion.
  zaterdag 11 juni 2011 @ 09:49:10 #250
87680 Mirel
Mirel wil een bongophone.
pi_98016959
3 divs in de sidebar dus
When all else fails, you always have delusion.
  zondag 12 juni 2011 @ 16:20:52 #251
230788 n8n
Pragmatisch
pi_98067975
quote:
0s.gif Op donderdag 9 juni 2011 16:56 schreef Mirel het volgende:
Het n8n, het is uiteindelijk gelukt met m'n css.
nice

jammer dat dit niet kan ;(

1
2
3
4
5		body header:hover { 
    body {
        color: red;
    }
}
“Specialization is for insects”.—Robert Heinlein
pi_98069374
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
Nee.
  zondag 12 juni 2011 @ 16:56:48 #253
230788 n8n
Pragmatisch
pi_98069437
quote:
0s.gif Op zondag 12 juni 2011 16:55 schreef PimD het volgende:
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
is dat javascript? ik bedoel dat je effect uitoefent op een bovenliggend element door een binnengesloten element te gebruiken
“Specialization is for insects”.—Robert Heinlein
  zondag 12 juni 2011 @ 17:02:25 #254
87680 Mirel
Mirel wil een bongophone.
pi_98069683
quote:
7s.gif Op zondag 12 juni 2011 16:20 schreef n8n het volgende:

[..]

nice

jammer dat dit niet kan ;(
[ code verwijderd ]

Waarom zou ik dat doen :P Of was het het 2e onderwerp in je post afzonderlijk van de nice gericht naar mij? :P
When all else fails, you always have delusion.
pi_98069727
De nieuwe versie van LESS is wel Javascript-based ja, maar een oudere versie (die ik gebruikte) maakt gewoon op je systeem van een .less-file een .css-file.

1
2
3
4
5
6		body {
color:red;
 div {
color:blue;
}
}

werd dus

1
2		body { color:red; }
body div { color:blue; }
Nee.
pi_98069817
Oh nee wacht, ik zie nu pas wat je wilt bereiken. Dat kan inderdaad niet, en daar heb je inderdaad Javascript voor nodig.
Nee.
  maandag 13 juni 2011 @ 10:59:15 #257
270782 Tazar_Yoot
Je moet wat.
pi_98103844
quote:
0s.gif Op zaterdag 11 juni 2011 09:48 schreef Mirel het volgende:
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.

[ afbeelding ]
Ik heb hem nu in een losse div staan. Ik krijg het alleen nog niet voor elkaar om hem helemaal bovenaan te krijgen in die navigation div.
  maandag 13 juni 2011 @ 11:00:38 #258
87680 Mirel
Mirel wil een bongophone.
pi_98103880
geef eens linkje
When all else fails, you always have delusion.
  maandag 13 juni 2011 @ 13:23:16 #259
87680 Mirel
Mirel wil een bongophone.
pi_98109017
Is er een manier om een fix te zetten in Google Chrome voor een css probleem? Als je background: 100%; doet dan scrollt Chrome erg langzaam. }:|

http://1586563.huweb.nl/ hier bij body{

De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
When all else fails, you always have delusion.
pi_98109172
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
zcflevo.nl
  maandag 13 juni 2011 @ 13:47:19 #261
270782 Tazar_Yoot
Je moet wat.
pi_98110090
quote:
0s.gif Op maandag 13 juni 2011 11:00 schreef Mirel het volgende:
geef eens linkje
Hij stond nog nergens online :9
Nu wel.
klik
pi_98110191
quote:
7s.gif Op maandag 13 juni 2011 13:47 schreef Tazar_Yoot het volgende:

[..]

Hij stond nog nergens online :9
Nu wel.
klik
Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.
Nee.
  maandag 13 juni 2011 @ 13:50:59 #263
270782 Tazar_Yoot
Je moet wat.
pi_98110234
quote:
0s.gif Op maandag 13 juni 2011 13:49 schreef PimD het volgende:

[..]

Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.
Aangezien ik het liever gelijk goed wil doen dan, hoe positioneer ik hem absoluut :@ ?

edit: met margin-top:-150px; is het gelukt. alleen ben nu benieuwd naar hoe ik hem absoluut zou posioneren (link updated dus).
  maandag 13 juni 2011 @ 13:55:43 #264
87680 Mirel
Mirel wil een bongophone.
pi_98110423
quote:
0s.gif Op maandag 13 juni 2011 13:26 schreef KomtTijd... het volgende:
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
Koop maar een groot scherm :6
When all else fails, you always have delusion.
  maandag 13 juni 2011 @ 13:58:51 #265
270782 Tazar_Yoot
Je moet wat.
pi_98110544
Ahh, een nieuw probleem. De shadow functie in css werkt dus niet op afbeeldingen. Nu kan ik die shadow handmatig toevoegen in photoshop. Of kan ik het ook op een of andere manier zo doen dat hij de shadow wel op de buttons werkt?

linkje
  maandag 13 juni 2011 @ 14:01:31 #266
87680 Mirel
Mirel wil een bongophone.
pi_98110644
shadows op een div (of een div eronder), en niet op het plaatje zelf?
When all else fails, you always have delusion.
  maandag 13 juni 2011 @ 14:06:28 #267
270782 Tazar_Yoot
Je moet wat.
pi_98110846
quote:
0s.gif Op maandag 13 juni 2011 14:01 schreef Mirel het volgende:
shadows op een div (of een div eronder), en niet op het plaatje zelf?
Hoe gooi ik er een div op? Ik ben nog niet zo heel ver kwa kennis van html/css eh :@
pi_98111051
Maar wel al met HTML5 aan de slag gaan :')
Nee.
  maandag 13 juni 2011 @ 14:48:22 #269
270782 Tazar_Yoot
Je moet wat.
pi_98112403
quote:
0s.gif Op maandag 13 juni 2011 14:10 schreef PimD het volgende:
Maar wel al met HTML5 aan de slag gaan :')
Worked out pretty neat so far right?
Ik weet wel het een en ander, maar dingen als div's over elkaar? shoot me.
Als ik het zou weten zou ik het niet vragen eh :D ?
so, can you help me?
pi_98112478
Al je content in een <nav> zou ik niet 'pretty neat' noemen.
Nee.
  maandag 13 juni 2011 @ 15:00:17 #271
270782 Tazar_Yoot
Je moet wat.
pi_98112899
quote:
0s.gif Op maandag 13 juni 2011 14:50 schreef PimD het volgende:
Al je content in een <nav> zou ik niet 'pretty neat' noemen.
Ok, ik zal stoppen trots zijn dat ik iets heb kunnen leren met een shitload aan tutorials en andere websites. Zou jij dan kunnen stoppen met m'n code kunnen afkraken en of feedback geven met verbeteringen, of gewoon niks? Dat werkt een stuk makkelijker.

[ Bericht 0% gewijzigd door Tazar_Yoot op 13-06-2011 15:07:47 ]
pi_98116735
quote:
0s.gif Op maandag 13 juni 2011 13:23 schreef Mirel het volgende:
Is er een manier om een fix te zetten in Google Chrome voor een css probleem? Als je background: 100%; doet dan scrollt Chrome erg langzaam. }:|

http://1586563.huweb.nl/ hier bij body{

De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
Bij mij heeft de volgende fix gewerkt (#div en color:red is even ter illustratie):

1
2
3
4		@media screen and (-webkit-min-device-pixel-ratio:0) {
  #div { color:red; }
}
    
  maandag 13 juni 2011 @ 16:49:52 #273
87680 Mirel
Mirel wil een bongophone.
pi_98117506
quote:
0s.gif Op maandag 13 juni 2011 16:31 schreef w4zzup het volgende:

[..]

Bij mij heeft de volgende fix gewerkt (#div en color:red is even ter illustratie):

[ code verwijderd ]

Ehm? :{ Hoe moet ik dit hierin doen:

1
2
3
4
5
6
7
8
9
10
11		body {
background-image: url('img/bgtest2.jpg');
background-size: 100%;
background-repeat:no-repeat; 
background-position:center;
height: inherit;
font-family: arial;
font-size: 13px;
color: #242424;
background-attachment: fixed;
}
When all else fails, you always have delusion.
pi_98130513
quote:
0s.gif Op maandag 13 juni 2011 16:49 schreef Mirel het volgende:

[..]

Ehm? :{ Hoe moet ik dit hierin doen:

[ code verwijderd ]

Zo dus:

1
2
3
4
5
6
7
8
9
10
11
12
13		@media screen and (-webkit-min-device-pixel-ratio:0) {
  body {
    background-image: url('img/bgtest2.jpg');
    background-size: 100%;
    background-repeat:no-repeat; 
    background-position:center;
    height: inherit;
    font-family: arial;
    font-size: 13px;
    color: #242424;
    background-attachment: fixed;
  }
}

Al zou ik alleen de elementen erin zetten die je voor Chrome gefixed wil hebben. Font-family is bijvoorbeeld (neem ik aan) het zelfde voor alle browsers, en hoeft er hier dus niet in.
  maandag 13 juni 2011 @ 21:16:20 #275
87680 Mirel
Mirel wil een bongophone.
pi_98131402
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.

Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:
quote:
7s.gif Op zondag 12 juni 2011 16:20 schreef n8n het volgende:

[..]

nice

jammer dat dit niet kan ;(
[ code verwijderd ]

Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.
When all else fails, you always have delusion.
  maandag 13 juni 2011 @ 21:23:12 #276
230788 n8n
Pragmatisch
pi_98131856
quote:
0s.gif Op maandag 13 juni 2011 21:16 schreef Mirel het volgende:
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.

Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:

[..]

Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.
:')
“Specialization is for insects”.—Robert Heinlein
  maandag 13 juni 2011 @ 22:16:09 #277
87680 Mirel
Mirel wil een bongophone.
pi_98135563
porno
When all else fails, you always have delusion.
pi_98136671
quote:
0s.gif Op maandag 13 juni 2011 21:16 schreef Mirel het volgende:
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.

Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:

[..]

Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.
ehm wat 'css binnen css'?! Is dat nieuw? ;)

ik gebruik zelf de hack om een invoerveld op de goede plek te positioneren, en het werkt prima!
  donderdag 16 juni 2011 @ 13:19:58 #279
270782 Tazar_Yoot
Je moet wat.
pi_98245845
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/

Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"

hoe moeilijk is dit om in te bouwen?
pi_98246544
quote:
7s.gif Op donderdag 16 juni 2011 13:19 schreef Tazar_Yoot het volgende:
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/
Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"
hoe moeilijk is dit om in te bouwen?
Kan je doen met javascript, jQuery Expander lijkt me wat je zoekt.
pi_98246571
quote:
7s.gif Op donderdag 16 juni 2011 13:19 schreef Tazar_Yoot het volgende:
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/

Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"

hoe moeilijk is dit om in te bouwen?
Met javascript is het een eitje
  donderdag 16 juni 2011 @ 13:55:28 #282
230788 n8n
Pragmatisch
pi_98247234
js
1
2
3
4
5
6
7
8
9		function expander(id) {
        
            var e = document.getElementById(id);
            
                if (e.className == 'contracted')
                    e.className = 'expanded';
                else (e.className == 'expanded')
                    e.className = 'contracted';
        }

css
1
2
3		.hidden, p#moreoreless.contracted .less, p#moreoreless.expanded .more  { 
display: none; 
}

1<p id="moreorless" onclick="expander('moreorless');" class="contracted"><span class="more"><span class="hidden"> or </span><span class="less"></p>

correct me if i'm wrong js is nieuw voor me.
“Specialization is for insects”.—Robert Heinlein
  donderdag 16 juni 2011 @ 15:16:37 #283
270782 Tazar_Yoot
Je moet wat.
pi_98250444
Oeh, ziet er simpel uit inderdaad. even inbouwen zo. is wel sjiek :P !

weer iets anders,
waarom werkt de hover van portfolio niet. code heb ik al 6x overgelezen:
1
2
3
4
5
6
7
8		        <nav>
            <ul class="menu">
                <li class="home"><a href="#"> </a></li>
                <li class="portfolio"><a href="#"> </a></li>
                <li class="info"><a href="#"> </a></li>
                <li class="contact"><a href="#"> </a></li>
            </ul> 
        </nav>

1
2
3
4
5
6
7
8
9		.home{background-image:url(images/home-a.jpg);}
.portfolio{background-image:url(images/portfolio-a.jpg);}
.info{background-image:url(images/info-a.jpg) ;    }
.contact{background-image:url(images/contact-a.jpg);    }

.home a:hover{background-image:url(images/home-b.jpg) ; }
.portfolio a:hover{background-image:url(images/home.b.jpg) ; }
.info a:hover{background-image:url(images/info-b.jpg) ; }
.contact a:hover{background-image:url(images/contact-b.jpg) ; }

En hoe kan ik nu nog een 'active' class inbouwen.
  donderdag 16 juni 2011 @ 15:28:35 #284
230788 n8n
Pragmatisch
pi_98250975
quote:
7s.gif Op donderdag 16 juni 2011 15:16 schreef Tazar_Yoot het volgende:
Oeh, ziet er simpel uit inderdaad. even inbouwen zo. is wel sjiek :P !

weer iets anders,
waarom werkt de hover van portfolio niet. code heb ik al 6x overgelezen:

[ code verwijderd ]

[ code verwijderd ]

En hoe kan ik nu nog een 'active' class inbouwen.
1) Eerst zet je de achtergrondafbeelding op de li maar bij :hover op de a-tag.

2) een active class maak je door naast de naam van class een extra classname toe te voegen.

html: <li class="portfolio active">
css: li.portfolio.active {

wat je ook kan doen is de naam van de actieve pagina als class bij de ul opgeven.
<ul class="portfolio">
<li class="home"></li>
<li class="portfolio"></li>
</ul>

css: ul.portfolio li.portfolio {

met de laatste manier kan je ook invloed uitoefenen op alle andere li's

nog een paar tips:
- maak sprites van je afbeeldingen, dit kost minder bandbreedte maar belangrijker is dat de manier die je nu gebruikt een optische vertraging kan veroorzaken bij een :hover. De afbeelding moet nog laden en je ziet heel even niks.

- zet de naam van de link met tekst in de link en gebruik text-indent: -9999px;. Dit is beter voor de toegankelijkheid en indexatie van je website.

- kleintje: bij een afbeelding als achtergrond is "-image" overbodig.
“Specialization is for insects”.—Robert Heinlein
  donderdag 16 juni 2011 @ 19:00:22 #285
270782 Tazar_Yoot
Je moet wat.
pi_98260644
quote:
7s.gif Op donderdag 16 juni 2011 15:28 schreef n8n het volgende:

[..]

1) Eerst zet je de achtergrondafbeelding op de li maar bij :hover op de a-tag.

2) een active class maak je door naast de naam van class een extra classname toe te voegen.

html: <li class="portfolio active">
css: li.portfolio.active {

wat je ook kan doen is de naam van de actieve pagina als class bij de ul opgeven.
<ul class="portfolio">
<li class="home"></li>
<li class="portfolio"></li>
</ul>

css: ul.portfolio li.portfolio {

met de laatste manier kan je ook invloed uitoefenen op alle andere li's

nog een paar tips:
- maak sprites van je afbeeldingen, dit kost minder bandbreedte maar belangrijker is dat de manier die je nu gebruikt een optische vertraging kan veroorzaken bij een :hover. De afbeelding moet nog laden en je ziet heel even niks.

- zet de naam van de link met tekst in de link en gebruik text-indent: -9999px;. Dit is beter voor de toegankelijkheid en indexatie van je website.

- kleintje: bij een afbeelding als achtergrond is "-image" overbodig.

Woah, het probleem met de hover img is verholpen, hij doet het nu. En het idee van de sprite drong pas echt tot me door toen ik hem online zetten. Offline testing heb je er geen last van. ik ga er eens induiken. de volgende fase van mijn html avontuur :P .
Verder je andere tips opgevolgd (die text indent ga ik er zometeen instoppen)

Al heb ik het nog niet echt kunnen werkend krijgen met die active class: KLIK

Ik heb het idee dat ik veel nutteloze code erin heb gezet nu.
:'(
  donderdag 16 juni 2011 @ 21:39:18 #286
270782 Tazar_Yoot
Je moet wat.
pi_98268806
Ben er al uit, kwam door de gebruikte spaties. css en spaties gaan niet goed samen blijkbaar. vervangen door _'s
pi_98276716
quote:
7s.gif Op donderdag 16 juni 2011 21:39 schreef Tazar_Yoot het volgende:
Ben er al uit, kwam door de gebruikte spaties. css en spaties gaan niet goed samen blijkbaar. vervangen door _'s
Class is gewoon een spatiegesepareerde lijst van classnames. class="portfolio active" is dus in css te selecteren met zowel .portfolio als .active. Of .portfolio.active als je alleen objecten met beide classnames wilt selecteren.
zcflevo.nl
  dinsdag 21 juni 2011 @ 19:27:00 #288
137776 boem-dikkie
Jedi Mind Baby!
pi_98475277
Weet iemand hier hoe ik een afbeelding op een pagina kan zetten die de hele achtergrond bezet en meescaled met grotere resoluties? Repeat wil dus niet, en als ik een hele grote afbeelding als achtergrond doe dan laat hij maar een klein stuk van die afbeelding zien op een kleine resolutie.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_98475454
Ding absoluut positioneren. Maar dan krijg je wel problemen met de ratio.

In je HTML:

1<img id="bg" src="lalala.jpg" alt="" />

In je CSS:

1
2
3
4
5
6		#bg {
        left: 0;
        position: absolute;
        top: 0;
        width:100%;
}

Of met media-queries voor de verschillende resoluties een andere afbeelding gebruiken. Er zullen vast ook nog wel andere manieren zijn.
Nee.
  dinsdag 21 juni 2011 @ 21:42:38 #290
137776 boem-dikkie
Jedi Mind Baby!
pi_98483349
Hmm. Nog niet echt goed nu. Ik heb een afbeelding van 1920x1280. Ik wil dat als ik de website bekijk op een resolutie van 1024x768 of 1336x768 dat hij hem dan ook in zijn geheel laat zien. Of tenminste grotendeels.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_98483667
Laat die achtergrond eens zien dan. Ik denk niet dat er een oplossing is die gaat doen wat jij wilt. CSS3 heeft een background-size property waar je naar zou kunnen kijken, maar ik durf zo 1-2-3 eigenlijk niet te zeggen of dat goed werkt. Ik gok dat dat nog wel problemen gaat opleveren in bijv. IE8.
Nee.
pi_98485015
Via PM een url gekregen, maar het voorbeeld wat ik geef van absoluut positioneren/width:100% werkt bij mij gewoon prima hoor met die afbeelding. Eventueel aangevuld met bottom:0 - hoewel je dan dus wel je aspect ratio verliest (hoewel ik me afvraag of dat a) zal opvallen b) hoeveel mensen een browservenster gebruiken dat heel hoog is, maar wel heel smal).
Nee.
  dinsdag 21 juni 2011 @ 22:14:11 #293
137776 boem-dikkie
Jedi Mind Baby!
pi_98485488
Wat doet bottom:0 precies?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_98488681
Doe 'ns een gokje?

Nou, dat dus.
zcflevo.nl
pi_98542521
Ik kan het beste een gebruiker laten switchen tussen 2 verschillende CSS
Een else if in de head of werkt dat niet?

Betere/Andere manieren?
pi_98542605
quote:
0s.gif Op donderdag 23 juni 2011 07:49 schreef MrNiles het volgende:
Ik kan het beste een gebruiker laten switchen tussen 2 verschillende CSS
Een else if in de head of werkt dat niet?

Betere/Andere manieren?
Ik zou serverside regelen welke css bestanden er worden geladen. Dat kan bijvoorbeeld met een cookie of een sessie. Afhankelijk van wat er wijzigt, is een volledige refresh misschien nodig als de bezoeker een andere css wil.
fokstok.nl
pi_98542637
quote:
0s.gif Op donderdag 23 juni 2011 07:59 schreef Light het volgende:

[..]

Ik zou serverside regelen welke css bestanden er worden geladen. Dat kan bijvoorbeeld met een cookie of een sessie. Afhankelijk van wat er wijzigt, is een volledige refresh misschien nodig als de bezoeker een andere css wil.
ik snap m niet helemaal, misschien heb ik het ook niet helemaal goed uitgelegt.
Ik wil dat de gebruiker kan switchen tussen 2 lettertypes eigenlijk, meer als geintje eigenlijk
1 is een strak lettertype
ander is een vrolijk lettertype
ik doe dat met @font-face (is wel traag trouwens)
pi_98542955
je kunt toch gewoon een onclick-event maken die bijv. de body-style verandert?

Lijkt me meer een javascript vraag dit.
zcflevo.nl
pi_98545480
quote:
3s.gif Op donderdag 23 juni 2011 08:37 schreef KomtTijd... het volgende:
je kunt toch gewoon een onclick-event maken die bijv. de body-style verandert?

Lijkt me meer een javascript vraag dit.
als dat een goede oplossing is dan ga ik daar eens op zoeken
dus waarschijnlijk tot later in het js forum :)
pi_98545985
Voor een lap tekst, moet ik een Meer/minder-knop hebben. Dat je een klein stuk tekst hebt dus, je klikt op Meer en dat het dan uitschuift (Dus geen nieuwe pagina)(Waarom geen nieuwe pagina, omdat de tekst waar het om gaat al in een aparte pagina staat), en het mag ook weer inschuiven.

Is dit mogelijk met alleen CSS? Of moet je hiervoor gelijk naar de javascript grijpen?

Thanks
pi_98546152
Met javascript. Ik zoek voorbeeld, momento.

CSS:
1
2
3
4
5
6
7
8
9		#layer1 {     
        visibility : visible;     
        position : relative;     
    }     

    #layer2 {     
        visibility : hidden;     
        position : absolute;     
    }   

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13		<script>
      function opendiv() {  
      document.getElementById('layer2').style.visibility ='visible';
      document.getElementById('layer2').style.position ='relative';  
      document.getElementById('layer3').style.visibility='hidden';  
    }  
       
    function closediv() {  
      document.getElementById('layer2').style.visibility ='hidden';  
      document.getElementById('layer2').style.position ='absolute';  
      document.getElementById('layer3').style.visibility='visible';  
    }  
  </script>

HTML:

1
2
3
4
5
6
7		<div id="layer1">
              <a href="#" onclick="opendiv();" id="layer3">Toon melding</a> 
          </div>
          <div id="layer2">
           Lorum text  <br>
            <a href="#" onclick="closediv();" id="layer3">Verberg melding</a> 
          </div>


[ Bericht 0% gewijzigd door #ANONIEM op 23-06-2011 11:10:16 ]
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies #16
Index

» digital corner

» development

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