Søg
Avatar billede Slettet bruger
24. september 2006 - 13:49 Der er 22 kommentarer og
1 løsning

Liquid 7 columns layout

Hej eksperter!

Jeg har kastet mig ud i et 7 kolonner css mockup og forsøger at få dem til at spanne 100% indenfor en parent "wrapper" container (med rød baggrund).

Jeg har så lavet en "test" container, som skal centrere de 7 colonner indenfor "wrapper"-containeren, således at "wrapper" containeren fyldes helt ud (100%). Når jeg siger helt ud, mener jeg at man ikke kan wrapperens røde baggrund mere. 

Centreringen af test-containeren går fint (ligelig fordeling i højre og venstre side), sålænge "test"-containeren er max er sat til width:80%.

Forsøger jeg at sætte "test" containeren til width:100%; kan man se ca. 6 mm. af den røde baggrund i højre side.

Heldigvis er dette gældende ensartet i både FF og IE ;-)

Her kommer test-HTML:
--------------------------------------------------------------

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

<html>
<head><title>7 column float</title></head>

<body>
<style type="text/css">

/* global reset all paddings and margins */
* { padding: 0; margin:0 }

/* Lets take the power back shall we? */
body
{
  padding: 5px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 20px 0 }

li, dd, blockquote { margin-left: 40px }

fieldset { padding: 10px }

/* remove top padding / margins from p-tags */
p { padding-top: 0px; margin-top: 0px }

#wrapper
{
  width:650px;
  height:50px;
  background-color:red;
}

.tableColumn
{
  float : left;
  width : 14%;
  height : 100%;
}

.clearFloat
{
  clear : both;
}

#test
{
  margin-left:auto;
  margin-right:auto;
  height:100%;
  width:80%;
}
</style>

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
<div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:blue">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:tan">g</div>
  </div>
</div>
<div class="clearFloat"><!-- --></div>

</body>
</html>

--------------------------------------------------------------

Hvordan får jeg de 7 kolonner til at fordele sig 100% indenfor "wrapper"-containeren?

Håber nogen kan hjælpe! :-)
Avatar billede notes2c Nybegynder
24. september 2006 - 14:24 #1
IE er ikke så god til det med procent, så eneste løsning som jeg ser det er at tilpasse bredden på wrapper så den går op i 7.

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

<html>
<head><title>7 column float</title>
<style type="text/css">

/* global reset all paddings and margins */
* { padding: 0; margin:0 }

/* Lets take the power back shall we? */
body
{
  padding: 5px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 20px 0 }

li, dd, blockquote { margin-left: 40px }

fieldset { padding: 10px }

/* remove top padding / margins from p-tags */
p { padding-top: 0px; margin-top: 0px }

#wrapper
{
  width:644px;
  height:50px;
  background-color:red;
}

.tableColumn
{
  float : left;
  width : 14.28%;
  height : 100%;
}

.clearFloat
{
  clear : both;
}

#test
{
  margin-left:auto;
  margin-right:auto;
  height:100%;
  width:100%;
}
</style>
</head>

<body>

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
<div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:blue">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:tan">g</div>
  </div>
</div>
<div class="clearFloat"><!-- --></div>

</body>
</html>
Avatar billede Slettet bruger
24. september 2006 - 14:42 #2
jeg tror det er et spørgsmål om at regne lidt på det. Ellers går det med procentuel angivelse i css jo ikke. - og så selvfølgelig lurre hvor css-bugs'ne og cowboy-tricks'ne er! :-)

Desuden er "wrapper" ikke noget jeg selv kan styre. Det skal kunne sættes til hvad som helst i max width.

Jeg har forsøgt at tage udgangspunkt i:

http://www.maxdesign.com.au/presentation/liquid/#grid

- Men skal ikke bruge "gutters" i dette regi.

Kan man gøre andet? - for eksempel lave "cellerne/kolonnerne" om til ordered lists eller noget?

Kan jo ikke vente på at CCS3 udkommer.. :-)
Avatar billede notes2c Nybegynder
24. september 2006 - 14:50 #3
I teorien skulle det jo virke. Og det gør det også i FF. Men bare ikke i IE.

Men du kunne jo altid bruge en tabel til dine kolonner
Avatar billede Slettet bruger
24. september 2006 - 14:56 #4
Aldrig! :-)

Det lykkedes mig at få et 5 kolonne liquid layout til i virke perfect cross-browser på http://www.bius.dk (top-menuen)

Det må simpelthen kunne lade sig gøre, også selvom wrapperens width ikke er delelig med kolonner...
Avatar billede Slettet bruger
24. september 2006 - 14:57 #5
rettelse: 4 kolonner
Avatar billede notes2c Nybegynder
24. september 2006 - 15:04 #6
Det går fint for IE når divisionen går op men når den er skæv går den galt i byen.

Og jeg ser ingen løsning, som det ser ud for IE nu.

Det eneste alternativ at justere bredden via javascript på load tidspunktet. Men ved ikke om det er en option.
Avatar billede Slettet bruger
24. september 2006 - 15:20 #7
det ville vel egentlig gå an. kan du give et eksempel på hvordan man gør det det?
Avatar billede notes2c Nybegynder
24. september 2006 - 16:26 #8
Selv når jeg prøver at justere ved hjælp af javascript er problemet der. For man kan kun sætte hele antal pixels og det vil altid give en rest som ikke vil kunne fordeles. Og det vil i mit eks. betyde at sidste element vil justere for denne rest.

Så konklusionen må vel være at det ikke kan lade sig gøre i IE. Eller lad os sige jeg ved ikke hvordan.

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

<html>
<head><title>7 column float</title>
<style type="text/css">

/* global reset all paddings and margins */
* { padding: 0; margin:0 }

/* Lets take the power back shall we? */
body
{
  padding: 5px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 20px 0 }

li, dd, blockquote { margin-left: 40px }

fieldset { padding: 10px }

/* remove top padding / margins from p-tags */
p { padding-top: 0px; margin-top: 0px }

#wrapper
{
  width:650px;
  height:50px;
  background-color:red;
}

.tableColumn
{
  float : left;
  width : 14.28%;
  height : 100%;
}

.clearFloat
{
  clear : both;
}

#test
{
  margin-left:auto;
  margin-right:auto;
  height:100%;
  width:100%;
}
</style>
<script type="text/javascript">
function test() {
    var d = document.getElementById('wrapper');
    var x = d.offsetWidth;
    var dd = d.getElementsByTagName('div');
    var v = parseInt((d.offsetWidth / 7), 10);
    for (i = 0; i < dd.length; i++) {
        if (dd[i].className == 'tableColumn') {
            if (i == dd.length-1) {
                dd[i].style.width = x+'px';
            } else {
                x-=v;
                dd[i].style.width = v+'px';
            }
        }
    }
}
</script>
</head>

<body onload="test();">

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
    <div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:blue">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:tan">g</div>
  </div>
</div>
<div class="clearFloat"><!-- --></div>

</body>
</html>
Avatar billede Slettet bruger
24. september 2006 - 18:05 #9
Hej Notes2c

:-(

Nå men tak for indsatsen, jeg trager javascript approachen, den er tilnærmelsesvis det vedste der kan gøres.

Tak for sparringen! :-)
Avatar billede notes2c Nybegynder
24. september 2006 - 18:20 #10
Hvis du bliver klogere hen af vejen kan du jo lægge dine erfaringer ind.
Avatar billede mclemens Nybegynder
25. september 2006 - 02:14 #11
Her er lige to andre eksempler hvor overskydende px fordeles imellem div'sene...
Jeg har brugt et object til at beregne hvilke elementer og fjernet mellemrum imellem
div'senes start her er det ene eksempel der gør det onload:




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

<html>
<head><title>7 column float</title>
<style type="text/css">

/* global reset all paddings and margins */
* { padding: 0; margin:0 }

/* Lets take the power back shall we? */
body
{
  padding: 5px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 20px 0 }

li, dd, blockquote { margin-left: 40px }

fieldset { padding: 10px }

/* remove top padding / margins from p-tags */
p { padding-top: 0px; margin-top: 0px }

#wrapper
{
  width:650px;
  height:50px;
  background-color:red;
}

.tableColumn
{
  float : left;
  width : 14.28%;
  height : 100%;
}

.clearFloat
{
  clear : both;
}

#test
{
  margin-left:auto;
  margin-right:auto;
  height:100%;
  width:100%;
}
</style>
<script type="text/javascript">

var spcslice={0:"9",1:"3",2:"24",3:"234",4:"1245",5:"12345",6:"012456"};

window.onload=function(){
  var e = document.getElementById('test');
  var w = parseInt(e.offsetWidth);
  var ecs = e.childNodes;
  for(i=j=0,i2=ecs.length;i<i2;i++)if(ecs[i].tagName=="DIV"){
    ecs[i].style.width=Math.floor(w/7)+((spcslice[w%7].indexOf(j)!=-1)?1:0)+"px";
    if(++j==7)i=i2;
  }
}

</script>
</head>

<body>

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
    <div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:blue">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:tan">g</div>
  </div>
</div>

<div class="clearFloat"><!-- --></div>

</body>
</html>


og det andet der også fixer der ved resize af vinduet
... har rettet på wrapper's width for at lave en synligere eksempel...



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

<html>
<head><title>7 column float</title>
<style type="text/css">

/* global reset all paddings and margins */
* { padding: 0; margin:0 }

/* Lets take the power back shall we? */
body
{
  padding: 5px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 20px 0 }

li, dd, blockquote { margin-left: 40px }

fieldset { padding: 10px }

/* remove top padding / margins from p-tags */
p { padding-top: 0px; margin-top: 0px }

#wrapper
{








/*  width:650px; */

width:100%;

/* width er lige sat til 100% for at få en test effekt lavet ... resize browseren */










  height:50px;
  background-color:red;
}

.tableColumn
{
  float : left;
  width : 14.28%;
  height : 100%;
}

.clearFloat
{
  clear : both;
}

#test
{
  margin-left:auto;
  margin-right:auto;
  height:100%;
  width:100%;
}
</style>
<script type="text/javascript">

var spcslice={0:"9",1:"3",2:"24",3:"234",4:"1245",5:"12345",6:"012456"};

window.onload=function(){
  alignit();
  window.onresize=alignit;
}


function alignit(){
  var e = document.getElementById('test');
  var w = parseInt(e.offsetWidth);
  var ecs = e.childNodes;
  for(i=j=0,i2=ecs.length;i<i2;i++)if(ecs[i].tagName=="DIV"){
    ecs[i].style.width=Math.floor(w/7)+((spcslice[w%7].indexOf(j)!=-1)?1:0)+"px";
    if(++j==7)i=i2;
  }
}

</script>
</head>

<body>

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
    <div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:blue">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:tan">g</div>
  </div>
</div>

<div class="clearFloat"><!-- --></div>

</body>
</html>



... Ved godt at spørgsmålet var lukket, men det var mere for at fordele de overskydende px imellem div'sene istedet for kun en buffer :o)

Nat, nat ;)
Avatar billede Slettet bruger
25. september 2006 - 07:26 #12
mclemens, fantastisk kommentar! - hvordan er du kommet frem til de værdier der skal være i dit spcslice object?

Lad os sige at ovenstående eksempel er en menu og at der dynamisk tilføjes flere tablecolumns, dvs ikke kun 7, men 12 divs eksempelvis.

kan man beregne hvilke attributter spcslice skal have, for at kunne lave fordelingen af pixels ligeligt?

En lille forklaring af hvordan du er kommet frem til din løsning ville være kanon!

pft.
Avatar billede notes2c Nybegynder
25. september 2006 - 07:29 #13
Bestemt udemærket løsninger... Godt input...
Avatar billede mclemens Nybegynder
25. september 2006 - 10:46 #14
var spcslice={
0:"9" //hvis der er 0 px i overskud skal element nr. 10 have 1 px i overskud (der er jo ikke 10 div elementer i gennemløbet, så det ville ikke kunne returnere sandt
- men der bør nok rettes til a / b eller c eller et ikke tal ...

,1:"3" //hvis der er 1 px i overskud får element nr. 4 1 px ekstra

,2:"24" //2 px -> element nr. 3 og 5 får 1 px ekstra ... o.s.v.

,3:"234",4:"1245",5:"12345",6:"012456"};

window.onload=function(){
  alignit(); //aktiveres onload
  window.onresize=alignit; // og aktiveres onresize - grunden til at resize defineres i onload er at den ellers vil blive aktiveret samtidig med onload
hvis den stod globalt - derfor lagt ind i onload funktionen
}


function alignit(){
  var e = document.getElementById('test'); // vi nupper en reference variabel til test div'en

  var w = parseInt(e.offsetWidth); // vi snupper tallet der viser test divens bredde

  var ecs = e.childNodes; // snupper childNodes elementer i test diven

  for(i=j=0,i2=ecs.length;i<i2;i++) // looper igennem childNodes elementer i test div

if(ecs[i].tagName=="DIV"){ // hvis aktivt loop element er en div aktiveres nedenstående

    ecs[i].style.width= // bredden af elementet sættes til
Math.floor(w/7) // bredden divideret med 7 - rundet ned

+((spcslice[w%7].indexOf(j)!=-1)?1:0) // hvis det aktive div nr (j) er i det slice object der repræsenterer vilke div's der skal have en px ekstra til føjet 1 ellers 0

+"px"; // kræver vist ingen forklaring

    if(++j==7)i=i2; // hvis vi er kommet igennem 7 elementer sættes i til i2 så løkken stopper
  }
}



... kigger lige på en anden til flere elementer end 10 senere (er på arbejde p.t.) ...
Avatar billede mclemens Nybegynder
25. september 2006 - 10:56 #15
Nåh, det tog ikke så lang tid...



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

<html>
<head><title>7 column float</title>
<style type="text/css">

/* global reset all paddings and margins */
* { padding: 0; margin:0 }

/* Lets take the power back shall we? */
body
{
  padding: 5px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin: 20px 0 }

li, dd, blockquote { margin-left: 40px }

fieldset { padding: 10px }

/* remove top padding / margins from p-tags */
p { padding-top: 0px; margin-top: 0px }

#wrapper
{








/*  width:650px; */

width:100%;

/* width er lige sat til 100% for at få en test effekt lavet ... resize browseren */










  height:50px;
  background-color:red;
}

.tableColumn
{
  float : left;
  width : 8.33%;
  height : 100%;
}

.clearFloat
{
  clear : both;
}

#test
{
  margin-left:auto;
  margin-right:auto;
  height:100%;
  width:100%;
}
</style>
<script type="text/javascript">

var elms=12;

var spcslice={0:"0",1:"-5-",2:"-5-6-",3:"-4-5-6-",4:"-4-5-6-7-",5:"-3-4-5-6-7-",6:"-3-4-5-6-7-8-",7:"-2-3-4-5-6-7-8-",8:"-2-3-4-5-6-7-8-9-",9:"-1-2-3-4-5-6-7-8-9-",10:"-1-2-3-4-5-6-7-8-9-10-",11:"-0-1-2-3-4-5-6-7-8-9-10-"};
// ovenstående er en defineret til 12 elementer

window.onload=function(){
  alignit();
  window.onresize=alignit;
}


function alignit(){
  var e = document.getElementById('test');
  var w = parseInt(e.offsetWidth);
  var ecs = e.childNodes;
  for(i=j=0,i2=ecs.length;i<i2;i++)if(ecs[i].tagName=="DIV"){
    ecs[i].style.width=Math.floor(w/elms)+((spcslice[w%elms].indexOf("-"+j+"-")!=-1)?1:0)+"px";
    if(++j==elms)i=i2;
  }
}

</script>
</head>

<body>

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
    <div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:blue">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:#123">f</div>
    <div class="tableColumn" style="background-color:#234">f</div>
    <div class="tableColumn" style="background-color:#345">f</div>
    <div class="tableColumn" style="background-color:#678">f</div>
    <div class="tableColumn" style="background-color:#789">f</div>
    <div class="tableColumn" style="background-color:#aabbcc">f</div>
  </div>
</div>

<div class="clearFloat"><!-- --></div>

</body>
</html>



M.h.t. auto beregning baseret på elementer i div'en så har
jeg ikke kigget på det ... arbejde først, leg bagefter ...
Avatar billede Slettet bruger
03. oktober 2006 - 23:50 #16
Hej!

>> mclemens, du har vel ikke set på autoberegning vel?
Avatar billede mclemens Nybegynder
04. oktober 2006 - 02:08 #17
Hmmm, havde ikke kigget på det ... umiddelbart er denne nok den nemmeste autoberegning ... men hvis man skal hænge sig i px definerings fordelingen vil en manuel fordeling kunne give en mere jævn fordeling ... f.eks. hvis man har 3 kolonner og 2 px i overskud ville ovenstående give 1 til den minderste og så 1 til den første til venstre for den midderste ... den burde så måske istedet have givet 1 til den første til venstre for og så den til højre for og ingen til midten ... men, hmmm - det er 1 px i forskel :/

Den automatiske beregning kan måske udvides så den tager hensyn til de px forskelle ved måling på lige eller ulige tal og lige eller ulige tal i restsums fordelingen ... men det er sent, jeg er træt ... skal på arbejde imorgen og kan ikke lige gennemskue den sidste del ...



Her er lige autoberegning med fordeling imellem elementerne uden hensyn
til lige eller ulige kolloneantal vs. lige eller ulige restsums px tal ...



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>



<style type="text/css">

#wrapper{
/*  width:650px; */
  width:100%;
/* width er lige sat til 100% for at få en test effekt lavet ... f.eks resize af browseren */
}

#test{background:blue;width:100%;}

.tableColumn{float:left;}

</style>



<script type="text/javascript">

var elms=[];

window.onload=function(){
  alignit();
  window.onresize=alignit;
}


function alignit(){

  var e = document.getElementById('test');
  var w = parseInt(e.offsetWidth);

  if(elms.length==0){

    var ec=e.childNodes;
    for(i=j=0,i2=ec.length;i<i2;i++)if(ec[i].tagName=="DIV")elms[j++]=ec[i];
    alignit();

  }else{

    var elml=parseInt(elms.length);
    for(i in elms)elms[i].style.width=Math.floor(w/elml)+"px";
    surplus=w%elml;

    if(elml%2!=0&&surplus!=0){
      var nix2xalign=Math.floor(elml/2);
      elmw(elms[nix2xalign]);

      var e1=nix2xalign-1,e2=nix2xalign+1;

    }else var nix2xalign=-1,e1=elml-1,e2=elml+1;

    while(surplus!=0){
      if(surplus!=0)elmw(elms[e1--]);
      if(surplus!=0)elmw(elms[e2--]);
    }

  }

}

function elmw(e){
  e.style.width=parseInt(e.offsetWidth)+1+"px";
  --surplus;
}

</script>



</head><body>

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
    <div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:purple">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:#123">f</div>
    <div class="tableColumn" style="background-color:#234">f</div>
    <div class="tableColumn" style="background-color:#345">f</div>
    <div class="tableColumn" style="background-color:#678">f</div>
    <div class="tableColumn" style="background-color:#789">f</div>
  </div>
</div>

</body></html>
Avatar billede mclemens Nybegynder
04. oktober 2006 - 02:11 #18
En lille forkortelse ... dobbelt opkald
til funktionen onload var unødvendig ...

<script type="text/javascript">

var elms=[];

window.onload=function(){
  alignit();
  window.onresize=alignit;
}


function alignit(){

  var e = document.getElementById('test');
  var w = parseInt(e.offsetWidth);

  if(elms.length==0){

    var ec=e.childNodes;
    for(i=j=0,i2=ec.length;i<i2;i++)if(ec[i].tagName=="DIV")elms[j++]=ec[i];
    alignit();

  }

  var elml=parseInt(elms.length);
  for(i in elms)elms[i].style.width=Math.floor(w/elml)+"px";
  surplus=w%elml;

  if(elml%2!=0&&surplus!=0){
    var nix2xalign=Math.floor(elml/2);
    elmw(elms[nix2xalign]);

    var e1=nix2xalign-1,e2=nix2xalign+1;

  }else var nix2xalign=-1,e1=elml-1,e2=elml+1;

  while(surplus!=0){
    if(surplus!=0)elmw(elms[e1--]);
    if(surplus!=0)elmw(elms[e2--]);
  }

}


function elmw(e){
  e.style.width=parseInt(e.offsetWidth)+1+"px";
  --surplus;
}

</script>


Nat, nat ;)
Avatar billede mclemens Nybegynder
04. oktober 2006 - 02:38 #19
if(surplus!=0)elmw(elms[e2--]);
skal lige rettes til:
    if(surplus!=0)elmw(elms[e2++]);
... det er som sagt sent ...
Avatar billede mclemens Nybegynder
04. oktober 2006 - 09:11 #20
Sådan - så er 2 fejl i ovenstående rettet
... altid godt med en lille smule søvn ...


<script type="text/javascript">

var elms=[];

window.onload=function(){
  alignit();
  window.onresize=alignit;
}


function alignit(){

  var e = document.getElementById('test');
  var w = parseInt(e.offsetWidth);

  if(elms.length==0){

    var ec=e.childNodes;
    for(i=j=0,i2=ec.length;i<i2;i++)if(ec[i].tagName=="DIV")elms[j++]=ec[i];

  }

  var elml=parseInt(elms.length);
  for(i in elms)elms[i].style.width=Math.floor(w/elml)+"px";
  surplus=w%elml;

  if(elml%2!=0&&surplus!=0){
    var tmp=Math.floor(elml/2);
    elmw(elms[ tmp]);

    var e1= tmp-1,e2= tmp+1;

  }else var e1=elml/2-1,e2=elml/2;

  while(surplus!=0){
    if(surplus!=0)elmw(elms[e1--]);
    if(surplus!=0)elmw(elms[e2++]);
  }

}


function elmw(e){
  e.style.width=parseInt(e.offsetWidth)+1+"px";
  --surplus;
}

</script>
Avatar billede mclemens Nybegynder
04. oktober 2006 - 23:08 #21
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>



<style type="text/css">

#wrapper{
/*  width:650px; */
  width:100%;
/* width er lige sat til 100% for at få en test effekt lavet ... f.eks resize af browseren */
}

#test{background:blue;width:100%;}

.tableColumn{float:left;}

</style>



<script type="text/javascript">

var elms=[];

window.onload=function(){
  alignit();
  window.onresize=alignit;
}


function alignit(){

  var e = document.getElementById('test');
  var w = parseInt(e.offsetWidth);

  if(elms.length==0){

    var ec=e.childNodes;
    for(i=j=0,i2=ec.length;i<i2;i++)if(ec[i].tagName=="DIV")elms[j++]=ec[i];

  }

  var elml=parseInt(elms.length);

  for(i in elms){
    elms[i].style.width=Math.floor(w/elml)+"px";
    elms[i].firstChild.nodeValue=elms[i].offsetWidth; // <- Slettes efter tests
  }

  surplus=w%elml;

  if(elml%2!=0&&surplus!=0){

    var tmp=Math.floor(elml/2);
    var e1=tmp-1,e2= tmp+1;

  }else var e1=elml/2-1,e2=elml/2,tmp=-1;

  if(surplus%2!=0&&tmp!=-1)elmw(elms[tmp]);

  while(surplus!=0){
    if(surplus!=0)elmw(elms[e1--]);
    if(surplus!=0)elmw(elms[e2++]);
  }

}


function elmw(e){
  e.style.width=parseInt(e.offsetWidth)+1+"px";
  e.firstChild.nodeValue=e.offsetWidth; // <- Slettes efter tests
  --surplus;
}

</script>



</head><body>

<div id="wrapper">
  <div id="test">
    <div class="tableColumn" style="background-color:tan">a</div>
    <div class="tableColumn" style="background-color:lightblue">b</div>
    <div class="tableColumn" style="background-color:lightgrey">c</div>
    <div class="tableColumn" style="background-color:purple">d</div>
    <div class="tableColumn" style="background-color:tan">e</div>
    <div class="tableColumn" style="background-color:gray">f</div>
    <div class="tableColumn" style="background-color:#ccc">f</div>
    <div class="tableColumn" style="background-color:#eee">f</div>
    <div class="tableColumn" style="background-color:#555">f</div>
    <div class="tableColumn" style="background-color:#678">f</div>
    <div class="tableColumn" style="background-color:#789">f</div>
  </div>
</div>

</body></html>
Avatar billede mclemens Nybegynder
05. oktober 2006 - 00:13 #22
Hvis width på wrapper -> test er en fast px definering istedet for % er det nok
lidt voldsomt med beregning af størrelsen (læs: fuldstændig overkill og overflødigt)
- i det tilfælde bør window.onresize=alignit; slettes fra onload funktionen ...
Avatar billede mclemens Nybegynder
05. oktober 2006 - 00:39 #23
25/09-2006 07:26:58 - [ Lad os sige at ovenstående eksempel er en menu og at der dynamisk tilføjes flere tablecolumns, dvs ikke kun 7, men 12 divs eksempelvis. ]
I det tilfælde kaster du et opkald til alignit(); - efter tilføjelse / fjernelse af den / de ekstra kolonne for at aligne påny (altså hvis det er efter onload der kommer flere kolonner til eller fra i test div'en) ...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
White papers
Flere white papers »