Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS positioning and browsers

D

Dane D.

macrumors 6502a
Original poster
Apr 16, 2004
645
9
ohio
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
 
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 }
 
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?
 
Dane D. said:
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?
Click to expand...

Did you try my solution? Since it's a lot simpler?
 
agiphone said:
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.
Click to expand...

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.
 
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.
 
wheezy said:
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.
Click to expand...
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back