[CSS] voor dummies.

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  zondag 19 december 2004 @ 18:36:42 #76
44679 Leshy
Held met sokken.
pi_24086384
quote:
Op zondag 19 december 2004 18:25 schreef Roönaän het volgende:
Wrom gebruik je overal single quotes?
Puur uit gewoonte
quote:
Op zondag 19 december 2004 18:00 schreef saban het volgende:
Wat doe ik verkeerd ?
Niets, zo moet het wel degelijk werken
pi_24086402
quote:
Op zondag 19 december 2004 18:26 schreef Roönaän het volgende:
Maar waarschijnlijk moet je even goed refreshen, want het menu doet het hier wel..
Ik werk daar nog met divjes + html tabel, niet met de voorbeeld die ik kreeg, daarom werkt het
ne okuyon, bokmu var?
pi_24086516
quote:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>index</title>
<style type='text/css'>
ul#menu {
list-style-type: none;
margin-left: 0;
width: 20%;
text-align: center;
}
ul#menu li {
font-family: tahoma;
font-size: 10px;
display: inline;
padding: 0 4px;
color: #EEEEEE;
}
ul#menu li a {
color: #EEEEEE;
border-bottom: 1px none;
text-decoration: none;
}
ul#menu li a:hover {
border-bottom: 1px dashed #EEEEEE;
}
</style>
</head>

<body bgcolor="#000000">
<ul id='menu'>
<li><a href='?surf=home'>Home</a></li>
<li><a href='?surf=results'>Results</a></li>
<li><a href='?surf=history'>History</a></li>
<li><a href='mailto:sinan[at]sinan06[dot].nl'>Contact</a></li>
</ul>
</body>

</html>
Ik zie geen dashed underline als ik met mn muis over de links heen ga ..
ne okuyon, bokmu var?
pi_24087331
quote:
Op zondag 19 december 2004 18:42 schreef saban het volgende:

[..]

Ik zie geen dashed underline als ik met mn muis over de links heen ga ..
Ik wel, dus die CSS lijkt me in orde. Ondersteunt je browser wel dashed underline?
fokstok.nl
  zondag 19 december 2004 @ 19:52:11 #80
44679 Leshy
Held met sokken.
pi_24087815
quote:
Op zondag 19 december 2004 19:21 schreef Light het volgende:
Ik wel, dus die CSS lijkt me in orde. Ondersteunt je browser wel dashed underline?
MSIE ondersteunt wel dashed borders, dat is het probleem niet.

Opera en Firefox hebben beiden geen probleem met het weergeven van de dashed border - en terecht omdat het gewoon correcte CSS is. MSIE echter laat weer zien dat het gewoon een drama is in het toepassen van CSS. Blijkbaar valt de border van de link buiten de <li>, ondanks dat deze er gewoon in staat.

@saban:
De oplossing is om deze regel toe te voegen aan je CSS:
1* html ul#menu li {height: 13px;} /* MSIE hack */


Dit is een stukje foute CSS dat alle browsers netjes negeren, zoals ze horen te doen. Natuurlijk weer met uitzondering van Internet Explorer, die het gewoon slikt. Let erop dat als je je tekstgrootte ooit aanpast, je ook even de hoogte in die regel verandert
pi_24089326
quote:
Op zondag 19 december 2004 19:52 schreef Leshy het volgende:

[..]

MSIE ondersteunt wel dashed borders, dat is het probleem niet.

Opera en Firefox hebben beiden geen probleem met het weergeven van de dashed border - en terecht omdat het gewoon correcte CSS is. MSIE echter laat weer zien dat het gewoon een drama is in het toepassen van CSS. Blijkbaar valt de border van de link buiten de <li>, ondanks dat deze er gewoon in staat.

@saban:
De oplossing is om deze regel toe te voegen aan je CSS:
[ code verwijderd ]

Dit is een stukje foute CSS dat alle browsers netjes negeren, zoals ze horen te doen. Natuurlijk weer met uitzondering van Internet Explorer, die het gewoon slikt. Let erop dat als je je tekstgrootte ooit aanpast, je ook even de hoogte in die regel verandert
Aha, thx.
Nu werkt het
ne okuyon, bokmu var?
pi_24121773
Ik probeer het volgende voor elkaar te krijgen. qua layout opbouw dan in CSS.



en heb reeds de volgende css opbouw + html
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		<style>

body
{
    margin: 0px auto;
   
}

#main
{
    width: 100%;
}

#left
{
    float: left;
    width: 25px;
    background: #EAEAEA;
   
}

#middle
{
    width: 500px;
    background: #000000;
}


#right
{
    width: 100%;
    background: #904fff;

}

</style>

<div id="main">
    <div id="left"></div>

    <div id="middle">
        <div id="header">
            <div id="headermenu">
            </div>

            <div id="headerlogo">
            </div>
        </div>


        <div id="middletext">InnerHTML</div>

        <div id="footer">(c) bladedieblaat</div>
    </div>
    
    </div id="right">Dit is de rechter kollom</div>
</div>


echter geeft dat niet echt het resultaat wat ik eerst wil, ik krijg bijvoorbeeld de tekst van de rechter kolom geheel niet rechts; ik heb veel geprobeerd steeeds weer overnieuw begonnen maar niets wilde baten... Iemand een idee?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24125889
Waarom doe je het niet met tabellen?
pi_24126125
ik zou het gewoon graag met divs willen zien; is handiger; overzichtelijker en ook moeilijker te realiseren
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24135904
Lamaar. staat wel tekst in rechts.
pi_24136638
Hmm.. Er zit nog een whitespaceline tussen het submenu en de content. Maar voor de rest zie:
http://foreverland.nl/docs/reports/chand.html
pi_24143167
Roonaan: Netties; ik zelf had dit in elkaar geknutseld (vannacht)

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>
body
{
    margin: 0px auto;
}

#cell
{
    width: 100%;
    height: 500px;
}

#left
{
    margin-left: 0px;
    position: absolute;
    width: 25px;
    height: 100%;
    background: green;
    background-image: url('left_bkgnd_fill.gif');
}

#middle
{
    margin-left: 25px;
    position: absolute;
    width: 675px;
    height: 100%;
    background: #3d3d32;
}

#right
{
    margin-left: 700px;
    position: absolute;
    width: 100%;
    height: 100%;
    background: blue;
    background-image: url('bluey.gif');
}

#menu
{
    width: 250px;
}

#menuimage
{
    margin-left: 250px;
    text-align: right;
    width: 425px;
}

#content
{
    width: 675px;
    background: #ffffff;
}

#footer
{
    padding-left: 10px;
    padding-top: 20px;
    height: 25px;
    font-size: 9px;
    color: #ffffff; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.but
{
    margin-top: 5px;
    padding-left: 10px;
    width: 225px;
    height: 26px;
    background: #5EB5D5;
    font-family: arial;
    font-size: 18px;
    color: #FFFFFF;
    text-decoration:none
}

.but:hover
{
    margin-top: 5px;
    padding-left: 10px;
    width: 225px;
    height: 26px;
    background: #5EB5D5;
    font-family: arial;
    font-size: 18px;
    color: #000000;
    text-decoration:none
}

</style>

<div id="cell">
    <div id="left"></div>
    <div id="middle">
        <div id="menu">
            <a href="#" class="but">Woei</a>
            <a href="#" class="but">Woei</a>
            <a href="#" class="but">Woei</a>
        </div>
        <div id="menuimage">IMAGE </div>
        <div id="content">testtest?</div>
        <div id="footer">(c) 2004 E. Bruggema, scripting & graphical all reserved by its rightfull owners</div>
    </div>

    <div id="right"></div>
</div>

met als uitkomst zie voorbeeld helemaal zelf gecoded
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24143293
alleen staat de 'image' niet goed gepositioneerd? en ik snap dus niet waarom
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24162243


Daar staat dus een groot vlak, en dan er links en rechts naast twee kleine vakjes (met Titel erin). Die vakjes wil ik een vaste breedte geven, dus bijv 150px. Dat lukt niet. Het zijn tabel cellen. Maar ze vormen zich dus naar de breedte van het content vak, iemand een idee?

Een divje met een width van 150px did the trick.
pi_24164108
LOL Db; heb je ook een tips op mijn laatste CSS?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24165384
Waar moet IMAGE dan wel komen te staan?
pi_24170146
gewoon bovenaan; precies naast het menu...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24171010
tvp
pi_24174781
Misschien als je #middle een text-align: center; geeft. Maak dan wel de div voor je image kleiner.
pi_24182107
ik zal het eens proberen; nog een vraagje; is het mogelijk om een plaatje in #menu te zetten

1
2
3
4		#menu
{
    width: 250px;
}


maar dan moet het plaatje wel aan de rechterkant staan of moet ik daar dan ook weer een aparte 'style' voor maken?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24182200
quote:
Op vrijdag 24 december 2004 16:07 schreef Chandler het volgende:
ik zal het eens proberen; nog een vraagje; is het mogelijk om een plaatje in #menu te zetten
[ code verwijderd ]

maar dan moet het plaatje wel aan de rechterkant staan of moet ik daar dan ook weer een aparte 'style' voor maken?
http://www.w3schools.com/css/css_reference.asp#background

En dan dus waar je em wil hebben, en op no-repeat denk ik.
pi_24182546
tnx; het heeft inderdaad gewerkt!!! maar dat met die "IMAGE" werkt helaas nog steeds niet
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24183351
Je moet hem denk ik absoluut positioneren. Of hem in de menu-div gooien, als je nl 2 div's hebt pakt ie automatisch een nieuwe regel.
pi_24183942
display:inline zou dan moeten werken dan pakt ie geen nieuwe regel; ik gaat verder kloten
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24183973
b.t.w check de 'example' maar @ http://upload.bruggema.nl/files/test1.html
The people who lost my respect will never get a capital letter for their name again.
Like trump...
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies.
Index

» digital corner

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