aligning + images and text

[Inu.]

Hi!

I’m new to css, but I’m trying my best to make my wppage look good by trial and error. I found out how to change a lot of things within the theme I bought, but I’ve got two problems I can’t seem to resolve. I think the answer is fairly simple, if you know code that is :-)

1).

I’m having problems placing my navigation (‘home’, ‘verkoop’, etc.) in the middle of my 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 . What do I do to get my element in the middle of the page?

And how do I stretch the navigation bar – that is now centered following my first question – out over the whole length of the page so ‘home’, ‘verkoop’, ‘blog’ and ‘over ons’ are divided evenly over the whole length of the page?

My wordpresspage

/* .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;}

2). (this isn’t really css related I think, but I think it’s a simple question and it would be really nice for someone to help me out)

Please take a look at My wordpresspage – about us.

I would like the text wrapped around the pictures that are aligned left – so far so good – but I would like the second photo under the first and the third under the second. Nicely lined up underneath each other. The second photo however always seems to jump up next to the first, and the third next to the second… What do I do?

Here’s the code I copied from wp:

Curieuze Neuze ontstond meer dan twintig jaar geleden uit de fascinatie voor esthetiek.

<

p style=”text-align: justify”>

<

p style=”text-align: justify”>Name_1, historicus van opleiding, ontdekte bij zichzelf een ware liefde voor mooie zaken en hun geschiedenis. Twintig jaren lang heeft ze met hart en ziel zaken geselecteerd die ze zelf graag in haar woning had zien staan. Onder het motto: ‘de zoektocht is zeker zo mooi als de vondst’ stalde ze hen echter zorgvuldig uit in haar winkel waarna ze een plaatsje kregen in de woningen van haar geliefde cliënteel. Daar borduren talrijke families op dit eigenste moment voort op het verhaal der objecten.

<

p style=”text-align: left”>

<

p style=”text-align: justify”>Name_2, Hildes dochter, heeft deze passie geërfd: een zin voor het esthetische, maar meer nog een grote nieuwsgierigheid naar de verhalen achter objecten. Narratieven stonden gedurende haar studies film en communicatiewetenschappen steeds centraal. Objecten vormen voor haar een grote inspiratiebron. Zij neemt u in haar blog mee naar de wondere wereld der verhalen achter de objecten en helpt deze pop-up concept store creatief en communicatiegewijs te verwezenlijken.

<

p style=”text-align: left”>

<

p style=”text-align: justify”>Name_3, tevens communicatiewetenschapper, helpt mee het verhaal van Curieuze Neuze te vertellen. Hij bewijst dat analytisch vermogen en een oog voor esthetiek hand in hand kunnen gaan. Op deze wijze legt hij zijn gewicht in de schaal en helpt hij bij de creatieve en pragmatische kant van de zaak.

<

p style=”text-align: justify”>Gedreven door onze gedeelde passie voor esthetiek bundelen wij onze krachten om Curieuze Neuze een nieuwe richting in te drijven.

I hope my questions are clear to you…

Thanks a lot!

Greetings,
Indra

[Tomasz Lisiecki]

Hi there! :)

Problem 1.

1. Remove the display:inline-block from the nav element to make it display:block (it’s default).
2. Add margin:auto on div.menu.
3. Remove float:left from the LI’s.

Navigation should be centered now.

Problem 2.
Have a look here .. It is the snippet published here on CSS-Tricks :)

Basically remove clear:both from the divPerson element and add this to your CSS

.divPerson:after {
clear: both;
content: '';
display: block;
}

Hope it helps!

[Author]

Posts