[CSS] voor dummies - deel 9

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_61375935
quote:
Op donderdag 4 september 2008 14:40 schreef CraZaay het volgende:

[..]

The holy grail http://www.alistapart.com/articles/holygrail
Het lullige is dat die in IE7 weer niet werkt! (tenminste hier, zie eerste voorbeeld)
Just say hi!
pi_61375946
quote:
Op donderdag 4 september 2008 @ 14:45 schreef Chandler het volgende:
mcDavid; de ene stijlsheet is gemaakt door de slicer, de andere door mij, de stijles die je in de HTML ziet zijn tijdelijk, om alleen maar de opzet aan te geven, niets meer niets minder. Er zijn idd delen van de stijl.css gekopieerd van andere plekjes op het internet, juist omdat ik er zelf niet uitkwam!..

Maar heb je een oplossing? want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...
quote:
Op donderdag 4 september 2008 @ 14:07 schreef mcDavid het volgende:
een div "float:left" én "clear:both" geven, gaat blijkbaar niet zo goed.

Dat je middelste div niet meeloopt komt doordat er geen enkel object instaat wat in de natuurlijke float zit. Normaal gesproken kun je dit oplossen door een lege div met "clear:both" maar dat gaat dus niet omdat je met deze opzet ook alle divs een float meegeeft (en die div dus alsnog uit de natuurlijke float haalt)
  donderdag 4 september 2008 @ 14:51:37 #203
12880 CraZaay
prettig gestoord
pi_61375979
quote:
Op donderdag 4 september 2008 14:49 schreef Chandler het volgende:

Het lullige is dat die in IE7 weer niet werkt! (tenminste hier, zie eerste voorbeeld)
Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.
pi_61376032
quote:
Op donderdag 4 september 2008 14:50 schreef mcDavid het volgende:
Ik probeer je te begrijpen maar doe het gewoon niet
quote:
Op donderdag 4 september 2008 14:51 schreef CraZaay het volgende:
Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.
Dat heb ik dus de gehele ochtend al gedaan maar niets 'simpels' kunnen vinden, maar goed ik zoek ook altijd verkeerd

-edit-
fix gevonden
http://www.gerd-riesselmann.net/examples/paddedholygrail.html
Just say hi!
pi_61379925
clear:both

is het antwoord

En dan niet ook nog float:left of iets anders op een element gooien! Wat je doet doormiddel van de ".middle div" in je eigen css!
pi_61382105
quote:
Op vrijdag 29 augustus 2008 08:07 schreef CraZaay het volgende:
Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".


thanks
pi_61385669
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas wil er niet in en wil het niet vinden

Preview tot zover:
http://www.bruggema.nl/3

voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Just say hi!
  donderdag 4 september 2008 @ 21:46:05 #208
12880 CraZaay
prettig gestoord
pi_61386329
quote:
Op donderdag 4 september 2008 19:10 schreef ruud_fr het volgende:



thanks
Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
pi_61387744
quote:
Op donderdag 4 september 2008 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen :(

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas :{ wil er niet in en wil het niet vinden :P

Preview tot zover:
http://www.bruggema.nl/3

voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Ik zie in je css niet meteen een padding bij de container. En bij de holy grail staat content voor de linker- en rechterkolom, bij jou niet.

Back to basic tijd dus:
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Geklooi voor Chandler</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<div id="container">
   <div id="content"></div>
   <div id="left"></div>
   <div id="right"></div>
</div>
<div id="footer"></div>
</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		html, body {
   width: 100%;
   margin: 0;
   padding: 0;
}
#header {
   height: 10px;
   width: 100%;
   background: #f00;
}
#container {
   padding-left: 160px;
   padding-right: 160px;
}
#left, #right {
   width: 160px;
   height: 600px;
   background: url(http://www.bruggema.nl/3/afbeeldingen/wide-skyscraper.gif);
   float: left;
   position: relative;
}
#left {
   margin-left: -100%;
   right: 160px;
}
#right {
   margin-right: -160px;
}
#content {
   height: 700px;
   width: 100%;
   float: left;
   background: #ff8;
}
#footer {
   clear: both;
   background: #8ff;
   float: left;
   height: 10px;
   width: 100%;
}


Have fun :)
fokstok.nl
pi_61387890
quote:
Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:

[..]

Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
Ik mocht/moest vandaag een menu-item toevoegen aan een menu dat met een tabel was gemaakt. Alles bleef gewoon staan verder, er was voldoende ruimte om iets toe te voegen. En dat was al een ramp Met enkel het toevoegen van een <td> ben je er uiteraard niet.
fokstok.nl
pi_61388328
Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.

Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.
pi_61388732
quote:
Op donderdag 4 september 2008 22:49 schreef Tuvai.net het volgende:
Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.

Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.
Tabellen vind ik echt een ramp, zeker voor layout.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats
fokstok.nl
  donderdag 4 september 2008 @ 23:08:40 #213
12880 CraZaay
prettig gestoord
pi_61388835
De achterkant (Ruby on Rails) hebben we volledig moeten herschrijven, daar was niets mee aan te vangen
pi_61388896
quote:
Op donderdag 4 september 2008 23:04 schreef Light het volgende:

[..]

Tabellen vind ik echt een ramp, zeker voor layout.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats
Absolute positionering kan inderdaad handig zijn en ik gebruik het zelf vrij regelmatig voor fixed menu`tjes en dergelijke. Het is echter gewoon kut om een heel menu met subitems en andere afhankelijkheden op een dusdanige manier absoluut te positioneren, dat bij het toevoegen van een nieuw element zo'n beetje alles dat niet absoluut gepositioneerd is, niet meer op z'n plaats staat en daardoor de wél absoluut gepositioneerde elementen niet meer op de juiste plek staan.
  donderdag 4 september 2008 @ 23:16:16 #215
145090 HenkBenzinetank
Toegevoegde waarde
pi_61389020
quote:
Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:

[..]

Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer
Welcome to my world.. Ik doe bijna niet anders
pi_61389083
De truc is dan ook om eerst alle floats te doen en pas aan het eind de absoluut gepositioneerde elementen. En dat gaat dan over de volgorde van de elementen in de html.
fokstok.nl
pi_61390149
quote:
Op donderdag 4 september 2008 @ 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas wil er niet in en wil het niet vinden

Preview tot zover:
http://www.bruggema.nl/3

voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr
Hier kunnen we echt weinig mee, je verhaal is veel te vaag!

Maak anders eens een voorbeeld met alléén de elementen die mis gaan, zo eenvoudig mogelijk!
Helpt je wellicht ook om zelf inzicht te krijgen in wat er mis gaat!
  vrijdag 5 september 2008 @ 00:14:55 #218
12880 CraZaay
prettig gestoord
pi_61390368
Ik heb ook het idee dat je iets teveel tegelijk wilt. Maak eerst eens de basis aan de hand van die "holy grail" met IE7 fixes, dus header, footer en drie kolommen. Geef ze allemaal een achtergrondkleurtje en zet er een paar regels tekst in om te testen. Werkt dat niet, kom dan hier met je code. Werkt dat wel, voeg dan stuk voor stuk de andere elementen toe, zonder je oude CSS te hergebruiken (anders krijg je weer per ongeluk floats die je niet wilt, etc etc). Werkt het niet, probeer het dan niet op te lossen door zonder te weten wat het doet te pas en te onpas floats, etc toe te gaan voegen
pi_61393953
Ik zal het probleem voorleggen.

Eingelijk wil ik precies hetzelfde dat een tabel doet.

1
2
3
4
5
6
7		<table width="100%">
<tr>
    <td width="160">Links</td>
    <td>Midden</td>
    <td width="160">Rechts</td>
</tr>
</table>


In het geval van bovenstaand tabel worden alle velden evenlang ongeacht welk veld het langste is. Gebruik ik floats voor bijvoorbeeld afbeeldingen dan blijven de afbeeldingen binnen dat kader en overlappen bv niet rechts zoals met de holy grail etc wel.

http://www.bruggema.nl/3/grail.html

Ik wil dus een oplossing vinden voor het feit dat de afbeeldingen gewoon binnen het middelste gedeelte blijven, niets meer niets minder

Ik heb de float verwijderd maar dan komen ze onder elkaar, ook een display inline werkt niet aangezien dan de background en padding/margins niet meer van toepassing zijn wordt gek van CSS

De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html

Ik hoop dat ik duidelijk genoeg ben, en loop denk ik weer tegen iets onmogelijks aan... stom dat tabellen nog steeds moeilijk te evenaren zijn middels divs en css...
Just say hi!
  vrijdag 5 september 2008 @ 10:02:48 #220
12880 CraZaay
prettig gestoord
pi_61394766
Ik snap je probleem nog steeds niet. Wanneer ik in de code op http://www.bruggema.nl/3/grail.html al die divs met een afbeelding erin "float: left" geef dan vallen ze uiteraard onder buiten de div; je hebt ze immers uit de flow gehaald. Is dat je probleem? Zo ja, een "overflow: auto" op #imagelist lost het dan op (alternatief voor "clear").
pi_61395613
Het probleem is idd opgelost door de overflow: auto; al snap ik niet precies waarom!?

ik ga eens kijken waarom overflow: auto dit precies oplost (misschien leer ik er wat van... )
Just say hi!
pi_61395685
quote:
Op vrijdag 5 september 2008 09:24 schreef Chandler het volgende:

De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html
In de CSS staat een height bij #content. Sloop die er eens uit, dan ben je al een stuk verder
fokstok.nl
pi_61396933
Heb ik al gedaan werkt nu aardig goed
Just say hi!
pi_61397568
Dat bedoel ik, je CSS is al veel te verward door andere dingen om nog goed te kunnen zien wat je aant doen bent

Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.

clear:both geeft in ieder geval aan dat dit element aan beide kanten geen elementen mag hebben die gefloat zijn. Daardoor gaat dit element er onder staan. Dat is wat je wilt.

Als je wilt dat alle div's tot de onderkant doorlopen, gebruik je ipv borders e.d. op de divs, een achtergrondafbeelding in de parent div die je verticaal herhaald. De divs lopen dan niet echt door, maar dat lijkt wel zo.
  vrijdag 5 september 2008 @ 13:35:15 #225
12880 CraZaay
prettig gestoord
pi_61400621
quote:
Op vrijdag 5 september 2008 11:47 schreef mcDavid het volgende:

Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.
Juist, en op deze manier zeg je "wanneer de gefloate elementen binnen mij niet passen, maak me dan automatisch groter".

Met andere woorden: een niet-floating div met daarin alleen gefloate elementen (die dus uit de flow zijn en visueel buiten de div vallen), kun je mee laten schalen met de elementen binnen die div door "overflow: auto" te gebruiken (mits je div geen "height" heeft).
pi_61400846
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
12880 CraZaay
prettig gestoord
pi_61400948
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).
pi_61402150
Super uitleg CraZaay, zou bijna zeggen begin een tutoriaal site
Just say hi!
pi_61406105
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
12880 CraZaay
prettig gestoord
pi_61406125
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
12880 CraZaay
prettig gestoord
pi_61406206
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.
pi_61750189
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
164509 Banzaiaap
Tony Rocky Horror
pi_61751043
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven
pi_61751104
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 ]
pi_61751464
knip
pi_61751481
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 )
pi_61753957
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.
pi_61758728
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 ( ).
pi_61759217
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...
pi_61936896
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 ]
pi_61940736
tvp
pi_61940910
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
12880 CraZaay
prettig gestoord
pi_61948041
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 ).
pi_61948773
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
pi_61950108
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)
pi_62120722
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
pi_62133047
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		<div class='container'>
<div class='header'>
<img class='logo' src='logo.gif' /> <img class='plaatje' src='plaatje.gif'  />
</div>
<div class='content'>
</div>
</div>


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 ]
pi_62133906
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.
fokstok.nl
pi_62134019
ik knal er meestal gewoon "yellow", "red", "blue", "grey", "purple", of wat me maar te binnen schiet in
  zaterdag 4 oktober 2008 @ 20:16:45 #250
145090 HenkBenzinetank
Toegevoegde waarde
pi_62134143
nothing beats #f00, fool!
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 9
Index

» digital corner

» development

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