[CSS] voor dummies - Deel 4

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_37281409
misschien is dit wel eerder geroepen maar kijk anders eens bij css zen http://www.csszengarden.com/

daar staan zoveel IE en FF hacks... Zeeer goede site
They execute an american tourist, we tactically nuke an entire city...
pi_37282279
Oh, het is al opgelost.

Ik heb bij #vol en bij #content de height: 100% weggehaalt
Steam - SC2
pi_37283687
oh nee, dan is het weer niet goed als het niet in de pagina past.

dan moet toch min-height voldoen? (+ de hack voor IE?)
Steam - SC2
pi_37291243
Klopt het dat in IE6 en FF de font-size niet wordt geërfd door tabellen?
In onderstaand voorbeeld krijg ik dat de bovenste regel tekst groter wordt weergegeven dan de onderste.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<html>

<head>

<style>
html, body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
}
</style>

</head>

<body>
<table>
   <tr>
      <td>Deze tekst is groter dan onderstaande.</td>
   </tr>
</table>

Deze tekst is kleiner dan bovenstaande tekst.
</body>

</html>
pi_37295649
quote:
Op vrijdag 21 april 2006 15:38 schreef super-muffin het volgende:
Oke, ik heb het nu zo ver dat die balken links en rechts blijven staan, maar als ik scroll lopen ze niet door.

Als ik thuis ben zal ik het ff oploaden, heb hier geen internet op mn laptop.
http://danielpunt.nl/2/

Steam - SC2
  woensdag 26 april 2006 @ 15:53:58 #156
53267 TC03
Catch you on the flipside
pi_37314076
Weet niet of het bekend is maar wou dit toch even zeggen, ik vind dit echt een perfecte hack om dingen speciaal voor IE te speciferen.

1
2
3		<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="voor_ie.css" />
<![endif]-->


Zo handig.
Ten percent faster with a sturdier frame
pi_37320298
Kun je dat ook in je CSS bestand zetten?
maar dan als
1
2
3		<!--[ if IE 6] >
@import ('stijl_ie.css')
<![ endif -->


en hoe doe je dat voor alle versies op IE? Of alle versies lager dan 6?
Steam - SC2
  donderdag 27 april 2006 @ 03:33:57 #158
46275 Castor
Obey the rules, miss the fun
pi_37334433
quote:
Op dinsdag 25 april 2006 20:30 schreef mrbombastic het volgende:
Klopt het dat in IE6 en FF de font-size niet wordt geërfd door tabellen?
In onderstaand voorbeeld krijg ik dat de bovenste regel tekst groter wordt weergegeven dan de onderste.
[ code verwijderd ]
Dat komt doordat je geen DOCTYPE neerzet, dan werken de browsers in quirksmode. De volgende code moet het oplossen:

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		<!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>

<style type="text/css">
/*<![CDATA[*/
html, body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;

}
/*]]>*/
</style>
<title></title>
</head>
<body>
<table>
<tr>
<td>Deze tekst is groter dan onderstaande.</td>
</tr>
</table>
<p>Deze tekst is kleiner dan bovenstaande tekst.</p>

</body>
</html>
Castor's Photostream op Flickr
pi_37355629
quote:
Op donderdag 27 april 2006 03:33 schreef Castor het volgende:

[..]

Dat komt doordat je geen DOCTYPE neerzet, dan werken de browsers in quirksmode. De volgende code moet het oplossen:
[ code verwijderd ]
Ah oke, weer wat geleerd .
pi_37356449
Net ook erachter gekomen dat FF itt tot IE geen spaties tussen een nummer en een eenheid accepteert. Zo is left:480 px uit den boze.
pi_37367139
net zoald een border bij IE buiten de div valt en bij FF in de div...
  vrijdag 28 april 2006 @ 10:59:27 #162
69950 MadGuy
Fever Ray
pi_37370518
quote:
Op vrijdag 28 april 2006 04:37 schreef Misanthropist het volgende:
net zoald een border bij IE buiten de div valt en bij FF in de div...
Dat vind ik inderdaad erg naar. Volgens mij gaat IE hier tegen de standaard in toch? Waarom?! WAAAAROM?!
last.fm
marksluymers.nl
  vrijdag 28 april 2006 @ 11:19:50 #163
46794 Berkery
Fat bastard
pi_37371106
quote:
Op woensdag 26 april 2006 15:53 schreef TC03 het volgende:
Weet niet of het bekend is maar wou dit toch even zeggen, ik vind dit echt een perfecte hack om dingen speciaal voor IE te speciferen.
[ code verwijderd ]

Zo handig.
Als we PPK mogen geloven is dat ook de enige hack die je nodig hebt. Behalve als je nog rekening houdt met NS 4.x of IE 5 voor de Mac
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
  FOK!-Schrikkelbaas vrijdag 28 april 2006 @ 11:48:20 #164
1972 Swetsenegger
Egocentrische Narcist
pi_37371838
quote:
Op vrijdag 28 april 2006 04:37 schreef Misanthropist het volgende:
net zoald een border bij IE buiten de div valt en bij FF in de div...
volgens mij toch alleen in quircksmode?
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_37405679
ik ben bezig met een website met een fluid design.
Nou heb ik header en een footer die precies doen wat ik wil alleen het lukt me nog niet goed om het middenstuk voor elkaar te krijgen.

1
2
3
4
5
6
7
8
9		#home {
   margin-bottom: 20px;
   border: 2px solid #00337F;
   text-align: left;
   background-color:#FFFFFF;
   height: 350px;
   padding: 0px;
   overflow:invisible;
   }

In dexe container wil ik een stuk tekst die fluid is en twee kolommen met een vaste breedte van 225px. Alleen het lukt mij niet echt om die kolommen goed voor elkaar te krijgen dat ze er mooi naast staan.

Ik dacht het op deze manier te doen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		#tekst
{
float:left;
margin-right:450px;}

#column1{
position:relative;
width:250px;
border-left:1px solid black;
float:right;
padding:0px;
margin:0px
}
#column2{
position:relative;
float:right;
border-left:1px solid black;
padding:0px;
margin:0px
}


Heeft iemand een idee wat ik fout doe?
  zondag 30 april 2006 @ 04:06:34 #166
46275 Castor
Obey the rules, miss the fun
pi_37420026
quote:
Op zaterdag 29 april 2006 16:54 schreef ExCibular het volgende:
ik ben bezig met een website met een fluid design.
Nou heb ik header en een footer die precies doen wat ik wil alleen het lukt me nog niet goed om het middenstuk voor elkaar te krijgen.
[ code verwijderd ]

In dexe container wil ik een stuk tekst die fluid is en twee kolommen met een vaste breedte van 225px. Alleen het lukt mij niet echt om die kolommen goed voor elkaar te krijgen dat ze er mooi naast staan.

Ik dacht het op deze manier te doen:
[ code verwijderd ]

Heeft iemand een idee wat ik fout doe?
Ik begrijp niet helemaal wat je voor elkaar probeert te krijgen, vaak helpt het als je de HTML en volledige CSS post of linkt. Maar "overflow: invisible" bestaat iig niet. Dat moet zijn "overflow: hidden;"
Castor's Photostream op Flickr
pi_37433932
sorry het moet zijn overflow visible, typefoutje gemaakt.
html is vrij simpel div home is de container met daarin de 3 divjes die de content moeten verzorgen (div als container met daarin inhoud om event. box model problemen te voorkomen).
Ik heb niet echt een voorbeeld kunnen vinden. Maar ik heb even een plaatje gemaakt van wat ik wil bereiken


Afhankelijk van de lengte van de teksten in de kolommen of in de tekst moet de alles langer zijn dan 350 px.

[ Bericht 11% gewijzigd door ExCibular op 30-04-2006 20:06:16 ]
  zaterdag 6 mei 2006 @ 22:59:57 #168
46275 Castor
Obey the rules, miss the fun
pi_37616197
quote:
Op zondag 30 april 2006 19:58 schreef ExCibular het volgende:
sorry het moet zijn overflow visible, typefoutje gemaakt.
html is vrij simpel div home is de container met daarin de 3 divjes die de content moeten verzorgen (div als container met daarin inhoud om event. box model problemen te voorkomen).
Ik heb niet echt een voorbeeld kunnen vinden. Maar ik heb even een plaatje gemaakt van wat ik wil bereiken
[afbeelding]

Afhankelijk van de lengte van de teksten in de kolommen of in de tekst moet de alles langer zijn dan 350 px.
Is dit wat je bedoeld?
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		<!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></title>

<style type="text/css">
/*<![CDATA[*/
  #home {float:left;border:1px solid red;}
  #tekst {background-color:yellow;float:left;margin-right:450px;}
  #column1 {width:225px;background-color:lightblue;float:left;margin-left:-450px;}
  #column2 {width:225px;background-color:blue;float:left;margin-left:-225px;}
/*]]>*/
</style>
</head>
<body>
<div id="home">
<div id="tekst">Nam vel nisi vitae odio congue tempus. Etiam leo justo,
 interdum dictum, accumsan at, accumsan quis, nisl. Sed ipsum orci, 
eleifend sit amet, congue ac, nonummy et, metus. Ut mollis mauris ac lectus. 
</div>
<div id="column1">Column 1</div>
<div id="column2">Column 2</div>
</div>
</body>
</html>
Castor's Photostream op Flickr
pi_37775305
De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?
Verstuur ringtones en Foto's gratis naar je mobiel
pi_37778528
quote:
Op vrijdag 12 mei 2006 23:20 schreef Da_Koen het volgende:
De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?
Je zou een divje kunnnen nemen met een bepaalde width. En deze voor elke divje gelijk brengen. Ernaast via float een divje erbij. Maar dit is niet ideaal aangezien je afhankelijk van de (breedte) van de inhoud ook de breedte van de eerste kolom wilt varieren.

Tabelgebruik daarvoor is gewoon wel gewoon beter.

Layout van de pagina zelf, en tekstvlakken waar je een object in wilt gooien, daar heb je css voor nodig.

div is net als table html-code. Dus als je met CSS bezig wilt zijn is het niet per definitie fout om een tabel te gebruiken.
  zaterdag 13 mei 2006 @ 01:25:42 #171
46275 Castor
Obey the rules, miss the fun
pi_37778760
quote:
Op vrijdag 12 mei 2006 23:20 schreef Da_Koen het volgende:
De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?
Forms zijn wel een van de lastigere dingen om mee te beginnen in CSS. Je kunt hier een goed voorbeeld vinden hoe je form met CSS maakt.

Persoonlijk heb ik daar nog steeds wel moeite mee, vooral als je input fields niet even lang mogen zijn en als je ook nog een stel radio-buttons kwijt moet.
Castor's Photostream op Flickr
  zaterdag 13 mei 2006 @ 01:25:53 #172
46275 Castor
Obey the rules, miss the fun
pi_37809760
quote:
Op zaterdag 13 mei 2006 01:25 schreef Castor het volgende:

[..]

Forms zijn wel een van de lastigere dingen om mee te beginnen in CSS. Je kunt hier een goed voorbeeld vinden hoe je form met CSS maakt.

Persoonlijk heb ik daar nog steeds wel moeite mee, vooral als je input fields niet even lang mogen zijn en als je ook nog een stel radio-buttons kwijt moet.
Thx, zelf heb ik deze ook nog gevonden. Dat begrijp ik nu wel.


Dan nog een vraagje. Als ik het goed heb betekent "em" de hoogte van een lettertype? Maar wat betekent width:4em; dan precies? Kan iemand me dat uitleggen?
Verstuur ringtones en Foto's gratis naar je mobiel
pi_37809972
1em = 16 pixels.
  zondag 14 mei 2006 @ 11:37:42 #175
33189 RM-rf
1/998001
pi_37810147
quote:
Op vrijdag 12 mei 2006 23:20 schreef Da_Koen het volgende:
De basis van CSS(tutor van w3schools) ken ik wel, maar ik denk nog altijd in tabellen ipv div's. Eigenlijk gebruik ik bijna overal tabellen voor wat eigenlijk niet goed is, hier wil ik dus vanaf.

Weet iemand een goede tutorial over het indelen van je website dmv CSS? Of kan iemand me een voorbeeldje geven.

Neem nou bijvoorbeeld een contactformuliertje. Dit zet ik altijd in een tabel omdat alles dan netjes oonder elkaar en uitgelijnd is. Hoe zou ik zoiets in CSS kunnen aanpakken?
de beste truc is te leren je HTML-code semantisch op te zetten .... daarmee leer je om bij de opzet van je HTML code niet te denken aan de layout zelf, maar een logische structuur ervoor te bedenken, de consequent is en klopt met de informatie en elementen die je erin wilt verwerken ....

Pas daarna voeg je de gewenste Layout door CSS toe:

een formulier bv:
1
2
3
4
5
6
7
8
9
10
11
12
13
14		<form>
   <fieldset>
       <legend>Mijn formulier</legend>
        <ul> 
               <li> <label for="input1">Eerste input</label>
                       <input name="mein_input" id="input1"> </li>
               <li> <label for="input2">Eerste input</label>
                       <input name="meer_input" id="input2"> </li>
               <li> <label for="input3">Eerste input</label>
                       <input name="laatste_input" id="input3"> </li>
                <li> <button type="submit">Verstuur</button> </li>
        </ul>
   </fieldset>
</form>


het mooi uitlijnen van zulke een formulier kun je doen door de CSS:
1
2		LABEL { display: block; float: left; width: 100px; }
UL, LI { list-style: none; margin:0; padding: 0; }


meer over semantiek vind je bv op alistapart (goed tutorials) en verschillende sites over css (en zoeken op semantics of semantiek)
quote:
Op zondag 14 mei 2006 11:25 schreef Da_Koen het volgende:

Dan nog een vraagje. Als ik het goed heb betekent "em" de hoogte van een lettertype? Maar wat betekent width:4em; dan precies? Kan iemand me dat uitleggen?
'em' (en 'ex') zij maateenheden die beide afhankelijk zijn van het gekozen font en de fontgrootte:
De 'em' is eigenlijk de letterbreedte (gebaseerd op de breedte van de letter 'm', veelal de breedste letter), de 'ex' is de corpshoogte (gebaseerd op de letter 'x' welke precies de undercast-hoogte aangeeft)
kies je voor de em of ex als maateenheid, weet je redelijk zeker dat je amaat gerelateerd is aan je gekozen font... zou je de font vergoten schaal je box netjes mee ... dat is de grond waaro mensen zo'n maat kiezen (bv bij het aangeven van spatierings-maat of lijnhoogte, kiezen goede designers het liefste voor resp. em of ex.

[ Bericht 14% gewijzigd door RM-rf op 14-05-2006 11:52:02 ]
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_37810282
quote:
Op zondag 14 mei 2006 11:32 schreef the_disheaver het volgende:
1em = 16 pixels.
In feite is em dus overbodig?
Verstuur ringtones en Foto's gratis naar je mobiel
pi_37810880
nee, want als je je font grootte in px definieert kan het niet geschaald worden in IE door de gebruiker.
Steam - SC2
pi_37812550
quote:
Op zondag 14 mei 2006 11:32 schreef the_disheaver het volgende:
1em = 16 pixels.
1em heeft niet een vaste grootte, het is relatief. 1em geeft aan dat de lettergrootte 100% van de lettergrootte op die plek is. Uitleggen is lastig, een voorbeeld helpt waarschijnlijk meer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		<html>
<head><title>Font size</title>
<style>
body {
  font-size: 1em;
}
.a {
  font-size: 1.5em;
}
.b {
  font-size: 0.8em;
}
.c {
  font-size: 1em;
}
</style>
</head>
<body>
X<span class="a">A</span><span class="b">B</span><span class="c">C</span>X<br>
X<span class="a">A<span class="b">B<span class="c">C</span></span></span>X<br>
X<span class="a">A</span><span class="b">B<span class="c">C</span></span>X<br>
</body>
</html>


Let op het verschil in grootte van de letters C, terwijl de ze allemaal in een class c staan en dus een grootte 1em hebben. De letters X zijn op iedere regel even groot.
fokstok.nl
pi_37815286
quote:
Op zondag 14 mei 2006 13:02 schreef Light het volgende:

[..]

1em heeft niet een vaste grootte, het is relatief. 1em geeft aan dat de lettergrootte 100% van de lettergrootte op die plek is. Uitleggen is lastig, een voorbeeld helpt waarschijnlijk meer:
[ code verwijderd ]

Let op het verschil in grootte van de letters C, terwijl de ze allemaal in een class c staan en dus een grootte 1em hebben. De letters X zijn op iedere regel even groot.
Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?

[ Bericht 5% gewijzigd door Da_Koen op 14-05-2006 16:24:51 ]
Verstuur ringtones en Foto's gratis naar je mobiel
  zondag 14 mei 2006 @ 18:23:33 #180
46275 Castor
Obey the rules, miss the fun
pi_37820894
quote:
Op zondag 14 mei 2006 15:00 schreef Da_Koen het volgende:

[..]

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?
Klopt, als je de hele site in "em" maakt dan is hij compleet resizable als de tekst vergroot wordt.
Castor's Photostream op Flickr
pi_37822681
quote:
Op zondag 14 mei 2006 15:00 schreef Da_Koen het volgende:

[..]

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?
Als je zou willen dat alles mee schaalt wel.
Steam - SC2
  FOK!-Schrikkelbaas maandag 15 mei 2006 @ 17:37:12 #182
1972 Swetsenegger
Egocentrische Narcist
pi_37850247
http://webshop.xploise.nl/test/menu.htm

Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera

Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_37854720
quote:
Op maandag 15 mei 2006 17:37 schreef Swetsenegger het volgende:
http://webshop.xploise.nl/test/menu.htm

Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera

Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.
1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderin
  FOK!-Schrikkelbaas maandag 15 mei 2006 @ 23:25:46 #184
1972 Swetsenegger
Egocentrische Narcist
pi_37863312
quote:
Op maandag 15 mei 2006 20:08 schreef the_disheaver het volgende:

[..]

1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderin
Beta browsers trek ik me nog maar even niets van aan

Ik ben een stuk verder, menu komt nu volledig uit database. de nesting wordt correct geparsed dus dat is het probleem niet.
Een en ander ziet er nu prima uit onder FF en Opera. Onder IE is echter de background transparant ( ) en en het menu valt steeds weg bij de onmouseover. Alleen als ik heeeeeeeeeeeeeel traag schuif gaat het goed.

url: http://webshop.xploise.nl/cart.php

relevante 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		#vertnav{
  list-style: none;
}

#vertnav{
     padding:0;
     margin:0;
}

#vertnav ul {
     padding: 0;
     margin:0;
     list-style: none;
     width:167px;
     z-index:99;
     position:absolute;
     overflow:visible;
}

#vertnav li {
     position: relative;
     cursor:pointer;
     cursor:hand;
     margin:0;
     width:171px;
     padding:0 2px;
     background-color:rgb(212,213,225);
     border-bottom:1px solid rgb(138, 139, 152);
     display:block;
     height:20px;
     line-height:20px;
}

#vertnav a {
     text-decoration:none;
     display:block;
     width:171px;
     height:20px;
}

#vertnav a:hover, #vertnav li:hover{
     background-color:rgb(179,181,196);
}
#vertnav ul li:hover, #vertnav ul li a:hover{
     background-color:rgb(179,181,196);
}

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
     display:none;
     position:absolute;
     top:0;
     left:175px;
}

/* non-IE browsers see this */
#vertnav ul li>ul, #vertnav ul ul li>ul{
     margin-top:0;
}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul, #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul{
     display:none;
}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav ul ul ul li:hover ul, #vertnav ul ul ul ul li:hover ul{
     display:block;
}

li>ul {
     top: -1px;
     left: -5px;
}
/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */ 


[ Bericht 1% gewijzigd door Swetsenegger op 15-05-2006 23:37:28 ]
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
  FOK!-Schrikkelbaas dinsdag 16 mei 2006 @ 08:37:51 #185
1972 Swetsenegger
Egocentrische Narcist
pi_37868812
Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul

-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren

[ Bericht 55% gewijzigd door Swetsenegger op 16-05-2006 08:46:29 (Opgelost) ]
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_37874576
quote:
Op dinsdag 16 mei 2006 08:37 schreef Swetsenegger het volgende:
Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul

-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren
Voor wat het waard is, in IE 7 beta werkt het ook goed!
Ik was naar je probleem aan het kijken terwijl dat je die al had opgelost
pi_37909326
Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet

-edit-
linkje zou handig zijn
www.danielpunt.nl/akxifo

[ Bericht 19% gewijzigd door super-muffin op 17-05-2006 11:17:34 ]
Steam - SC2
pi_37909833
als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.

op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen

er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.


edit
in jouw geval zou ik de rode-witte-rode invulling een backgroundimage maken van 1px hoog, en die repeat-y doen in je body background, en je background-color dezelfde kleur maken als wat het nu is.

dan maak je je top-div daarbovenop met daarin je banner, zodat daar iig de background niet meer zichtbaar is. beetje spelen met afbeeldingmaat wanneer nodig.

waar je dan mee zit is de transparante afbeelding onderin je content-div. die zou je misschien in een eigen div kunnen zetten met een z-index lager dan je content-text. ofzo. het wordt een beetje spelen met float.

[ Bericht 37% gewijzigd door Desdinova op 17-05-2006 11:33:25 ]
As a rule, I never touch anything more sophisticated and delicate than myself.
  woensdag 17 mei 2006 @ 11:31:03 #189
62215 qu63
..de tijd drinkt..
pi_37910034
quote:
Op woensdag 17 mei 2006 11:10 schreef super-muffin het volgende:
Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet

-edit-
linkje zou handig zijn
www.danielpunt.nl/akxifo
ik zou ook iig je alfabet-letters wat aanpassen in je lexicon. als ik nu op de E of de K ga staan blijven ze verspringen namelijk :'0

Als je er overheen gaat worden de letters groter, daardoor verspringt ie een regel naar beneden, dus staat mijn muis er niet meer op, en verspringt ie weer terug naar zn oorspronkelijke plekje, en begint het hele verhaal opnieuw
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_37910161
quote:
Op woensdag 17 mei 2006 11:25 schreef Desdinova het volgende:
als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.

op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen

er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.
hoe doe ik het met javascript? Ik ken zelf niet echt veel javascript, maar kan het wel gebruiken.
Tenzij iemand anders nog een oplossing heeft maar wat klopt er niet op jou resolutie? Ik zit hier op 1024x768 en daar is alles oké.

qu63: dat weet ik, daar moet ik nog wat aan doen ja.
Steam - SC2
  woensdag 17 mei 2006 @ 11:37:35 #191
33189 RM-rf
1/998001
pi_37910269
Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..

In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)

Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:

1
2
3		#head {
   position: relative;
}
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_37910308
ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox

ik zou het probleem niet oplossen met javascript. je zou dan een of andere functie moeten hebben die het toonbare deel van je browser checkt (is 100%), en aan de hand daarvan de div-height aanpast door je header-height eraf te trekken.
As a rule, I never touch anything more sophisticated and delicate than myself.
  woensdag 17 mei 2006 @ 11:46:44 #193
12880 CraZaay
prettig gestoord
pi_37910554
quote:
Op woensdag 17 mei 2006 11:37 schreef RM-rf het volgende:
viewbox
viewport
pi_37911848
quote:
Op woensdag 17 mei 2006 11:37 schreef RM-rf het volgende:
Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..

In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)

Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:
[ code verwijderd ]
nee, position: relative doet niks.

Is er echt geen andere oplossing
Trouwens, nog iets geks, het achtergrondplaatje in #content doet het niet in FF
Steam - SC2
pi_37911883
quote:
Op woensdag 17 mei 2006 11:38 schreef Desdinova het volgende:
ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox
Dat kwam om dat #box een height heeft van 600px; dat is nu al opgelost.
Steam - SC2
pi_37912105
dan heb je waarschijnlijk backslashes gebruikt (\) in plaats van forward (/) bij je link naar het plaatje
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_37912426
nee, hij staat gewoon in de root.

1background: url(bg-content.gif) fixed no-repeat bottom right #fff; 
Steam - SC2
pi_37912658
quote:
Op woensdag 17 mei 2006 12:43 schreef super-muffin het volgende:
nee, hij staat gewoon in de root.
[ code verwijderd ]
quottjes omheen?
pi_37912722
dan wordt je div waarschijnlijk niet geshowd (IE is wat flexibeler daarin). zet er maar even een border-width, border-style en border-color bij. effe tjekke wattie doet.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_37914596
De DIV word wel geshowd, want het is die #content waar ik het hier boven over had
Als ik de property fixed weghaal doetie het wel.

-edit-


moet je kijken, als ik mn browserventer zo schaal komtie in eens te voorschijn
Wat is dit nu voor gekkigheid.

[ Bericht 41% gewijzigd door super-muffin op 17-05-2006 14:02:24 ]
Steam - SC2
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deel 4
Index

» digital corner

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