Css floats position?
Asked by
johnny0313x (
1855
)
April 23rd, 2008
from iPhone
I have read a few pages on this and feel like I am just not getting the concept. I usually pick stuff up with out much effort but floats hve me stumped. I want to move a group of text in the middle of the page. Well more so to the left middle. Now most float pages don’t say to use numbers while positioning things but use terms like right or left. That won’t work for me because I need the content aligned at a spot that cannot just be defined as ‘left’ I’m trying to place the content text over an image in my layout. Its a gradiant so I wanted the bg to stay in place and just have the content text scroll if needed. If you want to see what I mean u can check out the link below though the text is not positioned with a float and moves if you adjust the browser window. Can anyone help?? Http://www.lyonsdesign.info/about.html
Observing members:
0
Composing members:
0
5 Answers
Not sure I know what you’re after, but here are a couple of suggestions. You might use margins and/or padding. Why not apply the background to the element containing the text? If you use background-attachment: fixed; the background image will stay in place and allow the text to scroll over it.
That table based layout isn’t helping much with solving your problem.
There are many ways to fix this. I’m sure some will disagree, but….
I would have a div with that background image. Nested within it another div for your text. I would probably position the “text” div relative to the “background div” and position the text where I want it. Or you could position the text over the background div with padding as phoenyx suggested.
You can use overflow: scroll or overflow: auto to scroll the text should it be more than the box size.
You can adjust the position of floated divs the same way.
I would suggest dropping that table altogether and start over with xhtml and css.
If you need some help, send me a message.
I’d say float the image and the text div left, and set the left margin of the text div to a negative value so it overlaps.
Though from looking at your page, the logical thing to do seems to me to set the image as a background image for the text.
I haven’t looked at the code, but if you use a table-based layout as glial says then a +1 from me for starting over with <div>s or whatever elements are relevant.
I agree with glial, the table isn’t helping..in fact it’s going to give you unpredictable results.
If you need to get it done, just keep thinking in ‘table’ mode. I’m not a CSS purist and if it works, it works. Let the coding snobs say what they will. Use CSS to style your text but use the table to build your structure.
If you want to get to know CSS better, your current design is good place to start. Another good place to start is by using a rough structure, you can get comfortable with how DIVS and CSS work together. Some fantastic basic structures can be found here: http://layouts.ironmyers.com/750_pixel_Layouts/
Find one that suits your design and then build around it.
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
