[Twitter Bootstrap] Afbeeldingen horizontaal uitlijnen

[AvWijk]

Voor een fotoportfolio wat ik aan het maken ben gebruik ik Twitter Bootstrap met de fluid layout voor meerdere
redenen, ondermeer dat het zo netjes uitlijnt op mobiele devices, incl. het scalen van afbeeldingen. Achterliggend CMS is Wordpress, maar dit is een CSS / front-end vraagje

Een simpele opzet, maar een paar dingen kom ik met deze fluid layout niet uit:

Klik voor test URL:



- De foto's (stuk of 9 van diverse breedtes, hoogtes gelijk) moeten naast elkaar uitlijnen, om zo een scrollbar te creëren. Dit moet eigenlijk alleen gebeuren bij resoluties van 1024px en groter, wanneer je 't venster kleiner maakt vallen ze wel netjes onder elkaar.

- De grote DIV (.span-photo) waarin de foto's staan moet op gelijke hoogte met de menuDIV vallen.

De pagina van Twitter Bootstrap zelf geeft me hier te weinig duidelijkheid over.

code:

.span-photo {
width: 2400px;
display: inline-block;
}

.row-fluid > .span-photo{
    width: 100%;
  }
input.span-photo, textarea.span-photo, .uneditable-input.span-photo {
    width: 714px;
  }

[ Voor 16% gewijzigd door AvWijk op 09-06-2012 00:15 ]

[RobIII]

En we mieten 't doen met een plaatje? Heb je relevante(!) HTML/CSS? Een testcase? jsfiddle?
En wat heb je zélf al geprobeerf/gezocht/gevonden?

[Wiethoofd]

Een wrapper om je menu div en je afbeeldingsdiv en daarin eerdergenoemde met een float: left links tegen elkaar aan floaten?

Met je afbeeldingsdiv zal je met JS aan de slag moeten voor die 1024px slider of juist allemaal onder elkaar.
Scrollbalk => overflow-x: scroll;

[AvWijk]

*snip*

@ Wiethoofd, als je window scaled zie je het één en ander verspringen, volgens mij doet bootstrap dat bij bepaalde resoluties. Float-left werkt niet.

[ Voor 87% gewijzigd door RobIII op 09-06-2012 00:01 ]

[RobIII]

Sorry, maar dat is geen testcase maar 161 regels HTML, een stuk of 3 css bestanden met een royale 3000 regels css (en dan tel ik de minified onleesbare zaken niet eens mee) en een aantal andere bestanden waar we ons door heen mogen worstelen.

En testcase is een uitgeklede(!) reproductie van je probleem. In een paar regels HTML en een paar regels CSS moet je probleem prima te demonstreren/reproduceren zijn. Dan hoeven wij niet door de bomen op zoek naar een naald in een hooiberg en als je zo'n testcase opzet is de kans groot dat je zelf al op een oplossing stuit voordat wij er überhaupt naar kijken of voordat je zelfs een topic hoeft te openen

Daarbij, ook al is 't zo niet bedoeld, neigt dit wel naar spam; een lorem-ipsum voor body en een foo/bar/baz voor een menu volstaat prima We proberen je met een probleem te helpen, niet om onbewust Anonieme Klara in ons brein te laten inzinken voor wanneer we op zoek zijn naar een schilderij of journaliste

[ Voor 31% gewijzigd door RobIII op 09-06-2012 00:17 ]

[AvWijk]

Die 'zutload aan zooi' is Twitter Bootstrap.. Wat ik zelf heb staan is niet heel veel, als je tussen de witregels doorkijkt. Mijn enigste vraag is of je inderdaad die afbeeldingen netjes naast elkaar kan alignen met behulp van dat framework.

Nee, het is geen spam. Moet ik mijn header maar ff weghalen?

[ Voor 58% gewijzigd door AvWijk op 09-06-2012 00:11 ]

[RobIII]

AvWijk schreef op zaterdag 09 juni 2012 @ 00:06:
Die 'zutload aan zooi' is Twitter Bootstrap..

Nou, knip/plak daaruit wat je gebruikt (of nodig hebt) voor je testcase en laat de rest eens links liggen? Je moet met een handvol regels CSS + HTML je probleem prima op een jsfiddle kunnen tonen aan ons.

AvWijk schreef op zaterdag 09 juni 2012 @ 00:06:
Wat ik zelf heb staan is niet heel veel.

Nee, maar jij bent bekend met de code, wij komen er "nieuw" in vallen en hebben geen idee waar we (in eerste instantie) moeten zoeken. Het idee is dat jij een probleem voorlegt en dan in beknopte vorm presenteert. Niet dat je een kruiwagen kiezelsteentjes op ons bureau leegkiepert en ons 2 gelijke steentjes laat zoeken

AvWijk schreef op zaterdag 09 juni 2012 @ 00:06:
Nee, het is geen spam.

I know Je bedoeling is goed, maar de regels gelden voor iedereen Slippery slope enzo

AvWijk schreef op zaterdag 09 juni 2012 @ 00:06:
Moet ik mijn header maar ff weghalen?

Nee, je moet een testcase maken met enkel-en-alleen relevante HTML/CSS

AvWijk schreef op zaterdag 09 juni 2012 @ 00:06:
Wat ik zelf heb staan is niet heel veel, als je tussen de witregels doorkijkt

Ik wil niet tussen witregels door kijken Ik wil netjes indented HTML zien:

code:

<div class="foo">
  <div id="header">
    ...
  </div>
  <div id="content">
    <h1>Title</h1>
    <p>Lorem ipsum dolor...</p>
  </div>
</div>

Zoiets. Iets dat ik meteen kan behappen i.p.v. eerst 10 minuten moeten staren hoe je HTML nou precies in elkaar steekt

[ Voor 37% gewijzigd door RobIII op 09-06-2012 00:15 ]

[AvWijk]

Dan gaat-ie op JSfiddle, maar de CSS'en naar Twitter Bootstrap moeten jullie er dan zelf bij toveren.

[ Voor 81% gewijzigd door AvWijk op 09-06-2012 00:14 ]

[RobIII]

AvWijk schreef op zaterdag 09 juni 2012 @ 00:14:
maar de CSS'en naar Twitter Bootstrap moeten jullie er dan zelf bij toveren.

Néé! Dat moet jij doen. Jij probeert een probleem voor te leggen. Leg 't dan ook voor. Toon ons wat 't probleem is. Laat ons zien waar je mee worstelt. Maar zorg wel voor behapbare brokken, niet 3000+ regels boilerplate.

Overigens; op je vraag: ja. Tuurlijk. Alles kan. Of 't met Bootstrap kan is een tweede, maar wat is er mis met een paar regels CSS zelf kloppen? Of wil je 't per-se met Bootstrap "alleen" oplossen?

[ Voor 19% gewijzigd door RobIII op 09-06-2012 00:21 ]

[AvWijk]

Dat wordt lastig als ik het framework niet kan laden in JSfiddle, dan kun je nog niet goed testen. Tsja, zelf oplossen is de laatste oplossing als ik er echt niet anders meer uit kan komen.

[ Voor 31% gewijzigd door AvWijk op 09-06-2012 00:22 ]

[C0rnelis]

AvWijk schreef op zaterdag 09 juni 2012 @ 00:21:
Dat wordt lastig als ik het framework niet kan laden in JSfiddle, dan kun je nog niet goed testen. Tsja, zelf oplossen is de laatste oplossing als ik er echt niet anders meer uit kan komen.

Naast het selecteren van een JavaScript framework kun je ook zelf js/css inladen via een URL op jsfiddle onder 'Add resource'. Daar kun je bijv. een URL invoeren naar de bestanden die je minimaal nodig hebt van bootstrap. URLs zijn te vinden op o.a. http://bootstrapcdn.com/