CSS positioning and browsers

Discussion in 'Web Design and Development' started by Dane D., Aug 17, 2010.

  1. Dane D. macrumors 6502a

    Joined:
    Apr 16, 2004
    Location:
    ohio
    #1
    I'm developing a website for a woman that knits and sews, she wanted a holding page put up till it goes live. My problem is my positioning of the copy. Could someone look at the site, the CSS and see what I'm doing wrong. The CSS is a pick-up from another site I did which works fine. http://www.lambsandlooms.com/. I modified it and am using just a part of it now, the rest will change as I continue. The large copy should be aligned with the last letter of her company name, the information block is positioned more to the left and down.

    Edit: style sheet is www.lambsandlooms.com/lambs_stylesheet.css
     
  2. celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #2
    In the element body_copy, change the pixel value of left to 700px. Do the same thing in the copy element.
     
  3. agiphone macrumors newbie

    Joined:
    Jun 21, 2009
    #3
    It appears that there's a conflict between the margin L/R: auto; on the container and the position: relative;

    For the text divs the position: relative; is dropped and the divs align according to the browser window.

    I would suggest to replace the positioning of the copy div's with floats. Simply include the copy divs inside the container div, and float them right. For positioning you can play with margins top/right.

    Even simpler, you can just add two divs for the copy boxes with text-align: right; and insert margins top as needed.

    Also, you need to close the #copy rule with a }
     
  4. Dane D. thread starter macrumors 6502a

    Joined:
    Apr 16, 2004
    Location:
    ohio
    #4
    Still a newbie at CSS. The last month at work has been extremely busy and sometimes you just don't see the code with fresh eyes.

    I don't understand the positioning and floating. If I set the position inside a container div, what is the starting point for the inside div; the centered container or the page x,y coordinates 0,0.

    Why float if I can position them with divs?
     
  5. celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #5
    Did you try my solution? Since it's a lot simpler?
     
  6. agiphone macrumors newbie

    Joined:
    Jun 21, 2009
    #6
    I've made an incorrect statement above. Actually, there's no conflict between the margin L/R: auto; and the container being position: relative;

    The issue at hand is due to the fact that in order for position:absolute; to be applied as desired in this case, the container div must include the two copy divs.
    Otherwise, as it happens, the two copy divs are positioned absolute in respect to the previous positioned element, in this case <body> -> <html> -> browser port. That's why, when you resize the browser window, the position of the two copy divs slides left in relation to the left side of the browser window.

    Yes, the positioning is one of the more complicated issues of CSS, but it translates in practice in the following: in order to position: absolute; an element, the containing element needs to be position: relative;

    In your case, all you need to do is to insert the two copy divs inside the container div, then adjust the left position as needed.
     
  7. Dane D. thread starter macrumors 6502a

    Joined:
    Apr 16, 2004
    Location:
    ohio
    #7
    Thanks, I put the copy divs inside container div and re-positioned.
     
  8. wheezy macrumors 65816

    wheezy

    Joined:
    Apr 7, 2005
    Location:
    Alpine, UT
    #8
    Looks like it's been fixed, but as a side note you'll want to avoid any "coming soon" or "under construction" text. Search Engines read that and although there isn't much on the site to begin with, adding text like that further inhibits your future ranking. Why would they serve up your site if they know it's not finished?

    So change the text to not say anything like it, rather make it a few nice keyword heavy sentences of what the site will have.
     
  9. Dane D. thread starter macrumors 6502a

    Joined:
    Apr 16, 2004
    Location:
    ohio
    #9
    Thanks, I did not know that. I'll change it to what she offers. I really like the CSS method of building, it actually makes sense, now that I realize what the style sheet can do. Before using tables, I always felt like it was a pain in the rump and tedious. It almost feels like Photoshop and InDesign doing CSS.

    I'm self-taught, I've read many books, have done many tutorials on-line and have many bookmarks that I refer to. It actually is fun now.
     

Share This Page