Text alignment

OK, if I understand you correctly, I think you want all three pictures in one column, i.e., lined up directly underneath each other, then the text to be lined up next to the pictures.

Here’s how I would do it. I would place each picture and accompanying text in a DIV with a class of divPerson, then the text for each person inside another DIV (within the divPerson DIV) with a class of person-text:

<div class="divPerson">
	<img class="size-thumbnail ... />
	<div class="person-text">...nschapper, ... </div>
</div>

Then I would add the following CSS rules:

.divPerson {
	clear: both;
}
.divPerson img {
	float: left;
}

Great! I think I got this one. Almost :-). The wonders of css are starting to unravel…

Would you please have another look at my page? How do I get spaces between the photo’s? So a white line between each row of the column I just created with your help (or between each photo for that matter)? And how do I get the text to be aligned a little bit further from the actual photo – I think a little white space between the photo and the actual text would make the lay-out look nicer?

Could you also maybe teach me how to get the last sentence to be aligned, not next to the picture, but like the first sentence ‘ ontstond meer dan twintig jaar geleden uit de fascinatie voor esthetiek.’, at the left side of the page?

ontstond meer dan twintig jaar geleden uit de fascinatie voor esthetiek.
<div class="divPerson">
     ....</div>
</div>
Gedreven door onze gedeelde passie voor esthetiek bundelen wij onze krachten om  een nieuwe richting in te drijven.

And If you don’t mind I’ve got this other question regarding my <nav> element. I would like my navigation (‘home’, ‘verkoop’, ‘blog’, ‘over ons’) to be in the middle of the page, with the seperate words (‘home’, ‘verkoop’, ‘blog’, ‘over ons’) stretching the entire length of the page. I’ve been trying to add ‘text-align:center’ to my css, but I just read that this doesn’t work because of the fact that ‘Inline-Block’ is assigned to my <nav>. What do I do to get my <nav> element in the middle of the page?

/* .nav */
  .mobile-nav {display: none}
  .nav {position: relative; width: 100%; display: inline-block; border-bottom: 1.2px solid #0592D0; padding: 12px 0 8px 0; clear: both; text-transform: uppercase; line-height: 1em; font-weight: 400; font-size: 1.4em}
  .nav ul {list-style: none;}
  .nav a {display: block; padding: 8px 10px;}

I hope I’m making myself clear. I’m a total beginner and for me it’s hard to explain what I mean when I don’t know the right terms.

Thanks a lot!

Greetings,
Indra

Hmm, I tried to look at the page, but got this “under construction” message instead:

Hier kunt u weldra online vinden voor meer informatie.

I could give you some suggestions that might work, but it would be easier to see what needs to be changed if I could actually examine the page.

How do I get spaces between the photo’s? So a white line between each row of the column I just created with your help (or between each photo for that matter)? And how do I get the text to be aligned a little bit further from the actual photo – I think a little white space between the photo and the actual text would make the lay-out look nicer?

You can add some spacing between each row by adding a margin at the bottom of each section. Add a margin-bottom property to the existing rule for divPerson:

.divPerson {
	clear: both;
	margin-bottom: 20px;
}

If you want to add some space between the picture and the text, add a margin to the right of the image by adding a margin-right property to the existing rule for .divPerson img:

.divPerson img {
	float: left;
	margin-right: 20px;
}

Of course, you can change the value to whatever amount you wish.

Could you also maybe teach me how to get the last sentence to be aligned, not next to the picture, but like the first sentence ‘Curieuze Neuze ontstond meer dan twintig jaar geleden uit de fascinatie voor esthetiek.’, at the left side of the page?

Enclose it in a DIV and give it an inline style of clear: both:

<div style="clear:both;">Gedreven door onze gedeelde passie voor esthetiek bundelen wij onze krachten om Curieuze Neuze een nieuwe richting in te drijven.</div>

The clear: both style says to output after any block-level elements above it (output when you are clear of any block-level elements). It’s the same property we added to the divPerson DIV.

What do I do to get my <nav> element in the middle of the page?

Well, for this I would have to actually see it on the page, so I can examine it using Chrome Developer Tools.

You can see the page now!

Thanks for your quick response btw!

Thanks. For the nav menu, try taking out the width: 980 property and change the margin to margin: 0 30%:

.nav {
   width: auto;
   margin: 0 30%;
}

By the way, you are missing a closing DIV. This:

<div class="divPerson">
     ... </div>
<div class="divPerson">

should be this:

<div class="divPerson">
     ... </div>
</div>
<div class="divPerson">

You should also remove class=”divPerson img” from inside your img tags, they don’t really add anything, and they actually add some confusion to your code. The selector class=”.divPerson img” in the CSS rule means to look for an img element that is a child of an element with the class of divPerson.

Nice. The nav menu is in the middle of the page right now, but it’s not spread out over the whole length of the page. Is it possible to have the menu spread out over the whole length of the page in stead of just beneath the logo? So that the blue line covers the whole length of the page as well?

That might mean it isn’t ‘centered’ like I asked for in my question. Sorry for that…

Ah, OK, I must have misunderstood.

Try this. Change the width of nav back to 100% and the margin to 0 auto so it goes across the width of the page:

.nav {
   width: 100%;
   margin: 0 auto;

Then we will give each menu item an equal amount of space going across:

#menu-curieuze-neuze li {
   width: 25%;
}

What this does is give each menu item 25% of the space across the page. If you happen to add another menu item, you’ll have to change the value to 20% (100%/5).

Great!

Thanks CrouchingBruin ever so much!