Hi, i am not sure if this is html or css but here is my question on the image below i would like to put i scroll bar on the place under were it says latest news but i dont no how. i was wandering if someone would no no the code i would need to put in or if there is a different way to do it. please say if you know. many thanks jhill
Sure.. <div id="news"> Your news here... </div> in your css you say: #news { overflow: scroll; } Actually, when reading your question again, I feel like I have maybe misunderstood the question. You want a scroll-bar like in the right side of your browser window? It could also be understand as you wanted an automated scroller or something.. You can get a horizontal content scroller in html, that's called a marquee... search on google of you want a vertical, you could look at dynamicdrive.com. they got a good collection of javascripts..
if you could post the code for the Latest News section, that would help. assuming the Latest News section is a div, use inline CSS for example: div style="overflow:auto" this will produce a scroll bar automatically if the content exceeds the height of the div.
this is the code i have now </div> <div id="sidebar2"> <p class="style22"><img src="Images/Nav_tab1.png" width="175" height="27" /></p> <p class="style22"> </p> <p class="style22">- Forum now up and running so start buying/selling art work.</p> <p> </p> <p class="style22">- Welcome the grand opening of <em><strong>Make 'N' Sell</strong></em> a website dedicated to your needs. have a look around and enjoy.</p> <p class="style22"> </p> <p align="center" class="style22"> </p> </div> all i want to no is how to change it so i can type more stuff but when i do a scroll bar will appear so people can scroll to see previous new i just dont have a clue how to do it.
Just use this in css: #sidebar2 { overflow: scroll; } and you should get a nice scrollbar when it exceeds the height limit You could also just do this: But I would prefer the first one.
thanks this works there is just one more question. Is there a way to change to the colour of scroll bar so it matches the site because this colour it is now makes it look ugly. If there is a way can tell me how please.
That can only be done for internet explorer.. Try this scrollbar color generator: http://www.iconico.com/CSSScrollbar/ In other browsers, the scrollbar will just be the standard colors of the specific browser. If you want to completely control the scrollbar style, you have to write some custom javascript scrollbars.. Try to google it (something like "javascript div scrollbar").
ok i dont think i will use the colour then but i have one small problem again. at the bottom there is a scroll bar aswell which i dont want. do u no how to get rid of that. also were there header saying latest news is at the top i want that to stay at the top because it scrolls down aswell. If you can tell me how to do these last 2 things this is all i need. many thanks. jhill
You hide the horizontal scrollbar with overflow-x:hidden The complete code for your 2 questions: I've added a new div and put a style on id. you could also give it id="newscontent", and then add the style in your css file.
this doesnt work now im not sure why can you just check it over please. the bottom bar has gone but it doesnt scroll. thanks
No, overflow: scroll makes TWO scrollbars by default, why would anyone use it and then use more CSS to cover it up? Overflow: auto will only generate a scrollbar where you need it. You'll need a set height on that box, sorry, but you won't get the bottom scrollbar if your content isn't wider than the width of that box. That's how you get rid of the bottom scrollbar. I don't see anywhere in any code a set height for sidebar. Also, unless you hack for it, Opera takes overflow: auto to mean always put a scrollbar there, so sorry about that. It will be greyed out until content overflows, but it's teh ugly in Opera. There's no need for every single p in #sidebar to have a class of style22. If everyone has the same class, then remove the classes and but the styling on all p's in the div called sidebar.
Ok, not trying to be ungreatfull but all i want is the code to make a scroll bar (going down but not across) on the image at the top but i want the part that says latest news (which is an image) to stay at the top. for the minuet you can just make up the sizes and i will change it match later. if you can do this i would most appreciate it. many thanks jhill
It would be super easy to do if ther styling was in a CSS sheet instead of sitting in the HTML... and I think you might already have one as I see class names on everything and no "style="blah" in there. Post your CSS for that box so we can see how big you're making it, what you're using for font size, etc. One problem, looking at your image, is that there's no room for a scrollbar now. It would have to cover some text! So the width might have to be set wider... and I can't see if there's enough room for a wider sidebar. The scrollbar won't sit on the outside of it. It would be something like (the numbers are all being pulled out of my butt here): <div id="sidebar2 class="style22"> <img src="Images/Nav_tab1.png" width="175" height="27" alt="Latest News" /> <p>- Forum now up and running so start buying/selling art work.</p> <p>- Welcome the grand opening of <em><strong>Make 'N' Sell</strong></em> a website dedicated to your needs. have a look around and enjoy.</p> <p align="center">blah blah blah test test test test blah blah blah test test test test blah blah blah test test test test blah blah blah test test test test blah blah blah test test test test</p> </div> Code (markup): Take my comments out, of course. You're going to have to play with this. #sidebar2 { position: relative; width: 190px; <-- these numbers are GUESSES height: 240px; <---GUESS padding: 27px 20px; 2px 0; <--side padding so the text isn't right up under scrollbar (GUESS) and not over image overflow: auto; (will not make scrollbar until there is more content than fits-- except in Opera and maybe IE7) } #sidebar2 img { <--- this is how I hope to keep the image at the top... not tested position: absolute; top: 0; left: 0; } #sidebar2 .style22 p { <-- I don't know what else has style22 so I'm trying to limit this style to just this sidebar and not others (if you want you can set a width here instead of relying on the padding to keep the text away from the scrollbar.... something smaller than the width of #sidebar2) other style22 styles you have; margin-bottom: 15px; <-- this can replace the &nb sp; stuff... if it doesn't, the margin is collapsing so then add padding: 1px; or something to trigger normal margins } Code (markup): Without actually testing/building it myself, I don't know how stable this is, but this is what I'd start with if I was building it. You may need to add some fake text to accurately test the scroll. If you get a bottom scrollbar in any browser, then set a specific width on the p because that bottom scrollbar will ONLY show if the width of the content inside #sidebar2 is wider than the width we've set on #sidebar2-- OR if you can get away with it, you might be able to just not set a width on #sidebar2 and let its container hold it in (I don't know what #sidebar2 is sitting in, but if its container is also really narrow like 200px or something, then having no width on #sidebar2 means it will just go to default-- 100% width of its container. With no set width, no bottom scrollbar. If you get a scrollbar but it doesn't scroll, then you're looking in one of the browsers like Opera or I think IE7 which always sticks a scrollbar on things with overflow: auto but greys it out until there's enough content to necessitate a scroll. I hate this in Opera and will hack it out. So, add content until it CAN scroll. Then you'll see it working. You won't be able to control the various browser defaults for things like how and when it scrolls, sorry, and same goes for colour of the scrollbar except in IE.