Wat doe ik fout? Alles verspringt!

[corneverboom]

Beste allemaal,

Ben wat aan het knutselen met een portfolio. Maar zoals jullie hier kunnen zien (http://www.m-idea.nl/portfolio/interieuradvies/) verspringt alles. Wat kan is daar aan doen? Wil alles gewoon mooi onder elkaar hebben zoals de eerste 2 voorbeelden.

Ik hoor het graag want zit met m'n handen in het haar!

Alvast dank!
Corné

 

[Example5]

je zou gewoon alle links in 1 <div class="img-holder"> kunnen plaatsen in plaats van telkens een nieuwe aan te roepen.

probeer dat eens

 

[corneverboom]

Bedankt voor je reactie. Heb het gelijk geprobeerd, en ze staan onder elkaar! :thumb:

Maar ze staan nog wel door elkaar. Ik zou ze ook graag per project onder elkaar willen hebben. Heb je daar ook een oplossing voor?

Alvast weer bedankt!
Corné

 

[Example5]

je zou ze met <br> onder elkaar moeten kunnen zetten dacht ik, dus aan het eind van elke link/plaatje zon <br> tag (ik weet niet meer zeker of dat ook met html kon, anders kan je het met <p> </p> tags proberen)

 

[Example5]

wat misschien een idee zou zijn voor je:
verander in het bestand /css/lightbox.css, de eerste zin (#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;})

in:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; overflow-y: scroll; text-align: center; line-height: 0;}

dit zou moeten zorgen dat je scrollbars krijg in het grijze gedeelte in plaats van dat al je plaatjes over het wit lopen.

maar voordat je dit doet natuurlijk wel even een backup want ik ben ook geen expert

 

[corneverboom]

Dank weer voor je reactie. Ik kreeg het niet helemaal voor elkaar met je tips (wel bedankt!). Heb het nu in een tabel gezet en nu staat het wel netjes onder elkaar.

Je ziet nu (http://www.m-idea.nl/portfolio/interieuradvies/) dat de website eigenlijk te kort is. De laatste 2 projecten staan nu namelijk in het wit. Hoe kan ik dat het beste oplossen? Het mooiste zou zijn dat het grijze verder naar beneden loopt als dat nodig is.

Graag zou ik ook in de Lightbox de knoppen 'previous' en 'next' willen hebben. Ook heb ik wel eens gezien dat er onder de foto text staat. Hoe doe ik deze dingen?

Alvast weer bedankt voor je reactie!

Groet,
Corné

 

[Example5]

ja dat was het laatste wat ik bedoelde, als je die regel toevoegde in je css file dan scrollt ie naar beneden in het grijze vak en loopt hij het wit niet in...

kan je het bestandje lightbox.css vinden? het staat in de map css...

zo ja dan moet je de eerst regel veranderen in:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; overflow-y: scroll; text-align: center; line-height: 0;}

dan zou hij moeten scrollen ipv doorlopen in het wit

verder kan ik je niet helpen ben ik bang want ik ben hier zelf ook niet zo goed in, maar probeer eens wat ik hierboven heb getypt

 

[csshunter]

Hoi Corné,
De Lightbox laat ik even aan me voorbijgaan, maar over het opvullen van de hoogte:

• Eerst even de 31 html-fouten die de validator aangeeft, wegwerken.
• Dan zijn alle <div>'s en </div>'s keurig in tweetallen ("wat begint, moet ook eindigen").
• Dan lees je even nummer 12 van de Golden Rules of CSS.

En dan zet je vlak voor de laatste </div>... een nieuwe div:

    </div><!-- end #right -->
    <div style="clear: both;"><!-- voor doortrekken background --></div>
</div><!-- end #site -->

D.w.z. natuurlijk een mooie <div> met een id, en dan in je css die id de clear geven.

• Zou zoiets moeten geven.
  De <div id="plant"> kan je geloof ik missen, want die komt helemaal niet in de css terug > plant opgeruimd.

Succes,
CSShunter

 

[corneverboom]

He CSSHunter,

Thnx voor je uitgebreide reactie! Ik heb getracht de dingen te doen waarvan ik dacht dat ik ze moest doen, maar ik krijg het helaas nog niet voor elkaar. Ben ook niet echt een kenner van css enzo.

Zou je me kunnen vertellen wat ik precies in mijn css moet zetten en wat precies in mijn html om mijn probleem op te lossen?

Alvast dank!

Groet,
Corné

 

[csshunter]

Hoi Corné,
Ik zie dat je de html-regel

<div style="clear: both;"><!-- voor doortrekken background --></div>

er keurig in gezet hebt. Maar toch doet de webpagina 't nog niet goed...
- Wat er bij jou mis gaat, is dat de rest van de code niet helemaal klopt. Er zitten nog 29 html-fouten in, o.a. <div>'s die niet op het juiste monent hun </div> krijgen. Daar raken browsers van in de war, en dan komt de pagina er niet goed uitrollen. In mijn versie had ik de html-fouten er al uitgehaald.
Die staat dus al klaar!
Er moet alleen de juiste titel in, en 3 regeltjes in de <head> geschrapt worden om 'm helemaal bij jou te laten passen. Ook even gedaan.

Het enige dat moet gebeuren om 'm helemaal mooi te maken, is de html-regel

<div style="clear: both;"><!-- voor doortrekken background --></div>

een ID te geven, en dan de style="clear: both;" te vertalen in css voor je stylesheet.
En dat gaat heel makkelijk.
We maken van de html-regel:

<div id="backgroundFiller"><!-- voor doortrekken background --></div>

En dan zet je er in het css-stylesheet bij:

[font=courier]#backgroundFiller {
   clear: both;
   }[/font]

(het # hekje betekent dat het een ID is met deze naam)

• Dan krijg je deze html-pagina interieuradvies.htm, met dit stylesheet css.css.

Gebruiksaanwijzing:

1. Deze twee even downloaden.
2. Deze twee vervolgens uploaden naar de juiste mapjes op je server (en interieuradvies.htm hernoemen naar hoe deze pagina bij jou heet; kan ik van hieruit niet zien).
3. Als andere pagina's ook voortijdig eindingen, dan geldt daarvoor hetzelfde: de html-fouten er uit halen, het <div>'je met de "backgroundFiller" er bij zetten, en ... ook klaar!

Zo beter?
Succes!
CSShunter

 

[corneverboom]

YES! Het is gelukt! Super bedankt voor je hulp!

Grtz,
Corné