[CSS/HTML] Float left, dus alles op 1 regel (hori scroll) - Softwareontwikkeling

dinsdag 15 mei 2007 09:49

Acties:

Verwijderd

Topicstarter

Hoi,

Ik ben aan het stoeien om div's van 150px breed op 1 regel te krijgen.

Heb een soort van tabel structuur van 50 kolommen en 50 cellen. Deze bouw ik met Javascript op:

code:

<html>
    <head>
        <style type="text/css">
            .columnBlock 
            {
                border:1px #F00 solid;
                float: left;
                width: 150px;
            }
            .rowItem
            {
                border: 1px #000 dotted;
            }
        </style>
    </head>
    <body onload="FillGrid()">
        <script type="text/javascript">
            var _rows = 50;
            var _columns = 50;
            function FillGrid()
            {
                for (var i = 0, j = _columns; i < j; i++)
                {
                    var _column = document.createElement("div");
                    _column.className = "columnBlock";
                                        
                    for (var k = 0, l = _rows; k < l; k++)
                    {
                        var _row = document.createElement("div");
                        _row.className = "rowItem";
                        _row.appendChild(document.createTextNode(i+":"+k));
                        
                        _column.appendChild(_row);
                    }
                    
                    document.getElementById("grid").appendChild(_column);
                }
            }
        </script>
       <div id="grid" style="float: left; border: 2px #BBB inset; overflow: auto; width: 100%; height: 100%;"></div>
    </body>
</html>

Deze code genereert netjes de juiste HTML code, echter worden de kolommen afgebroken als ze niet op de pagina passen.

Dit laatste wil ik dus niet, de 50 kolommen moeten op 1 regel komen zodat er een horizontal scroll komt.

Dus als iemand mij een zetje in de goede richting kan geven dan $_/-\o_$

Statix

dinsdag 15 mei 2007 09:53

Acties:

disjfa

be

Je probeert een tabel structuur te maken.... Waarom gebruik je dan geen tabel

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 15 mei 2007 09:54

Acties:

Verwijderd

Topicstarter

Omdat een tabel in mijn geval even niet volstaat

anders was het wel een tabel geweest.

dinsdag 15 mei 2007 10:38

Acties:

André

Analytics dude

Kun je met de CSS property white-space het wrappen niet uitzetten?

dinsdag 15 mei 2007 10:42

Acties:

Verwijderd

Topicstarter

André schreef op dinsdag 15 mei 2007 @ 10:38:
Kun je met de CSS property white-space het wrappen niet uitzetten?

werkt niet ...

dinsdag 15 mei 2007 10:46

Acties:

Janoz

Moderator Devschuur®

!litemod

Werkt wel.....

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

dinsdag 15 mei 2007 11:08

Acties:

Verwijderd

Topicstarter

Janoz schreef op dinsdag 15 mei 2007 @ 10:46:
Werkt wel.....

Heb jij m werkend dan ? O_o

dinsdag 15 mei 2007 11:18

Acties:

Japius

Verwijderd schreef op dinsdag 15 mei 2007 @ 09:54:
Omdat een tabel in mijn geval even niet volstaat anders was het wel een tabel geweest.

Dat snap ik niet... je wilt een tabel, maar een tabel volstaat niet?

dinsdag 15 mei 2007 11:23

Acties:

Verwijderd

Topicstarter

Japius schreef op dinsdag 15 mei 2007 @ 11:18:
[...]

Dat snap ik niet... je wilt een tabel, maar een tabel volstaat niet?

Dit doet er even niet toe. Een tabel is geen optie. Wil gewoon div's hebben en de reden is niet belangrijk =p

Maar als jullie het graag willen weten ... Er moet een grid komen dat gevuld is met data. Dit is een grid dat in grootte kan variëren. Dat grid staat in een floating div dat geresized kan worden. Het opnieuw renderen van een tabel is een behoorlijk intensieve taak en dat gaat beter met div's. Wil nu dus experimenteren met kolommen met cellen in plaats van rijen met kolommen.

dinsdag 15 mei 2007 11:36

Acties:

OkkE

CSS influencer :+

Aangezien je alles met javascript maakt, weet je hoeveel cellen het zijn, en kan je de kolom $numCells*$cellWidth breed maken. Volgens mij zou dat het probleem moeten oplossen.

-- edit --

Op regen 38:

code:

1	document.getElementById("grid").style.width = j*155 + 'px';

-- edit 2 --

Als je overgens de width ook variabel wilt houden, dan zijn er ook javascript-functies die de width kunnen opvragen. Iets met computedStyle() ofzo... best wel iets over te vinden; al is daar niet een cross-browser methode voor.

@Janoz; Ik ben het helemaal met je eens dat zijn manier van reageren, inspanning en uitleg geven wat te wensen over laat; maar ik kreeg het ook niet werkend met de white-space property..

[ Voor 66% gewijzigd door OkkE op 15-05-2007 11:50 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

dinsdag 15 mei 2007 11:37

Acties:

Janoz

Moderator Devschuur®

!litemod

Verwijderd schreef op dinsdag 15 mei 2007 @ 11:08:
[...]

Heb jij m werkend dan ? O_o

Als jij de moeite niet neemt om meer te tikken dan twee worden en gewoon duidelijk aangeeft wat je geprobeert hebt en aangeeft waarom dat neit werkt zie ik niet in dat ik meer woorden moet verspillen aan hoe ik het wel werkend gekregen heb.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

dinsdag 15 mei 2007 11:44

Acties:

Verwijderd

Topicstarter

Janoz schreef op dinsdag 15 mei 2007 @ 11:37:
[...]

Als jij de moeite niet neemt om meer te tikken dan twee worden en gewoon duidelijk aangeeft wat je geprobeert hebt en aangeeft waarom dat neit werkt zie ik niet in dat ik meer woorden moet verspillen aan hoe ik het wel werkend gekregen heb.

Ik heb een aantal "css instellingen" geprobeerd zoals het display inline op de kolommen en whitespace nowrap, float left op de kolommen...
Gewoon een boel variaties zonder enig resultaat. Ook met whitespace dus. Aangezien dit niet werkte was ik verbaasd dat het bij jou wel werkte.

Ben hier al sinds gisteren mee aan het stoeien namelijk dus na een tijdje heb ik maar hier hulp gevraagd.

dinsdag 15 mei 2007 11:54

Acties:

Janoz

Moderator Devschuur®

!litemod

Ik heb de nowrap op de container gedaan (in mijn geval was dat body) en heb vervolgens de float:left weggehaald. Verder lijkt het me handig dat je je eigen houding, en vooral hoe je overkomt op dit forum eens flink te evalueren. Die onvriendelijkheid en het eenrichtings verkeer motiveert mensen niet om je bij je problemen te helpen.

Toch vind ik het vreemd dat je geen tabel wilt gebruiken omdat je denkt dat het trager zou kunnen zijn. Premature optimization is the root of all evil. Ook bij een tabel kun je met javascript wel kolommen en rijen toevoegen hoor

.

[ Voor 23% gewijzigd door Janoz op 15-05-2007 11:55 ]

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

dinsdag 15 mei 2007 12:25

Acties:

Verwijderd

Topicstarter

Janoz schreef op dinsdag 15 mei 2007 @ 11:54:
Ik heb de nowrap op de container gedaan (in mijn geval was dat body) en heb vervolgens de float:left weggehaald.

Dus de document.getElementById("grid").appendChild(_column); vervangen voor document.body.appendChild(_column); en dan in body style overflow: auto opnemen

? Zo lees ik jouw oplossing

en heb dit geprobeerd, maar dat werkt jammer genoeg niet ...

dus nu:

HTML:

<html>
    <head>
        <style type="text/css">
            .columnBlock 
            {
                border:1px #F00 solid;
                width: 150px;
            }
            .rowItem
            {
                border: 1px #000 dotted;
            }
        </style>
    </head>
    <body onload="FillGrid()" style="white-space:nowrap; overflow: auto;">
        <script type="text/javascript">
            var _rows = 50;
            var _columns = 50;
            function FillGrid()
            {
                for (var i = 0, j = _columns; i < j; i++)
                {
                    var _column = document.createElement("div");
                    _column.className = "columnBlock";
                                        
                    for (var k = 0, l = _rows; k < l; k++)
                    {
                        var _row = document.createElement("div");
                        _row.className = "rowItem";
                        _row.appendChild(document.createTextNode(i+":"+k));
                        
                        _column.appendChild(_row);
                    }
                    
                    document.body.appendChild(_column);
                }
            }
        </script>
    </body>
</html>

Janoz schreef op dinsdag 15 mei 2007 @ 11:54:
Toch vind ik het vreemd dat je geen tabel wilt gebruiken omdat je denkt dat het trager zou kunnen zijn. Premature optimization is the root of all evil. Ook bij een tabel kun je met javascript wel kolommen en rijen toevoegen hoor .

Dat het trager is, is al gebleken uit een eerdere performance test =) Ook begrijp ik dat je met javascript bij een tabel kan...

Janoz schreef op dinsdag 15 mei 2007 @ 11:54:
Verder lijkt het me handig dat je je eigen houding, en vooral hoe je overkomt op dit forum eens flink te evalueren. Die onvriendelijkheid en het eenrichtings verkeer motiveert mensen niet om je bij je problemen te helpen.

Ik wil mijzelf niet goed praten hoor, maar er worden gewoon vragen gesteld of wat niets met dit probleem te maken hebben

Ik waardeer zeker hun inzet, anders zou ik niet reageren + het feit dat ik nogal erg direct zijn.
Maar ik had mijzelf misschien gewoon iets beter moeten verwoorden met wat ik al wel had geprobeerd en waarom dit nodig heb.

[ Voor 12% gewijzigd door Verwijderd op 15-05-2007 12:28 ]

dinsdag 15 mei 2007 13:05

Acties:

Janoz

Moderator Devschuur®

!litemod

Zo lees ik jouw oplossing

Je moet niet alleen mijn oplossing lezen, maar ook begrijpen. Ik heb een kleine testcase gemaakt en hierin werkte het gewoon. Ik heb geen zin om je complete project incl javascript na te bouwen. Ik geef duidelijk aan hoe ik het werkend heb gekregen en wat ik daarvoor aangepast heb.

Daarnaast slaat mijn opmerking over je houding niet enkel op dit topic

.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'