Fluid/Responsive Unordered List blocks - Softwareontwikkeling

maandag 17 juni 2013 13:58

Acties:

int(e^x) = f(u)^n

Topicstarter

*zucht* ik ben helemaal geen web designer/CSS'er of wat dan ook, maar nu heb ik toch een taak toegewezen gekregen... * Lachen is toegestaan zolang het binnen de perken blijft

*

Ik ben bezig met het ontwikkelen van een Usercontrol (c#) die data uit een SharePoint lijst gaat uitlezen en per 'folder' een categorie-lijst gaat displayen met hieronder de bijhorende items (ook uit de SharePoint lijst).

Echter wilt de klant dat dit een responsive/fluid grid wordt zodanig dat mensen met een hoge resolutie meer kolommen naast elkaar krijgen dan degene met een kleinere resolutie.

Nu heb ik het volgende reeds geprobeerd (pure html) maar bij het verkleinen van browser begint hij op een bepaald moment raar te doen en start hij op de "2e rij" na het woordje "TEST" ipv aan de linkerkant te beginnen...

Nu heb ik al complete grid frameworks gevonden maar het is data weergeven en geen hele layout fluid maken, dus lijkt me dat overkill.

Iemand een idee wat ik verkeerd doe? Of hoe ik dit kan oplossen?

Huidige test HTML:

HTML:

<html>
<head>
<title>Test Fluid Layout</title>
<style>
.container {position: relative;}
.col1
{
position:relative;
float:left;
}
 
.colFirst{margin-left:0}
.colClear{clear:both;}
 
</style>
</head>
<body>
 
<div class="container">
               <div class="col1 colFirst">
                              <ul>
                                            <li> Hello </li>
                                            <li> Hello </li>
                                            <li> Hello </li>
                                            <li> Hello </li>
                                            <li> Hello </li>
                                            <li> Hello </li>
                              </ul>
               </div>
               <!-- Bovenstaande div x 20 -->
               <div class="colClear"></div>
</div>
 
 
</body>
</html>

Op voorhand weet ik dus niet hoeveel kolommen er zullen zijn en ook niet hoe hoog de grootste dient te worden...

[ Voor 82% gewijzigd door RobIII op 18-06-2013 10:35 . Reden: ~200 regels code verwijderd en 1 comment toegevoegd (line 30) ]

Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.

maandag 17 juni 2013 15:17

Acties:

TheNephilim

Wtfuzzle

Heel simpel gezegd; je moet meerdere stappen identificeren, bijvoorbeeld:

Stap 1: 1200 pixels en hoger
Kolombreedte: 10% (er passen er 10 op één rij)

Stap 2: 980 tot 1199 pixels
Kolombreedte 20% (er passen er 5 op één rij)

Stap 3: 768 tot 978 pixels
Kolombreedte 25% (er passen er 4 op één rij)

Tenminste, zo even je TS gelezen te hebben, moet het iets in deze richting worden. De enorme lap code helpt niet echt, één rij laten zien (of hooguit 3) was al genoeg geweest.

De stappen overigens, regel je weer met media-queries in CSS.

dinsdag 18 juni 2013 11:12

Acties:

R4gnax

dj_vibri schreef op maandag 17 juni 2013 @ 13:58:
Iemand een idee wat ik verkeerd doe? Of hoe ik dit kan oplossen?
[...]
Op voorhand weet ik dus niet hoeveel kolommen er zullen zijn en ook niet hoe hoog de grootste dient te worden...

Je wilt dus een grid systeem (jawel...) op basis van inline-blocks ipv floated content, zodat de hele volgende regel mee naar beneden schuift, afhankelijk van de langste kolom op de voorgaande regel. Yahoo's PureCSS grid is zo'n systeem. Vrij compact (~700 bytes minified+gzipped) en zou afdoende moeten zijn.

[ Voor 10% gewijzigd door R4gnax op 18-06-2013 11:14 ]