[CSS] voor dummies - deel 9

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
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
The people who lost my respect will never get a capital letter for their name again.
Like trump...
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
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  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...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  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... )
The people who lost my respect will never get a capital letter for their name again.
Like trump...
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
The people who lost my respect will never get a capital letter for their name again.
Like trump...
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
The people who lost my respect will never get a capital letter for their name again.
Like trump...
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!
pi_62135021
quote:
Op zaterdag 4 oktober 2008 20:11 schreef mcDavid het volgende:
ik knal er meestal gewoon "yellow", "red", "blue", "grey", "purple", of wat me maar te binnen schiet in
Voor grote vlakken vind ik die kleuren niet echt prettig om naar te kijken. En daarbij is die kleurcode meestal korter
fokstok.nl
  zondag 5 oktober 2008 @ 10:01:37 #252
12880 CraZaay
prettig gestoord
pi_62142698
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
Die borders daar ben ik het niet mee eens: die maken je div aan alle kanten een pixel groter en zorgt daarom vaak voor verneukte lay-outs (bij mij iig).
pi_62169202
quote:
Op zaterdag 4 oktober 2008 20:06 schreef Light het volgende:

[..]

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.
#00FF00 hier
goede tip trouwens
pi_62170303
Containers even een felle kleur geven is sowieso verstandig als je een HTML layout uit je mouw gaat schudden. Al is het alleen om het hoofdgedeelte visueel even in beeld te brengen, meestal heb je immers een hoofdcontainer, header, mogelijk ook een footer en meerdere kolommen.
pi_62326364
*met blogspot css klooi*

Pfff... wat heeft blogspot er een hoop. Voor een leek als ik best lastig om de draad te volgen. Net wat zitten editten met Dreamweaver, en 'k heb de css in ieder geval extern nu.

Vage verschillen tussen Explorer en Firefox ook. Zal wel met margin en padding te maken hebben ofzo.

Misschien is 't handiger om vanuit het niets een css te maken ipv een bestaande blogspot-css aan te passen.
pi_62340926
quote:
Op zondag 12 oktober 2008 13:55 schreef DennisMoore het volgende:
*met blogspot css klooi*

Pfff... wat heeft blogspot er een hoop. Voor een leek als ik best lastig om de draad te volgen. Net wat zitten editten met Dreamweaver, en 'k heb de css in ieder geval extern nu.

Vage verschillen tussen Explorer en Firefox ook. Zal wel met margin en padding te maken hebben ofzo.

Misschien is 't handiger om vanuit het niets een css te maken ipv een bestaande blogspot-css aan te passen.
Heb je de web developer firefox addon al geinstalleerd?

ctrl-shift-f en er gaat een wereld voor je open!
  maandag 13 oktober 2008 @ 11:39:42 #257
12880 CraZaay
prettig gestoord
pi_62346747
quote:
Op maandag 13 oktober 2008 00:33 schreef mcDavid het volgende:

[..]

Heb je de web developer firefox addon al geinstalleerd?

ctrl-shift-f en er gaat een wereld voor je open!
En vergeet Firebug niet met YSlow. Die 3 Firefox plugins zijn echt onmisbaar imo.
pi_62347572
'k Ga eens experimenteren .

De ctrl-shift-f is trouwens gekaapt door Foxmarks...
-edit- @ Google

[ Bericht 28% gewijzigd door DennisMoore op 13-10-2008 12:26:12 ]
  dinsdag 14 oktober 2008 @ 14:04:39 #259
134533 donroyco
dus niet Donroyco
pi_62376608
Waarom is amazinglyenigmatic.nl in IE zo anders? Ik weet niet waar de fout zit Inmiddels is het positioneren van de 'geopend blabla' wel al gelukt..

Nu nog de tekst..


[ Bericht 24% gewijzigd door donroyco op 14-10-2008 14:15:17 ]
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  dinsdag 14 oktober 2008 @ 17:39:36 #260
134533 donroyco
dus niet Donroyco
pi_62382246
quote:
Op dinsdag 14 oktober 2008 14:04 schreef donroyco het volgende:
Waarom is amazinglyenigmatic.nl in IE zo anders? Ik weet niet waar de fout zit Inmiddels is het positioneren van de 'geopend blabla' wel al gelukt..

Nu nog de tekst..
Iemand die het weet?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_62384166
Omdat je totaal geen natuurlijke float hebt?

Ik kan trouwens niet ontdekken in welke browser je 'getest' hebt, het staat bij allebei schots en scheef.

-edit-
en vraag je ook eens af hoe je site eruit ziet in een browservenster met een andere grootte.
pi_62486295
Is iemand hier bekend met een fout in Internet Explorer 7, waarbij een foto ineens horizontaal gesplitst wordt? Het vage is vooral, dat dit maar heeeeel soms gebeurd, en niet eens steeds bij dezelfde foto.
you and I ain't done Zeke!
  zaterdag 18 oktober 2008 @ 17:04:06 #263
134533 donroyco
dus niet Donroyco
pi_62486406
quote:
Op dinsdag 14 oktober 2008 19:03 schreef mcDavid het volgende:
Omdat je totaal geen natuurlijke float hebt?

Ik kan trouwens niet ontdekken in welke browser je 'getest' hebt, het staat bij allebei schots en scheef.

-edit-
en vraag je ook eens af hoe je site eruit ziet in een browservenster met een andere grootte.
Misschien een ietwat late reactie, maar dank je wel voor de moeite.. het probleem is inmiddels opgelost
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  zaterdag 18 oktober 2008 @ 17:25:02 #264
134533 donroyco
dus niet Donroyco
pi_62486889
Even een header gemaakt voor de OP:

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_62790839
Ik wil een menu hebben op m'n testpaginaatje:
De items staan in LI's in een UL. De UL heb ik een class meegegeven die zorgt dat het ding 800px breed is, zodat er een border om kan.
De LI's wil ik nu rechts uitlijnen. Hoe doe ik dat? Ik laat ze nu left floaten zodat ze naast elkaar staan, en dat gaat keurig. Right laten floaten heeft ongeveer het gewenste effect, behalve dat de items dan, logisch, achterstevoren staan. Dat in de HTML oplossen lijkt me geen vriendelijke oplossing. Is er een nette oplossing te bedenken, of moet ik gewoon een div toevoegen die ik de border geef, en daar de UL in mikken die ik rechts uitlijn, waarbinnen de LI's weer left floaten?
pi_62790907
ik denk dat dat laatste de beste oplossing is idd..
pi_62790946
Was er al bang voor. Ik probeer de DIVs zoveel mogelijk te beperken, maar als't moet...!
pi_62791237
Mwoah, hoewel je dr natuurlijk niet onnodig mee moet gaan strooien (hyves ) maakt het niet zoveel uit volgens mij. Divs betekenen verder niets dus behalve dat het wat extra bits zijn, zal het weinig effect hebben op de performance van je site.
  woensdag 29 oktober 2008 @ 20:01:43 #269
145090 HenkBenzinetank
Toegevoegde waarde
pi_62791406
@veldmuis: text-align: right is niet wat je bedoelt?
pi_62791562
Nee, het spul float al naar links binnen de UL, en die float overruled de text-align geloof ik.
pi_62791584
quote:
Op woensdag 29 oktober 2008 19:55 schreef mcDavid het volgende:
Mwoah, hoewel je dr natuurlijk niet onnodig mee moet gaan strooien (hyves ) maakt het niet zoveel uit volgens mij. Divs betekenen verder niets dus behalve dat het wat extra bits zijn, zal het weinig effect hebben op de performance van je site.
Ik dacht dat het bij SEO wel wat kan uitmaken?
pi_62791591
quote:
Op woensdag 29 oktober 2008 20:01 schreef HenkBenzinetank het volgende:
@veldmuis: text-align: right is niet wat je bedoelt?
Met text-align: right zorg je ervoor dat de tekst in de li's rechts wordt uitgelijnd. De enige manier om dan te zorgen dat het laatste menu-item tegen de rechterkantlijn komt te staan, is door te zorgen dat de li's zodanig worden verdeeld dat het precies uitkomt.
fokstok.nl
pi_62791645
quote:
Op woensdag 29 oktober 2008 20:06 schreef veldmuis het volgende:
Nee, het spul float al naar links binnen de UL, en die float overruled de text-align geloof ik.
float en text-align zijn verschillende dingen. En je kunt best een element float: left; en text-align: right; meegeven.
fokstok.nl
pi_62791693
quote:
Op woensdag 29 oktober 2008 19:43 schreef veldmuis het volgende:
Ik wil een menu hebben op m'n testpaginaatje:
De items staan in LI's in een UL. De UL heb ik een class meegegeven die zorgt dat het ding 800px breed is, zodat er een border om kan.
De LI's wil ik nu rechts uitlijnen. Hoe doe ik dat? Ik laat ze nu left floaten zodat ze naast elkaar staan, en dat gaat keurig. Right laten floaten heeft ongeveer het gewenste effect, behalve dat de items dan, logisch, achterstevoren staan. Dat in de HTML oplossen lijkt me geen vriendelijke oplossing. Is er een nette oplossing te bedenken, of moet ik gewoon een div toevoegen die ik de border geef, en daar de UL in mikken die ik rechts uitlijn, waarbinnen de LI's weer left floaten?
De UL width: auto; en float: right; meegeven, de LI's dan float: left; En dat in de DIV met de border.
fokstok.nl
pi_62791878
quote:
Op woensdag 29 oktober 2008 20:01 schreef HenkBenzinetank het volgende:
@veldmuis: text-align: right is niet wat je bedoelt?
Dat gaat niet werken in dit geval.. het was een ander verhaal als 't over met list items met een inline position ging

edit: moet toch eens wat vaker refreshen..
pi_62791938
quote:
Op woensdag 29 oktober 2008 20:09 schreef Light het volgende:

[..]

float en text-align zijn verschillende dingen. En je kunt best een element float: left; en text-align: right; meegeven.
Dat snap ik, maar als ik de float:left zou weglaten en wel een text-align: right meegeef staat het lijstje wel rechts in de UL. Zo bedoelde ik het
quote:
Op woensdag 29 oktober 2008 20:11 schreef Light het volgende:

[..]

De UL width: auto; en float: right; meegeven, de LI's dan float: left; En dat in de DIV met de border.
Zo heb ik het nu idd ook opgelost . Werkt prima, jammer dat er een DIV bij moet .
pi_62792225
quote:
Op woensdag 29 oktober 2008 @ 20:07 schreef veldmuis het volgende:

[..]

Ik dacht dat het bij SEO wel wat kan uitmaken?
theoretisch wel misschien... maar ik geloof daar niet zo in.

Nou ken ik de scan-algoritmes van google natuurlijk niet, maar kan me niet voorstellen dat een divje meer of minder van invloed is op je score.
  woensdag 29 oktober 2008 @ 20:39:53 #278
145090 HenkBenzinetank
Toegevoegde waarde
pi_62792653
quote:
Op woensdag 29 oktober 2008 20:07 schreef Light het volgende:

[..]

Met text-align: right zorg je ervoor dat de tekst in de li's rechts wordt uitgelijnd. De enige manier om dan te zorgen dat het laatste menu-item tegen de rechterkantlijn komt te staan, is door te zorgen dat de li's zodanig worden verdeeld dat het precies uitkomt.
i know, ik snapte alleen niet precies wat veldmuis bedoelde;
pi_62829057
morge allemaal,

Ik ben al een tijdje bezig met het ontwerpen van een template en wil het volgende bereiken.
een 100% height pagina met bover een header en beneden een footer die een vaste hoogte hebben.
Ik wil de pagina helemaal opbouwen met DIVjes en heb al heel veel artikelen gevonden over een 100% height DIV echter wil het nog niet helemaal werken.

Ik heb de pagina nu in IE en ook alleen in IE zoals ik hem wil hebben, pagina staat hieronder weergegeven
maar heb de HTML en BODY tags weg moeten halen om dit resultaat te krijgen.

kan iemand mij vertellen wat ik verkeerd doe of hoe ik dit ook werkend krijg in FF?

alvast bedankt.. Groetjes Ronny


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		<style TYPE="text/css">

body
 {
  margin:0;
  padding:100px 0 22px 0;

 }

  * html body
 {
  overflow:hidden;
 } 

 * html div#content
 {
  height:100%;
  overflow:hidden;
 }

 div#header{
  position:absolute;
  background-image: url(./IMG/Top.png);
  top:0;
  left:0;
  width:100%;
  height:75px;
 }
 div#menubar
 {
  background-color:#f9ffff;
  position:absolute;
  border:solid 1px #CCCCCC;
  border-left:0;
  border-right:0;
  top:75px;
  left:0;
  width:100%;
  height:25px;
 }
 div#footer
 {
  background-color:#f9ffff;
  position:absolute;
  border:solid 1px #CCCCCC;
  border-bottom:0px;
  border-left:0px;
  border-right:0px;
  bottom:0;
  left:0;
  width:100%;
  height:22px;
 }
 
 div#menutree
 {
  border:solid 1px #CCCCCC;
  overflow-y:scroll;
  background-color:#f9ffff;
  position:absolute;
  left: 0px;
  border-bottom:0px;
  border-left:0px;
  border-top:0px;
  top:0px;
  width:160px;
  height:100%;
  z-index:2;
 }
 div#main
 {
  border:solid 0px #CCCCCC;
  overflow-y:scroll;
  padding-left:160px;
  background-color:#FFFFFF;
  position:absolute;
  right: 0px;
  top:0px;
  width:100%;
  height:100%;
  z-index:1;
 }
 
 
 @media screen
 {
  body>div#header
  {
   position:fixed;
  }
  body>div#menubar
  {
   position:fixed;
  }
  body>div#footer
  {
   position:fixed;
  }
 }
 
</style>


<div id="header">Top</div>
<div id="menubar">Menubar</div>
<div id="footer">Footer</div>

<div id="content">
    <div id="menutree">Menutree</div>
    <div id="main">Content</div>
</div>


[ Bericht 31% gewijzigd door Ronster op 31-10-2008 08:30:41 ]
pi_62829183
Kun je die zooi eens tusseen [ code] en [ /code] zetten? (en dan zonder spaties na de [ )
fokstok.nl
pi_62829295
owja had de verkeerde tags gebruikt
pi_62832683
Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.

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		#blackout {
    opacity:.7;
    filter:alpha(opacity=70);
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:2000px; 
    z-index:3; 
    background-image:url('/layout/images/darkbackgroundimage.gif');
    display: none;
}

#popupproduktopties { 
    z-index: 4; 
    position: absolute; 
    top: -100px; 
    left: 10%; 
    width: 600px; 
    height: 500px; 
    display: block; 
    background: #fff; 
    border: 5px solid black; 
    overflow: scroll;
}


Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_62835507
quote:
Op vrijdag 31 oktober 2008 @ 11:10 schreef Chandler het volgende:
Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.
[ code verwijderd ]

Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?
Nope, Z-index werkt alleen voor elementen die op het zelfde niveau genest zitten.
Makkelijkste manier is gewoon de 'hoogste' div nesten in de achtergronddiv lijkt me.
pi_62836667
Hmm.. Ik denk dat het in dit geval pittig gaat worden maar toch bedankt voor je reactie! weer wat geleerd
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_62839619
IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten.
pi_62852091
quote:
Op vrijdag 31 oktober 2008 @ 15:24 schreef Geqxon het volgende:
IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten. :+
:') Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.

1
2
3
4		#shadow            {background: url("/images/schaduw.png") repeat;}

/* IE6 hack */
* html #shadow         {background-color:#000;back\ground-color:transparent;background-image:url(blank.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/schaduw.png", sizingMethod="scale");}
pi_62852707
quote:
Op vrijdag 31 oktober 2008 23:04 schreef mcDavid het volgende:

[..]

Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.
[ code verwijderd ]



Heb ik ook in de CSS gebruikt. En dan een keer of 40. En toen bevroor IE6 compleet bij het bezoeken van de website. Het was dan ook zo'n heerlijke hippe ronde hoekjes website.
  vrijdag 31 oktober 2008 @ 23:30:01 #288
145090 HenkBenzinetank
Toegevoegde waarde
pi_62852732
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
pi_62853009
quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
Maar dan nog mis je functionaliteit. Zo vind ik het erg frustrerend dat de background-*.* elementen niet meer werken als je een PNGfix toepast in Internet Explorer 6.

zelf neem ik altijd het volgende op in mijn IE6 conditional comment:
quote:
#div,
#div h1,
#div .subdiv {
behavior:url(iepngfix.htc);
}
you and I ain't done Zeke!
  vrijdag 31 oktober 2008 @ 23:47:29 #290
145090 HenkBenzinetank
Toegevoegde waarde
pi_62853019
ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet
pi_62853073
Idd als je zoiets 50x moet doen, kun je denk ik beter een javascript hack zoeken!

Heb ik toendertijd ook naar gekeken. Zijn over het algemeen een stuk omslachtiger, maar wel vaak in één keer voor de hele pagina klaar.

Maar, tegenwoordig is het gebruik van IE6 naar mijn mening ver genoeg afgenomen om die mensen dan maar een paar grijze randjes voor te schotelen. Evt. met de mededeling dat ze hun browser moeten upgraden voor optimaal kijkgemak.

[edit]
niezosnelineensjoh!
pi_62853194
quote:
Op vrijdag 31 oktober 2008 23:47 schreef HenkBenzinetank het volgende:
ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet
Er is een nieuwe versie van iepngfix die wel ondersteuning heeft voor repeat en position. Zie hier
fokstok.nl
  zaterdag 1 november 2008 @ 00:01:55 #293
145090 HenkBenzinetank
Toegevoegde waarde
pi_62853289
o ja, dat was ;m

heb het laatst nog gebruikt voor een site maar kon het niet meer vinden
pi_62853781
quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.

Tuurlijk, voor de IMG objecten met een transparante PNG gebruik ik wel javascript. Al voer je daar hetzelfde uit, dus het maakt geen verschil of je het met CSS of JS doet.

Het feit dat IE6, op welke computer dan ook, volledig crashde op deze website, is wel erg triest.
pi_62853927
quote:
Op zaterdag 1 november 2008 @ 00:29 schreef Geqxon het volgende:

[..]

Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.
wie heeft je dit wijsgemaakt?
pi_62854134
quote:
Op zaterdag 1 november 2008 00:37 schreef mcDavid het volgende:

[..]

wie heeft je dit wijsgemaakt?
Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.
pi_62854168
quote:
Op zaterdag 1 november 2008 @ 00:51 schreef Geqxon het volgende:

[..]

Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.
object.style.background="..."
pi_62854199
quote:
Op zaterdag 1 november 2008 00:53 schreef mcDavid het volgende:

[..]

object.style.background="..."
Als ik die opvraag van een object waarbij de background-image in CSS is aangegeven krijg je een lege waarde.
pi_62854297
Hmm daar heb je idd gelijk in.

Mot je ook ff een scriptje schijven dat die achtergrondafbeeldingen ook nog een keer via DOM invoegt
pi_62854309
Kijk, een plaatje van de filter voorzien is simpel. Even in een for-lusje over alle PNG objecten een simpel scriptje:

1
2
3
4
5
6
7
8		   oldSrc = new String(pngObject.src);
   oldWidth = new String(pngObject.width);
   oldHeight = new String(pngObject.height);

      pngObject.src = "images/pixel_trans.gif";
      pngObject.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldSrc + "', sizingMethod='scale')";
      pngObject.style.width = oldWidth;
      pngObject.style.height = oldHeight;


Maar bij bijvoorbeeld een H3 met een background-image propery in CSS kun je niet de background-image property aanvragen.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 9
Index

» digital corner

» development

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