[CSS] 3 Column Layout - Softwareontwikkeling

maandag 12 juni 2006 10:03

Acties:

Verwijderd

Topicstarter

Ik probeer een 3 column layout te maken.
In internet Explorer werkt het helemaal naar behoren, maar als ik nu de pagina open in FireFox gaat het fout.

code:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/site.css"  media="all" />
  </head>
  <body>
    <div id="wrap">
      <div id="header0">
        <div id="header1"></div>
      </div>
      <div id="menu">
        <div id="menus">Menu</div>                  
      </div>
      <div id="main">
        <div id="login">Column 3</div>
        <div id="content">Column 2</div>
      </div>
    </div>
  </body>
</html>

code:

body {
  margin:0; padding:0; height:100%;
  font-family: tahoma, verdana, sans-serif;
  background-color: #f0f0f0;
}
#wrap {
  background: url('http://www.systems-direct.nl/images/menubg.jpg') repeat-y;
  min-height:100%;
  margin: 0px;
  position:relative;
  padding: 0px;
}
* html #wrap {height:100%}
#header0 {
  background: url('http://www.systems-direct.nl/images/banner1.jpg') repeat-x;
  margin:0;
  padding:0;
  height:100px;
  width: 100%;
}
#header1 {
  float: left;
  background: url('http://www.systems-direct.nl/images/banner.jpg') no-repeat;
  margin:0;
  padding:0;
  height:100px;
  width: 1024px;
}
#menu {
  float: left;
  width: 183px;
  text-align:center;
}
#menus {
  z-index: 1;
  position:absolute;
  left: 5px;
  top: 100px
}
#main {
  position:relative;
  margin-left:190px;
}
#content {
  padding: 0;
  float: left;
  font-family: tahoma, verdana, sans-serif;
  font-size: 10px;
  color: #707070;
  background: green;
}

* html #main { height:1px; }
#login {
  float: right;
  font-family: tahoma, verdana, sans-serif;
  font-size: 10px;
  color: #707070;
  float: right;
  width: 264px;
  height: 100%;
  background: red;
}

Het probleem is dus dat de 2e column in firefox onder de 3e column komt te staan:

code:

+-------------+--------------------------+--------+
|             |                          |        |
|             |                          |   3    |
|     1       |                          |        |
|             +--------------------------+--------+
|             |                                   |
|             |                2                  |
+-------------+-----------------------------------+

1 = Column 1
2 = Column 2
3 = Column 3

Voor een voorbeeld kunt je ook kijken op http://www.systems-direct.nl/viewgroup.php?groupid=9 (Ik weet niet of ik deze link hier neer mag zetten, maar het geeft wel een goed voorbeeld)

Iemand enig idee?

[ Voor 14% gewijzigd door Verwijderd op 12-06-2006 10:06 ]

maandag 12 juni 2006 10:07

Acties:

JHS

Splitting the thaum.

Heb je misschien een online voorbeeld, en/of zou je je code kunnen reduceren tot slechts de relevante code, want ik was persoonlijk niet van plan al je code door te gaan spitten om erachter te komen wat het probleem is

.

DM!

maandag 12 juni 2006 10:25

Acties:

Kiphaas7

Ik krijg dezelfde fout in IE6 als ik de favorieten map open heb, dus dat betekent (denk ik) dat je geen minimum breedte hebt meegegeven aan de 2de kolom, maar dat je content voor de 2de kolom niet wilt "meeschalen" zogezegd.

m.a.w. je breedte van de 2de kolom is relatief en past zich aan de vensterbreedte aan(en heeft dus een variabel maximum), je content heeft wel een (minimum)breedte van een x aantal pixels. Zodra contentbreedte>maximum vensterbreedte krijg je jouw probleem.

Denk dat dat je verder zou moeten helpen.

[ Voor 3% gewijzigd door Kiphaas7 op 12-06-2006 10:26 ]

maandag 12 juni 2006 10:37

Acties:

Verwijderd

Topicstarter

Kiphaas7 schreef op maandag 12 juni 2006 @ 10:25:
Ik krijg dezelfde fout in IE6 als ik de favorieten map open heb, dus dat betekent (denk ik) dat je geen minimum breedte hebt meegegeven aan de 2de kolom, maar dat je content voor de 2de kolom niet wilt "meeschalen" zogezegd.

m.a.w. je breedte van de 2de kolom is relatief en past zich aan de vensterbreedte aan(en heeft dus een variabel maximum), je content heeft wel een (minimum)breedte van een x aantal pixels. Zodra contentbreedte>maximum vensterbreedte krijg je jouw probleem.

Denk dat dat je verder zou moeten helpen.

Dank je, dit is duidelijk het probleem

Maar eerlijk gezegd heb ik geen idee hoe ik dit kan oplossen aangezien de breedte van de 2e kolom variable is. De tabel die ik laat zien in de 2e tabel heeft namelijk een breedte van 100% (wat naar mijn mening dus alle beschikbare breedte zou moeten benutten). Daarin tegen maakt hij de tabel dus eigenlijk groter als de beschikbare breedte.

nu ik hier aan denk zou het mischien aan de margins kunnen liggen, dit ga ik nu even nakijken. Iemand anders nog ideen van hoe dit op te lossen?

maandag 12 juni 2006 10:39

Acties:

JHS

Splitting the thaum.

100% betekend 100% van de breedte van de parent. Daar komen eventuele margins en andere childs (sibblings) dus nog bij

. Als je de width op auto zet zou hij in principe alle overige ruimte moeten opvullen, zolang je #content maar niet float - volgens mij.

DM!

maandag 12 juni 2006 10:44

Acties:

Kiphaas7

edit: had de reactie van JHS nog niet gezien toen ik repliede, dus kan best zijn dat het zijn replie nuttiger is dan wat ik blaat.

http://www.alistapart.com/articles/holygrail

Dit mischien? Is niet precies hetzelfde doel, maar kan wel wat opleveren.

Step 5: Design defensively
If the browser window is resized so that the center becomes smaller than the left column, the layout breaks in a standards-compliant browser. Setting a min-width on the body keeps your columns in place. With IE6 this doesn’t happen, so the fact that it doesn’t support min-width isn’t a problem.

body {
min-width: 550px; /* 2x LC width + RC width */
}Of course, no layout technique would be complete without requiring some sort of workaround in Internet Explorer. The negative margin pulls the left column too far to the left in IE6 (the full width of the browser window). We need to push it back to the right the full width of the right column—using the star-html hack to mask it from other browsers—and we’re ready to go.

* html #left {
left: 150px; /* RC width */
}The reason we need to use the width of the right column involves a bit of algebra. I won’t bore you with the details; you can work it out for yourself or just consider it another one of IE’s many charms.

[ Voor 11% gewijzigd door Kiphaas7 op 12-06-2006 10:46 ]

maandag 12 juni 2006 10:49

Acties:

Verwijderd

Topicstarter

Bedankt allemaal, ik ga mijn layout aanpassen, volgens die documentatie....

Het is volgens mij precies wat ik zoek. Ik laat nog weten hoe het gegaan is.

maandag 12 juni 2006 10:51

Acties:

Kiphaas7

Verwijderd schreef op maandag 12 juni 2006 @ 10:45:
Ik ben ook tijden met een 3-kolom pagina bezig geweest en ik heb heel erg veel aan dit document gehad:
http://www.alistapart.com/articles/holygrail
Niet alleen wordt de code gegeven er wordt ook nog eens uitgelegt wat het idee er achter is.

Misschien helpt het

Ondanks dat ik zelf ook de link in een reply gebruikte, kwam ik tijdens het googlen nog een potentieel probleem tegen:

http://www.infocraft.com/...ly_grail_on_a_list_apart/

aangezien dit direct om die min-width gaat vermeld ik het maar even.

maandag 12 juni 2006 15:58

Acties:

Verwijderd

Topicstarter

ok, de breedte werkt nu na behoren, echter nu heb ik het probleem dat de kollomen niet echt willen meewerken deze zouden namelijk gewoon moeten doorlopen tot de footer.

echter als ik de heights op 100% of auto zet werkt dit niet. maar ik er een vast hoogte van bijv. 500px; dan werkt het wel, iemand enig idee waar dit aan kan liggen?