Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    horizontal allignment

    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!!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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

    Code:
    text-align:center;
    to the div's css

    if I understand what you want.

    Frank
    Last edited by effpeetee; 04-27-2011 at 08:00 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by verkeerd View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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..

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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?

  • #10
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 04-27-2011 at 09:34 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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?

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    by percent. Don't forget that margins can be negative as well as positive.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    verkeerd (04-27-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •