[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_56477512
[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7

Mijn laatste post:
quote:
Wat nog vager is: Mijn link probleem in IE. Kijk eens op www.beerwheels.nl met IE 6. Ik heb wel van Install all IE ofzoiets. Maar als je eenlink weergeeft wordt de pagina wit
Vraag:
Zullen we een mooie OP maken? Met wat handige links?
pi_56478308
@Flaccid: De vorige keer dat ik zoiets vroeg (Javascript voor dummies) werd er gezegd dat ik maar wat moois moest maken.

> Doe je ding!
pi_56478504
quote:
Op zaterdag 2 februari 2008 13:35 schreef fokME2 het volgende:
@Flaccid: De vorige keer dat ik zoiets vroeg (Javascript voor dummies) werd er gezegd dat ik maar wat moois moest maken.

> Doe je ding!
Heb het niet meer gezien toen

I'll give it a shot!
pi_56478702
Ik zie er niets aan. Wat moet ik doen om het probleem te simuleren?
pi_56478814
quote:
Op zaterdag 2 februari 2008 14:01 schreef Tarabass het volgende:
Ik zie er niets aan. Wat moet ik doen om het probleem te simuleren?
?
  zaterdag 2 februari 2008 @ 17:38:36 #6
12880 CraZaay
prettig gestoord
pi_56482104
quote:
Op zaterdag 2 februari 2008 12:29 schreef Light het volgende:

*code*
Helpt het als je "<br />" gebruikt (dus met een space)? Het is namelijk een known bug dat IE problemen heeft met de versie zonder space.
pi_56482278
tvp, iemand nog een antwoord op mijn vraag
quote:
Op zaterdag 2 februari 2008 11:33 schreef Chandler het volgende:
Ik heb een vraagje

Ik wil graag afbeeldingen in een horizontale box laten zien met alleen een horizontale scrollbar.

Hoogte: 150; breedte: 500; Afbeeldingen 128px hoog/breed

Nu heb ik een div met een vaste breedte maar overflow: auto; echter komen de afbeeldingen toch onderelkaar en krijg ik een schollbalk aan de rechterkant terwijl ik deze aan de onderkant wil.

Weet iemand een oplossing hiervoor? of een voorbeeld? (Iframe is geen oplossing )
Just say hi!
pi_56482797
quote:
Op zaterdag 2 februari 2008 17:49 schreef Chandler het volgende:
tvp, iemand nog een antwoord op mijn vraag
[..]
Ja ik vroeg of je een voorbeeld je kan doen hoe je je afbeeldingen plaatst?
kan je stukje code geven?
pi_56483615
quote:
Op zaterdag 2 februari 2008 17:38 schreef CraZaay het volgende:

[..]

Helpt het als je "<br />" gebruikt (dus met een space)? Het is namelijk een known bug dat IE problemen heeft met de versie zonder space.
Dat weet ik niet, en 'k kan het hier ook niet testen. Geen IE thuis
fokstok.nl
pi_56487826
quote:
Op zaterdag 2 februari 2008 19:18 schreef Light het volgende:

[..]

Dat weet ik niet, en 'k kan het hier ook niet testen. Geen IE thuis
Kun je het hierin niet testen: http://browsershots.org/
pi_56494753
quote:
Op zaterdag 2 februari 2008 18:25 schreef Flaccid het volgende:

[..]

Ja ik vroeg of je een voorbeeld je kan doen hoe je je afbeeldingen plaatst?
kan je stukje code geven?
Simpel

1
2
3
4
5
6
7		<div style="height: 150px; overflow: scroll;">
    <img src="x.png" width="128" height="128"  style="float: left; padding: 10px;">
    <img src="x.png" width="128" height="128"  style="float: left; padding: 10px;">
    <img src="x.png" width="128" height="128"  style="float: left; padding: 10px;">
    <img src="x.png" width="128" height="128"  style="float: left; padding: 10px;">
    <img src="x.png" width="128" height="128"  style="float: left; padding: 10px;">
</div>


Maar dan nog blijven ze onder elkaar staan :{
Just say hi!
  zondag 3 februari 2008 @ 10:16:37 #12
12880 CraZaay
prettig gestoord
pi_56495090
Men neme een div van 500px breed (zet hierin de foto's), en plaatse deze weer in een andere div van 150px breed met "overflow: auto". Zou moeten werken volgens mij.
pi_56505992
Welke shizzle als DOCTYPE moet je voor je html zetten?
1
2		<!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">

Doe ik nu. Is dit verantwoord?
pi_56506263
quote:
Op zondag 3 februari 2008 19:21 schreef Flaccid het volgende:
Welke shizzle als DOCTYPE moet je voor je html zetten?
[ code verwijderd ]

Doe ik nu. Is dit verantwoord?
Die is prima, mits je daarna ook echt XHTML gebruikt.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56506354
quote:
Op zondag 3 februari 2008 08:55 schreef Chandler het volgende:

[..]

Simpel
[ code verwijderd ]

Maar dan nog blijven ze onder elkaar staan :{
CSS heeft nog een andere optie
1overflow-y:scroll;

dan heb je alleen een verticale scrollbar
[ alle babes op 1 pagina via fok!wiki -bijgewerkt tot 20/10/2015 ]
Leve Kim , Leve Maduro , Leve Castro
#freeTarik #freeDemon_from_heaven
pi_56507385
quote:
Op zondag 3 februari 2008 19:41 schreef BabeWatcher het volgende:

[..]

CSS heeft nog een andere optie
[ code verwijderd ]

dan heb je alleen een verticale scrollbar
die wordt voggesmij niet gesupport door IE 6.
is het waar dat je kan kijken met welke editor een site gemaakt is?
pi_56507398
Helaas, het werkt niet, wat ik ook probeer.

1
2
3
4
5
6
7
8
9
10
11		<div style="height: 150px; width: 500px; overflow-y: scroll;">
     <div style="width: auto;">
        <img src="#" height="128" width="128" style="padding: 10px;">
        <img src="#" height="128" width="128" style="padding: 10px;">
        <img src="#" height="128" width="128" style="padding: 10px;">
        <img src="#" height="128" width="128" style="padding: 10px;">
        <img src="#" height="128" width="128" style="padding: 10px;">
        <img src="#" height="128" width="128" style="padding: 10px;">
        <img src="#" height="128" width="128" style="padding: 10px;">
     </div>
</div>


Anyone? :D
Just say hi!
pi_56507512
quote:
Op zondag 3 februari 2008 20:26 schreef Chandler het volgende:
Helaas, het werkt niet, wat ik ook probeer.
[ code verwijderd ]

Anyone?
iframe denk ik dan

Ik heb een achtergrond die anders scrollt dan mijn div.
www.joristimes.nl/test

Als je het scherm groter of kleiner maatk zit er af en toe 1 pixel verschil tussen de border van de achtergrond en de rode div

[ Bericht 13% gewijzigd door Flaccid op 03-02-2008 20:43:06 ]
pi_56507937
quote:
Op zondag 3 februari 2008 20:26 schreef Chandler het volgende:
Helaas, het werkt niet, wat ik ook probeer.
[ code verwijderd ]

Anyone?
niet helemaal goed gelezen, probeer overflow-x: scroll;
[ alle babes op 1 pagina via fok!wiki -bijgewerkt tot 20/10/2015 ]
Leve Kim , Leve Maduro , Leve Castro
#freeTarik #freeDemon_from_heaven
pi_56519719
beiden werken niet
Just say hi!
pi_56522264
1
2
3
4
5
6
7
8
9
10
11		<div style="height: 150px; width: 500px; overflow-x: scroll; overflow-y: hidden;">
     <div style="width: 1500px; height: 148px;">
        <img src="#" height="128" width="128" style="padding: 10px;" />
        <img src="#" height="128" width="128" style="padding: 10px;" />
        <img src="#" height="128" width="128" style="padding: 10px;" />
        <img src="#" height="128" width="128" style="padding: 10px;" />
        <img src="#" height="128" width="128" style="padding: 10px;" />
        <img src="#" height="128" width="128" style="padding: 10px;" />
        <img src="#" height="128" width="128" style="padding: 10px;" />
     </div>
</div>
pi_56524919
Wat kan je het beste voor je <html> tag zetten, doctype enzo?
pi_56525024
inline styles zijn erg lelijk!
Steam - SC2
  maandag 4 februari 2008 @ 14:17:32 #24
12880 CraZaay
prettig gestoord
pi_56525824
quote:
Op zondag 3 februari 2008 20:26 schreef Flaccid het volgende:

is het waar dat je kan kijken met welke editor een site gemaakt is?
Nee, tenzij je dit expliciet in de source zet.
quote:
Op maandag 4 februari 2008 13:30 schreef Flaccid het volgende:
Wat kan je het beste voor je <html> tag zetten, doctype enzo?
Nee, dat kan niet het beste: dat moet zelfs. Niet meer, en niet minder
pi_56526536
quote:
Op maandag 4 februari 2008 14:17 schreef CraZaay het volgende:

[..]

Nee, tenzij je dit expliciet in de source zet.
[..]

Nee, dat kan niet het beste: dat moet zelfs. Niet meer, en niet minder
Welke doctype moet ik gebruiken?
http://www.w3schools.com/tags/tag_doctype.asp
  maandag 4 februari 2008 @ 19:00:20 #26
12880 CraZaay
prettig gestoord
pi_56531392
quote:
Op maandag 4 februari 2008 14:52 schreef Flaccid het volgende:

[..]

Welke doctype moet ik gebruiken?
http://www.w3schools.com/tags/tag_doctype.asp
Die pagina lijkt me vrij helder? Transitional HTML 4.01 of XHTML 1.0 is altijd een veilige keuze.
pi_56531610
quote:
Op maandag 4 februari 2008 11:11 schreef Tarabass het volgende:

[ code verwijderd ]
Deze werkt idd goed, echter is nu het probleem dat je met een vaste maat werkt. Met 10 afbeeldingen is dat geen probleem maar heb je tussen de 2 en 20 afbeeldingen dan werkt deze oplossing niet!
Just say hi!
  maandag 4 februari 2008 @ 20:58:38 #28
12880 CraZaay
prettig gestoord
pi_56534055
Desnoods doe je het met JS, heb ik ook weleens gedaan, Maar CSS moet ook kunnen lijkt me. Vrolijk verder spelen zou ik zeggen
  maandag 4 februari 2008 @ 23:57:45 #29
164509 Banzaiaap
Tony Rocky Horror
pi_56538345
Kan iemand me met het volgende probleem helpen..

Als ik de site die ik voor een vriend van me aan het maken ben, bekijk in IE, dan is het menu een beetje opgeschoven, kan iemand de fout spotten?

http://www.dje-rik.nl/test/DJERIK/index.html
pi_56538824
quote:
Op maandag 4 februari 2008 23:57 schreef Banzaiaap het volgende:
Kan iemand me met het volgende probleem helpen..

Als ik de site die ik voor een vriend van me aan het maken ben, bekijk in IE, dan is het menu een beetje opgeschoven, kan iemand de fout spotten?

http://www.dje-rik.nl/test/DJERIK/index.html
Ook voor jou: haal eerst de 32 html-bugs er eens uit!
pi_56540615
quote:
Op maandag 4 februari 2008 20:58 schreef CraZaay het volgende:
Desnoods doe je het met JS, heb ik ook weleens gedaan, Maar CSS moet ook kunnen lijkt me. Vrolijk verder spelen zou ik zeggen
Ja dat heb ik reeds een dag gedaan (tussendoor) maar kom er gewoon niet uit
Just say hi!
pi_56541818
quote:
Op maandag 4 februari 2008 19:10 schreef Chandler het volgende:

[..]

Deze werkt idd goed, echter is nu het probleem dat je met een vaste maat werkt. Met 10 afbeeldingen is dat geen probleem maar heb je tussen de 2 en 20 afbeeldingen dan werkt deze oplossing niet!
Als je php hebt draaien kan je het met een variable oplossen, waarbij je het aantal plaatjes in een dir telt en dan de width uitrekent en die als breedte meegeeft. Wat je ook kan doen is alles in een table gooien:

1
2
3
4
5
6
7
8
9
10
11
12
13		<div style="height: 164px; width: 500px; margin: 0; overflow-x: scroll; overflow-y: hidden;">
   <table cellpadding="0" cellspacing="0" style="border: none">
      <tr>
         <td><img src="#" style="width: 128px; height: 128px; margin: 10px;" /><td>
         <td style="padding: 10px;"><img src="#" height="128" width="128" /><td>
         <td style="padding: 10px;"><img src="#" height="128" width="128" /><td>
         <td style="padding: 10px;"><img src="#" height="128" width="128" /><td>
         <td style="padding: 10px;"><img src="#" height="128" width="128" /><td>
         <td style="padding: 10px;"><img src="#" height="128" width="128" /><td>
         <td style="padding: 10px;"><img src="#" height="128" width="128" /><td>
      </tr>
   </table>
</div>
pi_56574415
quote:
Op dinsdag 5 februari 2008 10:19 schreef Tarabass het volgende:
Als je php hebt draaien kan je het met een variable oplossen, waarbij je het aantal plaatjes in een dir telt en dan de width uitrekent en die als breedte meegeeft. Wat je ook kan doen is alles in een table gooien:
[ code verwijderd ]
het is inderdaad een oplossing maar helaas niet de gene die ik zoek maar toch tnx!

Verder zit ik met iets vaags, ik heb de volgende code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<div style="margin: 5px 10px; height: 280px;width: 420px; float: left;"> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=1" border="0" onClick="preview('animals', '1');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=11" border="0" onClick="preview('animals', '11');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=12" border="0" onClick="preview('animals', '12');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=14" border="0" onClick="preview('animals', '14');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=2" border="0" onClick="preview('animals', '2');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=3" border="0" onClick="preview('animals', '3');"></a> 
     
</div> 


en krijg dit als uitkomst



maar wil 3x een blok naast elkaar van 130px breed en 130px hoog waarin de afbeelding gecentreerd staat, echter worden de afbeeldingen weer gegeven in een blok met de eigen grote!? wat doe ik fout?

[ Bericht 10% gewijzigd door Chandler op 07-02-2008 10:20:05 ]
Just say hi!
pi_56578357
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
  donderdag 7 februari 2008 @ 11:37:04 #35
12880 CraZaay
prettig gestoord
pi_56579032
quote:
Op donderdag 7 februari 2008 11:05 schreef Geqxon het volgende:
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
Zou geen probleem mogen geven, zo gebruik ik het ook (alleen dan achter de eigenlijk kop ipv ervoor).
pi_56579328
Het liefst doe ik het ook erachter, maar dan is de float niet meer mogelijk. In een text-based browser ziet dit er volgens mij wel fatsoenlijk uit.
pi_56580397
quote:
Op donderdag 7 februari 2008 11:05 schreef Geqxon het volgende:
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
Zo doet wiki dat niet. Wiki doet dit:
1<h2><span>[edit]</span><span>Title</span></h2>
  donderdag 7 februari 2008 @ 12:48:14 #38
12880 CraZaay
prettig gestoord
pi_56580692
quote:
Op donderdag 7 februari 2008 12:36 schreef Tarabass het volgende:

[..]

Zo doet wiki dat niet. Wiki doet dit:
[ code verwijderd ]
Is exact hetzelfde principe toch?
pi_56580860
quote:
Op donderdag 7 februari 2008 12:48 schreef CraZaay het volgende:

[..]

Is exact hetzelfde principe toch?
Dat, en ik vind de tweede span niet correct, en vooral onhandig als je een keer geen extra optie-tekst hebt. Daarnaast moet je in dit geval met diverse classes te werk gaan, en ook dat is bij mij geen favoriet.
pi_56581129
quote:
Op donderdag 7 februari 2008 12:48 schreef CraZaay het volgende:

[..]

Is exact hetzelfde principe toch?
Nee. De h2-tag staat er in dit geval omheen om zo zoekmachines etc. beter hun werkt te laten doen qua indexeren. De span-tags krijgen de stijlen mee via css-classes. Dit is imo netter en de h2 is beter her te gebruiken. Maar het uiteindelijke resultaat zal inderdaad hetzelfde zijn, dus eigenlijk ook niet iets om druk over te maken..
pi_56581562
Maar zal een bot als google de twee inhouden dan niet gelijk wegen? Dat de inhoud van allebei de span-tags even zwaar is, in plaats van mijn eerdere voorbeeld waar de daadwerkelijke inhoud van de H2 zwaarder weegt dan de span-tag die ernaast staat?
  donderdag 7 februari 2008 @ 13:51:43 #42
164509 Banzaiaap
Tony Rocky Horror
pi_56581956
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing
quote:
Ik ben bezig met een site voor een vriend van mij, die een site nodig heeft waar hij zijn muziek kan laten horen, en waar informatie over optredens en dergelijke te vinden is. Heel simpel zou je zeggen.. Ik heb de site ontworpen in Photoshop, stukken eruit geslicet en daarna opgebouwd met XHTML en CSS. Echter, nou ziet de site er heel anders uit in Firefox dan in IE7 (Ik heb vanuit Firefox gebouwd, omdat dat mijn standaard browser is, maar nu blijkt het toch makkelijker geweest om de site eerst in IE te checken. De layout klopt totaal niet meer in IE7, terwijl het er in FF prima uitziet.

Ik heb even een testversie [url="http://www.dje-rik.nl/test/DJERIK/index.html"]hier[/url] geupload, het is nog niet af, maar het was meer om de layout te testen.

Kan iemand me uitleggen wat ik verkeerd doe? (Ik ben nog maar een klein half jaar hier mee bezig, dus reken me aub niet te hard af )
  donderdag 7 februari 2008 @ 14:02:57 #43
12880 CraZaay
prettig gestoord
pi_56582216
quote:
Op donderdag 7 februari 2008 13:09 schreef Tarabass het volgende:

[..]

Nee. De h2-tag staat er in dit geval omheen om zo zoekmachines etc. beter hun werkt te laten doen qua indexeren. De span-tags krijgen de stijlen mee via css-classes. Dit is imo netter en de h2 is beter her te gebruiken. Maar het uiteindelijke resultaat zal inderdaad hetzelfde zijn, dus eigenlijk ook niet iets om druk over te maken..
In Geqxon's voorbeeld staat de H2 er ook omheen toch?
  donderdag 7 februari 2008 @ 14:04:43 #44
12880 CraZaay
prettig gestoord
pi_56582251
quote:
Op donderdag 7 februari 2008 13:51 schreef Banzaiaap het volgende:
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing
Begin met die 32 HTML errors (zie validator), en daarna praten we verder
  donderdag 7 februari 2008 @ 14:16:41 #45
164509 Banzaiaap
Tony Rocky Horror
pi_56582479
quote:
Op donderdag 7 februari 2008 14:04 schreef CraZaay het volgende:

[..]

Begin met die 32 HTML errors (zie validator), en daarna praten we verder
Sorry klopt, is gedaan
pi_56582632
quote:
Op donderdag 7 februari 2008 00:47 schreef Chandler het volgende:

[..]

het is inderdaad een oplossing maar helaas niet de gene die ik zoek maar toch tnx!

Verder zit ik met iets vaags, ik heb de volgende code
[ code verwijderd ]

en krijg dit als uitkomst

[ afbeelding ]

maar wil 3x een blok naast elkaar van 130px breed en 130px hoog waarin de afbeelding gecentreerd staat, echter worden de afbeeldingen weer gegeven in een blok met de eigen grote!? wat doe ik fout?
Anyone? zie ik nou gewoon wat over het hoofd?
Just say hi!
pi_56583153
quote:
Op donderdag 7 februari 2008 14:25 schreef Chandler het volgende:

[..]

Anyone? zie ik nou gewoon wat over het hoofd? :D
Ik heb het voor de grap eens `from scratch´ gedaan:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		ul.imageblock{
   width: 402px;
   height: 402px;
   
   margin: 0;
   padding: 0;
   
   border: 1px #000 solid;
}

   ul.imageblock li{
      width: 130px;
      height: 130px;
      float: left;
      
      padding: 0;
      margin: 1px;
      
      text-align: center;
      line-height: 130px;
      
      list-style-type: none;
      border: 1px #AAA solid;
   }


1
2
3
4
5
6
7
8
9
10		<ul class="imageblock">
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
</ul>


Zoiets doet het hier prima.
pi_56583230
quote:
Op donderdag 7 februari 2008 14:25 schreef Chandler het volgende:

[..]

Anyone? zie ik nou gewoon wat over het hoofd?
Heb je een doc-type staan? Anders eens style="" in de tag plaatsen
  donderdag 7 februari 2008 @ 15:59:23 #49
164509 Banzaiaap
Tony Rocky Horror
pi_56584350
quote:
Op donderdag 7 februari 2008 13:51 schreef Banzaiaap het volgende:
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing

Ik ben bezig met een site voor een vriend van mij, die een site nodig heeft waar hij zijn muziek kan laten horen, en waar informatie over optredens en dergelijke te vinden is. Heel simpel zou je zeggen.. Ik heb de site ontworpen in Photoshop, stukken eruit geslicet en daarna opgebouwd met XHTML en CSS. Echter, nou ziet de site er heel anders uit in Firefox dan in IE7 (Ik heb vanuit Firefox gebouwd, omdat dat mijn standaard browser is, maar nu blijkt het toch makkelijker geweest om de site eerst in IE te checken. De layout klopt totaal niet meer in IE7, terwijl het er in FF prima uitziet.

Ik heb even een testversie [url="http://www.dje-rik.nl/test/DJERIK/index.html"]hier[/url] geupload, het is nog niet af, maar het was meer om de layout te testen.

Kan iemand me uitleggen wat ik verkeerd doe? (Ik ben nog maar een klein half jaar hier mee bezig, dus reken me aub niet te hard af )
Iemand?

Edit: Ik heb het nu tijdelijk opgelost met de volgende code.

1
2
3
4
5
6
7
8
9		      
<!--[if IE]>
   <style>
      #main 
      {   
         top:33px;
      } 
   </style>
<![endif]-->


[ Bericht 12% gewijzigd door Banzaiaap op 07-02-2008 16:44:41 ]
pi_56585398
quote:
Op donderdag 7 februari 2008 14:53 schreef Geqxon het volgende:

[..]

Ik heb het voor de grap eens `from scratch´ gedaan:
[ code verwijderd ]


[ code verwijderd ]

Zoiets doet het hier prima.
Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan? ik heb dit zelf al geprobeerd maar helaas
Just say hi!
pi_56585612
quote:
Op donderdag 7 februari 2008 16:59 schreef Chandler het volgende:

[..]

Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan? ik heb dit zelf al geprobeerd maar helaas
Edit: Eens even kijken...
pi_56585620
quote:
Op donderdag 7 februari 2008 16:59 schreef Chandler het volgende:

[..]

Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan? ik heb dit zelf al geprobeerd maar helaas
Dat kan alleen op het parent element door align/text-align
pi_56586045
quote:
Op donderdag 7 februari 2008 17:12 schreef Tarabass het volgende:
Dat kan alleen op het parent element door align/text-align
Ik ben zo'n leek, kun je dit eens voor Chandler N00bie gemakkelijker uitleggen
Just say hi!
pi_56586121
quote:
Op donderdag 7 februari 2008 17:34 schreef Chandler het volgende:

[..]

Ik ben zo'n leek, kun je dit eens voor Chandler N00bie gemakkelijker uitleggen
Onder de categorie "et moet en zal met CSS", mijn prachtige meesterwerk:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<ul class="imageblock">
   <li>
      <ul class="three">
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
      </ul>
   </li>
   <li>
      <ul class="three">
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
      </ul>
   </li>
   <li>
      <ul class="two">
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
      </ul>
   </li>
</ul>


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		   ul.imageblock{
      width: 402px;
      
      padding: 0;
      
      border: 1px #000 solid;
   }
   
      ul.imageblock li{
         height: 134px;
      
         list-style-type: none;
      }
   
         ul.imageblock li ul{         
            margin: 0 auto;
            padding: 0;
         }
         
         ul.imageblock li ul.one{
            width: 132px;
         }
         
         ul.imageblock li ul.two{
            width: 268px;
         }
         
         ul.imageblock li ul.three{
            width: 402px;
         }
         
            ul.imageblock li ul li{
               float: left;
               width: 130px;
               height: 130px;
               
               margin: 1px;
               
               text-align: center;
               line-height: 130px;
               
               border: 1px #AAA solid;
            }


Ik ben denk ik wat doorgeschoten. Maar het werkt wel!
pi_56591050
ik heb een probleempje met mijn css verhaal. om het overzichtelijk te houden ff de style elementen in de html gehouden. het zijn een beetje geneste divjes. nu werkt het in IE wel goed en FF hapert er weer op. Het omvattende divje gaat niet mee met de hoogte die door de binnen gelegen divjes wordt aangegeven. Hier mijn code
1
2
3
4
5
6
7
8
9
10
11		<div style="margin: auto; width: 780px; height: 100%; background-color:#FFFFFF;">
   <!-- Grote foto en tekst -->
   <div style="width: 390px; float:left;">
      <!-- Foto -->
      <div style="width: 390px; height: 390px; background-color:#99FF00">Foto</div>
      <!-- Tekst links -->
      <div style="width: 390px; background-color:#FF66CC;">Tekst links</div>
   </div>
   <!-- Tekst rechts -->
   <div style="width: 390px; background-color:#FF0000; float: right;">Tekst rechts</div>
</div>


Hoe kan het nou weer dat FF dat niet goed op pakt?
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
  donderdag 7 februari 2008 @ 21:58:26 #56
12880 CraZaay
prettig gestoord
pi_56591501
Welke div moet precies met welke div's meeschalen? Geef ze even id's en leg het aan de hand daarvan uit. Dit is onleesbaar zo.

Ik gok overigens dat je ergens iets uit de flow haalt en verwacht dat een gefloat element binnen een niet-gefloat element ervoor zorgt dat de tweede meeschaalt.
pi_56591760
quote:
Op donderdag 7 februari 2008 21:58 schreef CraZaay het volgende:
Welke div moet precies met welke div's meeschalen? Geef ze even id's en leg het aan de hand daarvan uit. Dit is onleesbaar zo.

Ik gok overigens dat je ergens iets uit de flow haalt en verwacht dat een gefloat element binnen een niet-gefloat element ervoor zorgt dat de tweede meeschaalt.
ok ik heb het even anders gedaan
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<style type="text/css">
#content{margin: auto; width: 780px; background-color:#FFFFFF; float:inherit;}
#left{width: 390px; float:left;}
#left_foto{width: 390px; height: 390px; background-color:#99FF00;}
#left_text{width: 390px; background-color:#FF66CC;}
#right{width: 390px; background-color:#FF0000; float: right;}
</style>

<div id="content">
   <div id="left">
      <div id="left_foto">Foto</div>
      <div id="left_text">Tekst links</div>
   </div>
   <div id="right">Tekst rechts</div>
</div>


begrijp je zo wat ik bedoel? er is een grote div content
daarbinnen zitten twee divjes naast elkaar, left en right
binnen left zitten twee divs boven elkaar.

de div waar de foto in komt, links boven, is al op hoogte, bij wijze van test.
de div content gaat niet mee in hoogte met de andere divs als deze in height groter worden. hoe zorg ik er voor dat deze dat wel doet? tenminste in FF. in IE werkt het wel zoals ik zou willen.
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
  donderdag 7 februari 2008 @ 22:40:25 #58
12880 CraZaay
prettig gestoord
pi_56592415
Als je #content "float: left" geeft ipv inherit, wat gebeurt er dan?
pi_56592447
quote:
Op donderdag 7 februari 2008 22:40 schreef CraZaay het volgende:
Als je #content "float: left" geeft ipv inherit, wat gebeurt er dan?
dan gaat de content div wel mee naar de hoogte van de andere divs.. maar staat ie helemaal links in het scherm.. das ook weer niet de bedoeling. Het hele boeltje staat gecentreerd..
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_56592477
Ik heb er nog een divje om heen gelegd, ook gecentreerd net als de rest van de site. En dat gaat wel goed. Thnx!
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
  donderdag 7 februari 2008 @ 23:30:11 #61
12880 CraZaay
prettig gestoord
pi_56593620
quote:
Op donderdag 7 februari 2008 22:43 schreef markiemark het volgende:
Ik heb er nog een divje om heen gelegd, ook gecentreerd net als de rest van de site. En dat gaat wel goed. Thnx!
Haal dat divje eens weg en geef #content geen float, maar "overflow: auto" (geen hoogte definieren!). Zou moeten werken
pi_56652994
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.

1
2		<head><link rel="stylesheet" type="text/css" href="style.css"></head>
<span class="topMenu"><span class="menuItemHome"><a href="index.php">Home</a></span>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		.topMenu
{
  margin-left: 19px;
  font: bold 12px tahoma,verdana,arial,sans-serif;
  letter-spacing: 0;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 2;
  text-decoration: none;
}

.menuItemHome
{
  margin-left: 0px;
  background: url("afbeeldingen/home.gif") no-repeat 0 0;
  width: 70px;
  height: 16px;
  text-indent:23px;
}
pi_56655000
quote:
Op zondag 10 februari 2008 21:46 schreef mrbombastic het volgende:
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.
[ code verwijderd ]


[ code verwijderd ]
Klopt je html wel? Ik die 2 regels zie ik 2x een <span> en maar 1 </span>
fokstok.nl
  zondag 10 februari 2008 @ 23:31:34 #64
12880 CraZaay
prettig gestoord
pi_56656239
quote:
Op zondag 10 februari 2008 21:46 schreef mrbombastic het volgende:
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.
Volgens mij wil je wat properties gebruiken die alleen geschikt zijn voor block-level elementen, terwijl een span een inline element is. Ik vraag me overigens af of een element zonder een duidelijke semantische betekenis (span) het meest geschikt is in deze situatie, maar dat terzijde.
pi_56661772
quote:
Op zondag 10 februari 2008 23:31 schreef CraZaay het volgende:

[..]

Volgens mij wil je wat properties gebruiken die alleen geschikt zijn voor block-level elementen, terwijl een span een inline element is. Ik vraag me overigens af of een element zonder een duidelijke semantische betekenis (span) het meest geschikt is in deze situatie, maar dat terzijde.
Bedankt, ik heb er nu een div van gemaakt en met nog wat wijzigingen staat dit nu wel goed.

Nu heb ik nog een probleem, zie www.kraket.nl. Ik heb een maindiv class waar ik een linkermarge van 19px wil hebben. Dit lukt wel in IE6, maar in FF springen alle menu items weer terug.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		.mainDiv
{
  width:260px;
  margin-left: 19px;
}

.item
{
  font: bold 12px tahoma,verdana,arial,sans-serif;
  letter-spacing: 0;
  background: url("afbeeldingen/no-arrow.gif") no-repeat 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  width: 245px;
  height: 25px;
  cursor: pointer;
  text-indent: 15px;
  text-align: left;
  line-height: 21px;
}
  maandag 11 februari 2008 @ 16:20:07 #66
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_56667088
Ik heb het volgende probleem.

Ik heb een stuk tekst op een pagina staan waarvan de source te vergelijken is met het volgende:

1
2		<strong><p>Dit is dikke tekst</p></strong>
<p>Dit is normale tekst</p>


Nu zit ik alleen met het probleem dat ik met geen mogelijkheid die strong tag gestyled krijg. Ik krijg de inhoud zelf (inclusief html formatting) vanuit een CMS waar ik geen wijzigingen in kan aanbrengen.

Hoe kan ik ervoor zorgen dat ik bijvoorbeeld de lettergrootte van de tekst binnen de <strong> tags kan aanpassen?

Alvast dank
Gretsch fan
pi_56667297
Iets als:

1
2
3		strong p{
font-weight: 700;
}


?

Geen flauw idee of dat gaat werken...
  maandag 11 februari 2008 @ 16:45:48 #68
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_56667453
quote:
Op maandag 11 februari 2008 16:35 schreef Geqxon het volgende:
Iets als:
[ code verwijderd ]

?

Geen flauw idee of dat gaat werken...
Dit heb ik inderdaad ook al geprobeert, maar dat werkt niet... de styling van de <p> tag lijkt altijd de voorkeur te krijgen boven de styling van de <strong> tag
Gretsch fan
  maandag 11 februari 2008 @ 17:03:36 #69
12880 CraZaay
prettig gestoord
pi_56667676
Mag een <p> überhaupt binnen een <strong>? Een <p> is een block level element en een <strong> een inline element. Wat vindt de validator ervan?
  maandag 11 februari 2008 @ 17:07:25 #70
12880 CraZaay
prettig gestoord
pi_56667721
quote:
Op maandag 11 februari 2008 11:25 schreef mrbombastic het volgende:

[..]

Bedankt, ik heb er nu een div van gemaakt en met nog wat wijzigingen staat dit nu wel goed.

Nu heb ik nog een probleem, zie www.kraket.nl. Ik heb een maindiv class waar ik een linkermarge van 19px wil hebben. Dit lukt wel in IE6, maar in FF springen alle menu items weer terug.
Probeer eens padding ipv margin? Btw: de letter-spacing is default al 0.
pi_56675987
quote:
Op maandag 11 februari 2008 17:07 schreef CraZaay het volgende:

[..]

Probeer eens padding ipv margin? Btw: de letter-spacing is default al 0.
Bedankt. Padding werkt inderdaad wel.

Verder heb ik nog 2 probleempjes. In IE6 krijg ik een horizontale scrollbar. Daarvoor heb ik nu
1overflow-x:hidden;

gebruikt, maar mss zijn er betere alternatieven.

Verder vraag ik me af of het drop-down menu, zie www.kraket.nl, ook links uitgelijnd kan worden ipv rechts wat ie standaard doet.

[ Bericht 3% gewijzigd door mrbombastic op 11-02-2008 23:44:39 ]
pi_56676008
dubbelpost

[ Bericht 98% gewijzigd door mrbombastic op 11-02-2008 23:43:28 ]
  dinsdag 12 februari 2008 @ 08:55:00 #73
12880 CraZaay
prettig gestoord
pi_56678516
quote:
Op maandag 11 februari 2008 23:35 schreef mrbombastic het volgende:

Verder heb ik nog 2 probleempjes. In IE6 krijg ik een horizontale scrollbar. Daarvoor heb ik nu
[ code verwijderd ]
gebruikt, maar mss zijn er betere alternatieven.
Ja, zorgen dat je content binnen de viewport past in de breedte, dan heb je er geen last van Is het te smal, omdat iemand op een lage resolutie kijkt, dan zullen ze horizontaal moeten scrollen.
pi_56681681
quote:
Op dinsdag 12 februari 2008 08:55 schreef CraZaay het volgende:

[..]

Ja, zorgen dat je content binnen de viewport past in de breedte, dan heb je er geen last van Is het te smal, omdat iemand op een lage resolutie kijkt, dan zullen ze horizontaal moeten scrollen.
Daar heb je inderdaad gelijk in. De problemen zijn inmiddels opgelost. Het bleek dat ergens bovenin mn code nog <div align="center"> stond .
pi_56703887
Iemand een simpel ontwerp slicen?
ne okuyon, bokmu var?
  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,
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
pi_57342706
quote:
Op donderdag 13 maart 2008 00:03 schreef Light het volgende:

[..]

Daar kan ik nog wel mee gaan spelen morgen.
[..]

Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
Er bestaan ook manieren om je eigen font mee te sturen.
pi_57344533
quote:
Op donderdag 13 maart 2008 00:07 schreef CraZaay het volgende:

[..]

Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTML
Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.
fokstok.nl
pi_57344542
quote:
Op donderdag 13 maart 2008 00:31 schreef mcDavid het volgende:

[..]

Er bestaan ook manieren om je eigen font mee te sturen.
Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.
fokstok.nl
  donderdag 13 maart 2008 @ 08:24:30 #206
12880 CraZaay
prettig gestoord
pi_57344900
quote:
Op donderdag 13 maart 2008 07:30 schreef Light het volgende:

Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.
HTML:
1
2		<a href="link.html" class="link_met_plaatje_als_achtergrond">Tekst die Google,
screenreaders en mensen zonder CSS zien</a>


CSS:
1
2
3
4
5
6
7
8
9
10
11
12		a.link_met_plaatje_als_achtergrond {
   width: 100px;
   height: 20px;
   display: block;
   background: url(plaatje.gif);
   text-indent: -9999px;
   overflow: hidden
}

a.link_met_plaatje_als_achtergrond:hover {
   background: url(plaatje2.gif);
}
pi_57346388
quote:
Op donderdag 13 maart 2008 08:24 schreef CraZaay het volgende:

[..]

HTML:
[ code verwijderd ]

CSS:
[ code verwijderd ]
Daar kan ik wel wat mee, dank Het lost ook het eerdere probleem op, waarbij de plaatjes niet goed aansloten.
fokstok.nl
pi_57353931
quote:
Op donderdag 13 maart 2008 07:32 schreef Light het volgende:

[..]

Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.
Je hebt gelijk. Ik dacht ooit dat ik zoiets gezien had, maar de enige mogelijkheden werken óf alleen in IE, óf werken met flash.
pi_57355094
Bij gebrek aan een centraal html topic vraag ik het hier maar even..

In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
-
pi_57355892
quote:
Op donderdag 13 maart 2008 17:14 schreef splendor het volgende:
Bij gebrek aan een centraal html topic vraag ik het hier maar even..

In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
de validator van W3c is eigenlijk gewoon een xml-based validator, traditioneel HTML kent eigenlijk geen validatie aangezien de browsers gewoon sowieso altijd moeite moeten doen een document weer te geven en ook 'interpretaties' te doen van elementen... HTML4.01 'herkent' dus ook gewoon een BR mét een traling slash.

'officiele' HTML dient eigenlijk zo streng te zijn dat als iets _niet_ valideert, het hele document eigenlijk niet verder verwerkt 'mag' worden (om data-integriteit te waarborgen, non-validatie betekent dat er iets mis is met de data)
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_57355901
Heb je een voorbeeld?
Bij mij pikt'ie ze er gewoon tussenuit hoor met html4.01 transitional!

en idd wat RM-rf zegt. Als je site het in alle browsers prima doet ondanks een paar 'bugs' in de html, dan is dat geen probleem. Valideren is meer een hulpmiddel om fouten op te sporen, maar niet per se de enige heilige manier.
pi_57371730
Na wat problemen met een ander CSS menu op mijn website (in mijn sig.) heb ik op advies een ander CSS menu geprobeerd. Maar nu werkt het alsnog niet op IE6. In IE7 en Firefox en de rest werkt het perfect, maar in IE6 krijg ik niet eens de links te zien.

Weet iemand wat dit kan zijn? Fout in de code?

http://www.meesterbrein.com/menu_style.css

Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.

Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57371901
quote:
Op vrijdag 14 maart 2008 12:07 schreef HetMeesterbrein het volgende:
Na wat problemen met een ander CSS menu op mijn website (in mijn sig.) heb ik op advies een ander CSS menu geprobeerd. Maar nu werkt het alsnog niet op IE6. In IE7 en Firefox en de rest werkt het perfect, maar in IE6 krijg ik niet eens de links te zien.

Weet iemand wat dit kan zijn? Fout in de code?

http://www.meesterbrein.com/menu_style.css

Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.

Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
Bij dat suckerfish menu gebruiken ze een javascript hack voor IE6, omdat die de psuedo-class :hover niet kent voor list-items.

Enneuh, heb je wel eens gehoord van relatieve url paden?
pi_57373045
Ja, maar hoorde dat het beter is voor SEO als je hele pad neerzet. Zie ook het nadeel er niet van eigenlijk.

Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.

Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57373197
Absolute paths vind ik wel fijn, vooral als je veel met mod_rewrite werkt.
pi_57373323
Oh, euh...
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?

Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
  vrijdag 14 maart 2008 @ 13:19:27 #217
12880 CraZaay
prettig gestoord
pi_57373363
quote:
Op vrijdag 14 maart 2008 13:05 schreef HetMeesterbrein het volgende:

Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.

Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.
pi_57373887
quote:
Op vrijdag 14 maart 2008 13:19 schreef CraZaay het volgende:

[..]

Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.
Oooh dan moet ik daar eens naar gaan kijken. Heb het script in een apart .js bestand gezet.
quote:
Op vrijdag 14 maart 2008 13:17 schreef mcDavid het volgende:
Oh, euh...
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?

Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
quote:
Op vrijdag 14 maart 2008 13:12 schreef Geqxon het volgende:
Absolute paths vind ik wel fijn, vooral als je veel met mod_rewrite werkt.
Klopt. Ook bij cutenews is het handig, omdat hij anders gaat openen in view.php/index.php en dan werkt het niet goed.
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57373931
Je moet het zelf weten
  vrijdag 14 maart 2008 @ 16:41:16 #220
37634 wobbel
Da WoBBeL King
pi_57377884
Ik heb dit:

1Bier en tieten <div id="bier">zijn okee oleeee</div>


Probleem is dat ik dit als output krijg:

1
2		Bier en tieten 
zijn okee oleeee


maar ik wil het zo
1Bier en tieten zijn okee oleeee
Hosted VoIP SIP trunks Vast mobiel VoIP
  vrijdag 14 maart 2008 @ 17:13:14 #221
12880 CraZaay
prettig gestoord
pi_57378542
quote:
Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:
[ code verwijderd ]

Probleem is dat ik dit als output krijg:
[ code verwijderd ]

maar ik wil het zo
[ code verwijderd ]
Een div is een block level element van 100% breed. Waar heb je die div voor nodig?
pi_57381442
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
  vrijdag 14 maart 2008 @ 20:04:18 #223
12880 CraZaay
prettig gestoord
pi_57382305
quote:
Op vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
Werkt prima.
pi_57382456
quote:
Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:


[ code verwijderd ]


Probleem is dat ik dit als output krijg:


[ code verwijderd ]


maar ik wil het zo

[ code verwijderd ]
zou je dat niet liever met een <span> doen?
quote:
Op vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
deze doet het wel goed
pi_57383218
Oke mooi. Dan nog iets kleins. Tussen het menu en de adsense reclame zit een regel wit. Ik heb dit niet ingesteld, heb het liefst dat het tegen elkaar aan zit, maar ik weet niet hoe ik het weg kan krijgen...
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
  maandag 17 maart 2008 @ 00:59:25 #226
135268 USAF
Sarcastisch als altijd
pi_57424849
Ik heb een probleempje, voor het menu bij een website lijken IE en FF beide verschillende afstanden voor de margins te gebruiken... Nu zal er vast een hele simpele oplossing zijn maar ik heb m nog niet gevonden ;)

Voorbeeld wat het verschil is:
FF:

IE:


CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26		#menu {
   width: 769px;
   height: 30px;
   position: relative;
   padding-left: 39px;
   letter-spacing: -1px;
   background-image: url(menubg.png);
   background-repeat: no-repeat;
   background-position: 31px;
}

#menu .keuzes {
   padding-top: 9px;
   height: 30px;
   width: 769px;
}

#menu .keuzes .keuze a,a:active{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: #515151;
   font-weight: bold;
   text-decoration: none;
   /*margin-right: 17px;*/
   float: left;
}


HTML:
1
2
3
4
5
6
7
8
9		<div id="menu">
   <div class="keuzes">
       <span class="keuze"><a href="./" style="color:#385c88;margin-right:17px;">collectie</a></span>
        <span class="keuze"><a href="./algemene_informatie.php" style="margin-right:18px;">over ons</a></span>
      <span class="keuze"><a href="./faq.php" style="margin-right:16px;">contact</a></span>
      <span class="keuze"><a href="./inschrijven.php" style="margin-right:480px;">links</a></span>
      <span class="keuze"><a href="./inschrijven.php">english</a></span> 
   </div>
</div>


tnx :)
Commander of the Joint Chiefs
  maandag 17 maart 2008 @ 08:04:46 #227
12880 CraZaay
prettig gestoord
pi_57425989
Ik zie weinig verschil? Maar begin eens met je menu semantisch correct te maken zou ik zeggen (een lijst voor je opsomming van menu items), deze "divitis" is net zo erg als het gebruiken van tabellen voor je lay-out
pi_57428603
Het is geen CSS, maar wat ik mij afvroeg: Is het "stout" om na de HTML sluit-tag nog commentaar in de code te plaatsen? Ik wil voor debug-doeleinden op het einde van mijn pagina een paar regeltjes als bv. de parse-tijd en het aantal gebruikte queries neerplempen.
pi_57428765
@USAF
Als je problemen hebt met verschillende marges, moet je ze gewoon definiëren. Verschillende browsers houden nou eenmaal verschillende standaardmarges aan.

@Geqxon
Ik zie niet in waarom niet? Zolang browsers er niet moeilijk over doen (en dat lijkt me niet...)
  dinsdag 18 maart 2008 @ 23:12:59 #230
32768 DionysuZ
Respect my authority!
pi_57465180
Ik heb weer eens een CSS vraag.

Ben een site aan het bouwen met een container die 100% hoog is. Nu werkt het allemaal goed in IE 5.0+,FF,NS,Safari en Opera. Echter, bij de laatste 2 voegt hij nog een aantal pixels lege ruimte onderaan toe (zo'n 20px volgens mij), en ik heb geen idee hoe dat komt en hoe ik ervanaf kom.

HTML (sterk ingekort ;)):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

  <head>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="general.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="iehack.css" />
    <![endif]--> 
  </head>

  <body>
    <div id="container">
    </div>
  </body>
</html>


Met bijbehorende CSS:
general.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27		* {
  margin: 0px;
  padding: 0px;
}

/* commented backslash mac IE hack \*/
html,body {
  height: 100%;
}
/* end hack */

body {
  font-family: "Trebuchet MS",Verdana, Tahoma, Arial, Sans-serif;
  font-size: 62.5%;  /* 10px */
  text-align: center;
  background: #eaeaea url('px/bg.png') repeat-x 0 0;
}

#container {
  position: relative;
  margin: 0px auto;
  font-size: 110%;
  min-height:100%;
  width: 790px;
  text-align: left;
  background: #ffffff url('px/mainbg.png') repeat-y 100% 0;
}


iehack.css
1
2
3		#container {
  height: 100%;
}
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  woensdag 19 maart 2008 @ 07:44:45 #231
12880 CraZaay
prettig gestoord
pi_57469115
IE voor de Mac wordt niet meer gebruikt, dus die hack zou ik er lekker uit gooien

Zaken 100% hoog willen maken is altijd een gigantische pain in the ass. Waarom wil je dit? In 99% van de gevallen is het beoogde effect namelijk op veel makkelijkere manieren te bereiken, bijvoorbeeld door die background gewoon aan de body te hangen. De hoogte van de #container maakt dan niets meer uit.
  woensdag 19 maart 2008 @ 08:18:59 #232
32768 DionysuZ
Respect my authority!
pi_57469356
quote:
Op woensdag 19 maart 2008 07:44 schreef CraZaay het volgende:
IE voor de Mac wordt niet meer gebruikt, dus die hack zou ik er lekker uit gooien

Zaken 100% hoog willen maken is altijd een gigantische pain in the ass. Waarom wil je dit? In 99% van de gevallen is het beoogde effect namelijk op veel makkelijkere manieren te bereiken, bijvoorbeeld door die background gewoon aan de body te hangen. De hoogte van de #container maakt dan niets meer uit.
ik heb onderaan de pagina nog gegevens gegooid, kvk nummer/rek.nummer/disclaimer. Dat soort informatie. En het werkt allemaal goed hoor, alleen snap ik niet waarom opera en safari nog een paar pixels aan het document toevoegen.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  woensdag 19 maart 2008 @ 09:46:10 #233
32768 DionysuZ
Respect my authority!
pi_57470478
Solved.

Doordat ik een div in de container een margin-bottom had gegeven reageerden Opera en Safari als beschreven, ook al was die div een stuk kleiner dan het scherm. Aangezien het ook met padding werkte in dit geval heb ik het zo maar opgelost.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57475075
Css freaks!

Ik ben sinds enkele dagen voor het eerst bezig met css en ik begin het steeds leuker te vinden . Ik heb twee vragen.

1. Kan ik met CSS door middel van de a:hover selector een geluidje af laten spelen zodra je ergens over heen 'hovered'. Wellicht via behaviors (is behaviors nog css?)?

2. Mijn layout is opgemaakt uit een aantal div-elementen. Een aantal divs zijn relatief gepositioneerd, aldaar maak ik dus gebruik van de 'normal document flow'. Een van deze divs is bv zelf ook een parent voor twee andere child divs en deze child divs floaten naar links, resp. rechts om ze goed naast elkaar te krijgen. Weer een ander div element staat helemaal rechts in de main parent container door, idd: float rechts.
Op zich werkt dit aardig goed, alleen krijg ik het mede ivm borders en padding niet echt voor elkaar om alles werkelijk naadloos op elkaar aan te sluiten. Ook ontstaat er soms een gele stippellijn om een div element heen; alsof deze overlapping vindt met aan ander div element. Dat zou m.i. helemaal niet mogen aangezien er genoeg ruimte is voor het div element.
Mijn vraag: is het problematisch als child div elementen ruimte tussen elkaar hebben of overlap hebben (ik neem aan dat de gele stippellijnen overlap betekent)?
  woensdag 19 maart 2008 @ 14:05:24 #235
12880 CraZaay
prettig gestoord
pi_57475736
Die gele stippellijnen komen "ergens" vandaan, maar het is iig geen feature van je browser die daarmee overlap aan wil geven. Dat zit echt in je eigen CSS of een browser add-on ofzo.

Geluidje afspelen: kan idd niet met CSS, en je kan je afvragen of je het wel moet willen. Als het onmisbaar is voor je app, dan is HTML niet de taal om 'm in te bouwen

Verder snap ik er zo weinig van, dus gooi eens het een en ander online ergens
pi_57475774
1. Gelukkig niet. !
2. Overlap/ruimte ertussen maakt natuurlijk geen reet uit, zolang het in alle browsers maar goed staat.
Het kan soms lastig zijn om de borders netjes te krijgen als elementen overlappen.
pi_57476433
Ok guys. Tja een klein tikje als je over een link hovered vind ik wel lekker, geeft je een ander gevoel. Verder geen kermis-dingen . Ok dan weet ik dat.

Wat betreft die divs, die gele stippellijnen komen voor in dreamweaver, niet in de browser. Hier is de code (alles is nog conceptmatig, png zit er niet bij ):

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		body {
   background-color: #000000;
}
html, body {
   margin:0;
   padding:0;  
   height:100%; 
}
#divDistance{
   width:1px;
   height:50%;
   margin-bottom:-295px;
   float:left;
}  
#divPaintings {
   height: 100px;
   width: 100px;
   float: right;
}

#divContainer{
   position:relative;
   clear:left;
   margin:0 auto;
   width:990px;
   height:590px;
   border:1px solid #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #FFFFFF;
}
#divMaintext {
   float: right;
   height: 273px;
   width: 340px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   padding: 5px;
}
#divNav {
   float: left;
   height: 258px;
   width: 145px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   font-size: 12px;
   text-align: left;
   padding-top: 20px;
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
}
#divNav a {
   color: #F9F9FF;
   text-decoration: none;
   display: block;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: solid;
   border-bottom-style: solid;
   border-top-color: #000099;
   border-bottom-color: #000099;
   font-weight: bold;
   padding-top: 8px;
   padding-right: 5px;
   padding-bottom: 8px;
   padding-left: 5px;
   margin-top: 17px;
   margin-right: 5px;
   margin-bottom: 17px;
   margin-left: 5px;
}
#divNav a:hover {
   background-color: #000066;
}


#divBottomleft {
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   position: relative;
   height: 285px;
   width: 510px;
}
#divPaintingnav {
   padding: 5px;
   height: 200px;
   width: 500px;
   position: relative;
   border: 1px solid #000000;
}
#divLogo {
   position: relative;
   height: 75px;
   width: 500px;
   padding: 5px;
   border: 1px solid #F0F0F0;
}
#divPaintings {
   padding: 5px;
   height: 574px;
   width: 465px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   float: right;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<body>
<div id="divDistance"></div>
<div id="divContainer">
  <div id="divPaintings">divPaintings</div>
  <div id="divPaintingnav"></div>
  <div id="divLogo"><img src="Default image/Logo.png" width="503" height="75" /></div>
  <div id="divBottomleft">
    <div id="divMaintext">divMaintext</div>
    <div id="divNav">
      <p><a href="Index.html">&gt; HOME</a><a href="Index.html">&gt; SCHILDERIJEN</a><a href="Index.html">&gt; KUNSTMARKTEN</a><a href="Index.html">&gt; CONTACT</a></p>
    </div>
  </div>
</div>
</div>
</body>
pi_57477520
Ik heb (voor mijn doen iig) een 'brein'breker...



en wanneer ik het browservenster breder zou maken zou het er zo uit moeten zien



Het centreren van het groene vlak kan in css met margins

1
2
3
4
5
6
7		#groen
{
  background-color:#00FF00;
  width: 150px;
  margin-left: auto;
  margin-right: auto
}


Het probleem hier alleen is dat ik geen idee heb hoe ik #rood en #blauw moet CSS'en. Wanneer ik een container maak, dan zou die slechts 1 achtergrondkleur (rood of blauw) kunnen hebben.

Een afbeelding als container-achtergrond vind ik geen goede oplossing (enorm breed plaatje moet dat dan worden, en het oplossen met scripts wil ik ook liever niet.

Iemand een idee?
pi_57478664
ik heb een css probleempje op de indexpag van www.severjanin.nl. Links is een menu uit 3 floating blokjes, en op de homepagina staan rechts ook nog 2 floating blokjes. Maar om de een of andere reden staat de bovenste van deze 2 blokjes in Firefox op dezelfde hoogte als de onderste van de 3 linkerblokjes (bekijk hem met IE om te zien hoe het moet zijn). Kan iemand mij vertellen hoe ik dit oplos?
Trotse poster van het 37000000ste bericht ^O^
pi_57479147
Laat maar, ik heb het al opgelost (1 grote layer, float left, met daarin de 3 menu-layertjes zonder float, probleem opgelost)
Trotse poster van het 37000000ste bericht ^O^
pi_57480803
quote:
Op woensdag 19 maart 2008 15:34 schreef GVRuud het volgende:
Ik heb (voor mijn doen iig) een 'brein'breker...

[ afbeelding ]

en wanneer ik het browservenster breder zou maken zou het er zo uit moeten zien

[ afbeelding ]

Het centreren van het groene vlak kan in css met margins
[ code verwijderd ]
Dat kan, maar het werkt niet in IE.
quote:
Het probleem hier alleen is dat ik geen idee heb hoe ik #rood en #blauw moet CSS'en. Wanneer ik een container maak, dan zou die slechts 1 achtergrondkleur (rood of blauw) kunnen hebben.

Een afbeelding als container-achtergrond vind ik geen goede oplossing (enorm breed plaatje moet dat dan worden, en het oplossen met scripts wil ik ook liever niet.

Iemand een idee?
Je kunt het volgende proberen:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		#rood {
background-color: #F00;
width: 50%;
margin-right: -75px; /* de helft van de breedte van #groen */
}
#groen {
background-color: #0F0;
width: 150px;
}
#blauw {
background-color: #00F;
width: 50%;
margin-left: -75px; /* de helft van de breedte van #groen */
}
#rood, #groen, #blauw {
height: 150px;
float: left;
}

Niet getest overigens.
fokstok.nl
pi_57481350
Getest in FF en Safari:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		#rood {
   background-color: #F00;
   width: 50%;
   margin-left: -75px; /* de helft van de breedte van #groen */
   float: left;
}
#groen {
   background-color: #0F0;
   width: 150px;
   float: left;
}
#blauw {
   background-color: #00F;
   width: 50%;
   margin-left: -75px; /* de helft van de breedte van #groen */
   float: right;
}
#rood, #groen, #blauw {
   height: 150px;
}

En in de html
1
2
3		<div id="rood"></div>
<div id="blauw"></div>
<div id="groen"></div>

De volgorde is belangrijk.
fokstok.nl
pi_57482362
Heeft iemand een oplossing voor deze fouten?

De fouten in IE6

http://upload.bruggema.nl/view/1380554357/foutlijst.JPG

Hier staan de foto's niet goed op een rij...

http://upload.bruggema.nl/view/1380554357/foutpopup.JPG

popup moet 100% breedte hebben maar helaas..
Just say hi!
pi_57484460
quote:
Op woensdag 19 maart 2008 18:31 schreef Light het volgende:
Getest in FF en Safari:
[ code verwijderd ]

En in de html
[ code verwijderd ]

De volgorde is belangrijk.
Held!

Heb beide varianten even geprobeerd, en nog een overflow-x:hidden op de container toegevoegd.

Ik zie alleen bij de float: left,left,right versie dat er soms een witte ruimte tussen #groen en #blauw ontstaat (ik denk door afrondingen die de browser doet door de 50% en de negatieve margin). De float left,left,left variant heeft dit niet, maar wanneer het venster smaller is dan de breedte van #groen, dan wrapt #blauw onder #groen... Ik ga weer even geinspireerd proberen
pi_57484714
quote:
Op woensdag 19 maart 2008 20:36 schreef GVRuud het volgende:

[..]

Held!

Heb beide varianten even geprobeerd, en nog een overflow-x:hidden op de container toegevoegd.

Ik zie alleen bij de float: left,left,right versie dat er soms een witte ruimte tussen #groen en #blauw ontstaat (ik denk door afrondingen die de browser doet door de 50% en de negatieve margin). De float left,left,left variant heeft dit niet, maar wanneer het venster smaller is dan de breedte van #groen, dan wrapt #blauw onder #groen... Ik ga weer even geinspireerd proberen
Ik had juist altijd een overlap van blauw over groen bij left, left, left (en de volgorde rood, groen, blauw) Vandaar dat ik met left, left, right ging proberen.

Trouwens, is het de bedoeling dat de vakken rood en blauw ook gebruikt worden voor wat anders dan alleen de achtergrondkleur? Zo nee, dan is er een andere oplossing mogelijk
fokstok.nl
pi_57484947
#rood en #blauw krijgen een background-image toegekend die aansluit op het siteontwerp wat in #groen komt te staan. Deze twee zijkanten zijn echter niet gelijk, en omdat ze ook 'oneindig' mee moeten rekken tot aan de randen van het browservenster, is de oplossing van 3 divs op een rij volgensmij de enige juiste. Wanneer de witruimte niet voorkwam zou ik de perfecte oplossing hebben..
pi_57485412
quote:
Op woensdag 19 maart 2008 19:12 schreef Chandler het volgende:
Heeft iemand een oplossing voor deze fouten?

De fouten in IE6

http://upload.bruggema.nl/view/1380554357/foutlijst.JPG

Hier staan de foto's niet goed op een rij...

http://upload.bruggema.nl/view/1380554357/foutpopup.JPG

popup moet 100% breedte hebben maar helaas..
Ik kan je site uberhaupt niet openen in IE6
Fx, IE7 en opera geen probleem...
pi_57486465
quote:
Op woensdag 19 maart 2008 20:55 schreef GVRuud het volgende:
#rood en #blauw krijgen een background-image toegekend die aansluit op het siteontwerp wat in #groen komt te staan. Deze twee zijkanten zijn echter niet gelijk, en omdat ze ook 'oneindig' mee moeten rekken tot aan de randen van het browservenster, is de oplossing van 3 divs op een rij volgensmij de enige juiste. Wanneer de witruimte niet voorkwam zou ik de perfecte oplossing hebben..
Ik krijg geen witruimte tussen blauw en groen (en ook niet tussen rood en groen). Wel kan het handig zijn om margin en padding van de container (body?) op 0 te zetten. Een horizontale scrollbalk krijg ik ook niet. Maar ik heb geen IE bij de hand om het daarmee te testen.
fokstok.nl
pi_57486797
Die witruimte is er ook niet altijd. Als je de venstergrootte veranderd, dan zie je 'live' alles verschuiven zoals het hoort. Echter soms (ik denk bij een oneven getal als breedte), krijg ik een wit lijntje tussen groen en blauw. Dit is in safari, firefox en opera. Bij internet explorer 6 en 7 springt blauw er soms onder zie ik net...

Verder staan alle paddings/margins etc op 0 en gebruik ik een reset.css voor basisinstellingen. Als ik die weglaat, blijft de scrollbalk nogsteeds.
pi_57493207
quote:
Op woensdag 19 maart 2008 21:10 schreef mcDavid het volgende:

[..]

Ik kan je site uberhaupt niet openen in IE6
Fx, IE7 en opera geen probleem...
IE7 & de laatste versie van FF geven het allemaal heel netjes weer

Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
Just say hi!
pi_57497673
quote:
Op woensdag 19 maart 2008 21:51 schreef GVRuud het volgende:
Uiteindelijk ben ik toch maar bezweken onder een beunhaasmethode omdat ik er echt niet aan uit kwam en de html wel een keertje af mocht zijn...

Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.

Toch heel erg bedankt voor je moeite!
  donderdag 20 maart 2008 @ 13:58:20 #252
12880 CraZaay
prettig gestoord
pi_57499904
quote:
Op donderdag 20 maart 2008 12:17 schreef GVRuud het volgende:

Zie http://bus.nimeon.nl/. De lijntjes die links en rechts van de header doorlopen worden nu met javascript gepositioneerd.
Bah Waarom niet gewoon die header 100% breed en een breed plaatje met die lijnen maken en die gecentreerd als achtergrond voor de header gebruiken? De afbeelding wordt daar misschien 1 kilobyte groter van.
pi_57500975
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
pi_57502103
quote:
Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Je kunt het ook doen net als die gast hiervoor met die rode/groene/blauwe div's.
En dan die achterste 2 dus een achtergrondplaatje geven met repeat-x
  donderdag 20 maart 2008 @ 16:08:40 #255
12880 CraZaay
prettig gestoord
pi_57502393
quote:
Op donderdag 20 maart 2008 14:56 schreef GVRuud het volgende:
Ja ik had het liever ook anders opgelost. Maar een afbeelding van 2000px (of meer) breder vind ik helemaal geen mooie oplossing. Bij deze oplossing garandeer ik dat de lijnen nooit ophouden
Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter

Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
pi_57502649
quote:
Op donderdag 20 maart 2008 07:29 schreef Chandler het volgende:

[..]

IE7 & de laatste versie van FF geven het allemaal heel netjes weer

Ik zit dus alleen met 100% width en de juiste manier van de afbeeldingen naast en onder elkaar te zetten.
Een randje eromheen zetten wil nog wel eens helpen om te kijken wat er precies gebeurt
http://duft.nl/web/test2.html

Zo te zien zijn die 2 plaatjes linksboven net te hoog, waardoor de plaatjes daaronder naar een volgende regel worden verplaatst ofzo....
pi_57505441
Het probleem is dat ik het niet zie

Hoe zou ik dat kunnen oplossen?
Just say hi!
pi_57505687
quote:
Op donderdag 20 maart 2008 18:55 schreef Chandler het volgende:
Het probleem is dat ik het niet zie

Hoe zou ik dat kunnen oplossen?
Al die blokjes een vaste hoogte geven?
pi_57510638
Na tijdenlang websites gemaakt te hebben wil ik het nu met divjes proberen. Aangezien het nog nieuw voor me is en het me (mijn mening) toch redelijk wil lukken, loop ik al enkele dagen tegen hetzelfde probleem aan.

Wat ik wil is een site opgedeeld in 6 divs. Een container die de rest bevat, namelijk de header, de body (bevat een div menu en een div content) en de footer.
Voorbeeld/vooruitgang is hier te zien: www.bugworks.eu/stuff/fok/div.html

Alles lijkt goed te zijn tot het moment ik het menu aan ga passen (meer regels/tekst), dan overlapt hij de footer. Doe ik hetzelfde bij de content dan wordt de footer netjes zoals bedoeld opgeschoven naar beneden. Nu heb ik al vanalles geprobeerd, maar ik kan geen oplossing vinden. Weet iemand van jullie waar het aan ligt? Alvast bedankt. :Y

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28		#page_container {
border: 1px solid;
padding: 10px;
margin-left: 150px;
margin-right: 250px;
}
#page_header {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
#page_body {
border: 1px solid;
}
#page_menu {
position: absolute;
width: 190px;
border: 1px solid;
}
#page_content {
margin-left: 200px;
border: 1px solid;
}
#page_footer {
border: 1px solid;
height: 50px;
margin-top: 10px;
}


HTML/divjes
1
2
3
4
5
6
7
8		<div id="page_container">
  <div id="page_header">Header</div>
  <div id="page_body">
    <div id="page_menu">Menu<br /><br /><br /><br /><br /><br />Menu</div>
    <div id="page_content">Content<br /><br /><br />Content</div>
  </div>
  <div id="page_footer">Footer</div>
</div>
pi_57510731
Je menu heeft een position:absolute. Daarmee haal je 'm uit de natuurlijke float, dus de rest houdt geen rekening meer met de grootte van je menu.

Als je 'm gewoon positioneert met margins, zou het in principe goed moeten gaan.
pi_57511232
Het de position:absolute weggehaald en "margin-top: -150px;" toegevoegd aan #page_content, het enige nadeel is dat hij uitgaat van het einde (laagste) van het menu div, dus dat verschilt nogal.

Maar ondanks bovenstaande blijft het menu nog steeds over het footer div gaan .
pi_57511479
als je het mij vraagt moet je helemaal niet met zulke grote marges hoeven werken.. Ik ga er even op los!
pi_57511997
http://duft.nl/web/div.html
Een extra divje met clear:both was de truc!
Weltrusten
  donderdag 20 maart 2008 @ 23:38:02 #264
12880 CraZaay
prettig gestoord
pi_57512024
Zonder #page_body kan het ook prima, scheelt weer een element
pi_57512055
Dank je .

Slaap lekker
pi_57512058
quote:
Op donderdag 20 maart 2008 23:38 schreef CraZaay het volgende:
Zonder #page_body kan het ook prima, scheelt weer een element
zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)

Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
pi_57512100
quote:
Op donderdag 20 maart 2008 23:39 schreef mcDavid het volgende:

[..]

zou idd ook kunnen, en dan de footer clear:both geven (of misschien is dat nieteens nodig)

Maar misschien moet die #page_body nog een bepaalde opmaak krijgen...
#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
pi_57512142
quote:
Op donderdag 20 maart 2008 23:40 schreef BugWorks het volgende:

[..]

#page_body had ik eigenlijk als container div, hoeft dus geen opmaak oid.
dan die skippen idd. Veel makkelijker.
pi_57512193
quote:
Op donderdag 20 maart 2008 23:42 schreef mcDavid het volgende:

[..]

dan die skippen idd. Veel makkelijker.
Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite .

Edit
Je extra div lijkt dus toch noodzakelijk.

[ Bericht 5% gewijzigd door BugWorks op 20-03-2008 23:51:41 ]
pi_57514094
quote:
Op donderdag 20 maart 2008 16:08 schreef CraZaay het volgende:

[..]

Waarom niet? Je moet natuurlijk afwegen hoeveel van je bezoekers fullscreen browsen op een scherm van 25" of groter

Javascript gebruiken voor lay-out, terwijl het voor gedrag bedoeld is, vind ik helemaal ranzig. Maar ieder z'n meug
Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
  vrijdag 21 maart 2008 @ 03:39:03 #271
32768 DionysuZ
Respect my authority!
pi_57514146
die lijntjes kun je heus wel op een andere manier oplossen zonder javascript te gebruiken =). Wees creatief
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  vrijdag 21 maart 2008 @ 08:07:29 #272
12880 CraZaay
prettig gestoord
pi_57514616
quote:
Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:

Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
Het is visueel en dus layout wat mij betreft, ook als het niets toevoegt aan de gebruikersbeleving. Ik snap wel dat je het zo gedaan hebt hoor en ik heb ook echt weleens het een en ander gepositioneerd met JS. Je moet aan afweging maken tussen twee kwaden in dit geval, en ik kies dan altijd voor zo min mogelijk elementen in de HTML die alleen voor opmaak gebruikt worden en geen JS, dus dan kom je uit op een oplossing met een brede achtergrondafbeelding. Neemt niet weg dat beide punten verdedigbaar zijn
  vrijdag 21 maart 2008 @ 12:40:11 #273
32768 DionysuZ
Respect my authority!
pi_57518546
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57518718
quote:
Op vrijdag 21 maart 2008 03:03 schreef GVRuud het volgende:

[..]

Ben het helemaal met je eens. Javascript voor layouts gebruiken IS ranzig. Daarom gebruik ik het in dit geval alleen om de lijntjes links en rechts door te trekken (wat verder geen enkele extra's biedt. In hoeverre zijn twee lijntjes layout? De overige onderdelen worden gewoon met html/css geplaatst). Wanneer javascript niet ingeschakeld zou zijn, zijn de lijntjes (door standaard display:none) ook niet zichtbaar.
Nogmaals: kijk even onderaan de vorige pagina. Die gast die links en rechts een verschillende kleur background wil. Als je het precies zo doet gaat het ook goed. Doe je alleen een achtergrondafbeelding ipv een achtergrondkleur!
pi_57518771
quote:
Op donderdag 20 maart 2008 23:44 schreef BugWorks het volgende:

[..]

Heb het nu net even aangepast, dus zonder die body div. Dat werkt idd, alleen is jouw oplossing voor een groot deel dus overbodig geworden, maar toch bedankt voor je moeite .

Edit
Je extra div lijkt dus toch noodzakelijk.
Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.
pi_57518835
quote:
Op vrijdag 21 maart 2008 12:40 schreef DionysuZ het volgende:
ik erger me weer dood aan microsoft. Aangezien ze opacity nog steeds niet accepteren in IE7, ben ik genoodzaakt alpha filter erop te gebruiken. Maar wat hebben ze nou geflikt? Ze hebben cleartype gewoon uitgezet voor elementen waar dxtransform op plaatsvindt.
IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
  vrijdag 21 maart 2008 @ 13:15:23 #277
32768 DionysuZ
Respect my authority!
pi_57519222
quote:
Op vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:

[..]

IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijd
1
2
3		    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="/iehack.css" />
    <![endif]--> 

met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6 ;).

Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.

Resultaat is dus een divje met gewoon hakkelige tekst erin. :(

Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he :P
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57519643
quote:
Op donderdag 20 maart 2008 19:07 schreef mcDavid het volgende:

[..]

Al die blokjes een vaste hoogte geven?
Dat had ik gedaan, 130 hoogte en breedte;
Just say hi!
  vrijdag 21 maart 2008 @ 13:37:55 #279
32768 DionysuZ
Respect my authority!
pi_57519684
heb je ergens de code staan?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  vrijdag 21 maart 2008 @ 14:42:16 #280
12880 CraZaay
prettig gestoord
pi_57520974
quote:
Op vrijdag 21 maart 2008 12:54 schreef mcDavid het volgende:

[..]

IE7 ondersteunt in ieder geval wel gewoon PNG met alpha-transparantie hoor!
IE6 dan weer niet wat idd bloedirritant is
En IE7 heeft wat afwijkingen in de weergave van kleuren van PNG's.
pi_57521035
quote:
Op vrijdag 21 maart 2008 13:15 schreef DionysuZ het volgende:

[..]

dat is gelukkig wel gefixt jah. Maar als in PNG met alpha wil gebruiken moet ik nog altijd
[ code verwijderd ]

met daarin dxtransform filters gebruiken om het werkend te krijgen voor IE6 .

Maar dat was mijn issue niet. Probeer eens een divje voor 70% transparant te maken, met tekst erin (die dus ook transparant moet zijn), dan werkt dat mooi zoals het hoort in de meeste browsers. Maar ten eerste support IE de opacity css regel nog niet, dus moet je weer een filter gaan toepassen. Maar wat hebben die klojo's nou dus gedaan, cleartype UITGEZET voor alle elementen waar zoiets op toegepast wordt.

Resultaat is dus een divje met gewoon hakkelige tekst erin.

Nahjah heb gelukkig een workaround gevonden voor waar ik het voor nodig had. Klant blijft koning he
In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.
  vrijdag 21 maart 2008 @ 15:14:36 #282
32768 DionysuZ
Respect my authority!
pi_57521595
quote:
Op vrijdag 21 maart 2008 14:45 schreef Geqxon het volgende:

[..]

In plaats van een div met opacity kun je ook gewoon een 1x1 pixel PNG gebruiken.
ik weet het..... dat is toch ook niet wat ik bedoel? als je tekst een alpha channel wil geven.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_57521758
quote:
Op vrijdag 21 maart 2008 13:35 schreef Chandler het volgende:

[..]

Dat had ik gedaan, 130 hoogte en breedte;
Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...
pi_57522910
quote:
Op vrijdag 21 maart 2008 12:50 schreef mcDavid het volgende:

[..]

Volgens mij zou je ook de footer kunnen gebruiken ipv die extra div. Geef die ff een clear:both (dit geeft aan dat er aan beide kanten van die div geen float-objecten mogen staan) en kijk wat er gebeurt.
Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.
  vrijdag 21 maart 2008 @ 16:37:27 #285
12880 CraZaay
prettig gestoord
pi_57523055
quote:
Op vrijdag 21 maart 2008 16:27 schreef BugWorks het volgende:

[..]

Als ik dat doe houdt hij geen rekening met de opgegeven margin van de footer, zit dus gelijk tegen de langste div aan (menu of content). Tot op dit moment werkt dit goed dus ik houd het ook zo.
Klopt, margin-top heb je dan weinig meer aan, maar padding lost een hoop op
pi_57523144
quote:
Op vrijdag 21 maart 2008 15:23 schreef mcDavid het volgende:

[..]

Probeer eens 140 ofzo? Klaarblijkelijk worden 2 van de cellen opgerekt in IE6...
Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);

En een ander probleem was dat wanneer je op een van de plaatjes klikt je een popup krijgt die 100% breed hoort te zijn maar helaas dat is deze niet misschien moet ik block mee geven aan de div?
Just say hi!
  vrijdag 21 maart 2008 @ 16:52:18 #287
12880 CraZaay
prettig gestoord
pi_57523305
quote:
Op vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:

misschien moet ik block mee geven aan de div?
Het is van nature al een block level element
pi_57525746
maar waarom is deze dan geen 100%
Just say hi!
pi_57539358
quote:
Op vrijdag 21 maart 2008 16:42 schreef Chandler het volgende:

[..]

Ik heb het nu al aangepast naar 135px maar kan helaas zelf niet controlleren (slecht hé);

En een ander probleem was dat wanneer je op een van de plaatjes klikt je een popup krijgt die 100% breed hoort te zijn maar helaas dat is deze niet misschien moet ik block mee geven aan de div?
Ze staan nu zowel in Fx2.x als in MSIE 6 als 3 rijen van 2
iig consequenter
pi_57544996
Haha, heb nu de thumbs maar op 110px gezet in een div van 125px die 5px padding gebruikt! dus moet nu in IE6 ook goed zichtbaar zijn
Just say hi!
  maandag 24 maart 2008 @ 13:07:19 #291
21410 Fliepke
Serieuze waarheid
pi_57577368
Klein probleempje dat vast heel simpel op te lossen is.
Ik heb een grote div en daarin zitten allemaal divjes.
de onderste twee zijn er twee die naast elkaar staan. Namelijk een sidebar en daarnaast de daadwerkelijke content.
De sidebar is niet zo lang en de content varieert in lengte. Nu wil ik natuurlijk dat mijn sidebar ook altijd net zo lang is als mijn content.
Het is vast iets met min-height: contentheight
ofzo wat. Maar hoe zit het precies?
  maandag 24 maart 2008 @ 14:12:40 #292
12880 CraZaay
prettig gestoord
pi_57578538
Leg eerst eens uit waarom je dat wilt Fliepke, en dan gaan we daarna waarschijnlijk "faux columns" roepen
  maandag 24 maart 2008 @ 14:44:10 #293
21410 Fliepke
Serieuze waarheid
pi_57579067
Omdat ik dat mooier vind?
pi_57579842
"Faux columns!"

-edit-
gewoon een achtergrondafbeelding gebruiken dus
  maandag 24 maart 2008 @ 15:25:24 #295
12880 CraZaay
prettig gestoord
pi_57579848
Ah, het gaat dus om iets visueels kennelijk. En wat wil je precies bereiken dan?

M'n idee is namelijk dat je iets wilt wat op te lossen is dmv zogenaamde "faux colums" (google)
  maandag 24 maart 2008 @ 15:39:15 #296
21410 Fliepke
Serieuze waarheid
pi_57580128
Dat werkt dus niet, want ik wil onderaan de sidebar een klein plaatje hebben. Dat zou door de achtergrond te "faken" dus nog steeds ergens in het midden staan.
  maandag 24 maart 2008 @ 15:44:23 #297
12880 CraZaay
prettig gestoord
pi_57580254
Dan zet je dat in een element wat onder beide kolommen komt, en dus altijd onderaan staat ongeacht de hoogte van de kolommen?
  maandag 24 maart 2008 @ 15:46:32 #298
21410 Fliepke
Serieuze waarheid
pi_57580294
quote:
Op maandag 24 maart 2008 15:44 schreef CraZaay het volgende:
Dan zet je dat in een element wat onder beide kolommen komt, en dus altijd onderaan staat ongeacht de hoogte van de kolommen?
Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opende .
pi_57580322
quote:
Op maandag 24 maart 2008 15:46 schreef Fliepke het volgende:

[..]

Ja ik zat er ook al aan te denken om met de footer een beetje vals te spelen. Toch grappig dat het toch allemaal zo kneuterig is dat je de meeste simpele dingen gewoon moet gaan faken. Ik zit overigens nu ook weer gezellig te worstelen met het verschil in boxing model tussen IE en FF. Dacht dat ik er bijna was totdat ik IE opende .
Jup dat is het.

Weet iemand trouwens of Firefox3 weer anders om zal gaan met css en html dan firefox 2? Dat we dan met een browser extra rekening moeten houden?
  maandag 24 maart 2008 @ 15:48:02 #300
21410 Fliepke
Serieuze waarheid
pi_57580323
Overigens staat hier een of andere oplossing
http://www.intensivstatio(...)es/2/template-1.html

div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); }

The content-div has a left margin. Setting a min-height assures that the content area is always higher than the navigation.

IE on MAC doesn't interprets min-height. The dynamic properties (i.e. expression) used in explorer are proprietary by Microsoft. This prevents the css from validating according to W3C.
«-- back
  maandag 24 maart 2008 @ 16:24:45 #301
12880 CraZaay
prettig gestoord
pi_57581064
IE voor de Mac moet je niet meer ondersteunen, niemand gebruikt die meer, wordt sinds 1999 niet meer ontwikkeld en kun je niet eens meer downloaden bij MS

Firefox 3 zal er net zo mee omgaan als Firefox 2, namelijk standards compliant conform de W3C richtlijnen

En voor box model problemen: met welk doctype?
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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