| SitePoint Sponsor |
Some sites use a form of display (some sort of float I suppose) that never has any text “falling off the screen” , which means you never see the horizontal slide bar appear, no matter what resolution the screen is set at, or what magnification the browsers is set at.
What is the coding for that in css? I am (slowly) rewriting my site from straightforward html4, to xhtml with css and this would be a great improvement.
Many thanks in advance.
You can accomplish that by setting the width as a %, so that it adjusts with the size of the viewport. I generally use 96% rather than 100%, because that leaves a little leaway for things like vertical scroll-bars. (100% doesn't work on my not-very-smart phone.) You can add a max-width in px or em to prevent your lines of text becoming unreadably long on a wide screen. So something like
Code CSS:#wrapper {width: 96%; max-width: 56em; }
If you're a bear made of mohair, ponder on the nature of a mo.
Thanks for that.
Starting to wonder what I missed.
To speed things up, I add changes inline for test puposes, so added it in the head as "<style> #wrapper {width: 96%; max-width: 56em; } </style>.
Doesn't seem to do anything, as a couple of clicks on <ctrl +> popped the slide bare in view, and text dropped off the screen.
Am I missing something?
Perhaps show us what you are doing. If you have any fixed widths in there, this is likely to happen.
If you don't actually have a wrapper div called "wrapper", that might explain it.Just a thought - wouldn't be the first time I've done that.
If you're a bear made of mohair, ponder on the nature of a mo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Condemned Boiler repair Bromely south east London</title>
<style>
#wrapper {width: 96%;
max-width: 56em;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="Description" content="Condemned boiler repairs Bromley south east London west Kent">
<meta name="Keywords" content="Condemned boilers, Bromley, south east London, boiler repairs, west Kent,">
<meta name="geo.region" content="UK" >
<meta name="geo.placename" content="London" >
<META NAME="geo.position" CONTENT="51.427364;-0.160074">
</head>
<body bgcolor="feff44"><P>
<div style="position: absolute; top: 50%; left: 50%; width: 750px; margin-top: -144px; margin-left: -380px;">
<h1><font color="navy" size="5">H tag one</font></h1>
Text
</body>
As stated in my opening post, I'm at the very beginning of ccs/xhtml. I've done one condensed tutorial, and a bit of reading, that's about it. Been looking for quite a while for books that suit my learning style (which is odd) but not found anything yet. None of what I've seen recommended here quite appealed to me.
Best to assume I'm total noob and answer as such; you'll be forgiven for talking down.
OK, CSS lesson 1: using position: absolute for page layout SUCKS. When an element is given that, it is taken out of the 'flow' of the document, and you quickly end up with a disaster.
Here is a nice example of the kind of page you are interested in:
http://www.cutcodedown.com/for_other.../template.html
ralph.m has given you a good link to the kind of layout you're looking for. If you just want to test it on your own page as it is now, what you need to do is add in a "wrapper" div and my styles should work as you have them now. If you want to centre the page in the viewport, add margin: auto; after the max-width declaration. (I'm not sure what your other div is doing, but it doesn't have a closing tag.)
Code:<body bgcolor="feff44"> <div id="wrapper"> <div style="position: absolute; top: 50%; left: 50%; width: 750px; margin-top: -144px; margin-left: -380px;"> <h1><font color="navy" size="5">H tag one</font></h1> Text </div> </body>
If you're a bear made of mohair, ponder on the nature of a mo.
Thanks fellas, it was the <absolute div> that threw a spanner in the works. I've removed them all and now it works as planned.
Only downside it that I now have to carry on re-designing my page as I used the <div position> to get my buttons(links to other pages) and images in the right location.
Ah well, I won't get bored this weekend.
Posting Permissions
Reply With Quote
Bookmarks