[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  woensdag 13 februari 2008 @ 15:50:46 #76
164509 Banzaiaap
Tony Rocky Horror
pi_56705495
Ik ben nu zo goed als klaar met de site van een maat van mij: DjE-rik.nl, maar op de contact pagina staat de afbeelding met het emailadres erin niet helemaal goed, is een kleinigheidje, maar weet iemand waarom?
  woensdag 13 februari 2008 @ 15:57:24 #77
12880 CraZaay
prettig gestoord
pi_56705619
quote:
Op woensdag 13 februari 2008 15:50 schreef Banzaiaap het volgende:
Ik ben nu zo goed als klaar met de site van een maat van mij: DjE-rik.nl, maar op de contact pagina staat de afbeelding met het emailadres erin niet helemaal goed, is een kleinigheidje, maar weet iemand waarom?
Quotes rond je attributen zetten en van "middle" "absmiddle" maken.
  woensdag 13 februari 2008 @ 15:58:49 #78
164509 Banzaiaap
Tony Rocky Horror
pi_56705647
quote:
Op woensdag 13 februari 2008 15:57 schreef CraZaay het volgende:

[..]

Quotes rond je attributen zetten en van "middle" "absmiddle" maken.
Thanks, dat was em.

Edit: Align blijkt geen valid html transitional te zijn..
http://validator.w3.org/check?uri=http%3A%2F%2Fdje-rik.nl%2Fcontact.html&charset=(detect+automatically)&doctype=Inline&group=0

[ Bericht 33% gewijzigd door Banzaiaap op 13-02-2008 16:09:52 ]
pi_56705945
Align wel, Absmiddle niet.
  woensdag 13 februari 2008 @ 16:41:25 #80
164509 Banzaiaap
Tony Rocky Horror
pi_56706549
quote:
Op woensdag 13 februari 2008 16:12 schreef Geqxon het volgende:
Align wel, Absmiddle niet.
Ja die bedoelde ik , enig alternatief?
  woensdag 13 februari 2008 @ 16:53:19 #81
12880 CraZaay
prettig gestoord
pi_56706790
quote:
Op woensdag 13 februari 2008 16:41 schreef Banzaiaap het volgende:

[..]

Ja die bedoelde ik , enig alternatief?
Met CSS "vertical-align: middle"?
  woensdag 13 februari 2008 @ 17:17:47 #82
164509 Banzaiaap
Tony Rocky Horror
pi_56707278
quote:
Op woensdag 13 februari 2008 16:53 schreef CraZaay het volgende:

[..]

Met CSS "vertical-align: middle"?
vertical-align rekent notepad++ niet goed bij mij..
pi_56708934
quote:
Op woensdag 13 februari 2008 17:17 schreef Banzaiaap het volgende:

[..]

vertical-align rekent notepad++ niet goed bij mij..
notepad++ moet niet zeiken.
  woensdag 13 februari 2008 @ 19:26:20 #84
164509 Banzaiaap
Tony Rocky Horror
pi_56709800
quote:
Op woensdag 13 februari 2008 18:49 schreef mcDavid het volgende:

[..]

notepad++ moet niet zeiken.
Sorry
pi_56725789
quote:
Op woensdag 13 februari 2008 14:30 schreef saban het volgende:
Iemand een simpel ontwerp slicen?
Mijn allereerste CSS met DIVjes

/edit
Cool, een vervanging gevonden voor:
1
2
3
4
5
6
7
8
9
10		<body background="bg.jpg">

Vervang ik met;

body
{ 
background-image: 
url('bg.jpg');
background-repeat: repeat-x
}
ne okuyon, bokmu var?
pi_56726475
quote:
Op donderdag 14 februari 2008 13:20 schreef saban het volgende:

[..]

Mijn allereerste CSS met DIVjes

/edit
Cool, een vervanging gevonden voor:
[ code verwijderd ]
In principe kun je alles dat met opmaak te maken heeft doormiddel van CSS doen.

http://www.csszengarden.com/ is daar een prachtig voorbeeld van.
pi_56727114
quote:
Op donderdag 14 februari 2008 13:50 schreef Geqxon het volgende:

[..]

In principe kun je alles dat met opmaak te maken heeft doormiddel van CSS doen.
En in principe hoort dat ook zo.
pi_56727862
quote:
Op donderdag 14 februari 2008 14:18 schreef Tuvai.net het volgende:

[..]

En in principe hoort dat ook zo.
Dat klopt, maar voor een beginner telt dat natuurlijk wat minder zwaar.
pi_56728097
Ik vind het van me zelf al knap dat ik niet met tabellen werk maar met DIV
ne okuyon, bokmu var?
pi_56728178
quote:
Op donderdag 14 februari 2008 14:52 schreef Geqxon het volgende:

[..]

Dat klopt, maar voor een beginner telt dat natuurlijk wat minder zwaar.
Daarom kun je beter goed beginnen dan dat je eerst helemaal aan tabellen gehecht raakt, en vervolgens met divjes moet gaan werken.

Er zijn nog steeds een heleboel mensen die steevast blijven hangen bij tabelletjes omdat ze divjes niet fijn vinden. Ik was tot een paar jaren geleden zelf nog zo.
pi_56728184
Hoe kan ik onder mijn midcontent nog een vlak weergeven?
1
2
3
4
5
6
7
8
9
10
11
12		   #midcontent {
      position: absolute;
      left:260px;
      top:135px;
      width:660px;
      padding:10px;
      background:#e8ebbe;
      font-family: tahoma;
      font-size: 11px;
      font-weight: bold;
      color: #fff;
      }


De hoogte van #midcontent variert, dus kan ik aan de nieuwe vlak geen top:xx px meegeven.
Hoe gaat dat op zijn werk?
ne okuyon, bokmu var?
pi_56728194
quote:
Op donderdag 14 februari 2008 15:07 schreef Tuvai.net het volgende:

[..]

Daarom kun je beter goed beginnen dan dat je eerst helemaal aan tabellen gehecht raakt, en vervolgens met divjes moet gaan werken.

Er zijn nog steeds een heleboel mensen die steevast blijven hangen bij tabelletjes omdat ze divjes niet fijn vinden. Ik was tot een paar jaren geleden zelf nog zo.
Ik heb tot nu toe ook altijd met tabellen gewerkt, css/div heb ik nooit begrepen, maar nu probeer ik het me aan te leren
ne okuyon, bokmu var?
pi_56728248
quote:
Op donderdag 14 februari 2008 15:07 schreef Tuvai.net het volgende:

[..]

Daarom kun je beter goed beginnen dan dat je eerst helemaal aan tabellen gehecht raakt, en vervolgens met divjes moet gaan werken.

Er zijn nog steeds een heleboel mensen die steevast blijven hangen bij tabelletjes omdat ze divjes niet fijn vinden. Ik was tot een paar jaren geleden zelf nog zo.
Jep. Op het moment schrijf ik dan ook altijd eerst een semantisch correcte HTML, en dan pas maak ik de stylesheet, zonder aan de HTML te komen. Goeie manier om het jezelf te forceren.
  donderdag 14 februari 2008 @ 15:28:18 #94
12880 CraZaay
prettig gestoord
pi_56728633
quote:
Op donderdag 14 februari 2008 15:03 schreef saban het volgende:
Ik vind het van me zelf al knap dat ik niet met tabellen werk maar met DIV
Tabellen vervangen voor div's is net zo slecht als tabellen gebruiken imo. Semantiek, people!
pi_56728965
Over semantiek gesproken, nog niemand opgevallen dat de ouwe Bobby validator niet meer beschikbaar is?

http://webxact.watchfire.com/

Dat tooltje gebruikte ik best veel.
pi_56729251
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?
geen 'position: absolute' gebruiken

'position: absolute' is zeer 'evil', het betekent feitelijk dat een element uit de 'flow' van een pagina gehaald wordt en dus niet meer beinvloed door elementen erboven of zelf geen elementen eromheen kan en mag beinvloeddden...

De beste oplossing is eerst om te proberen geheel zonder 'position:absolute uit te komen, meestal levert dat je betere, flexibelere layouts op..
lukt het je niet, is de oplossing om om je element heen een ander element te plaatsen en dàt de position: absolute te geven en alle positionerings-properties (top, left etc.) en binnen dat element kunnen dan je content elementen vallen
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_56729509
Ik zou nieteens wéten hoe je een site bouwt met tables
  donderdag 14 februari 2008 @ 16:17:09 #98
12880 CraZaay
prettig gestoord
pi_56729578
quote:
Op donderdag 14 februari 2008 16:13 schreef mcDavid het volgende:
Ik zou nieteens wéten hoe je een site bouwt met tables
Ik helaas wel, moest laatst iets bouwen wat als het even kon ook in IE4 moest werken...
pi_56729632
quote:
Op donderdag 14 februari 2008 16:17 schreef CraZaay het volgende:

[..]

Ik helaas wel, moest laatst iets bouwen wat als het even kon ook in IE4 moest werken...
Was de klant iemand van een stenen tijdperk of zo?
  donderdag 14 februari 2008 @ 16:22:08 #100
12880 CraZaay
prettig gestoord
pi_56729683
quote:
Op donderdag 14 februari 2008 16:20 schreef Tuvai.net het volgende:

[..]

Was de klant iemand van een stenen tijdperk of zo?
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
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.
  vrijdag 15 februari 2008 @ 11:42:37 #126
12880 CraZaay
prettig gestoord
pi_56745729
Volgens mij is SuperRembo pro genoeg omdat te weten

Het kwam in dit geval door een browserbug van IE in quirksmode.
pi_56746611
Daarbij de methode [code]* {margin:0;padding:0}[/quote] is zelf een erg sloppy wijze om de default layout van browsers opeens te vernietigen, iets waarvan je het nut kunt betwijfelen...

het is juist een pro om zoveel mogelijk binnen je HTML+CSS de ruimte te laten voor specifieke user-bepaalde layout tenzij er een duidelijke grond is dat niet te willen...

dat bv Header-elementen, P-alinea-elementen of UL+LI's een eigen margin en padding hebben die per browser (of in sommige gevallen per user) verschilt is geen probleem zolang je maar het werk van een visuele designer ziet als een 'extensie' op de door de user bepaalde voorkeurslayout
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  vrijdag 15 februari 2008 @ 12:36:20 #128
12880 CraZaay
prettig gestoord
pi_56746842
Mee eens. Ik heb bij wijze van test één keer het "Yahoo! reset stylesheet" gebruikt, en vond het persoonlijk ook helemaal niet prettig.
pi_56746917
Ik maak vrijwel altijd gebruik van de standaardmarges van <p> en <h#> tags. Het enige wat ik vrijwel altijd 0 margin en/of padding meegeef zijn <form> en <fieldset>. *{margin:0 / padding:0;} lijkt me sowieso geen goed idee eigenlijk; zou inhouden dat je voor elk ander element waar het van toepassing is een marge/padding moet gaan verzinnen.
pi_56746931
een duidelijke grond om dat niet te willen lijkt me dat je gewoon wilt dat je site er fatsoenlijk uitziet. Anders kun je al je websites net zo goed als plain text op gaan slaan.
Als om wat voor reden ook de stylesheet niet geladen wordt wordt dat *{margin:0;padding:0} ook niet geladen dus dan gaat gewoon de browsers stanaardlayout in.

-edit-
en ja ik heb het wel gedaan, omdat ik eerst bij zo'n beetje ieder element apart margin en padding 0 aangegeven had. Dan scheelt het nogal.
pi_56746993
quote:
Op vrijdag 15 februari 2008 12:40 schreef mcDavid het volgende:
een duidelijke grond om dat niet te willen lijkt me dat je gewoon wilt dat je site er fatsoenlijk uitziet. Anders kun je al je websites net zo goed als plain text op gaan slaan.
Als om wat voor reden ook de stylesheet niet geladen wordt wordt dat *{margin:0;padding:0} ook niet geladen dus dan gaat gewoon de browsers stanaardlayout in.
In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.
pi_56747034
quote:
Op vrijdag 15 februari 2008 12:43 schreef Tuvai.net het volgende:

[..]

In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.
Ik zou niet weten waarom ik dat zou gebruiken.
Wellicht als een pagina écht gigantisch irritant is opgemaakt, maar met datsoort gepruts staat de styling ook meestal in de HTML dus dan heb je niets aan die optie.
pi_56747113
quote:
Op vrijdag 15 februari 2008 12:45 schreef mcDavid het volgende:

[..]

Ik zou niet weten waarom ik dat zou gebruiken.
Wellicht als een pagina écht gigantisch irritant is opgemaakt, maar met datsoort gepruts staat de styling ook meestal in de HTML dus dan heb je niets aan die optie.
Het is een ideaal hulpmiddeltje om gewoon even snel je Stylesheet uit te zetten of van Stylesheet et switchen, om te zien hoe een pagina zonder opmaak er uit ziet. Bij met tabellen opgezette sites heeft dat inderdaad al geen nut meer nee, omdat alles door elkaar staat.

Overigens doe ik ook altijd een check-ronde door een website die ik maak, zonder stylesheet, vooral wanneer ik er formulieren, functionaliteit en dergelijke aan ga hangen. Ik wil dat al mijn websites te lezen én te gebruiken zijn, ook zonder stylesheet.
  vrijdag 15 februari 2008 @ 12:53:25 #134
12880 CraZaay
prettig gestoord
pi_56747210
Een site bekijken zonder stylesheet is de ideale manier om te testen of de html semantisch correct gebruikt is imo
pi_56747816
quote:
Op vrijdag 15 februari 2008 11:35 schreef mcDavid het volgende:
[..]
Vaak is dat op te lossen door je css te beginnen met de volgende regel:
* {margin:0;padding:0}
Dat is erg lomp als algemene "oplossing". En in dit geval maakt het ook niets uit.
quote:
Op vrijdag 15 februari 2008 12:53 schreef CraZaay het volgende:
Een site bekijken zonder stylesheet is de ideale manier om te testen of de html semantisch correct gebruikt is imo
Ja, of om een site die in FF echt heel brak is nog enigszins leesbaar te krijgen. Ctrl+Shift+S in de dev-toolbar, alleen is die sneltoets in FF3 gekoppeld aan een eigen printscreen functie van FF
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56747979
quote:
Op vrijdag 15 februari 2008 12:43 schreef Tuvai.net het volgende:

[..]

In Firefox: Beeld -> PaginaStijl -> Geen stijl. Heerlijke feature.
Ik bied zelf als alternate stylesheet een CSS bestand aan waarmee de pagina erg minimalistisch wordt. Die kun je in FF dus kiezen via Beeld -> PaginaStijl -> Minimalistic. Handig om al je gebruikers te kunnen bedienen.

Overigens: http://diveintoaccessibility.org/. Verplicht leesvoer.
pi_56774944
quote:
Op donderdag 14 februari 2008 23:49 schreef CraZaay het volgende:

[..]

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.
Ja is slimmer.

http://beerwheels.nl/km/
pi_56855337
Hebben jullie handige links met AJAX voorbeelden?

Ik had een heel handig link met allemaal voorbeelden, echter ben ik deze kwijt

Ik zoek eigelijk; als je met je muis over 'iets' heen gaat, dat er een veld/blok verschijnt met tekst erin.
ne okuyon, bokmu var?
  woensdag 20 februari 2008 @ 10:50:11 #139
12880 CraZaay
prettig gestoord
pi_56855679
Da's geen AJAX
pi_56855879
quote:
Op woensdag 20 februari 2008 10:50 schreef CraZaay het volgende:
Da's geen AJAX
Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?
ne okuyon, bokmu var?
pi_56855904
quote:
Op woensdag 20 februari 2008 11:00 schreef saban het volgende:

[..]

Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?
Het is pas AJAX wanneer jij de gegevens pas van de server download als je met je muis over het tekstveld gaat.
pi_56855924
quote:
Op woensdag 20 februari 2008 11:01 schreef Geqxon het volgende:

[..]

Het is pas AJAX wanneer jij de gegevens pas van de server download als je met je muis over het tekstveld gaat.
Dat zeg ik toch?
ne okuyon, bokmu var?
pi_56856090
quote:
Op woensdag 20 februari 2008 11:02 schreef saban het volgende:

[..]

Dat zeg ik toch?

Koffie. Eerst koffie, en dan praten we verder.
pi_56856158
quote:
Op woensdag 20 februari 2008 11:10 schreef Geqxon het volgende:
[..]
Koffie. Eerst koffie, en dan praten we verder.
Saban kan ook wel wat koffie gebruiken, dit is het CSS voor dummies topic, niet JavaScript voor dummies
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56856179
quote:
Op woensdag 20 februari 2008 11:13 schreef SuperRembo het volgende:

[..]

Saban kan ook wel wat koffie gebruiken, dit is het CSS voor dummies topic, niet JavaScript voor dummies
Ik wou er geen apart topic voor starten
Trouwens doe mij maar cappuchino
ne okuyon, bokmu var?
  woensdag 20 februari 2008 @ 12:12:29 #146
12880 CraZaay
prettig gestoord
pi_56857243
quote:
Op woensdag 20 februari 2008 11:00 schreef saban het volgende:

[..]

Jawel, ik wil de informatie pas ophalen als je met de muis erover heen gaat. De data wordt dus pas bekend bij het 'Scroll over', dat is toch AJAX?
99% van de tijd wordt een reeds bestaande div (in de DOM) getoond/verborgen met CSS/JS. Beetje afhankelijk van de situatie of het zinnig is om daar steeds een HTTP-request voor te maken.
pi_56857426
saban, het is geen ajax. Die 2 KB tekst en CSS gegevens kan je wel hiden en showen op een mouseover zonder serverside processing.
We'll keep on whispering our mantras.
pi_56857770
quote:
Op woensdag 20 februari 2008 10:32 schreef saban het volgende:
Hebben jullie handige links met AJAX voorbeelden?

Ik had een heel handig link met allemaal voorbeelden, echter ben ik deze kwijt

Ik zoek eigelijk; als je met je muis over 'iets' heen gaat, dat er een veld/blok verschijnt met tekst erin.
ajax is het pas als je op het moment dat een gebruiker een bepaalde handeling doet, daadwerkelijk een nieuw request maakt naar de server en deze informatie opvraagt die na het inladen verder verwerkt worden....

wat je beschrijft is gewoon een normaal 'onmouseover-event waarbij bepaalde informatie eerst niet getoond wordt, maar pas getoond wordt bij die onmouseover... als het verder geen nut heeft om een 'asynchroon request te doen voor die informatie en die informatie ook an sich bij het allereerste laden van de pagina al meegestuurd kan worden (maar enkel niet zichtbaar op de pagina dan getoond wordt), is het aan te raden dat te doen, het is nutteloos enkel modewoordjes te willen toepassen als deze niet expliciet een meerwaarde hebben tov een eenvoudigere manier (eenvoudiger is altijd beter als het aan je eisen ook voldoet)
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_56858258
quote:
Op woensdag 20 februari 2008 12:12 schreef CraZaay het volgende:

[..]

99% van de tijd wordt een reeds bestaande div (in de DOM) getoond/verborgen met CSS/JS. Beetje afhankelijk van de situatie of het zinnig is om daar steeds een HTTP-request voor te maken.
Kun je eindeloos op door debateren. Vaak hoor je mensen zeggen dat AJAX niet té overmatig gebruikt word omdat je anders een overkill aan HTTP requests krijgt, maar dan kun je je afvragen wat nou zwaarder is; een HTTP request die een lijst met dynamische gegevens opvragen op het moment dat een gebruiker deze opvraagt (bijvoorbeeld door een druk op een knop), of standaard op elke pagina in een onzichtbare div deze lijst gooien, maar die niet altijd gebruikt word.
  woensdag 20 februari 2008 @ 13:50:17 #150
12880 CraZaay
prettig gestoord
pi_56859219
quote:
Op woensdag 20 februari 2008 13:09 schreef Tuvai.net het volgende:

[..]

Kun je eindeloos op door debateren. Vaak hoor je mensen zeggen dat AJAX niet té overmatig gebruikt word omdat je anders een overkill aan HTTP requests krijgt, maar dan kun je je afvragen wat nou zwaarder is; een HTTP request die een lijst met dynamische gegevens opvragen op het moment dat een gebruiker deze opvraagt (bijvoorbeeld door een druk op een knop), of standaard op elke pagina in een onzichtbare div deze lijst gooien, maar die niet altijd gebruikt word.
Absoluut, vandaar dat ik aangaf dat het afhankelijk is van de situatie in de hoeveelheid data. je moet een beetje de "sweet spot" zoeken inderdaad,
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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