horizontal allignment

[verkeerd]

i'm a bit of a novice when it comes to all this coding
but as i'm trying to build a website i'm having a lot of difficulties with figuring this one seemingly easy thing out, a little help will be much appreciated

http://dannycremers.com/kkk/testest.html

when you hover over the images, blue text pops up which is perfectly centered vertically but i have no idea how to centre it horizontally..
for the vertical allignment i just entered 'bottom: 50%' but for instance when i enter 'left: 50%' only the first letter is perfectly centered..

so how can i make all the different words perfectly centered?

(when you view the source the element i'm talking about is #pro1)

thanks!!

[effpeetee]

You cannot use the Divs more than once. If you need to use them more than once you mustr use 'classes', otherwise rename the divs as many times as you need.

#DIV - only once.

.class can be re-used. - Check here.

It will not put your text right but it needs to be done.
Centering a div is usually done by adding

text-align:center;

to the div's css

if I understand what you want.

Frank

[verkeerd]

so you mean that the div will look like this:

#pro1 { text-align:center; position: fixed; bottom: 50%; margin: 0 auto;}

for whatever reason it just keeps on aligning to the left when i use this

[effpeetee]

Originally Posted by verkeerd

so you mean that the div will look like this:

#pro1 { text-align:center; position: fixed; bottom: 50%; margin: 0 auto;}

for whatever reason it just keeps on aligning to the left when i use this

Yes.

It's quite easy to do and is reversable. Try it and see.

Frank

[verkeerd]

Originally Posted by effpeetee

Yes.

It's quite easy to do and is reversable. Try it and see.

Frank

i tried, but as i stated it still doesnt work..

[effpeetee]

This is what I get. Where is it wrong?

Frank

[verkeerd]

Originally Posted by effpeetee

This is what I get. Where is it wrong?

Frank

the blue text that pops up when you're hovering over the images is now aligned to the left of the page.. and i want it centered on the page

[effpeetee]

Is the blue text 'text' or is it an image. I cannot find it in the code. Probably due to my poor eyesight.
Also, won't the text lay over an image if it is in the center?

Frank

[verkeerd]

Originally Posted by effpeetee

Is the blue text 'text' or is it an image. I cannot find it in the code. Probably due to my poor eyesight.
Also, won't the text lay over an image if it is in the center?

Frank

it is text.. in the code this is the text part:

<div id="pro1">
</div>

which refers to this:

#pro1 { text-align: center; position: fixed; bottom: 50%; margin: 0 auto;}





and this:

$("#div1").mouseenter(function() { $("#pro1").html('<p class="links">F/W 2011-2012 </p>'); });
$("#div2").mouseenter(function() { $("#pro1").html('<p class="links">S/S 2011</p>'); });
$("#div3").mouseenter(function() { $("#pro1").html('<p class="links">F/W 2012-2012</p>'); });
$("#div4").mouseenter(function() { $("#pro1").html('<p class="links">S/S 2012</p>'); });


$("#div1").mouseleave(function() { $("#pro1").html('<p class="links"></p>'); });
$("#div2").mouseleave(function() { $("#pro1").html('<p class="links"></p>'); });
$("#div3").mouseleave(function() { $("#pro1").html('<p class="links"></p>'); });
$("#div4").mouseleave(function() { $("#pro1").html('<p class="links"></p>'); });




which then refers to this:

p.links { text-align: center; margin: 0.0px 0.0px 0.0px 0.0px; font: 20pt Helvetica, Arial; text-decoration: none; color: blue; letter-spacing: 4px;




the solution should be hidden somewhere in there i think?

[verkeerd]

there's also a jquery in the mix but i don't know how relevant that is in relation to this problem..

oh and i have no problem with the text laying over an image, that's sort of what i'm going for.. an organized mess

[effpeetee]

Try this and see if it is better.

Frank

[verkeerd]

this is sort of what i wanted yes.. but the text is no longer fixed and i also want it to be vertically centered

thanks so much for your help, much appreciated!


-----

after looking a bit more closely it isn't really centered at the moment? there is more white space on the left than there is on the right

[effpeetee]

Try it again. I have just altered the top margin.

I can't do much more as I do not know exactly what you want.

Frank

[verkeerd]

how did you alter the top margin? by pixels or by percentage?
because it doesnt look exactly centered on my screen, sorry i'm a bit of a perfectionist :P

is the blue text still in a div now? can you make if fixed and bring it to the front so it doesn't get hidden underneath all the images?

[effpeetee]

by percent. Don't forget that margins can be negative as well as positive.

Frank