...

View Full Version : horizontal allignment



verkeerd
04-27-2011, 06:37 PM
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
04-27-2011, 07:53 PM
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. (http://www.tizag.com/cssT/cssid.php)

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
04-27-2011, 08:15 PM
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
04-27-2011, 08:17 PM
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
04-27-2011, 08:18 PM
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
04-27-2011, 08:29 PM
This is what I get. Where is it wrong? (http://www.exitfegs.co.uk/Document2.html)

Frank

verkeerd
04-27-2011, 08:33 PM
This is what I get. Where is it wrong? (http://www.exitfegs.co.uk/Document2.html)

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
04-27-2011, 08:46 PM
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
04-27-2011, 08:54 PM
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
04-27-2011, 08:56 PM
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
04-27-2011, 09:09 PM
Try this and see if it is better (http://www.exitfegs.co.uk/Document2.html).

Frank

verkeerd
04-27-2011, 09:14 PM
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
04-27-2011, 09:31 PM
Try it again. I have just altered the top margin. (http://www.exitfegs.co.uk/Document2.html)

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

Frank

verkeerd
04-27-2011, 09:36 PM
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
04-27-2011, 09:38 PM
by percent. Don't forget that margins can be negative as well as positive.

Frank

verkeerd
04-27-2011, 09:40 PM
okay thanks a lot again

i'll try to figure the rest out myself

thanks!

effpeetee
04-28-2011, 11:19 AM
You might like to look at this one. (http://www.exitfegs.co.uk/testest.html)

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum