[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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,
pi_56859431
quote:
Op woensdag 20 februari 2008 12:22 schreef NiteSpeed het volgende:
saban, het is geen ajax. Die 2 KB tekst en CSS gegevens kan je wel hiden en showen op een mouseover zonder serverside processing.
Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
ne okuyon, bokmu var?
pi_56859551
AJAX staat voor Asnynchronus Javascript And XML

Heeft dus weinig met CSS te maken, totdat je de boel wilt gaan opmaken.
pi_56859749
quote:
Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..

de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_56859847
quote:
Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?
  woensdag 20 februari 2008 @ 14:45:15 #155
12880 CraZaay
prettig gestoord
pi_56860486
quote:
Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.
pi_56878230
quote:
Op woensdag 20 februari 2008 14:13 schreef RM-rf het volgende:

[..]

Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..

de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?
Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.
ne okuyon, bokmu var?
pi_56878248
quote:
Op woensdag 20 februari 2008 14:17 schreef Geqxon het volgende:

[..]

Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?
Natuurlijk kan dat Was alleen aan het rondkijken/vragen/zoeken of het mogelijk was (tuurlijk wel), maar of het ook efficient is voor de tijd dat ik er in stop
quote:
Op woensdag 20 februari 2008 14:45 schreef CraZaay het volgende:

[..]

Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.
Per ID nu 15 velden (in zelfde tabel), dit later uitgebreid worden door info ook uit andere tabellen op te vragen.
De hoeveelheid ID kan verschillen, van tien tot een paar honderd.
ne okuyon, bokmu var?
pi_56879934
quote:
Op donderdag 21 februari 2008 09:14 schreef saban het volgende:

[..]

Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.
Dat is onzin, serverload is geen 2-dimensionale absoluutheid..

ik zei niet voor niks dat het gebruik van ajax in deze 'verlicht iig vrijwel geen enkele structurele belasting op de server'

het enige verschil dat je zou 'winnen' zou een enkele sqlquery zijn om de betreffende data op te vragen (ervanuitgaande dat de data uit een db komt) wat milli-microseconden rendertijd en een paar bytes aan data...
zodra echter een gebruik enthousiast met zn muis over de elementen beweegt krijg je een veel zwaardere belasting, omdat voor iedere mouseover dus een separate reqiuest komt, een aparte query uitgevoerd moet worden... iedere 'winst' wat betreft serverbelasting is minimaal en niet structureel die je had verlies je razend snel zodra er ook gebruik van gemaakt wordt..

bedenk ook dat een server helemaal geen problemen ermee heeft ipv in 0.135 seconde in 0.137 seconde een pagina te renderen en server en of deze ipv 6.056 ipv 6.012 Bytes groot is...

een 'que' aan requests kan eerder laadproblemen opleveren, zowel aan de serverside (het aantal connecties welke een server aankan zal eerder beperkt zijn en hierdoor kunnen request in de wachtrij geplaatst).. maar ook aan de clientside, meestal betekent ajax toch dat er na het event dat het request ooproept eventjes gewacht moet worden totdat het request geplaatst is en de data teruggelezen... juist zulk een vertraging is bij mouseovers mogelijk een ergenis, helemaal als het gaat om een hele rij van elementen die op een mouseover zo'n request oproepen (het effect dat je kunt krijgen is dat als de gebruiker toevallig met zn muispointer over de elementen heenbeweegt zelfs zonder te weten hermee data op te vragen, opeens meerdere requests geplaats worden en het enkele seconden duurt voor deze afgehandeld zijn).

maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_56880253
RM-rf waarom zo agressief opgesteld

Als ik het beter zou weten was ik hier niet terecht.
Zo leer ik nog eens wat
ne okuyon, bokmu var?
pi_56880373
quote:
Op donderdag 21 februari 2008 10:47 schreef RM-rf het volgende:

[..]

maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...
Dat laatste zinnetje verneukt echt je hele post, waar misschien toch wel een kern van waarheid in zat
  donderdag 21 februari 2008 @ 14:27:08 #161
12880 CraZaay
prettig gestoord
pi_56884258
Sterker nog, inhoudelijk was 'ie correct
pi_56884910
quote:
Op donderdag 21 februari 2008 14:27 schreef CraZaay het volgende:
Sterker nog, inhoudelijk was 'ie correct
Hij mag het later nog eens proberen.
  zaterdag 1 maart 2008 @ 13:49:12 #163
73232 De_Hertog
Aut bibat, aut abeat
pi_57080528
Ik heb een layout gemaakt met een footer onderaan, dat werkt op zich prima, behalve wanneer de div boven de footer een plaatje bevat dat langer is dan de tekst. Dit is mijn (relevante) css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		body {
   height: 100%;
}

#header {
    position: relative;
    width: 100%;  
}

#content {
    position: relative;
    margin-bottom: 20px;
}


#footer {  
    position: relative;
    height: 20px; 
}


Als ik dan vervolgens zo'n pagina er in gooi:
1
2
3
4
5
6
7
8
9
10		<div id="header">Title</div>

<div id="content">
  <p>
    <img src="plaatje.jpg" alt="Een plaatje van meer dan een regel tekst">
    Hier dan een regel tekst
  </p>
</div>

<div id="footer"> En hier dan de footer</div>


Dan komt de footer dus onderaan de tekst, en loopt hij dus over het plaatje heen. Ik wil dat de tekst onderaan de gehele content blijft staan.

Geprobeerd:
content height: 100% geven, maar dan loopt bij veel content de tekst door tot voorbij de content
conten min-height: 100%; geven, maar dan staat de footer bij weinig content te ver weg
img display:block; geven,. vond ik op internet, hielp niets
margins van footer of content aanpassen werkt wel maar geeft ook weer te veel witruimte, en is bovendien geen permanente oplossing.

Kortom, hoe kan ik er voor zorgen dat de img meegeteld wordt als de hoogte van de div waar de footer onder komt?
Mary had a little lamb
Then Mary had dessert
pi_57084577
Waarschijnlijk heeft het plaatje een position:absolute edit of een float:left/right

Hier gaat het verder gewoon goed als ik bovenstaande code test.
pi_57084616
Ik heb daar een werkende oplossing voor, maar die kan ik zo snel even niet vinden. Volgens mij is het iets als:

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		html, body {
   margin: 0;
   padding: 0;
   min-height: 100%;
}
#container {
   min-height: 100%
   margin-bottom: -20px;
}
#clearfooter {
   height: 20px;
}
#footer {
   height: 20px;
}


html
1
2
3
4
5
6
7
8
9
10
11
12
13
14		<html>
<body>
<div id="container">
<div id="header">Title</div>
<div id="content">
  <p>
    <img src="plaatje.jpg" alt="Een plaatje van meer dan een regel tekst">
    Hier dan een regel tekst
  </p>
  <div id="clearfooter"></div>
</div>
<div id="footer">Hier de footer</div>
</body>
</html>


Daar moeten dan nog wel een paar IE-hacks bij.
fokstok.nl
  maandag 3 maart 2008 @ 20:50:48 #166
73232 De_Hertog
Aut bibat, aut abeat
pi_57135313
quote:
Op zaterdag 1 maart 2008 17:22 schreef mcDavid het volgende:
Waarschijnlijk heeft het plaatje een position:absolute edit of een float:left/right

Hier gaat het verder gewoon goed als ik bovenstaande code test.
Ik heb even nagekeken, en het plaatje heeft een align: right waardoor het mis gaat. Zonder die align gaat het wel goed (maar komt er uiteraard geen plaatje rond de tekst). Kortom, de vraag is, hoe kan ik een plaatje goed in de tekst plaatsen terwijl de footer blijft staan?
Mary had a little lamb
Then Mary had dessert
pi_57203977


Bah. Dat ziet er niet uit. In Safari is-ie wel mooi en zelfs in Internet explorer. Ik wil dus graag dat de tekst die de gebruiker invoert mooi verticaal gecentreerd is. Met paddings etc zou ik het kunnen forceren, maar dat zou betekenen dat t er in Safari ed. niet mooi meer uitziet (de invoertekst te dicht tegen de onderrand aan.

Mijn css voor de input

1
2
3
4
5
6
7
8
9
10
11
12		input
{
   border: 1px solid #000000;
   background-image: url('../img/inputback.jpg');
   background-repeat: repeat-x;
   font-family: Arial;
   font-size: 14px;
   font-weight: normal;
   color: #322F33;
   height: 21px;
   line-height: 21px
}


Heeft iemand een idee?

Edit: Handig om erbij te vermelden dat het dus niet netjes in Firefox wordt weergegeven

[ Bericht 6% gewijzigd door GVRuud op 06-03-2008 19:49:24 (stom) ]
  donderdag 6 maart 2008 @ 19:59:03 #168
12880 CraZaay
prettig gestoord
pi_57204447
Safari doet sowieso niets met die paddings toch? Voor zover ik weet worden de form elementen door Safari helemaal onafhankelijk van de CSS gerenderd.

Maar los daarvan: wat is het probleem als je boven en onder dezelfde padding gebruikt? Dan staat 'ie gewoon in het midden.
  donderdag 6 maart 2008 @ 20:00:17 #169
12880 CraZaay
prettig gestoord
pi_57204488
quote:
Op maandag 3 maart 2008 20:50 schreef De_Hertog het volgende:

[..]

Ik heb even nagekeken, en het plaatje heeft een align: right waardoor het mis gaat. Zonder die align gaat het wel goed (maar komt er uiteraard geen plaatje rond de tekst). Kortom, de vraag is, hoe kan ik een plaatje goed in de tekst plaatsen terwijl de footer blijft staan?
Plaatje floaten en de float clearen op het element dat je er altijd onder wilt hebben (footer in dit geval)?
pi_57204829
quote:
Op donderdag 6 maart 2008 19:59 schreef CraZaay het volgende:
Safari doet sowieso niets met die paddings toch? Voor zover ik weet worden de form elementen door Safari helemaal onafhankelijk van de CSS gerenderd.

Maar los daarvan: wat is het probleem als je boven en onder dezelfde padding gebruikt? Dan staat 'ie gewoon in het midden.
Safari heeft sinds versie 3 ook cssbare form elementen.

Met die paddings lukt inderdaad wel als ik ze boven en onder opgeef...
Na 8 uur prutsen aan dit project ben ik blijkbaar niet meer zo scherp... deadlines...

Maar ergens anders heb ik diezelfde input-elementen, alleen met een kleinere lettergrootte. De input wordt dan ook automatisch kleiner, en met het aanpassen van de paddings zou dit idd wel te verhelpen zijn. Is er niet een mogelijkheid dat-ie de inputtekst altijd centreert in het inputveld, ongeacht de height die ik opgeef?
  donderdag 6 maart 2008 @ 20:17:17 #171
12880 CraZaay
prettig gestoord
pi_57204995
Denk niet dat dat cross browser gaat werken. Zou met vertical-align moeten als het überhaupt kan.
pi_57205617
vertical-align leverde helaas ook niets op. Dat wordt dus maar met die paddings werken. Bedankt!
pi_57301169
Ik heb een CSS probleem. Het gaat hierbij om het positioneren van vlakken. Ik positioneer 5 vlakken op de volgende manier:

222111111111111111111111111111
222555555555555555444444444444
222555555555555555444444444444
333
333

Nu wordt dat in IE goed weergegeven(gek genoeg), maar in FireFox wordt het vlak 5, 1 rij naar boven gedrukt.
Het bovenste gedeelte van vlak 5 verdwijnt dus onder vlak 1 in FF. Is dit een veel voorkomend probleem? En is er een duidelijke oplossing voor?

Mocht dit niet genoeg informatie zijn, dan kan ik altijd de code nog erbij zetten. Ik heb ook screenshots gemaakt, heb alleen geen webspace.

Mvg. Machiel

PS. Mijn excuses als dit niet goed gepost is
pi_57301314
quote:
Op dinsdag 11 maart 2008 10:01 schreef allesisgekozen het volgende:
Ik heb een CSS probleem. Het gaat hierbij om het positioneren van vlakken. Ik positioneer 5 vlakken op de volgende manier:

222111111111111111111111111111
222555555555555555444444444444
222555555555555555444444444444
333
333

Nu wordt dat in IE goed weergegeven(gek genoeg), maar in FireFox wordt het vlak 5, 1 rij naar boven gedrukt.
Het bovenste gedeelte van vlak 5 verdwijnt dus onder vlak 1 in FF. Is dit een veel voorkomend probleem? En is er een duidelijke oplossing voor?

Mocht dit niet genoeg informatie zijn, dan kan ik altijd de code nog erbij zetten. Ik heb ook screenshots gemaakt, heb alleen geen webspace.

Mvg. Machiel

PS. Mijn excuses als dit niet goed gepost is
Heb je de pagina online staan? Moeten natuurlijk wel je code kunnen bekijken om te zien wat er mis is.

Even een tip geheel terzijde. Als je een nieuwe layout gaat maken, begin dan altijd met de standaardindeling/basis en geef deze desnoods felle kleuren mee zodat je goed kunt zien hoe ze weergeven worden. In je voorbeeld die ik in feite een layout vrij recht toe recht aan ingedeeld is.
pi_57301641
hier is de code van de css file (ik heb sinds kort geen webspace meer, sorry) Het gaat dan om de laatste div (de zwarte) :

* {
margin: 0px;
padding: 0px;
border: 0px;
}

html, body {
width: 100%;
height: 100%;
}

body {
font-family: "Lucida Sans Unicode", "Lucida Grande", arial, verdana;
font-size: 11px;
color: #b5bce8;
background: url('../images/body_bg.jpg') repeat-x 0px 0px #b5bce8;

}

input {
font-family: "Lucida Sans Unicode", "Lucida Grande", arial, verdana, helvetiva;
font-size: 11px;
}

#wrapper {
margin: 0 auto;
width: 1076px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url('../images/wrapper_bg.jpg') repeat-y 0px 0px;
}

#breadcrumb {
width: 905px;
height: 40px;
background-color: red;
float:right;
}

#menu {
width: 171px;
height: 430px;
background-color: yellow;
float: left;
}

#logo {
width: 171px;
height: 170px;
background-color: green;
}

#fotoblok {
width: 338px;
height: 290px;
float: right;
background-color: orange;
}

#titelblok {
height: 130px;
background-color: black;
}

#maintekst {
width: 567px;
height: 100%;
min-height: 400px;
background-color: purple;
}

En de HTML:

<body>
<div id="wrapper">

<div id="breadcrumb"></div>
<div id="menu">
<div id="logo"></div>
</div>
<div id="fotoblok"></div>
<div id="titelblok"></div>
<div id="maintekst"></div>

</div>


</body>
  dinsdag 11 maart 2008 @ 11:31:41 #176
12880 CraZaay
prettig gestoord
pi_57302829
Welk doctype gebruik je?
pi_57303206
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" dir="ltr">

is dat de slechte variant?
  dinsdag 11 maart 2008 @ 12:34:41 #178
12880 CraZaay
prettig gestoord
pi_57304039
Nee hoor, xhtml 1.0 strict is prima
pi_57305101
wtf ik zit wat te klooien met bovenstaande code, maar in Fx schuiven 2 divs die naast elkaar staan, waarvan er één een float:left heef, gewoon achter elkaar langs
Ik snap er geen yota meer van. Ik had allang alles met position gedaan.
pi_57306772
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
  dinsdag 11 maart 2008 @ 15:13:04 #181
12880 CraZaay
prettig gestoord
pi_57306932
quote:
Op dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
Omdat je alles uit de flow haalt, al doe je dat met floats ook gedeeltelijk
pi_57307007
quote:
Op dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
Als je objecten absoluut positioneert, houden ze geen rekening meer met elkaar. Soms is dit gewenst, soms niet. Het ligt er natuurlijk maar net aan wat je wil doen.
pi_57307298
quote:
Op dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
jep

geef eerst die wrapper een position: relative, daarna kun je alle div's m.b.v. position:absolute gewoon exact positioneren.

Het is gewoon een goeie methode om te positioneren. Je moet alleen wel oppassen dat je je html semantisch houdt. Als je alles absolute positioneert maakt het namelijk geen reet meer uit waar je wat neerzet (je kunt bijv. de div met de header helemaal onderaan zetten) en dat kan chaos opleveren.
Vandaar dat over het algemeen het advies is indien mogelijk liever geen position:absolute te gebruiken.

-edit-
er is wel wat voor te zeggen zoveel mogelijk div's in de float te houden, maar met een layout met een fixed breedte zoals die van jou lijkt me dat niet erg noodzakelijk.
pi_57317426
bedankt voor alle reacties!
eerste wat ik morgenvroeg doe is uitproberen met position.
pi_57322628
Zo, zojuist ermee zitten klooien.
Firefox vindt het dan allemaal heel mooi, en klopt dus ook. Maar IE zegt dan: nee, ik doe het lekker allemaal 10px meer naar rechts. ik _haat_ verschillende browsers!
  woensdag 12 maart 2008 @ 09:50:24 #186
12880 CraZaay
prettig gestoord
pi_57322664
Terwijl je geen floats gebruikt?
pi_57323684
der zitten een paar floats in, meot ik dat consequent gebruiken in elke div?
en trouwens, IE neemt met position absolute een paar pxs meer naar rechts, met position relative neemt FF de wrapper en IE de vorige gemaakte div's. Wellicht regel ik even een stukje webspace zodat het makkelijker is om ernaar te kijken
pi_57323735
quote:
Op woensdag 12 maart 2008 09:46 schreef allesisgekozen het volgende:
Zo, zojuist ermee zitten klooien.
Firefox vindt het dan allemaal heel mooi, en klopt dus ook. Maar IE zegt dan: nee, ik doe het lekker allemaal 10px meer naar rechts. ik _haat_ verschillende browsers!
heerlijk, double-margin-bug.
In principe moet het als je alles absolute positioneert altijd goed gaan.
pi_57324324
zo, heb het even online gezet:

http://preview.anchormen.nl/css-test/

Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar
  woensdag 12 maart 2008 @ 12:40:24 #190
12880 CraZaay
prettig gestoord
pi_57325629
quote:
Op woensdag 12 maart 2008 10:58 schreef mcDavid het volgende:

[..]

heerlijk, double-margin-bug.
In principe moet het als je alles absolute positioneert altijd goed gaan.
Precies, vandaar dat ik vroeg of 'ie nog floats gebruikte
pi_57326505
quote:
Op woensdag 12 maart 2008 11:32 schreef allesisgekozen het volgende:
zo, heb het even online gezet:

http://preview.anchormen.nl/css-test/

Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar
Wat gebeurt er eigenlijk als je in alle div's wat tekst zet?

-edit-
ff geprobeerd.. het gekke is: de tekst schuift níét onder de andere divs! (maar de div zelf dus wel)
http://duft.nl/web/css-test.htm

[ Bericht 8% gewijzigd door mcDavid op 12-03-2008 13:34:04 ]
pi_57326940
hmmm..nu zegt mij dat natuurlijk helemaal niks (post niet voor niks op newbie forum :p)
maar tekst ziet ie anders als de divs?
pi_57327366
quote:
Op woensdag 12 maart 2008 13:53 schreef allesisgekozen het volgende:
hmmm..nu zegt mij dat natuurlijk helemaal niks (post niet voor niks op newbie forum :p)
maar tekst ziet ie anders als de divs?
Ik vind het zelf ook een beetje vaag.
De site die je online hebt gezet werkt nog volledig met de floats.
De div's #titelblok en #maintekst verdwijnen gedeeltelijk onder andere divs
Maar de tekst in die divs staat wél op de goeie positie, in de float.

Wat je nog kunt proberen is wat er gebeurt als je alle tags m.b.t. de grootte van die divs eruit haalt, zodat de grootte puur bepaald wordt door de hoeveelheid tekst die erin staat
pi_57333148
quote:
Op woensdag 12 maart 2008 11:32 schreef allesisgekozen het volgende:
zo, heb het even online gezet:

http://preview.anchormen.nl/css-test/

Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar
Dat is op te lossen door #titelblok een breedte mee te geven. En een float: right, natuurlijk.
fokstok.nl
pi_57334007
light, je bent mn held.
alles werkt nu. alle anderen natuurlijk ook bedankt
pi_57337822
Soms kan het zoiets stoms zijn heh

Weet iemand trouwens of het m.b.v. CSS mogelijk is woorden die zo gigantisch lang zijn dat ze niet in een div of table-cel passen, tóch af te kappen?
  woensdag 12 maart 2008 @ 22:30:57 #197
12880 CraZaay
prettig gestoord
pi_57338258
quote:
Op woensdag 12 maart 2008 22:18 schreef mcDavid het volgende:
Soms kan het zoiets stoms zijn heh

Weet iemand trouwens of het m.b.v. CSS mogelijk is woorden die zo gigantisch lang zijn dat ze niet in een div of table-cel passen, tóch af te kappen?
Nee, dat kan niet. Je kan hoogstens de parent overflow: hidden geven, that's it.
pi_57339148
Mja dat zuigt ook wel. Dan gaan we het toch maar eens javascripten.
pi_57339790
Ik heb ook nog een probleempje waar ik wel wat hulp bij kan gebruiken. Ik probeer een menu te maken. Relevante html:

1
2
3
4
5		<ul>
  <li><a href="link1.html"><img src="plaatje1.gif"/></a></li>
  <li><a href="link2.html"><img src="plaatje2.gif"/></a></li>
  <li><a href="link3.html"><img src="plaatje3.gif"/></a></li>
<ul>


De bedoeling is dat de plaatjes netjes tegen elkaar aan komen te liggen. Dat lukt in FF, maar niet in IE.

1
2
3
4
5
6
7
8
9
10
11
12
13		li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li img {
  margin: 0;
  padding: 0;
}
li a {
  margin: 0;
  padding: 0;
}


Uiteraard valide CSS. Het html-bestand is valide XHTML 1.0 Transitional (met doctype). Wat hierboven staat is dus niet het volledige bestand, maar dat lijkt me ook niet nodig.
fokstok.nl
pi_57341456
quote:
Op woensdag 12 maart 2008 23:14 schreef Light het volgende:
Ik heb ook nog een probleempje waar ik wel wat hulp bij kan gebruiken. Ik probeer een menu te maken. Relevante html:


[ code verwijderd ]


De bedoeling is dat de plaatjes netjes tegen elkaar aan komen te liggen. Dat lukt in FF, maar niet in IE.


[ code verwijderd ]


Uiteraard valide CSS. Het html-bestand is valide XHTML 1.0 Transitional (met doctype). Wat hierboven staat is dus niet het volledige bestand, maar dat lijkt me ook niet nodig.
Er bestaat ook nog een line-height

-edit-
en ik wil je erop wijzen dat links met een plaatje ipv tekst lastig zijn voor zoekmachines, textbrowsers, enz.
Een herhaalde achtergrondafbeelding met tekst is een betere optie.

[ Bericht 10% gewijzigd door mcDavid op 12-03-2008 23:54:27 ]
pi_57342009
quote:
Op woensdag 12 maart 2008 23:46 schreef mcDavid het volgende:

[..]

Er bestaat ook nog een line-height
Daar kan ik nog wel mee gaan spelen morgen.
quote:
-edit-
en ik wil je erop wijzen dat links met een plaatje ipv tekst lastig zijn voor zoekmachines, textbrowsers, enz.
Een herhaalde achtergrondafbeelding met tekst is een betere optie.
Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
fokstok.nl
  donderdag 13 maart 2008 @ 00:07:06 #202
12880 CraZaay
prettig gestoord
pi_57342074
quote:
Op donderdag 13 maart 2008 00:03 schreef Light het volgende:

Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTML
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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