[CSS] voor dummies - deel 9 | Digital Corner (DIG/DEV)

vrijdag 5 september 2008 @ 13:44:02 #226

mcDavid

Overflow:auto geeft aan dat een div scrollbalken krijgt indien de content groter is als de div. Het gedrag wat jij beschrijft is gewoon standaard gedrag van div's. Daarom vind ik het vaag.

vrijdag 5 september 2008 @ 13:47:26 #227

CraZaay

prettig gestoord

quote:
Op vrijdag 5 september 2008 13:44 schreef mcDavid het volgende:
Overflow:auto geeft aan dat een div scrollbalken krijgt indien de content groter is als de div.

Alleen wanneer je een height gedefinieerd hebt.

quote:
Het gedrag wat jij beschrijft is gewoon standaard gedrag van div's. Daarom vind ik het vaag.

Het standaard gedrag is dat de floating elementen uit de flow zijn en de parent dus niet "meerekt". Dat los je hiermee dus op. Het staat inderdaad niet in de CSS specs (die zeggen alleen dat "overflow: auto" iets met scrollbalken zou moeten doen, maar dat user-agents zelf mogen beslissen hoe en wat).

vrijdag 5 september 2008 @ 14:29:38 #228

Chandler

Super uitleg CraZaay, zou bijna zeggen begin een tutoriaal site

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 5 september 2008 @ 16:49:49 #229

hello_moto1992

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

/* Link Colors */
h1 a {
   color:#000;
   text-decoration:none;
   }
h1 a:hover {
   color:#000;
   }
#content a {
   text-decoration:none;
   font-weight:none;
   }
#content a:hover {
   text-decoration:none;
   }
[b]#footer a {
font-family: Bookman Old Style;
text-decoration:none;
a:link, a:visited{
color: #fff;
text-decoration: none;
a:hover, a:active{
color: #fff;
text-decoration: none;
}[/b]

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
}

Ik wil graag bij de footer dat de links wit worden.... maar ze blijven zwart

vrijdag 5 september 2008 @ 16:50:32 #230

CraZaay

prettig gestoord

quote:
Op vrijdag 5 september 2008 14:29 schreef Chandler het volgende:
Super uitleg CraZaay, zou bijna zeggen begin een tutoriaal site

Hehe. Ben er ooit mee begonnen, maar heb (helaas?) mijn handen vol aan ander werk

vrijdag 5 september 2008 @ 16:52:54 #231

CraZaay

prettig gestoord

quote:
Op vrijdag 5 september 2008 16:49 schreef hello_moto1992 het volgende:

[ code verwijderd ]

Ik wil graag bij de footer dat de links wit worden.... maar ze blijven zwart

Er klopt niets van je syntax, pas dat eerst eens aan in je post. Je opent { die je niet sluit, etc.

vrijdag 19 september 2008 @ 08:43:43 #232

hello_moto1992

Hoi

Ik heb een stukje 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

/* Misc. */

* {
   margin:0;
   padding:0;
   }
html, body {

   }
body {
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; /* Hier worden de lettertypes aangegeven. Als bijvoorbeeld "Trecbuchet MS" niet op de pc van de gebruiker staat, wordt "Arial" gebruikt enzovoort.*/
   font-size : 12px; /* Dit geeft de grootte van de letters aan */
   background-color: #444444;  /* Dit is de achtergrondkleur*/
   }
img {
   border: none; /* Dit geeft aan of een afbeelding op de website door een rand moet worden omgeven. */
   }
p {
   margin-bottom:10px;/* Dit geeft de afstand van de tekst of een ander element minimaal 10 pixels moet zijn */
   line-height:20px; /* Dit geeft de regelhoogte aan */
   }
/* Structure */
#wrapper { /* De wrapper is "opeenhoping" van de "header", "content" en de "footer"*/
   width:650px; /* Dit geeft de wijdte van het element aan */
   height:600px; /* Dit geeft de hoogte van het element aan  */
   margin:0 auto; /* Dit geeft de ruimte  tussen de verschillende elementen. Deze is hier op nul gezet, zodat ze goed op elkaar aansluiten   */
   border:2px solid #000; /* De border geeft de lijn om de wrapper aan. Deze is hier dus 2 pixels dik.  */
   border-bottom:0 !important; /* Hier wordt de lijn onder aan de "wrapper mee aangegeven. Dit is dus eigenlijk een uitzondering op de gewone "border". Important! geeft aan dat de browser deze regel niet mag overslaan als er iets niet goed uitkomt.  */
   background-color: white;
   }
#header {
   width:630px;
        height:160px;
   border-bottom: 2px solid #000;
   font-size:30px;
   background-image: url('afbeeldingen_achtergronden/achtergrond.jpg');
   padding-left: 20px;
   margin: 0px;
   }
   }
#content {
   padding-left: 50px;
        text-align: right;
padding: 25px; !important
/* Dit geeft aan dat een afbeelding of tekst minimaal 25 pixels van de rand van het element moet staan.  */
   }
#sidebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 200px;
padding: 0px;
margin: 0px;
}
#sidebar h1 {
display: block;
background-color:#FF9900;
font-size: 100%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:200px;
}

#sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
border: 1px;
}
#sidebar ul li {
margin: 0px;
padding: 0px;
}
#sidebar ul li a {
font-size: 100%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:200px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

#footer {
   width:610px;
   height:50px;
   margin:0 auto;
   border-top: 1px solid #000;
   border: 2px solid #000;
   background-color: #000; /* Dit geeft de achtergrondkleur aan */
   padding-right: 20px;
   padding-left: 20px;
   color: #fff;
   }
oration:none;
   }

/* Headings */
#header h1{
   color:white;
}
h1 {
   font-size:30px;
   font-weight:normal;
   letter-spacing:-1px;
   }
h2 {
   font-size:16px;
}

/* Link Colors */
h1 a {
   color:#000;
   text-decoration:none;
   }
h1 a:hover {
   color:#000;
   }
#content a {
   text-decoration:none;
   font-weight:none;
   }
#content a:hover {
   text-decoration:none;
   }
#footer a {
font-family: Bookman Old Style;
text-decoration:none;
a:visited
color: #fff;
text-decoration: none;
a:active
color: #fff;
text-decoration: none;
}

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
}

Hoe krijg ik in vredesnaam de tekst in de center naast de sidebar?

Van:

Naar:

Iemand die een opzetje kan geven?

vrijdag 19 september 2008 @ 09:28:42 #233

Banzaiaap

Tony Rocky Horror

Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven

vrijdag 19 september 2008 @ 09:30:45 #234

Tuvai.net

quote:
Op vrijdag 19 september 2008 09:28 schreef Banzaiaap het volgende:
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven

Inderdaad, echter hoef je de div met content niet in een float te zetten maar enkel een margin-left mee te geven. Vergeet niet dat je elementen uit hun normale document-flow haalt wanneer je ze gaat floaten.

EDIT: Of toch niet, 'k was even de IE6 gap bug vergeten.

[ Bericht 6% gewijzigd door Tuvai.net op 19-09-2008 09:56:04 ]

vrijdag 19 september 2008 @ 09:47:43 #235

Cracka-ass

knip

vrijdag 19 september 2008 @ 09:48:45 #236

Cracka-ass

Kan iemand mij vertellen waarom mijn button 'active' blijft? Hij blijft altijd ingedrukt zodra ie eenmaal is aangeklikt:

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

#navigatie{
display: block;
align: center;
margin: 0 0 0 15px;

padding: 0px;
width: 725px;
height: 53px;
}
#navigatie ul, #navigatie li{
display: block;
margin: 0px;
padding: 0px;
align: center;
}
#navigatie li a, #navigatie li a:hover{
display: block;
align: center;
width: 725px;
height: 53px;
background: url(http://mijn-domein/wp-content/themes/default/images/Menu.jpg) no-repeat 0 0;
text-indent: -9999px;
line-height: 10px;
}
#navigatie li a:hover{
background: url(http://mijn-domein/wp-content/themes/default/images/Menuu.jpg) no-repeat 0 0px;
}
#navigatie li a, #navigatie li a:active{
background-image: url(http://mijn-domein/wp-content/themes/default/images/Menuu.jpg);
}

(Noobie I know

)

vrijdag 19 september 2008 @ 11:22:50 #237

mcDavid

quote:
Op vrijdag 19 september 2008 @ 09:48 schreef Cracka-ass het volgende:
Kan iemand mij vertellen waarom mijn button 'active' blijft? Hij blijft altijd ingedrukt zodra ie eenmaal is aangeklikt:
[ code verwijderd ]

(Noobie I know )

quote:
Op vrijdag 19 september 2008 @ 03:35 schreef mcDavid het volgende:

[..]

niet dat het in de verste verte maar iets met PHP of MySQL te maken heeft, maar als je alle declaraties voor een psuedo-class ook aan de gewone class meegeeft, zal er weinig veranderen inderdaad.

vrijdag 19 september 2008 @ 14:01:07 #238

hello_moto1992

quote:
Op vrijdag 19 september 2008 09:28 schreef Banzaiaap het volgende:
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven

Bedankt voor je hulp, het is al gelukt. Het was nog wel een beetje irritant doordat de tekst van de content half door de sidebar heen ging, maar dat heb ik veranderd door de breedte van de sidebar aan te passen. Dit had geen gevolgen voor het uiterlijk van de sidebar. Met padding-left in de content lukt het niet (

).

vrijdag 19 september 2008 @ 14:16:06 #239

mcDavid

quote:
Op vrijdag 19 september 2008 @ 14:01 schreef hello_moto1992 het volgende:

[..]

Bedankt voor je hulp, het is al gelukt. Het was nog wel een beetje irritant doordat de tekst van de content half door de sidebar heen ging, maar dat heb ik veranderd door de breedte van de sidebar aan te passen. Dit had geen gevolgen voor het uiterlijk van de sidebar. Met padding-left in de content lukt het niet ( ).

In principe moet het goed gaan als je de content een magrin-left geeft even groot (of net een pixel groter) als de breedte van de sidebar...

vrijdag 26 september 2008 @ 18:18:36 #240

mcDavid

Ik ontdekte zojuist iets grappigs, en vaak best handigs:
als je een element een padding en een breedte geeft, wordt de padding bij de breedte opgeteld.
tenzij je -1 achter de breedte declaratie zet, dan is dat niet het geval! (althans, in IE7 en Fx)

ik heb even een demonstratie gemaakt:
http://duft.nl/test.html

nog ff een beetje uitbreiden en dan door browserschreenshots.org halen...

-edit-
het lijkt te komen doordat de breedte daardoor ongeldig wordt... kun je dus net zo goed weglaten

en ik denken iets spannends ontdekt te hebben...

[ Bericht 21% gewijzigd door mcDavid op 26-09-2008 18:26:41 ]

vrijdag 26 september 2008 @ 21:09:05 #241

zaara

online

tvp

vrijdag 26 september 2008 @ 21:14:45 #242

Light

quote:
Op vrijdag 26 september 2008 18:18 schreef mcDavid het volgende:
Ik ontdekte zojuist iets grappigs, en vaak best handigs:
als je een element een padding en een breedte geeft, wordt de padding bij de breedte opgeteld.
tenzij je -1 achter de breedte declaratie zet, dan is dat niet het geval! (althans, in IE7 en Fx)

ik heb even een demonstratie gemaakt:
http://duft.nl/test.html

nog ff een beetje uitbreiden en dan door browserschreenshots.org halen...

-edit-
het lijkt te komen doordat de breedte daardoor ongeldig wordt... kun je dus net zo goed weglaten
en ik denken iets spannends ontdekt te hebben...

Je had het natuurlijk ook kunnen testen met een smallere div.

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).

fokstok.nl

zaterdag 27 september 2008 @ 09:34:56 #243

CraZaay

prettig gestoord

quote:
Op vrijdag 26 september 2008 21:14 schreef Light het volgende:

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).

In IE6 ook, zolang je een geldig doctype gebruikt (en dat doe je uiteraard

).

zaterdag 27 september 2008 @ 11:09:26 #244

Light

quote:
Op zaterdag 27 september 2008 09:34 schreef CraZaay het volgende:

[..]

In IE6 ook, zolang je een geldig doctype gebruikt (en dat doe je uiteraard ).

Ik gebruik altijd een geldig doctype, meestal xhtml 1.0 transitional. En toch moet ik allerlei IE6-hacks gaan toepassen.

fokstok.nl

zaterdag 27 september 2008 @ 12:52:32 #245

mcDavid

quote:
Op vrijdag 26 september 2008 21:14 schreef Light het volgende:

[..]

Je had het natuurlijk ook kunnen testen met een smallere div.

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).

Daar kwam ik ook achter ja, ik zat dus onnodig moeilijk te doen... inmiddels doet mijn menutje het prima (ook in IE6, met de nodige IE6-specifieke CSS)

zaterdag 4 oktober 2008 @ 01:08:55 #246

Archytas

Hoi,

Ik ben een CSS noob en zou graag van jullie expertise gebruikmaken, zelf red ik het namelijk niet. Kort even mijn uitleg: ik heb een website gemaakt met een afbeelding als logo bovenaan de pagina( http://img253.imageshack.us/img253/5634/logobuonissimodn7.gif ) waarbij ik gewerkt heb met image maps. Image maps blijken echter totaal niet meer 'done' te zijn en nu word ik aangeraden het boeltje met CSS te klaren ( animated gif op gif ).

Het logo is reeds aangepast (check: http://filifestijn.leadhoster.com), maar de noodzakelijke CSS-code geeft me hoofdbrekens. Op die site kan je zien dat ik wat geëxperimenteerd heb met de positie maar afhankelijk van de schermresolutie wordt waarom 'kok aan huis? verkeerd weergegeven.

De bedoeling is dus gewoon om alles te krijgen zoals in het aanvankelijke logo staat, maar dan met gewone tekst (omdat dat sneller inlaadt, beter is etc etc.) Dit moet door positionering gebeuren maar welke? absolute of relatieve?
Zelf dacht ik: absoluut en relatief t.a.v. WAT is ook nog belangrijk. In principe kanik mijn tekst absoluut positioneren tav mijn afbeelding maar niet absoluut tav de pagina omdat bij een andere schermresolutie het er dan anders uitziet. Verder zou ik mijn tekst relatief kunne positioneren tav de BREEDTE omdat mijn afbeelding toch gecentreerd is, maar niet relatief tav de lengte van de pagina omdat de lengte van de pagina kan verschillen.

In theorie zou ik zeggen: positioneer de tekst relatief gezien tav de breedte van de pagina in percentages en absoluut gezien tav de lengte van de pagina. Maar waarschijnlijk zit ik fout.

Zoals je ziet weet ik nog niet hoe ik er theoretisch uitraak laat staan het coderen in CSS. Hopelijk kan iemand me met zijn/haar inzichten helpen!

groeten

zaterdag 4 oktober 2008 @ 19:28:39 #247

mcDavid

Ook de position-tag in CSS moet je proberen zoveel mogelijk te vermijden. Niet omdat het 'slecht' is ofzo, maar als je het teveel gebruikt raak je binnen de kortste keren het overzicht kwijt. Niet handig dus. en ik denk dat je het ook zonder kunt.
ik zou de pagina als ik jou was ongeveer zo opbouwen:

1
2
3
4
5
6
7

de div .container geef je een breedte naar keuze (bijv 770px, dan is'ie in een 800x600 resolutie beeldvullend), en de margin links en rechts zet je op 'auto', dan schuift die div automatisch naar het midden.

Voor je header zou ik 2 plaatjes gebruiken: je logo (strak uitgeknipt!) en het plaatje rechts daarvan.
Met margins zorg je dat de plaatjes op de goeie positie komen. De witte lijntjes maak je m.b.v. borders.

overigens is het aan te raden om je div's tijdens het maken even een opvallende achtergrondkleur en border te geven, dan zie je beter hoe ze precies lopen

[ Bericht 1% gewijzigd door mcDavid op 04-10-2008 19:45:30 ]

zaterdag 4 oktober 2008 @ 20:06:00 #248

Light

quote:
Op zaterdag 4 oktober 2008 19:28 schreef mcDavid het volgende:

overigens is het aan te raden om je div's tijdens het maken even een opvallende achtergrondkleur en border te geven, dan zie je beter hoe ze precies lopen

Ik gebruik meestal #ff8, #f8f, #8ff, #f88, #8f8 of #88f als ik even tijdelijk een opvallende lichte achtergrondkleur nodig heb. Die kleuren zijn herkenbaar genoeg, en als je een donkere tekst op een lichte achtergrond plaatst dan blijft de tekst ook leesbaar met die achtergrondkleurtjes.