Toon posts:

[CSS] background-image wordt de image niet weergegeven?

Pagina: 1
Acties:
  • 1.378 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Hallo iedereen,

Ik heb lopen zoeken op het GoT forum en Google en van alles geprobeerd, maar niets lijkt te werken.

Probleem:

Ik probeer in Dreamweaver (code view) in mijn CSS code die ik verwerkt heb even in mijn html pagina een background-image te gebruiken, echter als ik alles opsla en de pagina open wordt de image niet afgebeeld. Het vreemde is dat als ik de image niet in de CSS code verwerkt en gewoon tussen de <body> <body background="img/background.gif"> </body> gebruikt dat het wel werkt, maar jah ik ben nou zo met CSS bezig daar zou het toch ook gewoon moeten werken??

Uitgeprobeerd:

Zoals hierboven bij het kopje Probleem al werd beschreven heb ik al wat uitgeprobeerd, maar ik heb dus ook met " ", ' ' , geen quotjes gebruikt bij het pad van het plaatje. Heb het pad van het plaatje hard erin gezet, aangezien het een pagina wordt die als Windows default gebruikt gaat worden. Maar dit alles mocht niet baten. Ook de / \ veranderd, hielp ook niet.

Ben ook nog naar W3Schools geweest en heb die code exact overgenomen en dat werkte ook niet, maar daar schijn ik niet de enige in te zijn heeft iets te maken met de xml version ofzo.

Specs:
browser: Microsoft Internet Explorer 6.0
besturingssysteem: Microsoft Win XP Pro + SP2
software: dreamweaver mx "& dreamweaver 8(uitgeprobeerd)"

Code:

code:
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>StephNet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!---
    body {
        background-image: url('img\background.gif');
        background-repeat: repeat;
    }
    
    #container {
        position: absolute;
        background-color: #FFFFFF;
        width: 760px;
        height: 100%;
        margin: 0px -380px;
        top: 0%;
        left: 50%;
        text-align: left;
        padding: 0px;
        border: 1px dotted #000000;
    }
    
    #top {
        position: absolute;
        background-color: #0097c2;
        width: 100%;
        height: 60px;
    }
    
    a {
        color: #000366;
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
    }
    
    a:link {
        color: #000366;
    }
    
    a:hover {
        color: #ff0000;
        text-decoration: underline;
    }
    
    #nieuws {
        position: absolute;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        top: 80px;
        left: 35px;
        border: 1px dotted #000000;
    }
    
        #nieuws_kop {
            background-color: #00536a;
            width: 150px;
            height: 25px;
            padding: 5px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;     
        }
        
    #sport {
        position: absolute;
        background-color: #FFFFFF;
        width: 150px;
        height: 200px;
        top: 80px;
        left: 205px;
        border: 1px dotted #000000;
    }

        #sport_kop {
            background-color: #00536a;
            width: 150px;
            height: 25px;
            padding: 5px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;     
        }

    #zoeken {
        position: absolute;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        top: 80px;
        left: 385px;
        border: 1px dotted #000000;
    }

        #zoeken_kop {
            background-color: #00536a;
            width: 150px;
            height: 25px;
            padding: 5px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;     
        }

    #webmail {
        position: absolute;
        background-color: #FFFFFF;
        width: 150px;
        height: 80px;
        top: 80px;
        left: 555px;
        border: 1px dotted #000000;
    }
        #webmail_kop {
            background-color: #00536a;
            width: 150px;
            height: 25px;
            padding: 5px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;     
        }

    #forum {
        position: absolute;
        background-color: #FFFFFF;
        width: 150px;
        height: 80px;
        top: 200px;
        left: 555px;
        border: 1px dotted #000000;
    }
        #forum_kop {
            background-color: #00536a;
            width: 150px;
            height: 25px;
            padding: 5px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;     
        }

    #headlines1 {
        position: absolute;
        background-color: #FFFFFF;
        width: 320px;
        height: 200px;
        top: 305px;
        left: 35px;
        border: 1px dotted #000000;
    }

        #headlines1_kop {
            background-color: #00536a;
            width: 320px;
            height: 25px;
            padding: 5px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;
        }

    #overigen {
        position: absolute;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        top: 305px;
        left: 555px;
        border: 1px dotted #000000;
    }

        #overigen_kop {
            background-color: #00536a;
            width: 150px;
            height: 25px;
            padding: 5px;
            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;
        }       
-->
</style>
</head>

<div id="container">
        <div id="top">
        </div>
        <div id="nieuws">
            <div id="nieuws_kop">
            Nieuws
            </div>
            <a href="http://www.gamer.nl"><li>Gamer.nl</li></a>
            <a href="http://www.nu.nl"><li>Nu.nl</li></a>
            <a href="http://www.ad.nl"><li>AD.nl</li></a>
            <a href="http://www.planet.nl/download"><li>Planet download</li></a>
            <a href="http://www.tweakers.net"><li>Tweakers.net</li></a>
            <a href="http://www.webwereld.nl"><li>Webwereld</li></a>
        </div>
        <div id="sport">
            <div id="sport_kop">
            Sport
            </div>
            <a href="http://www.f1racing.nl"><li>F1Racing.nl</li></a>
            <a href="http://www.wielerrevue.nl/index/index.php"><li>Wielerrevue.nl</li></a>
            <a href="http://www.ad.nl/sport"><li>AD Sportwereld</li></a>
        </div>
        <div id="zoeken">
            <div id="zoeken_kop">
            Zoeken
            </div>
            <a href="http://www.google.nl"><li>Google.nl</li></a>
            <a href="http://www.interglot.com"><li>Interglot.com</li></a>
            <a href="http://www.detelefoongids.nl"><li>De Telefoongids</li></a>
            <a href="http://www.vandale.nl/opzoeken/woordenboek"><li>Van Dale</li></a>
            <a href="http://www.rtl.nl/service/gids"><li>TV-Gids</li></a>
        </div>
        <div id="webmail">
            <div id="webmail_kop">
            Webmail
            </div>
            <a href="https://www.webmail.nl.demon.net/horde/imp"><li>Demon</li></a>
            <a href="http://www.gmail.com"><li>Gmail</li></a>
        </div>
        <div id="forum">
            <div id="forum_kop">
            Forum's
            </div>
            <a href="http://gathering.tweakers.net"><li>GoT</li></a>
            <a href="http://www.prikpagina.nl/list.php?f=173&collapse=1"><li>Wielerprikbord</li></a>
        </div>
        <div id="headlines1">
            <div id="headlines1_kop">
            Headlines - 1
            </div>
        </div>
        <div id="overigen">
            <div id="overigen_kop">
            Overigen
            </div>
        </div>
    </div>
    
</body>
</html>



Wie o wie kan mij helpen? Ik weet het niet meer???

  • user109731
  • Registratie: Maart 2004
  • Niet online
Je heb geen body? :?

Zet een <body> onder je </head> :)

Verwijderd

Topicstarter
Grote prutser schreef op donderdag 01 juni 2006 @ 16:21:
Je heb geen body? :?

Zet een <body> onder je </head> :)
Gedaan zoals jij zei, eigenlijk best wel dom dat ik die vergeten ben of perongeluk verwijderd heb. Op een gegeven moment zie je door de bomen het bos niet meer.

Helaas werkt het dan nog niet.

  • Technicality
  • Registratie: Juni 2004
  • Laatst online: 19-10-2025

Technicality

Vliegt rechtsom...

Let op dat je die images aanroept vanaf de css, dus als je een structuur er zo uitziet

[code]index.html
-css
style.css
-img
background.gif[/]
Je dan [code=css]background-image: url(../img/background.gif)[/code] moet gebruiken.


Je hebt geen externe stylesheet |:(

Validate je bestand eens, volgens mij start bij XHTML de body automatisch

edit2: volgens mij gebruik je de verkeerde slash, als je op een windows systeem zit moet je de fwd slash gebruiken. Daarnaast kan het nooit kwaad om even ./ ervoor te zetten.

[ Voor 44% gewijzigd door Technicality op 01-06-2006 16:43 ]


  • Palomar
  • Registratie: Februari 2000
  • Niet online
Ik zou sowieso nog eens je hele stylesheet goed doornemen. Ik heb zo snel geen fouten ontdekt, maar de pagina ziet er niet lekker uit als ik hem test. Ik krijg overigens ook nog geen backgroundimage te zien, maar ik zal nog eens kijken of ik kan zien waar het aan ligt.

  • GGS_206
  • Registratie: Juli 2001
  • Niet online

GGS_206

Oranje!

Je hebt img\background.gif

Moet dat niet img/background.gif of maakt dat niks?

T.net ID. Bekijk het maar es eem..
‹(◕‿◕)›


  • Palomar
  • Registratie: Februari 2000
  • Niet online
Ok, heb nog even gekeken en het is een venijnig foutje :P Je hebt in je <style> tag een remark geplaatst met 3 streepjes, <!--- . Maak hier maar eens 2 van (<!-- dus), dan werkt het wel.

[edit]

dit dus:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!---
body {
background-image: url('img\background.gif');
background-repeat: repeat;
}

[ Voor 45% gewijzigd door Palomar op 01-06-2006 17:48 ]


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07-2025
Kun je img/background.gif wel überhaupt opvragen van de server?

En offtopic: je hebt zeer belabberde HTML daar. Die <li>'s zijn wel heel erg fout geplaatst. En waar is de bijbehorende <ul>/<ol>? En kijk uit met je XML-prolog, daarmee slinger je IE6 in quirks mode omdat dat arme ding te verouderd is voor hippe XHTML.

En tekstueel: "overigen" is hier verkeerd gebruikt.

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Je slash staat de verkeerde kant op en dat lijkt me het enige probleem.

  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07-2025
Palomar schreef op donderdag 01 juni 2006 @ 17:47:
Ok, heb nog even gekeken en het is een venijnig foutje :P Je hebt in je <style> tag een remark geplaatst met 3 streepjes, <!--- . Maak hier maar eens 2 van (<!-- dus), dan werkt het wel.
[...]
Ik kan me vergissen, maar ik zie nergens dat dat niet mag. De comment open delimiter is "--", alles wat daarna komt is commentaar.

  • Palomar
  • Registratie: Februari 2000
  • Niet online
Maar ik heb het even getest en als je dat derde streepje weglaat doet ie het wel.

Ik kan me ook vaag iets herinneren dat ik eens een pagina van mij door de W3C validator haalde waarbij ik een error kreeg over een

<!-------------------------------------------

die ik gebruikte in mn code. Ik zal voor de grap eens kijken wat de exacte foutmelding was.

  • Palomar
  • Registratie: Februari 2000
  • Niet online
Ok, mn pagina werd wel gevalideerd, maar er stond wel een warning:

code:
1
2
3
4
5
 Below is a list of the warning message(s) produced when validating your document.

   1. Warning Line 15 column 43: multiple comments in comment declaration.

      <div id="main"> <!------- begin hoofdblock -->


Dus kennelijk is het toch niet helemaal juist en kun je er problemen mee krijgen zoals die van de TS. Misschien dat iemand er een meer onderbouwde uitleg voor heeft??

[ Voor 6% gewijzigd door Palomar op 01-06-2006 21:55 ]


  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
Misschien heeft het te maken met wat crisp in een ander topic opmerkte?

Cogito ergo dubito


Verwijderd

Topicstarter
Bedankt voor alle reacties, ik ga morgen even proberen wat minder streepjes neer te zetten. Ik zit nu op een andere pc, en mijn eigen pc is even niet toegankelijk van hier.

De reactie die hierboven allemaal vermeld worden over de slashes schuif ik van de baan, wel bedankt voor de reactie, maar zoals ik helemaal in mijn eerste bericht neer zette maakte dit alles niets uit.

Quote Nexxennium:
En offtopic: je hebt zeer belabberde HTML daar. Die <li>'s zijn wel heel erg fout geplaatst. En waar is de bijbehorende <ul>/<ol>? En kijk uit met je XML-prolog, daarmee slinger je IE6 in quirks mode omdat dat arme ding te verouderd is voor hippe XHTML.

En tekstueel: "overigen" is hier verkeerd gebruikt.


Hoezo zijn die <li>'s verkeerd gebruikt? Werkt anders prima. En het is de bedoeling dat deze pagina maar door een aantal mensen gebruikt gaat worden als die af is. In IE default zeg maar. dus hij komt niet op een hosting te staan, maar op de computer zelf.

Palomar:

Hoezo ziet de pagina er brak uit? wat zie jij bijvoorbeeld wat niet helemaal okay zou zijn dan?

Hecht er overigens niet te veel aan, want deze pagina hoeft ook geen schoonheids prijs te verdienen, en hij is immers nog in aanbouw.

Ik ga het morgen dus even proberen te fixen. Als het niet lukt dan meld ik mij weer..., en als de oplossing er is meld ik die ook nog even. Altijd handig voor mensen die ook dit probleem tegen komen.

Boelie-Boelie:
Welke opmerking van crisp doelde jij op dan? Er staan er nogal wat in dat topic.

offtopic: Kom jij toevallig uit de Hoeksche Waard?

Gr.

[ Voor 8% gewijzigd door Verwijderd op 01-06-2006 22:37 . Reden: nog wat toevoegen ]


  • Palomar
  • Registratie: Februari 2000
  • Niet online
Verwijderd schreef op donderdag 01 juni 2006 @ 22:27:
Palomar:

Hoezo ziet de pagina er brak uit? wat zie jij bijvoorbeeld wat niet helemaal okay zou zijn dan?
Zo ziet het er bij mij uit:
Afbeeldingslocatie: http://tweakers.net/ext/f/547ba771bda78b538daff2a2ddb92812/thumb.png
(die zwarte achtergrond had ik zelf even ingesteld ter vervanging van het achtergrondplaatje)

Ik gebruik overigens Firefox en ik heb het net nog even in IE getest en daar ziet het er wel goed uit. Al is de manier die jij hanteert met het absoluut positioneren van divjes wel vragen om problemen bij verschillende browsers. Je kunt het beter relatief doen. Maar als de pagina maar voor een paar mensen is met alleen IE kun je het natuurlijk wel zo laten...

[ Voor 8% gewijzigd door Palomar op 01-06-2006 23:42 ]


  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
Verwijderd schreef op donderdag 01 juni 2006 @ 22:27:Hoezo zijn die <li>'s verkeerd gebruikt? Werkt anders prima. En het is de bedoeling dat deze pagina maar door een aantal mensen gebruikt gaat worden als die af is. In IE default zeg maar.
Dat het prima werkt (wat nog valt betwisten), wil niet zeggen dat het goed is.
HTML:
1
2
3
4
5
6
7
8
9
<div id="nieuws">
<div id="nieuws_kop">Nieuws</div>
<a href="http://www.gamer.nl"><li>Gamer.nl</li></a>
<a href="http://www.nu.nl"><li>Nu.nl</li></a>
<a href="http://www.ad.nl"><li>AD.nl</li></a>
<a href="http://www.planet.nl/download"><li>Planet download</li></a>
<a href="http://www.tweakers.net"><li>Tweakers.net</li></a>
<a href="http://www.webwereld.nl"><li>Webwereld</li></a>
</div>
Wat hier niet goed is, lijkt me vrij duidelijk. Li's genest in a's, geen ul's of ol's.. En kopjes doe je met headings, geen divs.

Probleem met die denkwijze ('Werkt anders prima') is dat je veel fouten over het hoofd ziet, omdat je meet hoe goed je pagina is aan hoe goed IE het weergeeft. Maar IE is wel de laatste browser waar je zoiets aan moet aflezen. Als het er in andere browsers niet uitziet (wat het geval is), dan doe je waarschijnlijk dingen fout. Zoals met die lists.
Boelie-Boelie:
Welke opmerking van crisp doelde jij op dan?

offtopic:
Kom jij toevallig uit de Hoeksche Waard?
Ik heb er toch direct naar gelinkt? De opmerking over comments? (Daar ging het toch over?)
offtopic:
En nee, daar kom ik niet vandaan.

Cogito ergo dubito


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:28

crisp

Devver

Pixelated

Pas op met XHTML en HTML-comments in script- en styleblokken; op het moment dat je je site ook daadwerkelijk als XHTML verstuurd dan wordt je hele script- of styleblock als comment gezien (en als je je site niet als XHTML verstuurd dan heb je de verkeerde doctype gebruikt :P )

oh, en je mist een <body> (niet erg aangezien het ws toch geen echt XHTML is en het in HTML optioneel is :P) en je probleem wordt veroorzaakt door het feit dat je alles absoluut positioneerd en daardoor je body geen hoogte heeft. Gebruik alleen absolute positioning als het absoluut (woordspeling) noodzakelijk is, else 'go with the flow' ;)
centrering kan je beter doen mbv margin: 0 auto;

[ Voor 45% gewijzigd door crisp op 02-06-2006 00:31 ]

Intentionally left blank


Verwijderd

Topicstarter
Wel bizar dat door <!--- 1 - teveel hij de achtergrond in de body niet laat zien.

Maar goed. Het werkt wel nu.

Ik sta nog in het begin van het programmeren van websites, ben eigenlijk meer een ontwerper, maar wil dit toch een klein beetje onder de knie krijgen.

Zo leer ik iedere keer weer bij gelukkig. Alleen helemaal duidelijk is het me nog niet van dat centreren, en dat ik beter geen position: absolute kan gebruiken.

Eigenlijk s*cks IE aan alle kanten, maar ja zoveel mensen gebruiken het. Hopen dat Google dan maar eens en voor altijd de doorslag gaat geven met hun eigen browser die wel volgens de standaarden werkt en dat iedereen dan gelukkig is.

  • Palomar
  • Registratie: Februari 2000
  • Niet online
ehm, je zit nu IE te bashen terwijl je zelf foute code schrijft. Alhoewel ik het er mee eens ben dat IE wat beperkingen heeft vind ik die beschuldiging niet helemaal fair ;) Haal in het vervolg eerst je pagina door de html validator op www.w3c.org en als ie validated is mag je pas op IE gaan zeiken ;)

Overigens ziet je pagina er in Firefox nog beroerder uit (zie mijn screenshot ergens hierboven), dus IE heeft het nog wel goed gedaan eigenlijk ;)

[ Voor 6% gewijzigd door Palomar op 02-06-2006 11:31 ]


Verwijderd

Topicstarter
Hoe zorgen jullie dan dat de container zeg maar gecentreerd in het midden is/blijft?

  • Palomar
  • Registratie: Februari 2000
  • Niet online
margin: 0px auto; erin zetten

Maar ws. gaat alleen dat erin zetten niet goed, want al je andere divs zijn ook absoluut gepositioneerd. Ik zou gewoon even wat tutorials op internet doornemen voor wat de beste manier is. Je kunt met "float" bijv. zorgen dat al die andere divs netjes naast elkaar komen te staan zonder absolute waardesop te geven.

[ Voor 85% gewijzigd door Palomar op 02-06-2006 11:37 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:28

crisp

Devver

Pixelated

1 min teveel is geen probleem (echter zal het indien gebruikt binnen een script- of styleblock wel tot een script- of css parsingerror/warning leiden):
HTML:
1
<!--- valid comment -->

2 minnen teveel is wel een probleem:
HTML:
1
<!---- geen comment maar tag-data --> comment dus ook niet afgesloten --> nu wel

(zoals je ziet heeft onze highlighter de parsing rules voor HTML comments correct geimplementeerd ;) )
ter illustratie:
HTML:
1
2
3
<div id="main"> <!---- begin hoofdblock -->
  <p>Content of niet?</p>
</div> <!---- einde hoofdblock -->

final note: niet alle browsers hebben de rules voor HTML/SGML comments correct geimplementeerd, vandaar dat het in de ene browser wel tot problemen zal leiden en in andere wellicht niet.

[ Voor 62% gewijzigd door crisp op 02-06-2006 11:52 ]

Intentionally left blank


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07-2025
Hoezo zijn die <li>'s verkeerd gebruikt? Werkt anders prima. En het is de bedoeling dat deze pagina maar door een aantal mensen gebruikt gaat worden als die af is. In IE default zeg maar. dus hij komt niet op een hosting te staan, maar op de computer zelf.
Dat het prima uitziet betekent niet dat het ook prima is. <a><li /></a> kan gewoon nooit kloppen. En waar is je list container?

Je zegt dat het voor privegebruik is, dan zal er verder niemand last van hebben. Maar voor publieke sites is dit toch wel eh... minder.

  • Palomar
  • Registratie: Februari 2000
  • Niet online
ja, dat verklaart denk ik ook waarom de list-rondjes in firefox helemaal buiten de blokken staan (zie hier: http://tweakers.net/ext/f...8daff2a2ddb92812/full.gif) . Het is gewoon niet goed en simpel op te lossen door de <a> tags binnen de <li> te zetten (en dat weer in een <ul> of <ol>).
Denk dat je dan ook al een heel eind komt als je de hem door d ehtml validator haalt. Ik zie nog wel een paar linkjes staan met een & erin, daar gaat ie vast nog over zeuren omdat je er & van moet maken.

[ Voor 14% gewijzigd door Palomar op 02-06-2006 13:04 ]


Verwijderd

Topicstarter
Hallo iedereen, hoop dat jullie er nog zijn. Na de aanbevelingen die ik had gehad van jullie om op een andere manier de container te centreren ben ik toch op onderzoek uitgegaan en wilde ik het toch op een nette, goede wijze voor elkaar krijgen.

code:
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
<html>
<head>
<title>Kladblok</title>
<style type="text/css">
<!--

    body {
        text-align: center;
    }
    
    #container {
        margin: 0px auto;
        background-color: #FFCC00;
        width: 720px;
        height: 100%;
        text-align: left;
    }

-->
</style>
</head>

<body>

<div id="container">
content
</div>

</body>
</html>



Echter loopt het hier spaak. De container wordt namelijk wel in het midden weergegeven, maar boven en onder de container zit een wit ruimte(van de body kleur), container is even geel gemaakt. De container sluit niet helemaal dus aan op de bovenkant en onderkant van de pagina. Rara hoe kan dit? Want de code is nu IE en Firefox proof zoals ik op verschillende site's heb gelezen.

  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 00:20

TeeDee

CQB 241

de body een margin / padding van 0 geven?

dus:
Cascading Stylesheet:
1
2
3
4
5
body {
margin:0;
padding:0;
text-align:center;
}

Heart..pumps blood.Has nothing to do with emotion! Bored


Verwijderd

Topicstarter
Mag ik je hartelijk bedanken, het werkt!!! Super


Zodra ik men pagina af heb en goed werkend, zal ik hem nogmaals posten voor iedereen die met dezelfde problemen zit.

Verwijderd

Topicstarter
Hallo hallo,

Ben lekker heel de dag beetje aan het knutselen aan mijn windows_default pagina die ik aan het maken ben en waarover het in dit topic heel de tijd al gaat.
Ik heb alle tips geprobeerd te verwerken die gegeven zijn in dit topic en ik hoop dat ik het nu wel goed heb gedaan.
De pagina doet het nu in zowel IE 6 als in Firefox 1.5.0.4, maar:
ik loop echter nog tegen een aantal kleine probleempjes aan die ik hieronder heb beschreven.

Resterende vragen:

1.) Hoe kan het zo zijn dat IE 6 wel de list bolletjes voor de links netjes weergeeft en dat Firefox dit niet doet? Het zijn bij Firefox geen echte bolletjes als ik zo kijk. Is hier een trucje voor of een andere oplossing? Ik heb namelijk niet zo heel veel ervaring met Firefox dus het kan zo zijn dat dit hoord natuurlijk.

2a.) Ik zit nog met de uitlijning van de links wat maar niet wil lukken. Ik zou ze graag gewoon aan de linkerkant uitgelijnd willen hebben maar wat ik ook probeer van text-align tot margin-left wil niet werken??

2b.) Hetzelfde geld voor het uitlijnen aan de bovenkant van de div, als je nu kijkt zie je dat er een behoorlijke lege regel onder de kop staat en dan pas komen de links. Ook voor deze vraag geld dat ik al text-align en margin-top heb geprobeerd het wil alleen niet werken.

3.) Weet iemand of het mogelijk is om zeg maar Google.nl in je eigen pagina te verwerken? Ik heb nu namelijk de code gecopyeeerd van de google pagina, maar deze zijn niet hetzelfde?

4.) Zijn er nu nog beginners fouten te ontdekken in mijn code of is het nu tegen perfect aan?

Voorbeeld:

windows_default pagina

Code:

code:
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<html>
<head>
<title>Kladblok</title>
<style type="text/css">
<!--

    body {
        text-align: center;
        margin: 0px;
        padding: 0px;
        background-image: url(img/pattern_11.gif);
        background-position: top left;
        background-repeat: repeat;
    }
    
    #container {
        margin: 0px auto;
        background-color: #FFFFFF;
        width: 720px;
        height: 100%;
        text-align: left;
    }

    #top {
        background-color: #0e3d64;
        width: 720px;
        height: 25px;
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    a {
        color: #000366;
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
    }
    
    a:link {
        color: #000366;
    }
    
    a:hover {
        color: #ff0000;
        text-decoration: underline;
    }
    
    #nieuws {
        margin-top: 15px;
        margin-left: 15px;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        float: left;
    }
    
        #nieuws h3 {
            margin: 0px;
            padding: 5px;
            background: #00536a;
            font-family: Verdana, Arial;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            color: #FFFFFF;
        }

    #sport {
        margin-top: 15px;
        margin-left: 15px;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        float: left;
    }
        #sport h3 {
            margin: 0px;
            padding: 5px;
            background: #00536a;
            font-family: Verdana, Arial;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            color: #FFFFFF;
        }
        
    #zoeken {
        margin-top: 15px;
        margin-left: 15px;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        float: left;
    }
        #zoeken h3 {
            margin: 0px;
            padding: 5px;
            background: #00536a;
            font-family: Verdana, Arial;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            color: #FFFFFF;
        }

    #webmail_fora {
        margin-top: 15px;
        margin-left: 15px;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        float: left;
    }
        #webmail_fora h3 {
            margin: 0px;
            padding: 5px;
            background: #00536a;
            font-family: Verdana, Arial;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            color: #FFFFFF;
        }

    #google {
        margin-top: 35px;
        margin-left: 15px;
        width: 645px;
        height: 80px;
        float: left;
    }
    
-->
</style>
</head>

<body>

<div id="container">
    <div id="top">
    </div>
    
    <div id="nieuws">
        <h3>Nieuws</h3>
            <ul type="disc">
            <li><a href="http://www.gamer.nl">Gamer.nl</a></li>
            <li><a href="http://www.nu.nl">Nu.nl</a></li>
            <li><a href="http://www.ad.nl">AD.nl</a></li>
            <li><a href="http://www.planet.nl/download">Planet download</a></li>
            <li><a href="http://www.tweakers.net">Tweakers.net</a></li>
            <li><a href="http://www.webwereld.nl">Webwereld</a></li>
            </ul>
    </div>

    <div id="sport">
        <h3>Sport</h3>
            <ul type="disc">
            <li><a href="http://www.f1racing.nl">F1Racing.nl</a></li>
            <li><a href="http://www.wielerrevue.nl/index/index.php">Wielerrevue.nl</a></li>
            <li><a href="http://www.ad.nl/sport">AD Sportwereld</a></li>
            </ul>
    </div>

    <div id="zoeken">
        <h3>Zoeken</h3>
            <ul type="disc">
            <li><a href="http://www.google.nl">Google.nl</a></li>
            <li><a href="http://www.interglot.com">Interglot.com</a></li>
            <li><a href="http://www.detelefoongids.nl">De Telefoongids</a></li>
            <li><a href="http://www.vandale.nl/opzoeken/woordenboek">Van Dale</a></li>
            <li><a href="http://www.rtl.nl/service/gids">TV-Gids</a></li>
            </ul>
    </div>

    <div id="webmail_fora">
        <h3>Webmail</h3>
            <ul type="disc">
            <li><a href="https://www.webmail.nl.demon.net/horde/imp">Demon</a></li>
            <li><a href="http://www.gmail.com">Gmail</a></li>
            </ul>
        <h3>Fora</h3>
            <ul type="disc">
            <li><a href="http://gathering.tweakers.net">GoT</a></li>
            <li><a href="http://www.prikpagina.nl/list.php?f=173&collapse=1">Wielerprikbord</a></li>
            </ul>
    </div>

    <div id="google">
        <!-- Search Google -->
        <center>
        <FORM method=GET action="http://www.google.nl/search">
        <TABLE bgcolor="#FFFFFF"><tr><td>
        <A HREF="http://www.google.nl/">
        <IMG SRC="http://www.google.com/logos/Logo_40wht.gif" 
        border="0" ALT="Google" align="absmiddle"></A>
        <INPUT TYPE=text name=q size=31 maxlength=255 value="">
        <INPUT TYPE=hidden name=hl value="nl">
        <INPUT type=submit name=btnG VALUE="Google Zoeken">
        </td></tr></TABLE>
        </FORM>
        </center>
        <!-- Search Google -->
    </div>

</div>
</body>
</html>

  • Palomar
  • Registratie: Februari 2000
  • Niet online
Voor die bullet-items kun je ook zelf gewoon plaatjes gebruiken in je stylesheet. Dus gewoon een plaatje van een bolletje dus. Volgens mij heeft Firefox gewoon standaard zulke ruitjes en geen rondjes.

En wat bedoel je met die Google-code? Het ziet er toch goed/hetzelfde uit?

En verder over je code. Zo te zien zijn al die nieuws, sport, zoeken etc. boxen hetzelfde. Je hebt alleen wel voor elke div een apart style aangemaakt. Je kunt ze beter allemaal hetzelfde id geven, zodat het wat makkelijker updatet (stel je wilt de backgroundcolor veranderen van de blocken, dan moet je dat nu voor elk block apart doen). Het is op zich niet fout, maar ook niet geheel efficient.

[ Voor 44% gewijzigd door Palomar op 06-06-2006 17:01 ]


  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 00:20

TeeDee

CQB 241

Palomar schreef op dinsdag 06 juni 2006 @ 16:55:
Je kunt ze beter allemaal hetzelfde id geven, zodat het wat makkelijker updatet (stel je wilt de backgroundcolor veranderen van de blocken, dan moet je dat nu voor elk block apart doen). Het is op zich niet fout, maar ook niet geheel efficient.
Je kan ze beter allemaal eenzelfde class geven. ID's moeten uniek zijn per pagina.

M.a.w.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
.myclass {
        margin-top: 15px;
        margin-left: 15px;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        float: left;
}


HTML:
1
2
3
<div id="sport" class="myclass">
<p>content</p>
</div>


edit:
in de html even toch een uniek id gezet ivm het in de toekomst aanpassen van elementen. Op die manier kan je altijd 1 element apart nog een keer stylen. Het kan geen kwaad om divs een uniek id mee te geven, zodat je deze altijd te op kan pakken met bijv. document.getElementById oid. In het voorbeeld sport gebruikt, kan van alles worden natuurlijk


Wat betreft je 'bolletjes' verhaal:
Ik zou er niet teveel waarde aan hechten. Anders kan je altijd nog hier kijken.

Als laatste: je Google code werkt gewoon afaik.

[ Voor 24% gewijzigd door TeeDee op 06-06-2006 17:14 ]

Heart..pumps blood.Has nothing to do with emotion! Bored


  • Palomar
  • Registratie: Februari 2000
  • Niet online
ja class natuurlijk :P Was ff afgeleid omdat ie in zn code allemaal id's heeft staan (allemaal uniek, dat wel).

Verwijderd

Topicstarter
Met het Google verhaal bedoelde ik dat je met die code die je krijgt van google zelf die ik in mijn pagina heb gezet je niet op afbeeldingen kunt zoeken zoals je wel kunt op google.nl bijvoorbeeld.

Ik zal morgen nog eens proberen om met een class te gaan werken zodat de vierkante blokken 1 malig in de code staan en niet zoals nu allemaal losse div's

Alleen zit ik nog met vraag 2a/b, ik krijg het niet voor elkaar om die text(let op links) in die div's naar linksboven onder de kop uit te lijnen omdat de list blijkbaar een standaard left en top heeft??

  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 00:20

TeeDee

CQB 241

Als antwoord op 2a/b, speel eens met de margins / paddings op een UL element in je CSS.

Je losse divs kan je gewoon in je HTML laten staan, alleen moet je ze een <div class='jeclass'> geven. Op die manier hoef je 'jeclass' maar 1 x in je CSS aan te maken.

Voor wat betreft je google code: geen idee, maar dat is in principe op te lossen door goed naar de pagina's van google.nl zelf te kijken. Als je daar even speelt met het hoe en/of wat, dan moet je er wel uit komen denk ik.

Heart..pumps blood.Has nothing to do with emotion! Bored


Verwijderd

Topicstarter
Ik heb de smaak nu echt te pakken. Met die classes scheelt het mij een stuk code in de css. En ik hoef nu wijzigingen maar op 1 plek door te voeren wat ook wel top is.

En ben ook bezig geweest met de <ul> zoals TeeDee in het vorige bericht zei, maar dan werkt het wel in IE maar niet in Firefox??????

Voorbeeld V2


code:
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
151
152
153
154
155
156
157
<html>
<head>
<title>Kladblok</title>
<style type="text/css">
<!--

    body {
        text-align: center;
        margin: 0px;
        padding: 0px;
        background-image: url(img/pattern_11.gif);
        background-position: top left;
        background-repeat: repeat;
    }
    
    #container {
        margin: 0px auto;
        background-color: #FFFFFF;
        width: 720px;
        height: 100%;
        text-align: left;
    }

    #top {
        background-color: #0e3d64;
        width: 720px;
        height: 25px;
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    a {
        color: #000366;
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
    }
    
    a:link {
        color: #000366;
    }
    
    a:hover {
        color: #ff0000;
        text-decoration: underline;
    }
    
    h3 {
        margin: 0px;
        padding: 5px;
        background: #00536a;
        font-family: Verdana, Arial;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
        color: #FFFFFF;
    }
    
    ul {
        margin-top: 0;
        margin-left: 20px;
    }
    
    .vierkanten {
        margin-top: 15px;
        margin-left: 15px;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        float: left;
    }
    
    #google {
        margin-top: 35px;
        margin-left: 15px;
        width: 645px;
        height: 80px;
        float: left;
    }
    
-->
</style>
</head>

<body>

<div id="container">
    
  <div id="top"> </div>
    
    <div id="nieuws" class="vierkanten">
        <h3>Nieuws</h3>
            <ul type="disc">
            <li><a href="http://www.gamer.nl">Gamer.nl</a></li>
            <li><a href="http://www.nu.nl">Nu.nl</a></li>
            <li><a href="http://www.ad.nl">AD.nl</a></li>
            <li><a href="http://www.planet.nl/download">Planet download</a></li>
            <li><a href="http://www.tweakers.net">Tweakers.net</a></li>
            <li><a href="http://www.webwereld.nl">Webwereld</a></li>
            </ul>
    </div>

    <div id="sport" class="vierkanten">
        <h3>Sport</h3>
            <ul type="disc">
            <li><a href="http://www.f1racing.nl">F1Racing.nl</a></li>
            <li><a href="http://www.wielerrevue.nl/index/index.php">Wielerrevue.nl</a></li>
            <li><a href="http://www.ad.nl/sport">AD Sportwereld</a></li>
            </ul>
    </div>

    <div id="zoeken" class="vierkanten">
        <h3>Zoeken</h3>
            <ul type="disc">
            <li><a href="http://www.google.nl">Google.nl</a></li>
            <li><a href="http://www.interglot.com">Interglot.com</a></li>
            <li><a href="http://www.detelefoongids.nl">De Telefoongids</a></li>
            <li><a href="http://www.vandale.nl/opzoeken/woordenboek">Van Dale</a></li>
            <li><a href="http://www.rtl.nl/service/gids">TV-Gids</a></li>
            </ul>
    </div>

    <div id="webmail_fora" class="vierkanten">
        <h3>Webmail</h3>
            <ul type="disc">
            <li><a href="https://www.webmail.nl.demon.net/horde/imp">Demon</a></li>
            <li><a href="http://www.gmail.com">Gmail</a></li>
            </ul>
        <h3>Fora</h3>
            <ul type="disc">
            <li><a href="http://gathering.tweakers.net">GoT</a></li>
            <li><a href="http://www.prikpagina.nl/list.php?f=173&collapse=1">Wielerprikbord</a></li>
            </ul>
    </div>

    <div id="google">
        <!-- Search Google -->
        <center>
        <FORM method=GET action="http://www.google.nl/search">
        <TABLE bgcolor="#FFFFFF"><tr><td>
        <A HREF="http://www.google.nl/">
        <IMG SRC="http://www.google.com/logos/Logo_40wht.gif" 
        border="0" ALT="Google" align="absmiddle"></A>
        <INPUT TYPE=text name=q size=31 maxlength=255 value="">
        <INPUT TYPE=hidden name=hl value="nl">
        <INPUT type=submit name=btnG VALUE="Google Zoeken">
        </td></tr></TABLE>
        </FORM>
        </center>
        <!-- Search Google -->
    </div>

</div>
</body>
</html>


O ja voordat ik het vergeet, TeeDee gaf ook aan om in de Google code te kijken, maar dat is NOT a Option. Why not, nou kijk zelf maar is in die broncode.

Google werkt nu goed in de pagina dus daar laat ik het nu bij.

[ Voor 21% gewijzigd door Verwijderd op 07-06-2006 13:33 . Reden: link toegevoegd ]


Verwijderd

Topicstarter
Ben nog aan het stoeien met de margin.
In IE 6 werkt de uitlijning wel goed, maar in Firefox 1.5.0.4 niet.

Vraag 1: Weet iemand daar nog een oplossing voor?

O ja en nog wat vreemds is als ik de stylesheet die ik nu extern heb gemaakt valideer bij W3schools krijg ik dit terwijl er bovenaan de pagina wel staat Gefeliciteerd:

Regel : 17 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : #container
Regel : 21 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : #top
Regel : 30 (Level : 1) U heeft geen achtergrondkleur opgegeven : a
Regel : 38 (Level : 1) U heeft geen achtergrondkleur opgegeven : a:link
Regel : 42 (Level : 1) U heeft geen achtergrondkleur opgegeven : a:hover
Regel : 50 font-family: Het is beter een algemene font-family op te geven als laatste alternatief
Regel : 50 (Level : 2) font-family: Het is beter een algemene font-family op te geven als laatste alternatief : h3
Regel : 65 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : .vierkanten

Maar zoals je hieronder kunt zien in de CSS code heb ik wel degelijk een achtergrond kleur opgegeven voor de container. Heb de regel van background-color zelfs op verschillende plaatsen gezet in de container maar dat helpt niet.

Vraag 2: Weet iemand ook toevallig hoe dit dan kan, klopt de validatie niet bij W3schools?

Vraag 3: TeeDee, die knopjes op jouw site (W3schools HTML/CSS etc..) heb je die zelf gemaakt of ergens vandaan???

Code:
Cascading Stylesheet:
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
/* CSS Document */

    body {
        text-align: center;
        margin: 0px;
        padding: 0px;
        background-image: url(img/pattern_11.gif);
        background-position: top left;
        background-repeat: repeat;
    }
    
    #container {
        width: 720px;
        height: 100%;
        margin: 0px auto;
        text-align: left;
        background-color: #FFFFFF;
    }

    #top {
        background-color: #0e3d64;
        width: 720px;
        height: 25px;
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    a {
        color: #000366;
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
    }
    
    a:link {
        color: #000366;
    }
    
    a:hover {
        color: #ff0000;
        text-decoration: underline;
    }
    
    h3 {
        margin: 0px;
        padding: 5px;
        background: #00536a;
        font-family: Verdana, Arial;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
        color: #FFFFFF;
    }
    
    ul {
        margin-top: 0;
        margin-left: 20px;
    }
    
    .vierkanten {
        margin-top: 15px;
        margin-left: 15px;
        background-color: #eaf0fa;
        width: 150px;
        height: 200px;
        float: left;
    }
    
    #google {
        margin-top: 35px;
        margin-left: 15px;
        width: 645px;
        height: 80px;
        float: left;
    }

[ Voor 3% gewijzigd door Verwijderd op 08-06-2006 09:57 ]


  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 00:20

TeeDee

CQB 241

Verwijderd schreef op donderdag 08 juni 2006 @ 09:49:
Ben nog aan het stoeien met de margin.
In IE 6 werkt de uitlijning wel goed, maar in Firefox 1.5.0.4 niet.

Vraag 1: Weet iemand daar nog een oplossing voor?
Wat is er niet goed aan dan?
Vraag 2: Weet iemand ook toevallig hoe dit dan kan, klopt de validatie niet bij W3schools?
Afaik zijn dit warnings en een bug oid in de validator.
Vraag 3: TeeDee, die knopjes op jouw site (W3schools HTML/CSS etc..) heb je die zelf gemaakt of ergens vandaan???
Hiero: http://gtmcknight.com/buttons/

Heart..pumps blood.Has nothing to do with emotion! Bored


Verwijderd

Topicstarter
In IE worden de links in de blokken wel netjes uitgelijnd 0 px onder het kopje en 20 px van de linkerkant anders vallen de rondjes buiten zo'n vierkant.

Afbeeldingslocatie: http://static.flickr.com/78/162973790_256dba96a9_m.jpg


Voorbeeld Large

Maar in Firefox is het veel veel meer dan 20 px van de linkerkant, vanaf de rondjes gerekend staan die bijna in het midden van zo'n vierkant met daarachter de link uiteraard.

Afbeeldingslocatie: http://static.flickr.com/72/162973789_0f795bfd09_m.jpg


Voorbeeld Large


TeeDee tnx! voor de link van Vraag 3

[ Voor 5% gewijzigd door Verwijderd op 08-06-2006 15:38 ]


  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
HTML:
1
<ul type="disc">

zou ik in de css definiëren

Cascading Stylesheet:
1
2
3
4
5
li.inhoud {
       list-style-image: url('./pix/bullet-RK-inhoud_-_v01.gif');
       list-style-position: outside;
       padding-left: 20px; margin-left: 60px;
 }


Werkt bij mij. Met andere woorden, definieer de padding/margin voor <li> ipv <ul>.

Werkt alvast voor mij:
http://rode-kruis-gent.promoozz.org

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Type is deprecated, gebruikt dan de css property list-style-type en zet die op disc.
http://www.w3.org/TR/REC-CSS2/generate.html#lists

  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
Rowanov schreef op donderdag 08 juni 2006 @ 17:14:
Type is deprecated, gebruikt dan de css property list-style-type en zet die op disc.
http://www.w3.org/TR/REC-CSS2/generate.html#lists
Dat bedoelde ik dus ;^)

Verwijderd

Topicstarter
'list-style-type' heb ik aan men css toegevoegd, is inderdaad wel makkelijker als ik die ooit nog is wil veranderen hoef ik het enkel daar te doen.

Zit alleen nog met probleem van het uitlijnen, als ik verschillende dingen uitprobeer met de <li> ipv de <ul> werkt het niet echt. Als ik de margin etc toepas op de <ul> dan werkt het alleen in IE en niet in Firefox

  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07-2025
Voor ul en li moet je gewoon *alle* margins en paddings opgeven. Dan reageren de browsers wel nagenoeg hetzelfde. Het verschil zit 'm zeer waarschijnlijk in de default CSS die de verschillende browsers gebruiken. Er is een 'standaard' CSS voor HTML4, ik gok dat IE daarvan afwijkt. (Niet erg, het is geen echte standaard)

Verwijderd

Palomar schreef op donderdag 01 juni 2006 @ 21:54:
Ok, mn pagina werd wel gevalideerd, maar er stond wel een warning:

code:
1
2
3
4
5
 Below is a list of the warning message(s) produced when validating your document.

   1. Warning Line 15 column 43: multiple comments in comment declaration.

      <div id="main"> <!------- begin hoofdblock -->


Dus kennelijk is het toch niet helemaal juist en kun je er problemen mee krijgen zoals die van de TS. Misschien dat iemand er een meer onderbouwde uitleg voor heeft??
http://www.htmlhelp.com/reference/wilbur/misc/comment.html
Pagina: 1