Alignment Issues: Please Check Website

Discussion in 'CSS' started by nottheface, Oct 12, 2006.

  1. #1
    Hello,

    I am having some issues trying to get my text to align correctly with my layout. I am pretty new to css so any assistance would be greatly appreciated. I can get the text to align correctly vertically, but not horizontally because it becomes skewed when changing the browser width (doesn't follow layout).

    Here is the page I am working on:
    http://velvetwaltz.com/

    This is the how I would like the text areas to be postioned over the images.
    http://img194.imageshack.us/img194/7905/mojosample5bv8.jpg
    I would be very grateful if someone could help me out. :eek:
     
    nottheface, Oct 12, 2006 IP
  2. Bram Wenting

    Bram Wenting Active Member

    Messages:
    392
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    68
    #2
    You should have a look at the <span>'s arount your text.
    As you can see, you use percentages in the 'margin'
    You have to make that absolute, like 200px or something like that.
     
    Bram Wenting, Oct 12, 2006 IP
  3. nottheface

    nottheface Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your reply Bram Wenting.

    If I do that the text doesn't move at all, I don't want the text in a static postion in the page. I want the text to be centered along with the images. Please take another look.
     
    nottheface, Oct 12, 2006 IP
  4. Eskarina

    Eskarina Guest

    Messages:
    608
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    play around with the padding in your containers. For instance try this for content-2 ...

    -----------------------------------------------------------------
    #content-2 {
    z-index:1;
    margin-top:8px;
    margin-left:10%;
    margin-right:49%;
    position:absolute;
    left: 110px;
    top: 403px;
    width: 413px;
    height: 115px;
    padding-left: 5%;
    }
    ---------------------------------------------------------------------

    If the image is to the right then something like ->padding-right: 5%;<- might work.

    PS
    Why is your footer image floating a few inches from the bottom?:D
     
    Eskarina, Oct 15, 2006 IP
  5. Eskarina

    Eskarina Guest

    Messages:
    608
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Actually I'd go with pixels - padding-left: 52px;

    But I'm just a learner so there may be a better way, in the meantime that seems to work fine in my browsers.
     
    Eskarina, Oct 15, 2006 IP
  6. dp-user-1

    dp-user-1 Well-Known Member

    Messages:
    794
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #6
    Either use multiple images or align the entire site left. There really isn't any way to make a consistent design the way you currently have it. It will change based on the user's browser and resolution.
     
    dp-user-1, Oct 15, 2006 IP
  7. Eskarina

    Eskarina Guest

    Messages:
    608
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #7
    oops - didn't read that bit. I see what you mean and I played with everything but no luck from me i'm afraid :(
     
    Eskarina, Oct 15, 2006 IP
  8. Eskarina

    Eskarina Guest

    Messages:
    608
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Yeah I'd use multiple images and start from scratch I think.
     
    Eskarina, Oct 15, 2006 IP