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 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    49
    Thanks
    7
    Thanked 1 Time in 1 Post

    relative position and blank space

    As drhowarddrfine told me right:
    Quote Originally Posted by drhowarddrfine
    Using position:relative means the element can be moved from its original location but the original location is preserved.
    This code creates a big blank region:
    Code:
    <img src="/front/images/home/curl_center.png" alt="" style="width:883px; height:49px; position:relative;" />
    <div style="background: url(front/images/home/curl_left.png) no-repeat; position:relative; top:-49px; left:-17px" />
    <div style="background: url(front/images/home/curl_right.png) no-repeat; position:relative; top:0px; left:900px;" />
    as you can see on http://hostinvent.com (user:test; pass:test)
    I'm going crazy .

    Thank you very much for your great help.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Maurizio1230,
    You're moving it over 900px... I don't know why.
    Wouldn't this work better? <div style="background: transparent url(front/images/home/curl_right.png) no-repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; position: relative; top: 0px; left: 18px;">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Maurizio1230 View Post
    As drhowarddrfine told me right:


    This code creates a big blank region:

    as you can see on http://hostinvent.com (user:test; pass:test)
    I'm going crazy .

    Thank you very much for your great help.
    Code:
    <img src="/front/images/home/curl_center.png" alt="" style="width:883px; height:49px; position:relative;" />
    <div style="background: url(front/images/home/curl_left.png) no-repeat; position:relative; top:-49px; left:-17px" />
    <div style="background: url(front/images/home/curl_right.png) no-repeat; position:relative; top:0px; left:900px;" />
    remove left: 900px from the last element and left: -17px from previous and I guess will work.

    best regards

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    49
    Thanks
    7
    Thanked 1 Time in 1 Post
    If I remove "left" from the first and/or from the second div, as you can see, these 3 images doesn't assume the right position for composition.

    It should be like attached image and without blank space after it.

    Thank you very much for your help. If you need a quality hosting, tell me
    Attached Thumbnails Attached Thumbnails relative position and blank space-curl.jpg  

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Maurizio1230 View Post
    If I remove "left" from the first and/or from the second div, as you can see, these 3 images doesn't assume the right position for composition.

    It should be like attached image and without blank space after it.

    Thank you very much for your help. If you need a quality hosting, tell me
    this have 919px width and your container 883px. You must split in three parts,
    left and right as fixed backgrounds, middle a chunk of 5px width( use repeat-x. to fill it).

    best regards


  •  

    Posting Permissions

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