[html, css, js] voor dummies #18

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  PR/Manusje van alles vrijdag 11 november 2011 @ 13:49:53 #256
148800 crew  Surveillance-Fiets
Toezicht is gezond!
pi_104244406
quote:
14s.gif Op vrijdag 11 november 2011 13:49 schreef KomtTijd... het volgende:
De achtergrondkleur die ik de odd-rijen meegeef is een RGBA kleur, dus IE7 gebruikers zien het verschil toch niet :+
IE7 gebruikers. :')
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! ©yvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
  vrijdag 11 november 2011 @ 13:55:34 #257
50298 QM84
Het Orakel
pi_104244609
quote:
11s.gif Op vrijdag 11 november 2011 13:39 schreef Catch22- het volgende:
Ik los zulke issues vaak met jQuery op.
[ code verwijderd ]

Zulke scripts maak ik ook voor .first, .last, .odd e.d.
Waarom met JS en niet gewoon met conditional comments? Die werken gegarandeerd altijd voor IE. JS kan je uitzetten..
dat dus.
pi_104244682
Laatst iemand via de mail: Er zit geen duidelijke scheiding tussen de forum-reacties, dat is lastig!
teruggemaild: Die zit er wel, ga maar een fatsoenlijke browser gebruiken :6

Heerlijk als je die vrijheid hebt als developer 6.gif
zcflevo.nl
  vrijdag 11 november 2011 @ 13:58:29 #259
56176 Catch22-
Ben je Blind?!
pi_104244712
quote:
14s.gif Op vrijdag 11 november 2011 13:49 schreef KomtTijd... het volgende:
De achtergrondkleur die ik de odd-rijen meegeef is een RGBA kleur, dus IE7 gebruikers zien het verschil toch niet :+
Waarom zou je dat doen?
quote:
7s.gif Op vrijdag 11 november 2011 13:55 schreef QM84 het volgende:

[..]

Waarom met JS en niet gewoon met conditional comments? Die werken gegarandeerd altijd voor IE. JS kan je uitzetten..
onoverzichtelijke bron. Die styles geef ik wel aan in een CSS die met een conditional comment wordt geinclude
quote:
0s.gif Op vrijdag 11 november 2011 13:49 schreef Surveillance-Fiets het volgende:

[..]

IE7 gebruikers. :')
Wie betaalt bepaalt he :)

quote:
10s.gif Op vrijdag 11 november 2011 13:57 schreef KomtTijd... het volgende:
Laatst iemand via de mail: Er zit geen duidelijke scheiding tussen de forum-reacties, dat is lastig!
teruggemaild: Die zit er wel, ga maar een fatsoenlijke browser gebruiken :6

Heerlijk als je die vrijheid hebt als developer [ afbeelding ]
Mja, ik zie dat niet echt als een professionele houding... Als ik iets maak, moet het ook in 95%+ van de gebruikte browsers werken. En zulke 'foutjes' zijn meestal het gevolg van een verkeerde aanpak en niet van browserincompetence.

Maar het is natuurlijk nogal een verschil of je voor jezelf kleine projectjes maakt, of dat je voor een baas (en dus klanten) werkt.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104244777
quote:
11s.gif Op vrijdag 11 november 2011 13:58 schreef Catch22- het volgende:

[..]

Waarom zou je dat doen?

[..]

onoverzichtelijke bron. Die styles geef ik wel aan in een CSS die met een conditional comment wordt geinclude

[..]

Wie betaalt bepaalt he :)
omdat RGBA(0,0,0,0.1) way makkelijker is dan met photoshop op zoek gaan naar een kleur die net een tintje donkerder is dan je achtergrond :s)
zcflevo.nl
  vrijdag 11 november 2011 @ 14:02:18 #261
56176 Catch22-
Ben je Blind?!
pi_104244839
Dat klopt, maar dat kan je ook met opacity en een filter voor IE.

welke ik heel stoer met LESS mixins fix ;)
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104244891
quote:
11s.gif Op vrijdag 11 november 2011 13:58 schreef Catch22- het volgende:

[..]

Mja, ik zie dat niet echt als een professionele houding... Als ik iets maak, moet het ook in 95%+ van de gebruikte browsers werken. En zulke 'foutjes' zijn meestal het gevolg van een verkeerde aanpak en niet van browserincompetence.

Maar het is natuurlijk nogal een verschil of je voor jezelf kleine projectjes maakt, of dat je voor een baas (en dus klanten) werkt.
Helemaal mee eens, maar in dit geval ben ik zelf zowel de baas als de klant, ergo: lui :+
Die forumtemplate gaat nog wel veranderen trouwens, maar ik moest 'm updaten van een oude naar een nieuwe layout en heb toen even heel snel wat kleurtjes bij elkaar gegrabbeld. En voor dingen als een wisselend achtergrondkleurtje voor de oneven rijen, daarvan vind ik dat fossielen die een fossiele browser gebruiken ook prima zonder kunnen.

quote:
11s.gif Op vrijdag 11 november 2011 14:02 schreef Catch22- het volgende:
Dat klopt, maar dat kan je ook met opacity en een filter voor IE.

welke ik heel stoer met LESS mixins fix ;)
Nee want dan wordt ook de inhoud transparant. Met een opacity van 0.1 is de boel dan echt niet meer leesbaar.
zcflevo.nl
  vrijdag 11 november 2011 @ 14:10:32 #263
56176 Catch22-
Ben je Blind?!
pi_104245135
quote:
0s.gif Op vrijdag 11 november 2011 14:03 schreef KomtTijd... het volgende:

[..]

Helemaal mee eens, maar in dit geval ben ik zelf zowel de baas als de klant, ergo: lui :+
Die forumtemplate gaat nog wel veranderen trouwens, maar ik moest 'm updaten van een oude naar een nieuwe layout en heb toen even heel snel wat kleurtjes bij elkaar gegrabbeld. En voor dingen als een wisselend achtergrondkleurtje voor de oneven rijen, daarvan vind ik dat fossielen die een fossiele browser gebruiken ook prima zonder kunnen.
Ie7 is al fossiel bij jou?
quote:
Nee want dan wordt ook de inhoud transparant. Met een opacity van 0.1 is de boel dan echt niet meer leesbaar.
Klopt. Maar ik heb meestal een echt afwijkende kleur voor odd-rows
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104245222
Nice.


En ja IE7 is al fossiel bij mij. IE is alweer 2 versies verder. per browser 2 versies onderhouden vind ik eigenlijk wel genoeg. Zeker als het gaat om een achtergrondkleurtje, functioneel zorg ik wel dat alles ook in IE7 werkt.
zcflevo.nl
pi_104247633
Nog een vraag.

Als ik 3 divjes naast elkaar heb, met een container daaromheen. De container neemt de hoogte van de langste div (100% geloof ik). De twee kortste divs moeten ook die hoogte aannemen. Hoe bereik ik dat? Want 100% doet geen drol.

(center is hier de div met de variabele hoogte) Dus
1
2
3
4
5		<div id="container"> 
<div id="left"></div>
<div id="center"></div>
<div id="right"></div> 
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14		#container{
height:100%;
}
#left{
height:100%;
float:left;
}
#right{
height:100%;
float:left;
}
center{
float:left;
}


[ Bericht 5% gewijzigd door RenRen- op 11-11-2011 15:13:17 (Paar dingies vergeten.) ]
pi_104247991
"Faux columns" is je google-term ;)
zcflevo.nl
  vrijdag 11 november 2011 @ 15:24:43 #267
12221 Tijn
Powered by MS Paint
pi_104248145
quote:
11s.gif Op vrijdag 11 november 2011 14:10 schreef Catch22- het volgende:

[..]

Ie7 is al fossiel bij jou?
Bij wie niet dan? IE7 is echt het absolute minimum waar ik voor develop en veruit de oudste browser waar ik überhaupt nog aandacht aan schenk.
Verberg de nieuwsticker
pi_104248183
quote:
14s.gif Op vrijdag 11 november 2011 15:21 schreef KomtTijd... het volgende:
"Faux columns" is je google-term ;)
Wat ik dan krijg is dat je een achtergrondafbeelding erin moet gooien van 800 hoog, als je hem 800 hoog wilt hebben, maar wat nou als de content variabel is? Moet ik dan een achtergrondafbeelding van 1px doen, die y-repeat en dan op 100%?
  vrijdag 11 november 2011 @ 15:29:21 #269
56176 Catch22-
Ben je Blind?!
pi_104248326
quote:
5s.gif Op vrijdag 11 november 2011 15:24 schreef Tijn het volgende:

[..]

Bij wie niet dan? IE7 is echt het absolute minimum waar ik voor develop en veruit de oudste browser waar ik überhaupt nog aandacht aan schenk.
Sja, klanten die het vragen, krijgen het ook (Betalen er ook voor immers)
quote:
0s.gif Op vrijdag 11 november 2011 15:25 schreef RenRen- het volgende:

[..]

Wat ik dan krijg is dat je een achtergrondafbeelding erin moet gooien van 800 hoog, als je hem 800 hoog wilt hebben, maar wat nou als de content variabel is? Moet ik dan een achtergrondafbeelding van 1px doen, die y-repeat en dan op 100%?
gelijk hoogte waarbij ze echt van gelijke hoogte zijn is met CSS niet echt te doen.

Ik schrijf altijd een script als dat nodig is.

1$("#container div").each(function() { $(this).height($(this).parent().height(); });
Zoiets.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104248340
quote:
0s.gif Op vrijdag 11 november 2011 15:25 schreef RenRen- het volgende:

[..]

Wat ik dan krijg is dat je een achtergrondafbeelding erin moet gooien van 800 hoog, als je hem 800 hoog wilt hebben, maar wat nou als de content variabel is? Moet ik dan een achtergrondafbeelding van 1px doen, die y-repeat en dan op 100%?
Juist!
Al is die 100% niet nodig.

Alleen als je ook nog met ronde hoeken wilt gaan werken is faux columns wel lastig, want border-radius werkt dan niet meer.
zcflevo.nl
pi_104248402
quote:
11s.gif Op vrijdag 11 november 2011 15:29 schreef Catch22- het volgende:
[..]

gelijk hoogte waarbij ze echt van gelijke hoogte zijn is met CSS niet echt te doen.

Ik schrijf altijd een script als dat nodig is.
[ code verwijderd ]

Zoiets.
Die snap ik niet... Nog even KT.. zijn maniertje proberen.
quote:
14s.gif Op vrijdag 11 november 2011 15:29 schreef KomtTijd... het volgende:

[..]

Juist!
Al is die 100% niet nodig.

Alleen als je ook nog met ronde hoeken wilt gaan werken is faux columns wel lastig, want border-radius werkt dan niet meer.
Die heb ik niet, dus dat valt mee. het is wel echt nodig, want dubbel lijntje... Eeeeven proberen.
pi_104248510
quote:
11s.gif Op vrijdag 11 november 2011 15:29 schreef Catch22- het volgende:

[..]

gelijk hoogte waarbij ze echt van gelijke hoogte zijn is met CSS niet echt te doen.

Ik schrijf altijd een script als dat nodig is.
[ code verwijderd ]

Zoiets.
Hmm ik denk dat dat tegenwoordig haast een betere oplossing is. De fallback is hooguit dat de kolommen niet even hoog zijn, wat meestal ook niet echt een probleem is.
zcflevo.nl
  vrijdag 11 november 2011 @ 15:36:59 #273
56176 Catch22-
Ben je Blind?!
pi_104248605
sja, of opmaak met JS doen (heeft niet mijn voorkeur) of extra DOMobjecten toevoegen...

Met Js weet ik vrijwel zeker dat het werkt. Wel even uitkijken met paddings en inner/outerheight mocht je die oplossing proberen.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104248630
quote:
14s.gif Op vrijdag 11 november 2011 15:29 schreef KomtTijd... het volgende:

[..]

Juist!
Al is die 100% niet nodig.

Alleen als je ook nog met ronde hoeken wilt gaan werken is faux columns wel lastig, want border-radius werkt dan niet meer.
Ik krijg het niet voor elkaar... Moet ik even uitbesteden denk ik...
  vrijdag 11 november 2011 @ 15:45:28 #275
56176 Catch22-
Ben je Blind?!
pi_104248941
waarom wil je die hoogte? kan je geen repeterende achtergrond instellen die de achtergrond van die 2 kleinere kolommen faked?

en dat je die dan op de container instelt.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  vrijdag 11 november 2011 @ 15:48:25 #276
12221 Tijn
Powered by MS Paint
pi_104249063
quote:
11s.gif Op vrijdag 11 november 2011 15:29 schreef Catch22- het volgende:

[..]

Sja, klanten die het vragen, krijgen het ook (Betalen er ook voor immers)
Oh natuurlijk, als IE7 specifiek wordt gevraagd, dan krijgen ze het ook. Maar die vraag krijg ik eigenlijk niet vaak.
Verberg de nieuwsticker
pi_104249222
quote:
11s.gif Op vrijdag 11 november 2011 15:45 schreef Catch22- het volgende:
waarom wil je die hoogte? kan je geen repeterende achtergrond instellen die de achtergrond van die 2 kleinere kolommen faked?

en dat je die dan op de container instelt.
Omdat ik een linkerdiv heb met een rechterborder, center met links/rechts border, rechts met een linkerborder. Die moeten dubbele lijntjes naboodsen. Ik mag steeds geen achtergrondafbeelding gebruiken, is slordig. >: Dus ik zoek andere oplossingen. Maar ik denk dat het neerkomt op een achtergrondafbeelding.
  vrijdag 11 november 2011 @ 16:00:54 #278
56176 Catch22-
Ben je Blind?!
pi_104249618
Die center wordt in principe het hoogst toch?

als de container links en rechts een border heeft en de center ook links/rechts, heb je je situatie toch?

Ik zou echter gewoon even een jQuery scriptje bouwen. Wat ik postte zou al moeten werken.

http://jsbin.com/onulog/3/edit#source

linksboven op render drukken

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		<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #container {
    float:left; 
  }
  #container div {
    float:left; 
    width:100px;
  }
  #left { border-left:1px solid red; }
  #center { border-left:1px solid red; border-right:1px solid red; }
  #right { border-right:1px solid red; }
</style>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#container div").each(function() { $(this).height($(this).parent().height()); });
                                          });
  </script>
</head>
<body>
  <div id="container"> 
    <div id="left"><h2>menu</h2>
      1. ja<br />
      2. Nee<br />
      3. Ja
    </div>
  <div id="center">
    <h1>Ja hallo</h1>
     <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
        <p>
        Echt mooi!
    </p>
    <p>
        Echt mooi!
    </p>
  </div>
  <div id="right"><h2>menu</h2>
      1. ja<br />
      2. Nee<br />
    3. Ja<br />
      1. ja<br />
      2. Nee<br />
      3. Ja</div> 
  </div>
</body>
</html>
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104250365
quote:
11s.gif Op vrijdag 11 november 2011 16:00 schreef Catch22- het volgende:
Die center wordt in principe het hoogst toch?

als de container links en rechts een border heeft en de center ook links/rechts, heb je je situatie toch?

Ik zou echter gewoon even een jQuery scriptje bouwen. Wat ik postte zou al moeten werken.

http://jsbin.com/onulog/3/edit#source

linksboven op render drukken
[ code verwijderd ]

Ik ga er strakjes even naar kijken, ben even naar iets anders aan het kijken (en ik ben niet zo goed in jQuery, dus moet er even de tijd voor nemen).
En die situatie die ik probeer werkt dus niet, om de een of andere reden pakt de container zijn 100% al niet, waardoor de linker en de rechter 100% ook niet pakken. De container klapt namelijk in, wat raar is, want er staat content in...
  vrijdag 11 november 2011 @ 16:23:11 #280
56176 Catch22-
Ben je Blind?!
pi_104250558
je moet de container ook floaten, anders gaat t niet goed :)

als je daar een margin auto op hebt, moet je de divs ff wrappen
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  vrijdag 11 november 2011 @ 17:00:23 #281
50298 QM84
Het Orakel
pi_104252169
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		<!doctype html>
<html lang="nl">
<head>
    <title>TEST</title>
    <style>
    #wrapper {
      margin: 0 auto;
      overflow: hidden;
    }
    .col {
      float: left;
      width: 33%;
      padding-bottom: 100000px;
      margin-bottom: -100000px;
    }
    #col_left {
      border-left: 1px solid red;
      background-color: #cacaca;
    }
    #col_middle {
      border-left: 1px solid green;
      border-right: 1px solid yellow;
      background-color: #ececec;
    }
    #col_right {
      border-right: 1px solid pink;
      background-color: #343434;
    }
  </style>
</head>

<body>

<div id="wrapper">
    
    <div id="col_left" class="col">
    content
  </div>
  <div id="col_middle" class="col">
    content
  </div>
  <div id="col_right" class="col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula dignissim sem, eu pulvinar turpis facilisis rhoncus. Nam vitae massa eu sem ornare pretium at nec felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eu venenatis magna. Maecenas lacinia faucibus risus, a aliquam lacus auctor et. In cursus tempus rhoncus. Morbi nec luctus leo. Etiam risus nibh, viverra sit amet euismod non, lobortis a nibh. Vestibulum bibendum accumsan sapien, id sagittis purus sodales a. Nullam at lectus ipsum.
  </div>
    
</div>
</body>
</html>

werkt ook.. Is wel vrij smerig en eigenlijk af te raden. Maar dat is het hele idee van geforceerd meerdere kolommen op gelijke hoogte willen hebben ook ;)
dat dus.
pi_104254281
quote:
0s.gif Op vrijdag 11 november 2011 15:51 schreef RenRen- het volgende:

[..]

Omdat ik een linkerdiv heb met een rechterborder, center met links/rechts border, rechts met een linkerborder. Die moeten dubbele lijntjes naboodsen. Ik mag steeds geen achtergrondafbeelding gebruiken, is slordig. >: Dus ik zoek andere oplossingen. Maar ik denk dat het neerkomt op een achtergrondafbeelding.
Dat is juist een schoolvoorbeeldje voor faux columns. Gewoon een afbeeling met alleen 1 of 2 pixels erin, repeat-y, hopsakee.

Ik vind die oplossing van QM84 ook nog wel wat hebben trouwens.
zcflevo.nl
pi_104356775
Ik kom er niet uit waarom het volgende niet werkt in Internet explorer 8 en alles daar onder. Het menu links werkt perfect in browsers als Chrome, Firefox en Safari en staan perfect onder het logo. Echter, wanneer ik hem in Internet Explorer open, dan gaat het menu ineens heel raar staan en ik snap gewoonweg niet waarom.

De code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		<body>

    <div id="header">
        
        <img src="images/logo.gif" style="width:110px; height:110px;" alt="logo"/>
        <img id="top_picture" src="images/HeaderHome.jpg" alt="header"/>
        
    </div>
    
        <ul id="menu">
            <li><a class="clicked" href="home.html">Home</a></li>
            <li><a href="nieuws.html">Nieuws</a></li>
            <li><a href="kippen.html">Kippen</a></li>
            <li><a href="fotoboek.html">Fotoboek</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    
</body>

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		body {
    margin: 0 auto;
    width: 950px;
    background: #FF9932;
    font-family: candara;
}

h1 {
    Font-size: 20px;
    color: #060;
}

p {
    margin-top: 20px;
    font-size: 12px;
}

h2 {
    font-size: 16px;
}

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

#top_picture {
    border: 3px solid #FFDE82;
    margin-left: 25px;
}

#menu {
    position: absolute;
    padding-left: 0px;
}

#menu li {
    list-style-type: none;
    margin-bottom: 20px;
}

#menu li a{
    display: block;
    width: 115px;
    height: 40px;
    background: #744F03;
    font-family: 'Open Sans Condensed', sans-serif;
    text-decoration: none;
    text-align: center;
    color: #E8C31F;
    font-size: 24px;
    padding-top: 3px;
}

#menu li a:hover{
    background: #372202;
}

.clicked {
    color: white!important;
}

Iemand die mij kan vertellen wat ik fout doe?

[ Bericht 0% gewijzigd door #ANONIEM op 14-11-2011 16:51:18 ]
pi_104357750
Defineer "heel raar"?
Screenshotje misschien?

-edit-
Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.

[ Bericht 67% gewijzigd door KomtTijd... op 14-11-2011 17:24:34 ]
zcflevo.nl
  maandag 14 november 2011 @ 17:21:44 #285
56176 Catch22-
Ben je Blind?!
pi_104358367
indien ie probleem: breedtes en/of paddings.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_104359631
quote:
0s.gif Op maandag 14 november 2011 16:47 schreef Dimens het volgende:
Ik kom er niet uit waarom het volgende niet werkt in Internet explorer 8 en alles daar onder. Het menu links werkt perfect in browsers als Chrome, Firefox en Safari en staan perfect onder het logo. Echter, wanneer ik hem in Internet Explorer open, dan gaat het menu ineens heel raar staan en ik snap gewoonweg niet waarom.

De code:
[ code verwijderd ]

[ code verwijderd ]

Iemand die mij kan vertellen wat ik fout doe?
Welk doctype gebruik je?
quote:
0s.gif Op maandag 14 november 2011 17:08 schreef KomtTijd... het volgende:

Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.
En dat. :)
fokstok.nl
  maandag 14 november 2011 @ 17:53:44 #287
220026 Treces
Hier had uw tekst kunnen staan
pi_104359677
jQuery wil bij mij niet echt lekker werken. Zo heb ik een pagina met afbeeldingen, bij een hover komt er tekst te staan die ik met jQuery verticaal probeer te centreren. Bij de eerste keer laden staat deze te ver naar onderen, echter bij een refresh (F5) staat deze wel weer gecentreerd.

Zo ook met een kaart (Google Maps API), bij eerste keer laden geeft hij de foute coordinaten weer, en wordt de kaart half geladen, bij een refresh staat alles goed.

Eerste keer:


Na refresh:


Iemand dit ook eerder gehad?
pi_104362438
Waarom lijn je die tekst uit met Javascript...? Kan toch gewoon met CSS (weliswaar een beetje klooien met display:table-cell e.d).
Nee.
  maandag 14 november 2011 @ 19:23:11 #289
220026 Treces
Hier had uw tekst kunnen staan
pi_104364219
quote:
0s.gif Op maandag 14 november 2011 18:50 schreef PimD het volgende:
Waarom lijn je die tekst uit met Javascript...? Kan toch gewoon met CSS (weliswaar een beetje klooien met display:table-cell e.d).
Precies om die reden, hoop gezeik met positions, en displays waar ik geen zin in had. En dit is de quick en dirty manier.

Overigens is het opgelost door de tabs-oproep ($(element).tabs();) op het einde van mijn javascript-script te doen. Kaartje doet het nu ook!
pi_104364603
quote:
0s.gif Op maandag 14 november 2011 17:52 schreef Light het volgende:

[..]

Welk doctype gebruik je?

[..]

En dat. :)
<!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">

Dat staat er.
pi_104365202
quote:
0s.gif Op maandag 14 november 2011 17:08 schreef KomtTijd... het volgende:
Defineer "heel raar"?
Screenshotje misschien?

-edit-
Er staat een hoop "position:" in, waar je verder niets mee doet. Kan voor ellende zorgen. Strip je CSS eens tot het minimum van wat je nodig hebt om alleen de structuur goed te krijgen.
Dit is hoe het eruit ziet in Chrome, Firefox en Safari en is hoe ik het wil.



Dit is wat Internet Explorer ermee doet, niet zoals de rest dus.



Hij zet de banner bovenin naar links en het menu naar rechts. Alsof hij de padding-left: 0px; niet pakt in #menu.
pi_104365286
Heb je de list-style op none gezet enzo? Daar wil IE nog wel eens moeilijk over doen. Pleur anders een kale HTML + CSS online (niet in dit topic, maar op een server waar we dan bij kunnen).
Nee.
pi_104365535
quote:
0s.gif Op maandag 14 november 2011 19:40 schreef PimD het volgende:
Heb je de list-style op none gezet enzo? Daar wil IE nog wel eens moeilijk over doen. Pleur anders een kale HTML + CSS online (niet in dit topic, maar op een server waar we dan bij kunnen).
Dat heb ik inderdaad gedaan, dat je voor de list geen bolletjes te zien krijgt. Daarna padding-left op 0 gezet zodat hij niet de automatische padding toevoegt aan de list.

Hoe bedoel je met kale html + css online zetten?
pi_104365588
Zodat wij kunnen kijken waar het mis gaat? Heb je ook list-style-position e.d. op outside gezet?
Nee.
pi_104366060
quote:
0s.gif Op maandag 14 november 2011 19:45 schreef PimD het volgende:
Zodat wij kunnen kijken waar het mis gaat? Heb je ook list-style-position e.d. op outside gezet?
Wat doet dat en hoe doe ik dat?
  maandag 14 november 2011 @ 20:55:48 #296
137776 boem-dikkie
Jedi Mind Baby!
pi_104370269
Waarom gebruik je positions? Doe gewoon op je logo een float: left, op je banner ook en op je menu ook.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  maandag 14 november 2011 @ 20:56:26 #297
137776 boem-dikkie
Jedi Mind Baby!
pi_104370321
quote:
0s.gif Op maandag 14 november 2011 19:44 schreef Dimens het volgende:

[..]

Dat heb ik inderdaad gedaan, dat je voor de list geen bolletjes te zien krijgt. Daarna padding-left op 0 gezet zodat hij niet de automatische padding toevoegt aan de list.

Hoe bedoel je met kale html + css online zetten?
Je HTML/CSS ergens online neerzetten zodat wij het probleem 'live' kunnen zien.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_104372967
Dit is wat ik nu heb:

SPOILER: HTML
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
SPOILER: CSS
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Het foutje met de header is eruit, die staat nu in elke browser goed. Helaas kan Internet Explorer nog steeds niet goed omgaan met de list.
Hoe doen jullie dat?
  maandag 14 november 2011 @ 21:33:26 #299
137776 boem-dikkie
Jedi Mind Baby!
pi_104373298
Voeg dit eens toe aan je CSS:

1
2
3		ul#menu{
margin: 0;
}
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_104373508
quote:
14s.gif Op maandag 14 november 2011 21:33 schreef boem-dikkie het volgende:
Voeg dit eens toe aan je CSS:
[ code verwijderd ]

Het werkt nog steeds niet, ik heb nog steeds last dat IE het menu een stuk naar rechts duwt.
  maandag 14 november 2011 @ 21:36:18 #301
137776 boem-dikkie
Jedi Mind Baby!
pi_104373547
quote:
9s.gif Op maandag 14 november 2011 21:35 schreef Dimens het volgende:

[..]

Het werkt nog steeds niet, ik heb nog steeds last dat IE het menu een stuk naar rechts duwt.
Vaag, bij mij werkt het.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] voor dummies #18
Index

» digital corner

» development

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