[CSS] layout probleem

[Ivar]

CSS is een prachtige manier om webpagina's op te maken, maar af en toe ook wat frusterend als het cross-browser moet in mijn ervaring. Vandaar dat ik na veel tevergeefs geprobeerd te hebben wat hulp wil vragen bij deze pagina:

http://www.pruijn.com/docstyler/new/

Het probleem hier is dat het in IE uitstekend werkt, behalve wanneer ik de XML declaratie tag bovenin weghaal, en dat de site in andere browsers niet meeschaalt als tekst buiten de 100% hoogte van de browser valt. De bedoeling is dat de pagina's minimaal 100% hoog zijn en als de content buiten deze 100% hoogte van de browser valt moet de site mee moet schalen in de hoogte. Hoe kan ik dit voor elkaar krijgen?

[TeeDee]

staan hier tips bij?

http://www.htmldog.com/articles/elasticdesign/demo/

[Verwijderd]

post ff wat relevante code ofzo?
al gezocht op min-height?

[Ivar]

TeeDee schreef op 22 maart 2004 @ 17:02:
staan hier tips bij?

http://www.htmldog.com/articles/elasticdesign/demo/

Een handige site, maar ik ben wel behoorlijk bekend met CSS. Alleen bij deze site kom ik er niet uit, waarschijnlijk zie ik iets in de opzet over het hoofd. Hulp daarbij is dan ook welkom...

Verwijderd schreef op 22 maart 2004 @ 17:08:
post ff wat relevante code ofzo?
al gezocht op min-height?

Relevante code vind je op de URL die ik opgaf in m'n startpost, maar ik zal zo even proberen de belangrijkste delen uit de stylesheet en de site te posten. Min-height is een mogelijkheid, maar die gaat niet werken in IE volgens mij.

[Ivar]

Hieronder even de relevante code van de website.

De homepage:

HTML:

<div id="container">
  <div id="content">
    <div id="inner">
      <div id="content_left">
        <div id="menu_left_homepage">
          <a href="index.html" id="nowon">Home</a><br />
          <a href="docstyler.html">Docstyler</a><br />
          <a href="pluspunten.html">Pluspunten</a><br />
          <a href="docstylerstudio.html">DocStyler Studio</a><br />
          <a href="dewerking.html">De Werking</a><br />
          <a href="specificaties.html">Specificaties</a><br />
          <a href="symeko.html">Symeko</a><br />
          <a href="brochure.php">Brochure</a><br />
          <a href="contact.php">Contact</a>
        </div>
      </div>
      <div id="content_right">
        <div id="contentdiv_homepage">
          <!-- #BeginEditable "Content" -->
          <h2 align="center">Zijn uw documenten in vorm?</h2>
          <!-- #EndEditable -->
        </div>
        <div class="spacer" />
      </div>
      <div id="clear" />
    </div>
  </div>
</div>

De relevante stukken uit de stylesheet

code:

#container {
    z-index:1;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -400px;
    width: 800px;
    height: 100%;
    background-color: #888888;
    overflow: visible;
}

#content {
    padding-left: 190px;
    margin: 0px;
    margin-bottom: 0px;
    background: #888888;
    height: 100%;
    background: #888888 url('../images/stripes_left_bg.gif') 0px 7px repeat-y;
    visibility: visible;
}

#inner {
    width: 100%;
    height: 100%;
    background: #fff;
    visibility: visible;
    z-index: 100;
}


#content_left {
    float: left;
    width: 190px;            
    height: 100%;
    position: relative; 
    margin-left: -190px;  
    z-index: 20;
    color: #FFFFFF;
}

#content_right {
    float: left; 
    width: 100%; 
    height: 100%;
    position: relative; 
    margin: 0px -3px 0px 0px;
    background: #fff;
    color: #000000;
}

#contentdiv {
    position: relative;
    left: 50px;
    top: 160px;
    z-index: 20;
    width: 460px;
    margin-bottom: 170px;
    max-width: 470px;
    text-align: justify;
    overflow: visible;
    background: transparent;
    color: #000000;
}

#contentdiv_homepage {
    position: relative;
    left: 50px;
    top: 170px;
    z-index: 20;
    width: 460px;
    margin-bottom: 170px;
    max-width: 470px;
    text-align: justify;
    overflow: visible;
    background: transparent;
    color: #000000;
}

#clear {
    clear: both;
}

.spacer {
    height: 20px;
}

Hopelijk is dit voldoende.

[Verwijderd]

het is dus die contentdiv_homepage die niet oprekt? hmz, eigenlijk geen idee waardoor dat komt.

en min-height werkt idd niet in msie, maar dat hoefde toch ook niet begreep ik?

Wel wat tips:
• spacers met margin regelen ofzo
• Menu een lijst van maken, je strooit wel heel erg met divs moet ik zeggen

[ Voor 18% gewijzigd door Verwijderd op 22-03-2004 17:42 ]

[Ivar]

Verwijderd schreef op 22 maart 2004 @ 17:40:
het is dus die contentdiv_homepage die niet oprekt? hmz, eigenlijk geen idee waardoor dat komt.

en min-height werkt idd niet in msie, maar dat hoefde toch ook niet begreep ik?

Wel wat tips:
• spacers met margin regelen ofzo
• Menu een lijst van maken, je strooit wel heel erg met divs moet ik zeggen

De contentdiv_homepage rekt wel op, maar de rest van de site rekt niet mee. Bekijk de site maar eens in een willekeurige browser anders dan IE, dan zie je het. Verder moet de site juist wel werken in IE, maar als het in andere browsers niet werkt, heb ik waarschijnlijk ergens een ontwerp fout gemaakt.

Over je tips:
• spacers met margin regelen kan inderdaad, maar dat werkt vaak ook weer niet cross-browser (IE doet dat weer anders dan Mozilla bijvoorbeeld) meen ik.
• ik gebruik inderdaad veel divs, dit wil ik veranderen nadat de layout werkt. Een list voor het menu is dan een goede optie, maar eerst de layout!

[T-MOB]

Ivar schreef op 22 maart 2004 @ 16:59:
Het probleem hier is dat het in IE uitstekend werkt, behalve wanneer ik de XML declaratie tag bovenin weghaal, en dat de site in andere browsers niet meeschaalt als tekst buiten de 100% hoogte van de browser valt.

Dat is omdat mét de xml declaratie IE in quirksmode wordt geschopt. Dan hanteert IE zijn eigen boxmodel.

De bedoeling is dat de pagina's minimaal 100% hoog zijn en als de content buiten deze 100% hoogte van de browser valt moet de site mee moet schalen in de hoogte. Hoe kan ik dit voor elkaar krijgen?

Dát is een geval Test 57

Als ik je site zo zie kan het in jouw geval zelfs nog simpeler, je hebt immers geen footer. Wat je kunt doen zijn de zgn "faux columns" (a list apart)

Je zet de achtergrond die nu achter je content staat in je body

code:

background: #CCC url(achtergrond-image.png) repeat-y 50% 0;

hierdoor lijkt het alsof er een kolom met 100% hoogte staat.

[Ivar]

T-MOB schreef op 22 maart 2004 @ 18:05:
Dát is een geval Test 57

Als ik je site zo zie kan het in jouw geval zelfs nog simpeler, je hebt immers geen footer. Wat je kunt doen zijn de zgn "faux columns" (a list apart)

Je zet de achtergrond die nu achter je content staat in je body

code:

background: #CCC url(achtergrond-image.png) repeat-y 50% 0;

hierdoor lijkt het alsof er een kolom met 100% hoogte staat.

Okay, ik heb het voorbeeld van Test 57 gebruikt en iets omgebouwd naar mijn design. Het werkt nog niet helemaal zoals het zou moeten. Min-height werkt misschien wel in andere browsers dan IE, maar ook dan zijn er een aantal dingen die niet werken. Ik zal hieronder de vernieuwde code even posten.

[Ivar]

Hierbij de vernieuwde code die nog steeds niet helemaal werkt:

HTML:

<!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>
  <title>DocStyler: Homepage</title>
  <link href="styles/docstyler.css" rel="stylesheet" rev="1.0" title="DocStyler stylesheet" type="text/css" />
<style type="text/css">
html, body, #holder { min-height: 100%; width: 100%; height: 100%; min-height: 100%}
html>body, html>body #holder { height: auto; min-height: 100%}
#holder { background: #888888; position: absolute; top: 0; left: 0; height: 100%; min-height: 100%}
#nav { width: 159px; float: left; padding-bottom: 3em; padding-top: 170px; padding-left: 30px; height: auto; min-height: 100%}
#content2 { background: #fff; margin-left: 189px; padding-bottom: 3em; padding-top: 170px; height: auto; color: #000000; min-height: 100%}
</style>
</head>
<body>
<div id="container">
  <div id="menu_top_homepage">
    <a href="login.php">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="nieuws.html">Nieuws</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="referenties.html">Referenties</a>
  </div>

  <div id="holder">
    <div id="nav">
              <a href="index.html" id="nowon">Home</a><br />
              <a href="docstyler.html">Docstyler</a><br />
              <a href="pluspunten.html">Pluspunten</a><br />
              <a href="docstylerstudio.html">DocStyler Studio</a><br />
              <a href="dewerking.html">De Werking</a><br />
              <a href="specificaties.html">Specificaties</a><br />
              <a href="symeko.html">Symeko</a><br />
              <a href="brochure.php">Brochure</a><br />
              <a href="contact.php">Contact</a>
    </div>
    <div id="content2">
              <p align="center">[img]"images/docstyler_box.jpg"[/img]</p>
              <h2 align="center">Zijn uw documenten in vorm?</h2>
    </div>
  </div>

</div>
</body>
</html>

Stylesheet die wordt gebruikt staat in een eerdere post en voor een deel in de header.

[Oysterhoys]

Is gewoon linke soep dat procentueel ontwerpen met CSS.
Ik zie zoveel div nestings , het lijkt wel een tabel.
Ik brand mijn vingers er niet meer aan.

Gewoon lekker absoluut positioneren.

[Ivar]

Oysterhoys schreef op 22 maart 2004 @ 21:39:
Is gewoon linke soep dat procentueel ontwerpen met CSS.
Ik zie zoveel div nestings , het lijkt wel een tabel.
Ik brand mijn vingers er niet meer aan.

Gewoon lekker absoluut positioneren.

Ach ja, met die div nesting valt het ook wel mee. Er is een container die de boel centreert, daarbinnen wordt zo'n beetje alles absoluut gepositioneerd. En om de content en het menu links met elkaar mee te laten schalen, ontkom je niet aan nesting denk ik. Zelf heb ik ook al gedacht aan het maken van een layout m.b.v. tables, maar dat wil ik eigenlijk heel graag vermijden als het kan. De site moet aan twee dingen voldoen:
• De pagina moet 100% van de browser hoogte in beslag nemen, óf
• De pagina moet 100% van de browser hoogte in beslag nemen en in de lengte meeschalen met dat deel van de content die daarover heen gaat

[T-MOB]

Zoals ik al zei, in jouw geval is een "faux columns" aanpak makkelijker.

Zie hier een werkend voorbeeld: voorbeeld

en let op de body { background! }

[Ivar]

T-MOB schreef op 23 maart 2004 @ 00:36:
Zoals ik al zei, in jouw geval is een "faux columns" aanpak makkelijker.

Zie hier een werkend voorbeeld: voorbeeld

en let op de body { background! }

Okay, dat ziet er goed uit, thanks! Ik heb de layout hiernaar aangepast (nieuwe versie te vinden op http://www.pruijn.com/docstyler/new/) en er blijft nog 1 ding over:

De streepjes aan de zijkant van het menu lopen niet helemaal door naar beneden, ze lopen alleen even lang door als de content. Non-IE browsers doen het prima met min-height: 100% maar IE wil ook wat . Het opnemen van de streepjes in het meeschalende achtergrondplaatje (docstyler.png) werkt dan misschien? Maar liever heb ik een andere manier.

[T-MOB]

Dan moet je de streepjes opnemen in je achtergrondplaatje. Ipv 1px hoog maak je hem 7px oid... de witte streepjes kun je er dan links inzetten.

edit: mmz.. dat wil je niet. Mmmz.. je zou een absolute div achter je container kunnen plaatsen waarin de witte streepjes zitten, die kun je height: 100% geven. Dat is alleen een beetje een knutseloplossing .

[ Voor 43% gewijzigd door T-MOB op 23-03-2004 09:57 ]

[Ivar]

T-MOB schreef op 23 maart 2004 @ 09:52:
Dan moet je de streepjes opnemen in je achtergrondplaatje. Ipv 1px hoog maak je hem 7px oid... de witte streepjes kun je er dan links inzetten.

edit: mmz.. dat wil je niet. Mmmz.. je zou een absolute div achter je container kunnen plaatsen waarin de witte streepjes zitten, die kun je height: 100% geven. Dat is alleen een beetje een knutseloplossing .

Het is niet meer een knutseloplossing dan die van het achtergrondplaatje vind ik . Maar goed, die heb ik dus wel aangepast, zie opnieuw http://www.pruijn.com/docstyler/new/ . Dat werkt goed, helaas niet in Mozilla 1.0. Waarschijnlijk komt dit doordat het achtergrondplaatje in de body zit en niet in de container. Als je dat wel doet, is de container in IE niet 100% in de hoogte, geef je de container 100% hoogte, dan werkt het weer niet in andere browsers (container rekt niet mee met de content). Het zou fijn zijn als hier nog een oplossing voor is.

Vanmiddag test ik het geheel nog even in meer browsers, mocht dat niet werken kom ik nog terug , anders zal ik de final code posten.

edit:

Safari, IE 5.0 en 5.5 werken op zich prima. De IEs (inclusief versie 6) hebben als enigen het probleem dat de border om de container heen ook niet schaalt tot 100%, alleen tot waar de content ophoudt. Dit heb ik opgelost door het achtergrondplaatje een border te geven, maar is wel minder flexibel. Verder heeft Mozilla 1.0 het bovengenoemde probleem met het achtergrondplaatje. Zou fijn zijn als dit wel opgelost kon worden.

[ Voor 25% gewijzigd door Ivar op 23-03-2004 17:00 . Reden: browsertests verwerkt in post ]

[Ivar]

Okay, Mozilla 1.0 tript als enige browser nog op de rendering (denk ik), tips hierover zijn welkom, maar hieronder de relevante code.

HTML:

<div id="container">
  <div id="header">
    [img]"images/docstyler_top_homepage.jpg"[/img]
  </div>
 
  <ul id="hormenu">
    <li><a href="referenties.html">Referenties</a></li>
    <li><a href="nieuws.html">Nieuws</a>&nbsp;&nbsp;|</li>
    <li><a href="login.php">Login</a>&nbsp;&nbsp;|</li>
  </ul>

  <ul id="vermenu">
    <li><a href="index.html" id="nowon">Home</a></li>
    <li><a href="docstyler.html">Docstyler</a></li>
    <li><a href="pluspunten.html">Pluspunten</a></li>
    <li><a href="docstylerstudio.html">DocStyler Studio</a></li>
    <li><a href="dewerking.html">De Werking</a></li>
    <li><a href="specificaties.html">Specificaties</a></li>
    <li><a href="symeko.html">Symeko</a></li>
    <li><a href="brochure.php">Brochure</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>

  <div id="content">
    <p>Content</p>
  </div>

  <div id="clear"></div>

</div>
</body>

En de stylesheet.

Cascading Stylesheet:

  html, body { min-width: 800px; width: 100%; height: 100%; margin: 0; padding: 0 }

  body { 
    background: #CCCCCC url('docstyler.png') repeat-y center top;
    font-family: Verdana, Helvetica, Arial, sans-serif;
        font: 12px Arial;
  }

  #container {
        position: absolute;
        left: 50%;
        top: 0px;
        margin-left: -400px;
        width: 800px;
    min-height: 100%;
    max-height: auto;
  }

  #header { width: 800px; height: 152px; background: #000252; color: #FFF; }

  #hormenu {
    position: absolute;
    right: 20px;
    top: 139px;
    z-index: 22;
    width: 100%;
    overflow: visible;
        font: 11px Arial;
        letter-spacing: 0.5px;
    color: #fff;
        text-align: right;
    text-transform: uppercase;
    display: block;
    margin: 0px;
    padding: 0 0px;
    line-height: 0.9;
  }
  
  #hormenu li { list-style-type: none; float: right; margin: 0px 0px 0px 5px; padding: 0px }

  #hormenu a:link { text-decoration: none; color: #FFFFFF; }
  #hormenu a:visited { text-decoration: none; color: #FFFFFF; }
  #hormenu a:hover { text-decoration: underline; color: #FFFFFF; }
  #hormenu a:active { text-decoration: underline; color: #FFFFFF; }

  #vermenu { display: block; float: left; width: 187px; margin: 0px 10px 0px 0px;
padding: 20px 30px 40px 30px; font: 11px Arial; color: #FFFFFF; 
text-decoration: none; text-align: left; }

  #vermenu li { list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px; }

  #vermenu a:link { text-decoration: none; color: #FFFFFF; }
  #vermenu a:visited { text-decoration: none; color: #FFFFFF; }
  #vermenu a:hover { text-decoration: underline; color: #FFFFFF; }
  #vermenu a:active { text-decoration: underline; color: #FFFFFF; }
  
  #content { float: right; padding: 20px 60px 20px 0px; margin: 0px; width: 460px; }

  #clear: { clear: both; }

Bedankt voor de hulp!

[ Voor 32% gewijzigd door Ivar op 23-03-2004 21:42 . Reden: code wat minder breed gezet ]

[Verwijderd]

Okay, Mozilla 1.0 tript als enige browser nog op de rendering

Bedoel je daar letterlijk '1.0' mee? Want dan lijkt het me tijd om te updaten. In mijn 1.7b versie (1.6 is de laatste stabiele uitgave) werkt het prima.

[Ivar]

Verwijderd schreef op 24 maart 2004 @ 07:43:
[...]
Bedoel je daar letterlijk '1.0' mee? Want dan lijkt het me tijd om te updaten. In mijn 1.7b versie (1.6 is de laatste stabiele uitgave) werkt het prima.

Daar bedoel ik letterlijk '1.0' mee . Niet dat ik me daar aan wil conformeren ofzo, maar de klant had het graag in het lijstje van compatible browsers gezien. Testen doe ik in IE 6.0, IE 5.x, Mozilla 1.6, Opera 7.x, Safari 1.x en als het even kan, ook in Mozilla 1.0. Geen ramp als het daar niet in werkt natuurlijk, wel een mooie meevaller.

[Bosmonster]

Mozilla gebruikers zijn over het algemeen gebruikers die weten waar ze mee bezig zijn en ook zo goed als altijd de laatste versie zullen gebruiken.

Overigens is Mozilla 1.4 na 1.0 de volgende grote milestone. Dat zou dus ook geen slechte zijn om op te testen.

[Ivar]

Mozilla 1.0 = Netscape Navigator 6.0 toch? Daarom test ik daar ook op. Inderdaad zullen Mozilla gebruikers meestal wel weten waar ze mee bezig zijn en dus goed up-to-date zijn, dezelfde reden dat ik ook alleen test in de nieuwste versie van Opera bijvoorbeeld (een heel fijne browser trouwens, zeker om in te webdesignen).

[Bosmonster]

Netscape 6.0 is nog een beta versie van Mozilla (0.nogwat, ik weet het niet eens meer ). Netscape 6.1 is volgens mij pas gebaseerd op de final Mozilla 1.0 (of was dat zelfs 7.0?).

Netscape 6.0 is een enorme ramp dus die zou ik sowieso vergeten

Overigens kun je Netscape sowieso vergeten imho... want de mensen die Mozilla gebruiken gebruiken Mozilla of FireFox en niet of nauwelijks de sterk verouderde Netscape aanpassing.

[ Voor 35% gewijzigd door Bosmonster op 24-03-2004 12:23 ]

[Ivar]

Ivar schreef op 23 maart 2004 @ 21:37:
Okay, Mozilla 1.0 tript als enige browser nog op de rendering (denk ik), tips hierover zijn welkom, maar hieronder de relevante code.

HTML:

<div id="container">
  <div id="header">
    [img]"images/docstyler_top_homepage.jpg"[/img]
  </div>
 
  <ul id="hormenu">
    <li><a href="referenties.html">Referenties</a></li>
    <li><a href="nieuws.html">Nieuws</a>&nbsp;&nbsp;|</li>
    <li><a href="login.php">Login</a>&nbsp;&nbsp;|</li>
  </ul>

  <ul id="vermenu">
    <li><a href="index.html" id="nowon">Home</a></li>
    <li><a href="docstyler.html">Docstyler</a></li>
    <li><a href="pluspunten.html">Pluspunten</a></li>
    <li><a href="docstylerstudio.html">DocStyler Studio</a></li>
    <li><a href="dewerking.html">De Werking</a></li>
    <li><a href="specificaties.html">Specificaties</a></li>
    <li><a href="symeko.html">Symeko</a></li>
    <li><a href="brochure.php">Brochure</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>

  <div id="content">
    <p>Content</p>
  </div>

  <div id="clear"></div>

</div>
</body>

En de stylesheet.

Cascading Stylesheet:

html, body {
        min-width: 800px;
        margin: 0px;
        padding: 0px;
}
    
body {
        background: #CCCCCC url('../images/background.png') repeat-y center top;
        voice-family: "\"}\""; /* dit is de IE5 hack, IE5 negeert alles na dit statement */
        voice-family:inherit;
        background: #CCCCCC url('../images/background.png') repeat-y center top
} 
    
html>body { background: #CCCCCC url('../images/background.png') repeat-y center top } /* deel van de hack, IE5 ondersteund ">" dit teken niet */

#container {
        position: absolute;
        left: 50%;
        top: 0px;
        margin-left: -400px;
        width: 800px;
    min-height: 100%;
    max-height: auto;
}

#header { width: 800px; height: 152px; background: #000252; color: #FFF; }

#hormenu {
    position: absolute;
    right: 20px;
    top: 139px;
    z-index: 22;
    width: 100%;
    overflow: visible;
        font: 11px Arial;
        letter-spacing: 0.5px;
    color: #fff;
        text-align: right;
    text-transform: uppercase;
    display: block;
    margin: 0px;
    padding: 0 0px;
    line-height: 0.9;
}
  
#hormenu li { list-style-type: none; float: right; margin: 0px 0px 0px 5px; padding: 0px }

#hormenu a:link { text-decoration: none; color: #FFFFFF; }
#hormenu a:visited { text-decoration: none; color: #FFFFFF; }
#hormenu a:hover { text-decoration: underline; color: #FFFFFF; }
#hormenu a:active { text-decoration: underline; color: #FFFFFF; }

#vermenu { display: block; float: left; width: 187px; margin: 0px 10px 0px 0px;
padding: 20px 30px 40px 30px; font: 11px Arial; color: #FFFFFF; 
text-decoration: none; text-align: left; }

#vermenu li { list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px; }

#vermenu a:link { text-decoration: none; color: #FFFFFF; }
#vermenu a:visited { text-decoration: none; color: #FFFFFF; }
#vermenu a:hover { text-decoration: underline; color: #FFFFFF; }
#vermenu a:active { text-decoration: underline; color: #FFFFFF; }
  
#content {
        width: 465px;
        color: #000000;
        z-index: 1;
        float: left;
        margin: 0px 0px 0px 0px;
        padding: 30px 0px 20px 60px;
            voice-family: "\"}\""; /* dit is de IE5 hack, IE5 negeert alles na dit statement */
            voice-family:inherit;
        padding: 30px 0px 20px 0px;  // padding-top padding-right padding-bottom padding-left
}

#clear: { clear: both; }

Bedankt voor de hulp!

Toch nog wat wijzigingen in de CSS (bovenstaand) om IE 5.x de content goed te laten positioneren.

[ Voor 15% gewijzigd door Ivar op 24-03-2004 13:33 ]