[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_56729912
quote:
Op donderdag 14 februari 2008 16:13 schreef mcDavid het volgende:
Ik zou nieteens wéten hoe je een site bouwt met tables
ImageReady
ne okuyon, bokmu var?
pi_56730066
quote:
Op donderdag 14 februari 2008 16:22 schreef CraZaay het volgende:

[..]

Iemand die met geen enkele statistiek ervan te overtuigen was dat IE6+ écht prima is. En binnenkort alsnog herbouwen naar IE6+, omdat er natuurlijk wel allerlei web 2.0 "dingen" in moeten
firefox op zijn pc zetten en het "Internet Explorer 4" noemen en het icoontje aanpassen!
pi_56730900
Chandler: Ga eens spelen met de clear functie in CSS.
We'll keep on whispering our mantras.
pi_56733293
Hoe het hoort, in firefox
IE trouble.

Sorry voor crappy kwaliteit, maar zoals je ziet springt ie 1pixel. Waaraan kan het liggen?

Dit is een serieuze layout, kan ik hem hier laten staan? Of wordt ie dan gejat?
  donderdag 14 februari 2008 @ 20:19:19 #105
12880 CraZaay
prettig gestoord
pi_56734512
Da's het nadeel van iedere website: mensen kunnen 'm zien en dus jatten

Maar een online testcase is de enige optie in dit geval ben ik bang. Zonder code kan ik net zo goed roepen dat het aan die 1 pixel brede spacer.gif ligt
pi_56734694
quote:
Op donderdag 14 februari 2008 20:19 schreef CraZaay het volgende:
Da's het nadeel van iedere website: mensen kunnen 'm zien en dus jatten :P

Maar een online testcase is de enige optie in dit geval ben ik bang. Zonder code kan ik net zo goed roepen dat het aan die 1 pixel brede spacer.gif ligt ;)
Owja. Hier:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167		html { height: 100%;}

body{
background-image:url(img/bodybg.png);
background-color:#FFFFFF;
background-repeat:repeat-y;
background-position: center;
padding: 0;
margin: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
height: 100%;
}

a:link {
text-decoration: none;
color:#333333;
}
a:visited {
text-decoration: none;
color:#333333;
}
a:active {
text-decoration: none;
color:#333333;
}
a:hover {
text-decoration: underline;
color: #666666;
}

#container{
width: 798px;
margin: 0 auto;
}

#header{
height: 189px;
width: 798px;
background-color:#66FF66;
background-image:url(img/header.png);
background-repeat:no-repeat;
background-position:center;
padding: 0px;
margin: 0px;
}

#logincontainer{
margin-left: 525px;
height: 158px;
width: 234px;
padding-top: 15px;
}

#loginbg{
height: 158px;
width: 234px;
padding: 0px;
}

#loginform{
position: relative;
margin-top: -158px;
z-index: 1;
padding-top: 12px;
padding-left: 8px;
}

img.login{
behavior: url("pngbehavior.htc");
}

input.text{
height: 24px;
font-size: 18px;
vertical-align:middle;
background-image:url(img/input.png);
border:1px solid #999999;
width: 192px;
padding-left: 2px;
}

ul{
margin: 0px;
padding: 0px;
padding-top: 0px;
}

li{
margin: 0px;
display: compact;
padding: 2px;
list-style: none;
width: 156px;
border-bottom: 1px solid #C9C9C9;
}

input.search{
height: 20px;
font-size: 16px;
background-position:left;
background-image:url(img/searchbar.png);
background-repeat:repeat-x;
border:1px solid #a5a5a5;
color:#333333;
width: 160px;
padding-left: 28px;
}

input.login{
height: 20px;
font-size: 12px;
font-weight:bold;
background-position:left;
background-image:url(img/loginbutton.png);
background-repeat:repeat-x;
border:1px solid #a5a5a5;
color:#333333;
width: 160px;
}

#infobar{
padding-top: 3px;
padding-right: 4px;
height: 27px;
background-image:url(img/infobar.png);
background-repeat:no-repeat;
background-position:right;
float: right;
text-align:right;
}

.searchbutton{
display: none;
}

#menu{
margin: 0px;
padding: 0px;
width: 160px;
float: left;
}

#content{
width: 630px;
padding-top: 3px;
padding-right: 3px;
float:right;
}

form{
padding: 0px;
margin: 0px;
}

#informatie{
font-size: 10px;
padding: 5px;
width: 150px;
}

#footer{
font-size: 10px;
width: 798px;
text-align: center;
float: left;
}


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		<!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>KM Webhosting</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" >
</head>

<body>
<script type="text/javascript" src="js/wz_tooltip.js"></script>
<div id="container">

   <div id="header">
    
      <div id="logincontainer">
        
           <div id="loginbg">
               <img src="img/logindialog.png" class="login" height="158" width="234" />
           </div>
            
           <div id="loginform">
            <form method="post" action="login.php">
               <table cellpadding="4" style="border-collapse: collapse"  bordercolor="#0000FF" border="0">
  <tr>
    <td><input value="Username" onclick="this.value=''" name='user' class="text" type="text" /></td>
    <td style="padding:0px;"><a href="#" onmouseover="Tip('De loginnaam waarmee je normaal inlogt op Direct Admin')">?</a></td>
  </tr>
  <tr>
    <td><input value="Password" onClick="this.value=''" name='pass' class="text" type="text" /></td>
    <td style="padding:0px;"><a href="#" onmouseover="Tip('Het wachtwoord wat je normaal gebruikt om in te loggen op Direct Admin')">?</a></td>
    </tr>
  <tr>
    <td><input value="Domain" onclick="this.value=''" name='domain' class="text" type="text" /></td>
    <td style="padding:0px;"><a href="#" onmouseover="Tip('De domeinnaam waar je op wil inloggen. bijvoorbeeld kmwebhosting.nl')">?</a></td>
    </tr>
    <tr>
    <td align="center"><input class="login" type="submit" value="Login" /></td>
    </tr>
</table>
</form>
            </div>
        
        </div>
        
   </div>
   
    <div id="infobar">
    <form><input type="text" class="search" /><input class="searchbutton" type="submit" value=">>" /></form>
    </div>
    
    <div id="menu">
    <img class="menu" src="img/algemeen.png" />
    <ul>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Over Ons</a></li>
    <li><a href="#">Contact</a></li>
    </ul>   
    <img class="menu" src="img/diensten.png" />
    <ul>
    <li><a href="#">Webhosting</a></li>
    <li><a href="#">Reseller Hosting</a></li>
    <li><a href="#">Domein Registratie</a></li>
    <li><a href="#">Domein Verhuizing</a></li>
    <li><a href="#">Realtime Registrar</a></li>
    <li><a href="#">Dedicated Server</a></li>
    <li><a href="#">Colocated</a></li>
    </ul> 
    <img class="menu" src="img/informatie.png" />
    <ul>
    <li><a href="#">Netwerk en Servers</a></li>
    <li><a href="#">Support Systeem</a></li>
    </ul> 
    
       <div id="informatie">
            <b>KM Webhosting</b><br /><br />
            <table cellpadding="0" cellspacing="0">
            <tr>
            <td>Tel:</td>
            <td>0592-853911</td>
            </tr>
            <tr>
            <td>Mob:</td>
            <td>06-54384529</td>
            </tr>
            <tr>
            <td>Fax:</td>
            <td>0842-248278</td>
            </tr>
            </table>
            <br />
            info@karnakmedia.nl<br />
            www.karnakmedia.nl
            <p>
            <img src="img/karnakmediaklein.png" />
            </p>
            Design door <a href='http://jc-c.nl'>JC-C</a> © 2008
            </div>
    </div>
    
<div id="content">
[Dummytekst ff weggehaald]
</div> 
</div>

</body>
</html>
pi_56734839
En als je hem uiteindelijk online zet, wordt hij alsnog wel gejat. HTML en CSS zijn voor iedere boerenlul uit te lezen.
We'll keep on whispering our mantras.
pi_56734877
quote:
Op donderdag 14 februari 2008 20:35 schreef NiteSpeed het volgende:
En als je hem uiteindelijk online zet, wordt hij alsnog wel gejat. HTML en CSS zijn voor iedere boerenlul uit te lezen.
klopt. maar hij is nog niet online. daarna maakt het me niet uit (bij wijze van spreken, want je kan wat er daarna gebeurd niet controleren). maar ik vind het jammer dat er 1 pixeltje is. Ik heb hier wamp server draaien, maar die ga ik niet online gooien want dan kan je zo mn settings in.
  donderdag 14 februari 2008 @ 23:13:29 #109
164509 Banzaiaap
Tony Rocky Horror
pi_56738438
Euhm.. ik weet niet of het hier hoort, maar het is toch een korte vraag dus ik waag het er op:

Hoe zorg ik ervoor dat als ik een menu, dat op elke pagina hetzelfde moet zijn, ook overal hetzelfde is en dat ik door 1 aanpassing gelijk het op alle pagina's aanpas?
pi_56738460
quote:
Op donderdag 14 februari 2008 23:13 schreef Banzaiaap het volgende:
Euhm.. ik weet niet of het hier hoort, maar het is toch een korte vraag dus ik waag het er op:

Hoe zorg ik ervoor dat als ik een menu, dat op elke pagina hetzelfde moet zijn, ook overal hetzelfde is en dat ik door 1 aanpassing gelijk het op alle pagina's aanpas?
Met een php include lijkt me dat het makkelijkste
We'll keep on whispering our mantras.
  donderdag 14 februari 2008 @ 23:49:56 #111
12880 CraZaay
prettig gestoord
pi_56739186
quote:
Op donderdag 14 februari 2008 20:26 schreef Flaccid het volgende:

[..]

Owja. Hier:
[ code verwijderd ]

[ code verwijderd ]
Kun je dit niet ff ergens online zetten? Niet vanaf je eigen bak, maar bij je ISP ofzo? Zie het niet zo zitten om dit zelf te gaan copy/pasten naar HTML- en CSS-bestanden Dat debugged een stuk eenvoudiger namelijk.
pi_56741580
quote:
Op donderdag 14 februari 2008 23:13 schreef Banzaiaap het volgende:
Euhm.. ik weet niet of het hier hoort, maar het is toch een korte vraag dus ik waag het er op:

Hoe zorg ik ervoor dat als ik een menu, dat op elke pagina hetzelfde moet zijn, ook overal hetzelfde is en dat ik door 1 aanpassing gelijk het op alle pagina's aanpas?
Ligt er aan welke aanpassingen het zijn. Als het alleen grafische aanpassingen zijn gewoon middels CSS werken. Als je ook bijvoorbeeld de links e.d. in het menu in één keer wilt veranderen, een serverside taaltje (PHP, ASP.NET) gebruiken.
pi_56741744
quote:
Op donderdag 14 februari 2008 15:08 schreef saban het volgende:
Hoe kan ik onder mijn midcontent nog een vlak weergeven?
[ code verwijderd ]

De hoogte van #midcontent variert, dus kan ik aan de nieuwe vlak geen top:xx px meegeven.
Hoe gaat dat op zijn werk?
Someone?
ne okuyon, bokmu var?
  vrijdag 15 februari 2008 @ 09:22:07 #114
12880 CraZaay
prettig gestoord
pi_56742375
quote:
Op vrijdag 15 februari 2008 08:35 schreef saban het volgende:

[..]

Someone?
Is al beantwoord toch? Gewoon in principe nooit "position: absolute" gebruiken.
pi_56742401
Ik krijg het niet voor elkaar om een aantal plaatjes en divs naast elkaar te krijgen zonder ruimte er tussen. De pagina's met dit probleem draaien in quirks mode, en dat is ook niet eenvoudig aan te passen.

Om de plaatjes en divs naast elkaar te krijgen geef ik ze float:left. In FF werkt het wel, maar in IE6/7 ontstaat er toch ruimte tussen de plaatjes. Ik snap niet waar het vandaan komt en ik krijg het ook niet weg

voorbeeld
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  vrijdag 15 februari 2008 @ 09:51:48 #116
12880 CraZaay
prettig gestoord
pi_56742978
Bizar. Ik krijg het ook niet voor elkaar. Quirks-bug neem ik aan dan?
pi_56743028
quote:
Op vrijdag 15 februari 2008 09:51 schreef CraZaay het volgende:
Bizar. Ik krijg het ook niet voor elkaar. Quirks-bug neem ik aan dan?
In strict mode werkt het prima, dus het ligt echt aan quirks
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56743070
quote:
Op vrijdag 15 februari 2008 09:53 schreef SuperRembo het volgende:

[..]

In strict mode werkt het prima, dus het ligt echt aan quirks
Is de afbeeldingen als background-image in een <div>je stoppen geen optie?
pi_56743150
quote:
Op vrijdag 15 februari 2008 09:23 schreef SuperRembo het volgende:
Ik krijg het niet voor elkaar om een aantal plaatjes en divs naast elkaar te krijgen zonder ruimte er tussen. De pagina's met dit probleem draaien in quirks mode, en dat is ook niet eenvoudig aan te passen.

Om de plaatjes en divs naast elkaar te krijgen geef ik ze float:left. In FF werkt het wel, maar in IE6/7 ontstaat er toch ruimte tussen de plaatjes. Ik snap niet waar het vandaan komt en ik krijg het ook niet weg

voorbeeld
Je DIV images zijn toch gewoon goed naast elkaar?
ne okuyon, bokmu var?
pi_56743445
quote:
Op vrijdag 15 februari 2008 09:55 schreef Tuvai.net het volgende:

[..]

Is de afbeeldingen als background-image in een <div>je stoppen geen optie?
Ja, daar zat ik ook al aan te denken. Dat is waarschijnlijk de makkelijkste oplossing. Maar het blijft vreemd.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56743710
Nog een andere oplossing: geef de plaatjes margin-right: 1px. Dan staat de plaatjes 1px van elkaar af, wat dus veel minder is vergeleken met margin: 0. Vreemd dat het zo werkt, maar in mijn geval prima bruikbaar.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  vrijdag 15 februari 2008 @ 10:29:11 #122
12880 CraZaay
prettig gestoord
pi_56743776
Heb je ook "0px" geprobeerd, dus met de "px"-eenheid erbij?
pi_56743912
Het lijkt een beetje op de veelvoud aan Float- en positioning-bugs die explorer heeft:
zie http://www.positioniseverything.net/explorer.html

enkele bekende 'oplossingen' lijken echter niet te werken (haslayout: true; of zoom: 1 toewijzen, of het element display: inline geven)..
andere oplossingne die nog wel toegepast worden zijn bv de lelijkere 'hacks', dus via conditional comments ( <!--[if IE < 8 ] <style>IMG { margin-left: -3px; margin-right: -3px } </style>[endif]-->) een 'fix' inbouwen; ik zou wel expliciet inbouwen dat de fix niet actief blijft voor eventuele latere IE-browsers omdat die de neiging hebben de meeste bugs te fixen (en dan opeens weer nieuwe bugs te geven bij dezelfde effecten, zoals nu bij IE7 en waarschijnlijk ook weer bij IE8 )
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  vrijdag 15 februari 2008 @ 11:02:16 #124
12880 CraZaay
prettig gestoord
pi_56744646
quote:
Op vrijdag 15 februari 2008 10:34 schreef RM-rf het volgende:
zoals nu bij IE7 en waarschijnlijk ook weer bij IE8
Zeker ook bij IE8, want die rendert standaard als IE7
pi_56745536
quote:
Op vrijdag 15 februari 2008 09:23 schreef SuperRembo het volgende:
Ik krijg het niet voor elkaar om een aantal plaatjes en divs naast elkaar te krijgen zonder ruimte er tussen. De pagina's met dit probleem draaien in quirks mode, en dat is ook niet eenvoudig aan te passen.

Om de plaatjes en divs naast elkaar te krijgen geef ik ze float:left. In FF werkt het wel, maar in IE6/7 ontstaat er toch ruimte tussen de plaatjes. Ik snap niet waar het vandaan komt en ik krijg het ook niet weg

voorbeeld
Vaak is dat op te lossen door je css te beginnen met de volgende regel:
* {margin:0;padding:0}
* is een wildcard dus zo krijgen alle elementen standaard een marge en padding van 0, wat wel handig is aangezien de standaard margin en padding per browser verschilt.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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