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
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Proportionate HTML positioning on browser resize

    Hi guys,

    Please see link below which accompanies this description:

    I have a background image attached to a div called #content-about and within it I have several paragraph tags (p.about-1, p.about-2 etc). Some of the graphics in the background image are supposed to look like chalk circles around the paragraph text, and I'm struggling to figure out how to move the paragraphs proportionately as the user resizes their browser, so they don't come out of the chalk circles.

    You can see what I'm talking about here: http://frances.casafelipe.co.uk/about/

    Many thanks in advance for any help

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I had this problem before. What I did was to just add the text to the image.

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi, thanks for the reply.

    My only issue with that approach, besides the accessibility side of things, is I have another page where I have a form and I need the the form itself and the elements within it to appear in the same place regardless of the size of the user's browser.

    Any suggestions?

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,235
    Thanks
    10
    Thanked 270 Times in 269 Posts
    I think I would try to bring the circles out as backgrounds of the specific <p> or <input> element or where they need to be. I haven't written it all up, but it seems that would be the way to ensure they're in the right place.

    Dave

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I can't do any coding right now; have chores to do, but you should look up Responsive Design and relative positioning.

    And I don't know how this will work out for you but "bootstrap" (a program by twitter) may help.

    Things should work Ok as long as the browser is larger then the image dimensions. After that you may need to readjust the font size.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by littlejones View Post
    I'm struggling to figure out how to move the paragraphs proportionately as the user resizes their browser, so they don't come out of the chalk circles.
    • On #content-about, change position: absolute to position: relative. Absolute positioning is not necessary here, but you still need position: relative to use this element as a positioning context.
    • On #content-about, change width: 100% to width: 845px. 845 pixels is the width of the background image.
    • On #content-about, center the element with margin: 0 auto.
    • Reposition all p elements inside of #content-about to the new bounds of #content-about. The new bounds are fixed and won't shift with the page width because of the change to width: 845px.
    • Specify a fixed width, fixed height, and overflow: auto on all of the aforementioned p elements to ensure that the text does not move if text-only zooming is used. The user will see zoomed text within the specified p element's dimensions—including a potential scrollbar—if the text becomes too big when text-only zooming is employed.
    • Specify a fixed font size on all of the aforementioned p elements to ensure consistent initial text placement.
    Last edited by Arbitrator; 03-18-2013 at 01:19 AM. Reason: I made a correction.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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