Hello,
I would like to reserve the top 20px of my screen to be used for messages, similar to a popup blocker message.
I can get it to show full screen width when I start my application, but if i resize the browser, it goes to two lines intefering with my page body.
I would like it to add a scroll to the bottom of the page, not under the top line itself.
I have found many things here that I have tried but just cant seem to get it correct.
Uhmmm. Just do position absolute, width 100%, height 20px, and overflow auto on that div. No need for left/right/etc. Then give the body padding top 20px.
The only way to stop it wrapping is the give the element a fixed width or min-width to match the width of the text or set white-space:nowrap;. 100%width or left:0 right:0 will all result in the element wrapping.
CSS should nearly always be in and external stylesheet and there are very few occasions when you want the css in the head. (Occasionally there may be one rule different for a certain page and you may want to put it in the head but even then it could still go in the external stylesheet without too much trouble.)
I usually put the code in the head when I am testing the first page so that I don’t have to jump between documents but once the first page is done I put it all external.
isn’t that min-width is all you need? It could easily replace display:table and white-space:nowrap and IE7 hack? Would it be more consistent, since you chose it for IE7, to also use it for the other UAs?
But I would definitely use the CC for IE6- to wrap a table element around it
<!--[if lte IE 6]>
<table><tbody><tr><td>
<![endif]-->
<p class="top"><strong>Warning: </strong> This Browser requires client scripting. You must have Active Scripting enabled to make full use of the application. <a href="#">Help</a></p>
<!--[if lte IE 6]>
</td></tr></tbody></table>
<![endif]-->
Yes you could use the min-width for all but the downside of that is that you need to know the width beforehand. All the other browsers are working independent of what the width may be and therefore may be more futureproof.
It was only IE7 that wasn’t working as IE6 is also happy with the setup the way it is.
min-width is known, isn’t it? It is the min-width of your page? Or the width of it, in case of a fixed layout. And, if flexible, you also know max-width.
I was only suggesting the <table> element because of its relation to the solutions available for min-width/max-width for IE6. Apart from the big border/negative margin one.
No lol - It’s not known. I think you may be looking at it a different way.
It’s the width of the text in that top line that dictates where the min-width of that line is going to be and not the width of the layout. The rest of the layout is mostly irrelevant to the problem
If the layout was 850px and you set a min-width of 850px then the text would wrap if it was wider than 850px which is what the OP didn’t want.
I fixed the text so that it would never wrap but the problem is that you lose the background on the text when you scroll to it with the scrollbar. All the fixes were to address this issue and maintain the background on that top line even when scrolled horizontally to see it.
You may need to try out the code I gave to see what the difference is as what you are saying sounds right until you try it
Regarding your table solution for IE6 then that would actually be a better solution for IE7 as well as we could then get rid of the min-width.
If the length of the p was 850px, on a 800x600, then the OP would see its purpose defeated? The scroll bar would appear to adjust the notice line, when a far better solution would be the wrapping?
Yeah, I like the table solution for min-width solution for IE6, but I wouldn’t bother IE7 with it?
I have been trying this with the suggestions above.
I am designing my pages for 1024x768 (this seems to be common).
With the min-width, all works just as I would like.
The notice fills the entire width of the display.
When resized, I get a bottom scroll for the entire 1024 width.
Without the min-width, it fills the entire width of the display.
When resized it drops the notice after the <a>Help</a>,
I still get the bottom scroll for the entire width, just some extra
body background on the right…
Less than 1024x768 seems to be fine,scrolls to my page width.
Greater than 1024x768, works just fine but my page is not centered.
If the user has scripting enabled I will be able to fix this
in window.onload(), (what got me started on this to begin with).
I will have the notice area for messages that I do not want to display
to the user with a message box (ie. your membership has expired, etc…).
Thanks for all of your great help,
I has been a while since I accomplished exactly what I wanted
in just one day.
Yes but the wrapping is what he didn’t want lol The only solution that works automatically is the one that I gave - (or methods based on that concept).
I guess that when it wraps it encroaches on the page and a better solution would have been to allocate two lines of space at the top and perhaps center the message - but that’s not what was asked.
Yeah, but if what he’s asking for is wrong, I guess he can adjust
He may not want the wrapping, but that may lead to incomplete display, rendering the solution useless.
It should be an element (a div perhaps) having always the same width as the viewport, or a min-width, and it should wrap if necessary, regardless of the fact that it overflows the content below. That’s the correct approach. That’s what she said.
Overflowing the content below is even better chances it would not just go unnoticed.
No it doesn’t lead to an incomplete display at all. It leads to a display where the top line can be scrolled to and is perfectly usable (if a little odd). The only other solution is to set a minimum width equal to the length of that line at its widest point which as I already said would have to be worked out beforehand and wouldn’t allow for different messages to be posted.
I agree that allowing the text to wrap would be my preferred option also so I have no arguments on that point. It just seems that you are missing the nuance of my solution somewhere along the line.
Time for a demo
My example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0
}
body {
padding:25px 0 0;
}
p.top {
position:absolute;
top:0;
left:0;
white-space:nowrap;
background:#ffc;
border-bottom:1px solid #000;
height:20px;
line-height:20px;
margin:0;
font-size:85%;
width:100%;
display:table;
text-align:center;
}
*+html p.top {
min-width:62em
}/* ie7 only*/
p.top a {
margin-left:100px
}
#outer {
width:700px;
margin:auto;
min-height:400px;
background:#ffc;
border:1px solid #000;
}
</style>
</head>
<body>
<p class="top"><strong>Warning: </strong> This Browser requires client scripting. You must have Active Scripting enabled to make full use of the application. <a href="#">Help</a></p>
<div id="outer">
<h1>testing</h1>
</div>
</body>
</html>
Which seems to meet the criteria originally requested.
I would like to reserve the top 20px of my screen to be used for messages, similar to a popup blocker message.
I can get it to show full screen width when I start my application, but if i resize the browser, it goes to two lines intefering with my page body.
If instead as you suggest we allow the menu to wrap then far from being better it becomes useless (your word not mine).
Your method (if I understand what you are saying).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0
}
body {
padding:25px 0 0;
}
p.top {
position:absolute;
top:0;
left:0;
background:#ffc;
border-bottom:1px solid #000;
height:20px;
line-height:20px;
margin:0;
font-size:85%;
width:100%;
text-align:center;
}
p.top a {
margin-left:100px
}
#outer {
width:700px;
margin:auto;
min-height:400px;
background:#ffc;
border:1px solid #000;
}
</style>
</head>
<body>
<p class="top"><strong>Warning: </strong> This Browser requires client scripting. You must have Active Scripting enabled to make full use of the application. <a href="#">Help</a></p>
<div id="outer">
<h1>testing</h1>
</div>
</body>
</html>
Of course we could put the message back in the flow but then it moves the layout down which may not be desirable either but is probably more sensible.
To me, that’s the definition for incomplete display.
Huh? No, this is what I’m saying all along, wrapping is the way to go, w/o the fixed 20px height, which, I agree, will make it display akward and useless when wrapping.
Spot on!
That is what I believe OP should understand: that that message needs to be wrapping and needs to be visible over the below content. We’re talking here about what IE has done so long ago with those ActiveX warnings.
My point was that if OP still wants non-wrapping fixed 20px height message, when its content goes over the viewport or min-width, then it should become a scrolling ticker, rather then enforce scrolling bars by it self. Until then, your solution is not complete, and his requirements are to blame. He needs to adjust.
I prefer to give solutions and then say it would be better if you didn’t do it that but then let the OP make their own mind up. I’m all for telling people a preferred approach but we can’t tell everyone to scrap it all and start again all the time as happens so often in this forum.
In the end it’s counter productive as can be seen by the people that stop visiting and go somewhere else and then we lose the chance to educate them more slowly. I usually chip away at them bit by bit until I get them around to my way of thinking.
Eventually I have them doing it the right way but If I scare them off at the start then it’s no good at all as they go somewhere else and all is lost.
