Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

[CSS] Zijnavigatie rechts van gecentreerde content zetten

Pagina: 1
Acties:
  • 2.076 views sinds 30-01-2008
  • Reageer

woensdag 25 juli 2007 13:26

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Zie het volgende plaatje:
Afbeeldingslocatie: http://www.danandan.luna.nl/got/rvmidden.gif

De rode div loopt van link naar rechts over het scherm. In het midden van het scherm (stippellijn) wil ik de content plaatsen (hier de gele div). Rechts daarvan wil ik een zijnavigatie (blauwe div) plaatsen. De footer (lime) loopt daar weer beeldvullend onder. Ik dacht dit te bereiken met onderstaande css. Echter, het resultaat is:
Afbeeldingslocatie: http://www.danandan.luna.nl/got/rvmidden2.gif

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#main {
  background-color: red;
}

#content {
  background: yellow;
  width: 200px;
  margin: 0 auto;
}

#sidenav {
  background-color: blue;
  width: 50px;
  float: left;
}

#footer {
  background-color: lime;
}

#main, #content, #sidenav, #footer {
  height: 30px;
}


Wie kan mij zeggen waarom het fout gaat? Ik heb al geprobeerd om #sidenav position:relative mee te geven, maar dit haalt niets uit. Float: right ipv left evenmin. Wat zie ik over het hoofd? Hieronder overigens de html:
HTML:
1
2
3
4
5

<div id="main">
  <div id="content"></div>
  <div id="sidenav"></div>
</div>
<div id="footer"></div>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 25 juli 2007 13:40

Acties:
  • marko77
  • Registratie: Februari 2002
  • Laatst online: 06-05 19:41

marko77

Je dient de #content sowieso left te floaten anders komt de sidenav er niet naast.

Nadeel is dan dat centreren niet goed werkt. De content en sidenav in een aparte div zou evt. kunnen maar dan is centreren lastiger. Ik denk dat je om dit werkend te krijgen een javascript erbij nodig hebt om de centreer positie te bepalen.

--edit
ik heb nog even iets bedacht wat wél werkt, maar ik vind het persoonlijk niet zo'n mooie oplossing.
Je kunt de sidenav in de content plaatsen en deze dan absolute neerzetten.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13

#content {
  background: yellow;
  width: 200px;
  margin: 0 auto;
  position:relative;
}

#sidenav {
  background-color: blue;
  width: 50px;
  position:absolute;
  right: -50px;
}

[ Voor 38% gewijzigd door marko77 op 25-07-2007 13:46 ]

Mijn rig

woensdag 25 juli 2007 13:44

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
marko77 schreef op woensdag 25 juli 2007 @ 13:40:
Je dient de #content sowieso left te floaten anders komt de sidenav er niet naast. [...]
Weet ik, maar door left te floaten verlies ik de gecentreerde positie. #content shiet dan naar de linkerkant van het scherm...
De content en sidenav in een aparte div zou evt. kunnen maar dan is centreren lastiger.
Maar dan heb je toch hetzelfde probleem? Ook dan zal ik beide divs moeten left floaten om ze naast elkaar te krijgen...wie heeft een creatieve oplossing? Ik wil eerst zeker weten dat het niet anders kan voordat ik naar javascript grijp.

[ Voor 34% gewijzigd door Reveller op 25-07-2007 13:45 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 25 juli 2007 13:46

Acties:
  • marko77
  • Registratie: Februari 2002
  • Laatst online: 06-05 19:41

marko77

zie mijn eerdere reactie :P

Mijn rig

woensdag 25 juli 2007 13:52

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Je kunt "geel" en "blauw" toch in een wrapper gooien?
HTML:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        #main {
          background-color: red;
          text-align: center;
        }
        
        #wrapper {
          text-align: left;
          margin: 0 auto;
          width: 250px;
        }
        
        #content {
          background: yellow;
          width: 200px;
          float: left;
        }
        
        #sidenav {
          background-color: blue;
          width: 50px;
          float: right;
        }
        
        #footer {
          clear:both;
          background-color: lime;
        }
        
        #main, #content, #sidenav, #footer {
          height: 30px;
        }   
    </style>
</head>

<body>

    <div id="main">
        <div id="wrapper">
            <div id="content"></div>
            <div id="sidenav"></div>
        </div>
        <div id="footer"></div>
    </div>


</body>
</html>


Geeft:
Afbeeldingslocatie: http://www.danandan.luna.nl/got/rvmidden.gif

Edit:
Come to think of it, je kunt 'm ook in content zetten (content 50px breder maken) en 'm daarbinnen right floaten.

HTML:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        #main {
          background-color: red;
          text-align: center;
        }
        
        #content {
          background: yellow;
          width: 250px;
        }
        
        #sidenav {
          background-color: blue;
          width: 50px;
          float: right;
        }
        
        #footer {
          clear:both;
          background-color: lime;
        }
        
        #main, #content, #sidenav, #footer {
          height: 30px;
        }   
    </style>
</head>

<body>

    <div id="main">
        <div id="content">
            <div id="sidenav"></div>
        </div>
        <div id="footer"></div>
    </div>


</body>
</html>


Voordeel: Geen wrapper div, geen absolute positioning (zoals eerder geopperd).
Nadeel: je content gaat er 'onder door' lopen (L-vorm) als je blauwe blok niet lang genoeg is.

[ Voor 130% gewijzigd door RobIII op 25-07-2007 13:59 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 25 juli 2007 13:59

Acties:
  • marko77
  • Registratie: Februari 2002
  • Laatst online: 06-05 19:41

marko77

dan centreer je niet het gele blok, maar geel+blauw. Vandaar mijn opmerking dat centreren dan iets lastiger is.

- waarom is absolute positioning een nadeel?

[ Voor 17% gewijzigd door marko77 op 25-07-2007 14:00 ]

Mijn rig

woensdag 25 juli 2007 14:00

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
marko77 schreef op woensdag 25 juli 2007 @ 13:59:
dan centreer je niet het gele blok, maar geel+blauw. Vandaar mijn opmerking dat centreren dan iets lastiger is.
Oh, crap ja :P Niet helemaal wakker vandaag :X
marko77 schreef op woensdag 25 juli 2007 @ 13:59:
- waarom is absolute positioning een nadeel?
Omdat absolute positionering je flow vern**kt en altijd problemen geeft ;)

[ Voor 34% gewijzigd door RobIII op 25-07-2007 14:01 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 25 juli 2007 14:02

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
@Rob III - dat kan niet (had ik zelf ook al geprobeerd). Je geeft namelijk precies het probleem aan. Jouw oplossing geeft als resultaat:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/rvmidden3.gif

Met andere woorden, de div die jij om geel en blauw heen gegooid hebt (wrapper) is nu gecentreerd, en niet geel, zoals hier:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/rvmidden.gif

Dat is dus mijn probleem :)

[edit]jeetje, wat een snelle reakties! deze post had eigenlijk 2 of 3 omhoog gemoeten...

[ Voor 10% gewijzigd door Reveller op 25-07-2007 14:07 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 25 juli 2007 14:07

Acties:
  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 14:53

Kiphaas7

Aangezien je hier met vaste breedtes werkt, kan je het inderdaad oplossen zoals RobIII voorstelt.

En als je ook nog eens precies je gele kolom in het midden wil moet je even gaan rekenen, want je moet dan een marge gaan instellen. Normaal(alleen geel precies in het midden) zou het midden zich bevinden 200/2=100px, nu is de totale breedte 250px, dus 250/2=125px. Margin-left van 25px op je content dus, en even die 25px toevoegen aan de totale breedte van je wrapper.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12

        #wrapper { 
          text-align: left; 
          margin: 0 auto; 
          width: 275px; 
        } 
         
        #content { 
          background: yellow; 
          width: 200px; 
          float: left; 
          margin-left:25px;
        }


EDIT:slaat natuurlijk op het eerste voorbeeld van RobIII.
EDIT2: Damm inderdaad wat een snelle reacties, ik repliede namelijk op RobIII.

[ Voor 9% gewijzigd door Kiphaas7 op 25-07-2007 14:09 ]

woensdag 25 juli 2007 14:09

Acties:
  • marko77
  • Registratie: Februari 2002
  • Laatst online: 06-05 19:41

marko77

Omdat absolute positionering je flow vern**kt en altijd problemen geeft ;)
Een absoluut element wordt toch uit de flow gehaald, dus dan kan deze m ook niet vernaggelen :>
Aan de code kant wordt het wel iets onoverzichtelijker, echter in dit geval is dit volgens mij de enige 'redelijke' oplossing zonder van javascript trucjes gebruik te maken.

--edit die margin truc met de wrapper is idd ook wel netjes :)

[ Voor 8% gewijzigd door marko77 op 25-07-2007 14:14 ]

Mijn rig

woensdag 25 juli 2007 16:17

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Ontzettend bedankt voor jullie hulp zover. Ik heb nog een vraag (zie onderstaande html en css): waarom zit het roze vlak niet precies boven het donkerblauwe? Als het goed is, zitten ze beiden precies in het midden....?
code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
body {
  margin: 0;
  padding: 0;
}
    
#main {
  background-color: red;
  text-align: center;
}

#header {
  background-color: lime;
}

#mainnav {
  background-color: pink;
  margin: 0 auto; 
  width: 200px;
}

#wrapper { 
  text-align: left; 
  margin: 0 auto; 
  width: 275px; 
} 
 
#content { 
  background: yellow; 
  width: 200px; 
  float: left; 
  margin-left:25px;
}

#subnav {
  background-color: navy;
}

#text {
  background-color: orange;
}

#sidenav {
  background-color: blue;
  width: 50px;
  float: right;
}

#footer {
  clear:both;
  background-color: lime;
}

#main, #header, #mainnav, #content, #subnav, #sidenav, #footer {
  min-height: 30px;
}    
    </style>
</head>

<body>
  <div id="main">
      <div id="header">
        <div id="mainnav"></div>
      </div>
      <div id="wrapper">
          <div id="content">
            <div id="subnav"></div>
            <div id="text"><br><br><br></div>
          </div>
          <div id="sidenav"><br><br><br></div>
      </div>
      <div id="footer"></div>
  </div>
</body>
</html>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 25 juli 2007 19:03

Acties:
  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 14:53

Kiphaas7

Omdat ik een rekenfout heb gemaakt. :) Eigenlijk is die berekening volslagen onzin, en verbaast het me dat niemand anders erover gevallen is.

Betere (en nu wel kloppende ;) ) stelregel is: wat je aan 1 kant toevoegd aan breedte, moet je ook aan de andere kant toevoegen. 50px dus. :) En dan klopt ie wel.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12

#wrapper { 
  text-align: left; 
  margin: 0 auto; 
  width: 300px; 
} 
 
#content { 
  background: yellow; 
  width: 200px; 
  float: left; 
  margin-left:50px;
}

donderdag 26 juli 2007 01:43

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Dank je, Kiphaas7! Dankzij jullie hulp kom ik steeds verder :) Ik ben nu bijna in staat om het ontwerp voor mijn website in divs te zetten. Ik zit echter nog met een laatste probleem: Opera, Firefox en Konqueror (+ Safari) geven mijn site goed weer:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/sh-goed.gif

IE (zowel 4.0, 6.0 als 7.0) maken een fout:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/sh-fout.gif
Screenshots trouwens gemaakt via browsercam.com. Een aanrader :)

Het verschil is duidelijk: de blauwe div rechts (#sidenav) heeft een padding-left van 10px, maar IE maakt er een margin-left van 10px van. Hoe kan dit en wat is de oplossing? Is dit zo'n zelfde geval als waar ik over gelezen heb in het forum waarbij IE een dubbele margin neemt tov andere browsers?

code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
body {
  margin: 0;
  padding: 0;
}
    
#main {
  background-color: red;
  text-align: center;
}

  #wrapper {
    text-align: left; 
    margin: 0 auto; 
    width: 300px; 
  } 

    #content {
      background: yellow; 
      width: 200px; 
      float: left; 
      margin-left:50px;
    }
  
      #logo {
        background-color: lime;
      }
  
      #mainnav {
        background-color: pink;
      }

      #subnav {
        background-color: navy;
      }

      #text {
        background-color: orange;
      }

    #sidenav {
      background-color: blue;
      width: 40px;
      float: right;
      padding: 60px 0 0 10px;
    }
      
  #footery {
    clear:both;
    background-color: #fff;
  }
  
    #footer {
      background-color: pink;
      margin: 0 auto; 
      width: 200px;
    }

#logo, #mainnav, #subnav, #footer {
  min-height: 30px;
}    
    </style>
</head>

<body>
  <div id="main">
    <div id="wrapper">
      <div id="content">
        <div id="logo"><br><br></div>
        <div id="mainnav"><br><br></div>
        <div id="subnav"><br><br></div>
        <div id="text"><br><br><br></div>
      </div>
      <div id="sidenav">text</div>
    </div>
    <div id="footery">
      <div id="footer"><br><br></div>
    </div>
  </div>
</body>
</html>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 26 juli 2007 02:48

Acties:
  • MichielioZ
  • Registratie: Augustus 2001
  • Laatst online: 11-11 20:46

MichielioZ

Misschien semantisch niet 100% mooi, maar de volgende "oplossing" werkt bij mij in IE7, Firefox (2.x) en Opera 9.10...
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
  <title></title>
  <style type="text/css">
body { margin: 0; padding: 0; text-align: center; }
#content { position: relative; margin: 0 auto; width: 200px; height: 100%; background: red; text-align: left; }
#menu { position: absolute; top: 0; margin-left: 200px; width: 100px; background: green; border-left: 1px solid lime; }
  </style>
</head>
<body>

<div id="content">
  <div id="menu">
  menu<br>menu<br>menu<br>menu<br>menu<br>
  En dan nu een heel erg lange regel die afgebroken moet worden binnen 't groene vlak.
  </div>
  content<br>content<br>content<br>content<br>content<br>
  En dan nu een heel erg lange regel die afgebroken moet worden binnen 't rode vlak.
</div>

</body>
</html>

Iedereen wil terug naar de natuur, maar niemand wil lopend...

donderdag 26 juli 2007 08:21

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
MichielioZ schreef op donderdag 26 juli 2007 @ 02:48:
Misschien semantisch niet 100% mooi, maar de volgende "oplossing" werkt bij mij in IE7, Firefox (2.x) en Opera 9.10...
Dank je, maar die oplossing staat te ver af van mijn eigen markup. Ik wil eigenlijk alleen weten waarom IE de #sidenav van 50 naar 40 pixels breed maakt en een margin-left van 10px laat zien ipv een padding van 10px, en hoe dat op te lossen is :) Iemand?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 26 juli 2007 11:50

Acties:
  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 14:53

Kiphaas7

Je gebruikt een doctype wat ervoor zorgt dat ie in quriksmode komt.

http://hsivonen.iki.fi/doctype/ (vooral de tabel goed doornemen)

Verander je de doctype (bijvoorbeeld) naar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

rendert IE7 wel goed. IE6 zal wel nog bugs hebben (omdat het ie6 is), maar daar moet je zelf maar eens naar gaan zoeken.

donderdag 26 juli 2007 14:14

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Dank je!Volgens mij moet ik dit kunnen oplossen met behulp van de box model hack :) Tot die tijd heb ik de padding van #sidenav maar op 0 gezet. Het gekke is dat dat het probleem in IE 5.0 en 6.0 niet oplost (4.0 en 5.5 laten het wel goed zien). De pagina ziet er dan zo uit:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/sh-bad.jpg

Met andere woorden; nu wordt #sidenav ineens onder #content gezet. Als ik de width van #sidenav aanpas, bijvoorbeeld van 50px naar 20px, doet IE hetzelfde. Alle andere browsers laten het wel goed zien:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/sh-good.jpg

Weet iemand waar dit nu weer aan ligt? Ik heb #sidenav left en right laten floaten, maar dit maakt niets uit. Ook heb ik een strict en loose doctype geprobeerd maar dat levert ook geen resultaat op. Ik word er wel gefrustreerd van; binnen no-time ben je klaar met een opzet voor je website en vervolgens loop je twee dagen te Googlen en fora te spammen om het goed te krijgen voor IE 5.0 en 6.0 (terwijl 4.0 het wel goed rendert!)

Alle tips zijn welkom :)

code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
body {
  margin: 0;
  padding: 0;
}
    
#main {
  background-color: red;
  text-align: center;
}

  #wrapper {
    text-align: left; 
    margin: 0 auto; 
    width: 300px; 
  } 

    #content {
      background: yellow; 
      width: 200px; 
      float: left; 
      margin-left:50px;
    }
  
      #logo {
        background-color: lime;
      }
  
      #mainnav {
        background-color: pink;
      }

      #subnav {
        background-color: navy;
      }

      #text {
        background-color: orange;
      }

    #sidenav {
      background-color: blue;
      width: 50px;
      float: right;
      padding-top: 50px;
    }
      
  #footery {
    clear:both;
    background-color: #fff;
  }
  
    #footer {
      background-color: pink;
      margin: 0 auto; 
      width: 200px;
    }

#logo, #mainnav, #subnav, #footer {
  min-height: 30px;
}    
    </style>
</head>

<body>
  <div id="main">
    <div id="wrapper">
      <div id="content">
        <div id="logo"><br><br></div>
        <div id="mainnav"><br><br></div>
        <div id="subnav"><br><br></div>
        <div id="text"><br><br><br></div>
      </div>
      <div id="sidenav">text</div>
    </div>
    <div id="footery">
      <div id="footer"><br><br></div>
    </div>
  </div>
</body>
</html>

[ Voor 91% gewijzigd door Reveller op 26-07-2007 14:32 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 26 juli 2007 17:42

Acties:
  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 14:53

Kiphaas7

Persoonlijk vind ik dat je IE4 en IE5.0 eruit mag knikkeren qua support. Wie gebruikt dat nog? IE5.5 kan ik me nog voorstellen, maar ook dan mag je jezelf eens gaan afvragen of die mensen tot je doelgroep behoren.

Overigens heb ik het vermoeden dat IE je element te breed vindt, IE telt iets teveel bij de breedte waardoor het element niet meer in je container past en dus een regel naar beneden wordt geschoven waar wel plaats is. Dit kun je oplossen door de padding op 0 te zetten (zoals je al gedaan hebt), en dan een element binnen je blauwe box een margin mee te geven. Effectief is dat natuurlijk hetzelfde, maar IE zal dan zich wel gedragen (denk ik).

[ Voor 11% gewijzigd door Kiphaas7 op 26-07-2007 17:42 ]

donderdag 26 juli 2007 18:15

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Kiphaas7 schreef op donderdag 26 juli 2007 @ 17:42:
Persoonlijk vind ik dat je IE4 en IE5.0 eruit mag knikkeren qua support. Wie gebruikt dat nog? IE5.5 kan ik me nog voorstellen, maar ook dan mag je jezelf eens gaan afvragen of die mensen tot je doelgroep behoren.
IE5.0 gebruik idd (bijna) niemand meer, maar ik vond het grappig om te zien dat IE4.0 het wel goed rendert, maar IE5.0 niet :)
Overigens heb ik het vermoeden dat IE je element te breed vindt, IE telt iets teveel bij de breedte waardoor het element niet meer in je container past en dus een regel naar beneden wordt geschoven waar wel plaats is. Dit kun je oplossen door de padding op 0 te zetten (zoals je al gedaan hebt), en dan een element binnen je blauwe box een margin mee te geven. Effectief is dat natuurlijk hetzelfde, maar IE zal dan zich wel gedragen (denk ik).
Dat het element te breed zou kunnen zijn had ik ook al bedacht:
Reveller schreef op donderdag 26 juli 2007 @ 14:14:
[...] Als ik de width van #sidenav aanpas, bijvoorbeeld van 50px naar 20px, doet IE hetzelfde [dus: blauwe box onderaan plaatsen]. Alle andere browsers laten het wel goed zien. [...]
Het moet dus ergens anders aan liggen. Heeft iemand een idee?!

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 26 juli 2007 18:30

Acties:
  • moozzuzz
  • Registratie: Januari 2005
  • Niet online

moozzuzz

Gewoon een verdelinkje van een site:

Msie 7.031.8 %
Msie 6.055.8 %
Msie 5.230 % *

* schommelt een beetje tussen 0 en 0.1 % ;^)

Met 0.3% zit zelfs netscape boven IE 5.x :-). Je kan met cond. comments ook gewoon de site links aligneren voor prehistorisch browsermateriaal.

donderdag 26 juli 2007 20:05

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
moozzuzz schreef op donderdag 26 juli 2007 @ 18:30:
Gewoon een verdelinkje van een site:

Msie 7.031.8 %
Msie 6.055.8 %
Msie 5.230 % *

* schommelt een beetje tussen 0 en 0.1 % ;^)

Met 0.3% zit zelfs netscape boven IE 5.x :-). Je kan met cond. comments ook gewoon de site links aligneren voor prehistorisch browsermateriaal.
Ja, maar ik maak me ook niet druk om het verkeerd renderen van IE5.0, wel van IE6.0. En dat zou, gebaseerd op jouw statistieken, betekenen dat de helft van de bezoekers van mijn site een vernaggelde pagina voorgeschoteld krijgt... ;(

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

donderdag 26 juli 2007 22:59

Acties:
  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020

Boelie-Boelie

Als ik de #sidenav in de HTML boven #content zet en zowel #sidenav als #content naar rechts float, werkt het wel.

Verder kun je beter geen hacks gebruiken, maar het probleem helemaal vermijden of evt. conditional comments gebruiken, zoals moozzuzz zegt.
En ik wilde bijna schrijven dat het aan je doelgroep ligt of je IE5 nog moet ondersteunen, maar na wat rondneuzen (op eigen sites en ook op The Counter en Browsernews) zie ik dat de groep inmiddels tot (onder de) 1% is gekrompen.. Ik trek daar iig mijn eigen conclusies uit :)

Cogito ergo dubito

vrijdag 27 juli 2007 01:52

Acties:
  • kaydie
  • Registratie: Juni 2006
  • Laatst online: 06-01-2022

kaydie

Om het eens over een andere boeg te gooien:

code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>relative absolute</title>

<style type="text/css">

/* haal div#main uit de flow met position relative
   Dit wordt nu het startpunt voor het absoluut 
   gepositioneerde #sidenav
*/

#main {
  position:relative;
  background-color: red;
}

#content {
  margin: 0 auto;
  width:200px;
  background: yellow;
}

/* Breng #sidenav op 50% t.o.v. #main
   en verschuif deze vervolgens 50px, zodat
   deze naast #content komt te staan.
*/

#sidenav {
  position:absolute;
  width: 50px;
  top:0;
  left:50%;
  margin-left:100px;
  background: blue;
}

#footer {
  background: lime;
}

#main, 
#content, 
#sidenav, 
#footer {
  height: 30px;
}

</style>

<div id="main">
  <div id="content"></div>
  <div id="sidenav"></div>
</div>
<div id="footer"></div>

[ Voor 3% gewijzigd door kaydie op 27-07-2007 01:53 ]

vrijdag 27 juli 2007 12:14

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Boelie-Boelie schreef op donderdag 26 juli 2007 @ 22:59:
Als ik de #sidenav in de HTML boven #content zet en zowel #sidenav als #content naar rechts float, werkt het wel.
Wow! Nu doet hij het wel. Dank je wel :) Ik moet wel zeggen dat ik het een gepruts vind, dit soort dingen. IE6.0 wordt nog door de helft van de mensen gebruikt, dus je moet wel. Maar je moet wel heel erg creatief zijn om dit soort dingen te bedenken...
kaydie schreef op vrijdag 27 juli 2007 @ 01:52:
Om het eens over een andere boeg te gooien:
[...code...]
Ik ga eens even goed de verschillen bekijken tussen de twee methoden. Zo op het eerste oog vind ik de jouwe ingewikkelder, maar dat maakt niet uit. Ik hoop dat ik er wat mee kan. Creative oplossing hoor, zo. Dat is me wel duidelijk geworden over css: duizend mogelijkheden om ergens te komen.

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 27 juli 2007 12:30

Acties:

Verwijderd

Reveller schreef op vrijdag 27 juli 2007 @ 12:14:
Wow! Nu doet hij het wel. Dank je wel :) Ik moet wel zeggen dat ik het een gepruts vind, dit soort dingen. IE6.0 wordt nog door de helft van de mensen gebruikt, dus je moet wel. Maar je moet wel heel erg creatief zijn om dit soort dingen te bedenken...
Zorg ervoor dat IE6 zich gedraagt als IE7. Dat scheelt je al de helft van het werk.

vrijdag 27 juli 2007 16:01

Acties:
  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 14:53

Kiphaas7

Ach, het beste is IMHO om gewoon te binnen met een goede tutorial om een kant en klare layout te bouwen. Daar worden meteen ook de quirks van verschillende browsers (=vooral IE) uitgelegd, en hoef je dus niet steeds het wiel opnieuw uit te vinden. Wel moet je dan ook daadwerkelijk de tutorial volgen en niet het einde copy-pasten. ;)

vrijdag 27 juli 2007 16:06

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Ik heb nog een probleem - hoop dat dat het laatste is! Hieronder heb ik 4 plaatjes: de pagina in rust, en daarna maak ik het browservenster steeds minder breed. Je ziet dat de pagina mooi in het midden blijft staan, maar dat de (roze) footer zich naar links laat drukken. En dat mag niet! Die moet mooi onder de rest van de pagina blijven staan. Het hele probleem is alleen dat ik de footer niet in #wrapper kan stoppen, omdat de achtergrond links en rechts van het roze blok, wit moet zijn. De achtergrond van de rest van de pagina moet rood zijn:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/vensters.gif

Ik heb al verschillende dingen geprobeerd om dit op te lossen, waaronder de volgende wijzigingen in de code onderaan deze post:
code:
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

[...]
#main2 {
  background-color: yellow;
  text-align: center;
}

  #wrapper2 {
    margin: 0 auto; 
    background-color: pink;
  } 

      #footer2 {
      background: yellow; 
      width: 610px;
      float: left; 
      margin-left: 120px;
    }

<div id="main">
  <div id="wrapper">
    <div id="sidenav">text</div>
    <div id="content">
      <div id="logo"><br><br></div>
      <div id="mainnav"><br><br></div>
      <div id="subnav"><br><br></div>
      <div id="text"><br><br><br></div>
    </div>
  </div>
</div>
<div id="main2">
  <div id="wrapper2">
    <div id="footer2"></div>
  </div>
</div>

Maar dan krijg je weer het probleem dat als je het venster breed maakt, alles keurig mee naar het midden schuift, behalve de gele footer. Die blijft nu stug op 120px van de linker kant af staan ipv mee te schuiven naar rechts:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/oplossing-1.gif

Wie kan mij hiermee helpen? Ik ben uitgegaan van onderstaande html / css:

code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}
    
#main {
  background-color: red;
  text-align: center;
}

  #wrapper {
    text-align: left; 
    margin: 0 auto; 
    width: 850px; 
  } 

    #content {
      background: yellow; 
      width: 610px; /* 620 */
      float: right; 
      margin-left: 120px; /* 140 */
    }
  
      #logo {
        background-color: lime;
      }
  
      #mainnav {
        background-color: pink;
      }

      #subnav {
        background-color: navy;
      }

      #text {
        background-color: orange;
      }

    #sidenav {
      background-color: blue;
      width: 120px; /* 140 */
      float: right;
      padding-top: 50px;
    }
      
  #footery {
    clear:both;
    background-color: #fff;
  }
  
    #footer {
      background-color: pink;
      margin: 0 auto; 
      width: 610px;
    }

#logo, #mainnav, #subnav, #footer {
  min-height: 30px;
}    
    </style>
</head>

<body>

<div id="main">
  <div id="wrapper">
    <div id="sidenav"><br><br></div>
    <div id="content">
      <div id="logo"><br><br></div>
      <div id="mainnav"><br><br></div>
      <div id="subnav"><br><br></div>
      <div id="text"><br><br><br></div>
    </div>
  </div>
  <div id="footery">
    <div id="footer"><br><br></div>
  </div>
</div>

</body>
</html>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 27 juli 2007 19:15

Acties:
  • kaydie
  • Registratie: Juni 2006
  • Laatst online: 06-01-2022

kaydie

Reveller schreef op vrijdag 27 juli 2007 @ 12:14:

[...]

Zo op het eerste oog vind ik de jouwe ingewikkelder,

[...]
Valt wel mee toch?

Ik heb hem naar de huidige situatie aangepast...
code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>relative absolute</title>

<style type="text/css">

html, body{
  margin:0;
  padding:0;
}

#main {
  position:relative;
}

#main, footery{ 
  min-width:610px; 
  overflow:hidden;
}


#content, #footer{
  margin: 0 auto;
  width:610px;
}

#sidenav {
  position:absolute;
  width:120px;
  top:0;
  left:50%;
  margin-left:305px;
}

#main { background-color: red; }

#content { background-color: yellow; }

#logo { background-color: lime; }

#mainnav { background-color: pink; }

#subnav { background-color: navy; }

#text { background-color: orange; }

#sidenav { background-color: blue; }

#footery { background-color: #eee; }

#footer { background-color: pink; }

#logo, #mainnav, #subnav, #footer { 
  min-height: 30px; 
}

</style>

<div id="main">

    <div id="sidenav"><br><br></div>
    <div id="content">
      <div id="logo"><br><br></div>
      <div id="mainnav"><br><br></div>
      <div id="subnav"><br><br></div>
      <div id="text"><br><br><br></div>
    </div>

  </div>

  <div id="footery">
    <div id="footer"><br><br></div>
  </div>

vrijdag 27 juli 2007 21:18

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
@kaydie - dank je wel voor je reaktie! Jouw oplossing is niet langer of moeilijker dan die van Kiphaas7. Wel geeft ook jouw idee nog twee problemen:
  • IE6.0 laat #sidenav niet zien
  • in IE7.0 en FF krijg je geen horizontale scrollbalk als je het browservenster kleiner maakt en #sidenav uit het beeld verdwijnt. Pas als #content uit het beeld verdwijnt, krijg je een scrollbalk
Heb je enig idee hoe dit komt? Ik heb gezien dat het geen verschil maakt als je de #sidebar div onder #content zet ipv er boven.

Afbeeldingslocatie: http://www.danandan.luna.nl/got/kaydie.gif

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

zaterdag 28 juli 2007 02:29

Acties:
  • kaydie
  • Registratie: Juni 2006
  • Laatst online: 06-01-2022

kaydie

Reveller schreef op vrijdag 27 juli 2007 @ 21:18:
IE6.0 laat #sidenav niet zien
code:
1
2
3
4

#main {
  _height:1%; /* haslayout voor IE6... */
  position:relative;
}
in IE7.0 en FF krijg je geen horizontale scrollbalk als je het browservenster kleiner maakt en #sidenav uit het beeld verdwijnt. Pas als #content uit het beeld verdwijnt, krijg je een scrollbalk[/list]Heb je enig idee hoe dit komt? Ik heb gezien dat het geen verschil maakt als je de #sidebar div onder #content zet ipv er boven.
code:
1
2
3
4

#main, footery{ 
  min-width:850px; /* IE6 lust dit niet... */
  overflow:hidden;
}
Laatste werkt helaas niet in IE6, die de de min-width property niet kent...

zaterdag 28 juli 2007 11:04

Acties:

Verwijderd

Verwijderd schreef op vrijdag 27 juli 2007 @ 12:30:
[...]

Zorg ervoor dat IE6 zich gedraagt als IE7. Dat scheelt je al de helft van het werk.
Dean Edwards heeft een javascript library geschreven waardoor IE6 zich gedraagt als IE7...
Als je dit script gebruikt, zal min-width plots wel beschikbaar worden in IE6

zaterdag 28 juli 2007 16:07

Acties:
  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020

Boelie-Boelie

Die library van Dean Edwards is voor een sitebouwer misschien best handig, maar de vraag is of je niet beter ervoor kunt zorgen dat sitebezoekers niet een extra 40KB hoeven te downloaden, door bijv. conditional comments te gebruiken.
- Over IE-hacks en conditional comments
- Over min-width in IE (overigens werkt min-height ook niet in IE, maar height werkt in IE nagenoeg hetzelfde als min-height in normale browsers)

Cogito ergo dubito

zaterdag 28 juli 2007 18:49

Acties:

Verwijderd

Mja, 37% gebruikt nog IE6. Het wordt echter tijd dat die overschakelen. Het betekent ook dat reeds 21% wel al fatsoenlijk onze webpagina's weergeeft.

En 40KB is nu ook niet onoverkomelijk veel om extra in te laden via breedband...

zaterdag 28 juli 2007 18:55

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
@musti - moet het met Boelie-Boelie eens zijn dat het een beetje overdone is om 40KB aan scripts in te laden terwijl je (in dit geval dan) alleen min-height wil nabootsen. Via google zijn daar meer dan genoeg specifieke css of javascript (htc) oplossingen voor te vinden :)

Ik probeer nu het gedrag van de footer goed te krijgen:
  • de footer moet altijd onderaan het browservenster staan
  • als de inhoud van de pagina dus korter is dan het browservenster, is de afstand tussen de pagina en de footer dus groter
  • als de inhoud van de pagina langer is dan het venster, schijft de footer naar beneden
Een aantal oude topics hebben me geholpen met het (deels) begrijpen hoe dit te bewerkstelligen. Ik ben volgens mij niet ver van de oplossing. De footer vertoont nu wat typisch gedrag:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/bottom-footer.gif

Strict genomen vertoont FF volgens mij nu fout gedrag en houdt IE zich wel aan de CSS standaard. Door #footery een bottom: 0 mee te geven dacht is dat deze altijd de footer onderaan zou zetten. Wie kan mij vertellen wat ik voud doe?
code:
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

<style type="text/css">

html {
  height: 100%;
}

body {
  margin:0 auto;
  padding:0;
  min-height: 100%;
  background: #fff;
}

#main {
  _height:1%;
  position:relative;
}

#footery {
  position: absolute;
  bottom: 0;
}

#content, #footer {
  margin: 0 auto;
  width: 610px;
}

#sidenav {
  position: absolute;
  width: 120px;
  top: 0;
  left: 50%;
  margin-left: 305px;
}

#logo, #mainnav, #subnav, #footer { 
  min-height: 30px; 
}

#main {background-color: red;}
#content {background-color: yellow;}
#logo {background-color: lime;}
#mainnav {background-color: pink;}
#subnav {background-color: navy;}
#text {background-color: orange;}
#sidenav {background-color: blue;}
#footery {background-color: #fff;}
#footer {background-color: pink;}
</style>

<!--[if lt IE 7]>
  <style type="text/css"> body { height: 100%; } </style>
<![endif]-->

<div id="main">
  <div id="sidenav"><br><br><br><br><br><br><br></div>
  <div id="content">
    <div id="logo"><br><br></div>
    <div id="mainnav"><br><br></div>
    <div id="subnav"><br><br></div>
    <div id="text"><br><br><br><br><br><br><br><br></div>
  </div>
</div>
<div id="footery">
  <div id="footer"><br><br></div>
</div>

[ Voor 6% gewijzigd door Reveller op 28-07-2007 18:58 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq