|
Answer» I'm sure this is a really simple question, but I haven't been able to figure it out.
I'm making a web page, with the main part of the TEXT in a div element with a non-repeating background. The background is 561px wide, and the text spills over around it. Is there any way I can make the text stay inside the background? I tried making the WHOLE div element or just the paragraph elements 561 px wide, and that worked really well until I tried resizing the window -- it wasn't fluid anymore (or at least when it couldn't fit the whole thing, it would send it all down to the bottom of the page where there was more room...) Is there a simple way to solve this?
Thanks! EugeniaI must admit that I completely cop out in this kind of scenario, because I find tables-based layouts are so MUCH more consistent and cross-browser compatible than pure CSS layouts (especially with all the non-standard handling of CSS by the various browsers).
That said, if you could upload the page as it is and provide a link, I may be able to offer some suggestions.Some of the pictures aren't there cause I forgot to copy them over, but the basic problem is still obvious, the text in the "Our Publishing" paragraphs is extending past the edge of the background...
Here's the page: http://cer-pxo.com/books
And here's the link to the css I used: http://cer-pxo.com/main.cssOh, I see. The whole layout isn't really working for me. I'm mainly using high-res or widescreen monitors, and the whole view pane looks a bit messy, with your navigation links to the right; the Russian text to the left, the logo centred above the two, the unaccountable 180px left margin, etc.
Before attempting to fix this problem, I think you need to make a design decision: are you going to design a fixed-width web page, or are you going to design a fully fluid page that fills the whole width of any browser window? It looks to me like a fixed width is presupposed by the width of your logo, in which case you could wrap everything in one fixed size div. (Note that you should use a class to do this rather than defining ALL divs identically as you have done in your current CSS.)
How do you want to proceed? Do you want me to expand on anything I've just said?
That is actually more or less the way it is supposed to look, with the Russian on the left and the links on the right. The 180px left margin is for those pictures I didn't upload, there is a column of them that will be used as links as well. I generally wanted to make it a fluid page, though I wasn't being absolute with that - I just figured I'd make whatever needed to be fixed-width, or fluid, what it needed to be to work... Is there a way to keep that particular part fluid, but give just the text a maximum width so it doesn't spill over? I thought there was a max-width style, but it didn't work when I tried it.Max-width has limited support in the IE browsers unfortunately. Bear with me - I'll GET back to this thread when I have a little more time.Are you aware of what happens to your horizontal menu when a Firefox browser window is made narrow? See below:
Yeah, actually it does that in all the browsers I think. I'd noticed, but it didn't bother me as much so I figured I'd leave it for now and try to fix it when everything else is done...I know this probably isn't the right way to do it, but I found a way that work to keep the text inside - I changed the width of the div to 80%, which is approximately how much space the background takes up, whether the window is minimized or not. Thank you for all your time and help!! Well that may well work for the resolution you're designing at, but will it work for all resolutions?Good point Rob, always design for the lowest common denominator is a good rule of thumb. 800x600 is as low as I go now days, but that is in an extreme circumstance, typically its 1024x768.
Tables vr CSS, well IE doesn't always display the same as FF, CSS can really be a pain to work with at TIMES when trying to make sure you are cross browser compliant.
|