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.
Results 1 to 6 of 6

Thread: stop overapping

  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Location
    UK, derby
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question stop overapping

    I have a new column on the right, i want to stop it going over my main body of text which is on the left, when the screen is re-sized.

    Like so:-

    .ntitletext {
    FONT-SIZE: 12px;
    line-height: normal;
    COLOR: #0066FF;
    font-family: "Courier New", Courier, mono;
    position: absolute;
    left: 70%;
    top: 70px;
    width: 100;
    font-weight: bold;
    text-align: center;
    }

    Notice, the left 70% here is the most important part. I need to be able to set a minimum left, e.g. the minimum number of px the news column canbe from the left of the screen. But then at the same time have it on 70% (orsomething like) so it stays on the right hand side when the screen size is 1280X1024?

    Is there another way of doing this.

    JAKE

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use "float:right;" instead of "position:absolute", "left:xx" etc.

    That way even if the window is squeezed very narrow, this box won't overlap other content.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Regular Coder
    Join Date
    Feb 2004
    Location
    UK, derby
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It doesn't work. You mean like this:-

    .ntitletext {
    FONT-SIZE: 12px;
    line-height: normal;
    COLOR: #0066FF;
    font-family: "Courier New", Courier, mono;
    float: right;
    width: 100;
    font-weight: bold;
    text-align: center;
    }

    It still overlaps.

    Any more ideas? Or have i done it wrong?

    Probably the latter.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To know more, I'd have to see what it overlaps. Perhaps a link or the rest of the code?
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    Regular Coder
    Join Date
    Feb 2004
    Location
    UK, derby
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about taking my time getting back to you on this.

    This overlapping doesn't seem to be much of a problem until someone makes a very narrow window. However it's caused by using position:absolute. Using that prevents items from relocating or being pushed around by other elements when the page is resized and in fact it allows things to overlap other items because that's one of it's delibarate properties. If you want things to stay in the page flow you need to avoid using position: absolute. Try position: relative instead.

    Also you should clean up the html some more, you have <span class="a"> wrappers around the a tags in that menu box which are not needed all, excepting the one with the hovereffect class instead. None of those are needed, the styles they add can be applied to the a tags directly and it appears you've already done so.

    Also get rid of the <tr> and <td> tags from the right hand column, you've already removed the <table> tag. Those items might be better structured as a simple unordered list.
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  

    Posting Permissions

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