[CSS] hybride kolom met scrollbars - Softwareontwikkeling

woensdag 27 september 2006 14:02

Acties:

Verwijderd

Topicstarter

Ik heb naar voorbeeld van
http://www.alistapart.com/articles/holygrail/
geprobeerd een website te maken met een hybride middenvak tussen een linker- en rechterkolom. Daarnaast heb ik ook nog een header en een footer opgenomen.
Hier een kleine schets ter verduidelijking:

_________________________________
|___________header______________|
|   |__________D__________|     |
|   |                     |     |
|   |                     |     |
|   |                     |     |
| A |                B    |  C  |
|   |                     |     |
|   |                     |     |
|___|_____________________|_____|
|___________footer______________|

Vak B moet automatisch de ruimte tussen A en C opvullen. Zowel B als C zijn langer als het scherm hoog is. De bedoeling is dat er een scrollbalk komt in zowel vak B als C, zodat A en D altijd zichtbaar blijven.

globale opzet:

code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
  min-width: 410px;      /* 2x LC width + RC width */
}
.container {
  padding-left: 150px;   /* LC width */
  padding-right: 130px;  /* RC width */
}
.container div {
  position: relative;
  float: left;
}
.centerColumn {
  width: 100%;
}
.leftColumn {
  width: 150px;          /* LC width */
  right: 150px;          /* LC width */
  margin-left: -100%;
}
.rightColumn {
  width: 130px;          /* RC width */
  margin-right: -130px;  /* RC width */
}
.footer {
  clear: both;
}
/*** IE6 Fix ***/
* html .leftColumn {
  left: 130px;           /* RC width */
}
-->
</script>
</head>
<body>

<div class="header"> </div>


<div class="container">
    <div class="centerColumn">
        <div class="uppermenu"> </div>
        <div class="pagetitle"> </div>
        <div class="main"> </div>
    </div>
    <div class="leftColumn"> </div>
    <div class="rightColumn"> </div>
</div>

<div class="footer"> </div>

</body>
</html>

Dit is de website waar het om gaat (let niet op de kleuren):
http://home.student.utwen...erlingen/reisverslag.html

Ik heb de volgende problemen:
- de kolommen laten zich niet intomen tot 100% van de hoogte, ook niet als ik height:100% in de CSS toevoeg.
- de weergave in MSIE verschilt van andere browsers: IE maakt centerColumn veel te breed (zelfs nog meer dan 100% van de breedte van het beeldscherm?), terwijl andere browsers 100% van de ruimte tussen leftColumn en rightColumn nemen (correcte weergave).

Wie weet raad?

Even je 'schets' iets verduidelijkt

[ Voor 3% gewijzigd door BtM909 op 27-09-2006 14:10 ]

woensdag 27 september 2006 14:07

Acties:

Glabbeek

Dat dus.

Die schets is niet echt duidelijk zo, je kan beter echt iets tekenen, of het tussen [pre] tags zetten, zodat je spaties behouden worden. Daarnaast springt de pagina (iig in Firefox) alle kanten op zodra de mousecursor op een groen vlak of op een foto komt.

[ Voor 28% gewijzigd door Glabbeek op 27-09-2006 14:09 ]

En zo is het maar net.

woensdag 27 september 2006 14:27

Acties:

Verwijderd

Topicstarter

dat verspringen was op zich wel de bedoeling, maar je ziet meteen waarom het noodzaak is dat de pagina niet hoger is dan het beeldscherm: je wordt er anders knettergek van.

misschien praat dit iets makkelijker:

http://home.student.utwen...ngen/reisverslagtest.html

hoe toom ik nu de gele middenkolom en de blauwe rechterkolom in en wordt het geheel ook in internet explorer goed weergegeven?

maandag 2 oktober 2006 23:06

Acties:

Verwijderd

Topicstarter

Het ontwerp is iets anders geworden:

 _________________________
|_________D__________|    |
|     |              |    |
|     |              |    |
|  A  |      B       |  C |
|     |              |    |
|     |              |    |
|_____|______________|____|

Dit heb ik nu nagenoeg werkend in MSIE en Firefox bij alle resoluties en redelijke lettergrootten, met dezelfde broncode. Het enige is nog dat ik de content in de middelste kolom ( B ) heb moeten positioneren met padding vanaf de bovenkant en dat die padding er aan de onderkant ook aanzit omdat ik de hoogte 100% heb gesteld. Als ik dus verwijs naar een anchor in B, dan verschuift de pagina totdat B INCLUSIEF de padding-bottom op de onderkant van het scherm rust...
Ik heb dit provosorisch gerepareerd door na elke verwijzing naar een anchor het venster weer omhoog te scrollen met window.scrollBy(0,-50).
Als iemand een mooiere oplossing weet, waardoor überhaupt die padding aan de onderkant er niet bij zit... graag! (vervangen met margin lukte niet).

voor wie geinteresseerd is naar de broncode:

http://home.student.utwen...eisverslag.html#picture-3

[ Voor 64% gewijzigd door Verwijderd op 02-10-2006 23:15 ]