[CSS / XHTML] 3 flexibele kolommen - Softwareontwikkeling

donderdag 10 augustus 2006 12:20

Acties:

want a cookie

Topicstarter

Beste,

Momenteel ben ik bezig voor een klant om een flexibele layout op te stellen.
Deze layout heeft als eigenschap dat vrijwel niets verplicht is.

De layout is welbekend:
Afbeeldingslocatie: http://www.gamemag.nl/img/layout.jpg

Afbeeldingslocatie: http://www.gamemag.nl/img/layout.jpg

De image hierboven beschrijft de situatie vrij nauwkeurig.
- topbar, welke wel verplicht is;
- navigation, welke niet verplicht is, maar circa 24% maximaal in beslag neemt;
- RHS: de rechterkolom die ongeveer 175px breed zal worden. Deze kolom is niet verplicht.
- content area: hier staat alle content. Deze stretcht mee zodra de naviagtion of RHS niet aanwezig is en vult zo het gehele beschikbare content-gebied.

Kortom, lijkt me een uitvoerbare situatie, maar ik krijg het niet voor elkaar.
Kleine notitie, ik werk met IBM Lotus Notes, dus ik kan (if(){}else{} statements toevoegen aan mijn css).

Mijn html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>website X</title>
</head>

<body>
<div id="wrapper">
   <div id="header">
    <div id="header_top" class="clearfix"><h1>Website</h1></div>        
    <div id="header_bot" class="clearfix"></div>
   </div>
   
   <div id="lhs">
    <ul id="vertnav">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    </ul>
   </div>
   
   <!-- main content div -->
   <div id="content">
   inhoud
   </div>
   
   <!-- poll and jumpboxes and banners-->
    <div id="rhs">
    banner en wat inhoud
    </div>
    
    <!-- START: footer -->
    <div id="footer">
    copyright
    </div>
    
    <!-- END: canvas -->            
</div>
</form>
</body>
</html>

Mijn css:

Cascading Stylesheet:

/* Common ---------------------------------------------*/
:link,:visited { text-decoration:underline; }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

body {
   background:#fff;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 76%; /* all font sizes are related to this initial 'small' font-size setting (which is more or less 12pt) */
   min-width:730px; /* min- and max-width don't work in IE Win 6 and below */
   max-width:1250px;
}

p {
  font-size:12px;
  list-style-type: square;
}

/* Page Structure (layout) ---------------------------------------------*/
#wrapper { margin:0 1%; }

#header, #content, #footer {
   overflow:hidden;
   display:inline-block; /* dacht dat dit voldoende zou zijn...*/
}
#header, #footer {
   width:100%;
}
#header { margin:0 0 10px 0; }
#lhs, #content {
   float:left;
}

#lhs {
   background: #cecece;
   max-width:250px; /* max-width doesn't work in IE Win 6 and below */

}
#content {
   padding-left:10px;
   margin-left:2px;
   width:70%;
   border: 1px solid #e5e5e5;
}

#rhs {
  background: #cecece;
  max-width: 250px;/* max-width doesn't work in IE Win 6 and below */
  float:right;
  margin-left:0;
  margin-left:3px;
}

#footer { 
   margin:2em 0;
   clear: both;
   padding: 5px;
  margin-top: 0;
  text-align:center;
}

Kortom, het begint er zeker op te lijken... maar ik kan wat hulp gebruiken. Hoe krijg ik het content-frame zo flexibel mogelijk?
Als ik nu geen RHS gebruik, dan stretcht de content zichzelf niet.
Zowel de linkerkolom en de rechetrkolom kunnen dus mogelijk niet aanwezig zijn.

ps: tweakers-mods / devs. Ik klikte op bij mijn reactie op de link: UBB-codes en ik kon daardoor mijn gehele tekst opnieuw typen. Niet handig en zeeeer vervelend.

[webhero.nl]

donderdag 10 augustus 2006 12:35

Acties:

Rowanov

Kop eens wat anders...

Iets als op deze site kan misschien helpen: http://www.glish.com/css/7.asp

Aangezien je zelf al aangeeft met if en else blokken te kunnen werken, kan je dat vast wel inpassen in bovenstaand concept.

vrijdag 11 augustus 2006 01:25

Acties:

Fuzzillogic

Cool

Zaken zoals display: inline-block kun je niet op rekenen. Vziw ondersteunt allen Opera dit, en IE met een vage hack.

Kun je niet "gewoon" met 3 verschillende templates werken?

ps: tweakers-mods / devs. Ik klikte op bij mijn reactie op de link: UBB-codes en ik kon daardoor mijn gehele tekst opnieuw typen. Niet handig en zeeeer vervelend.

Gebruik Opera. Probleem opgelost