|
CSS - Help With Double Scrollbars And Divs, Please! :-)
Hi!
I am trying to insert a nice footer menu into a CSS layout. If I set overflow to auto, I get double vertical scrollbars and a horizontal scrollbar I don't want. If I set it to hidden, I can't scroll to see content. If anyone would help me out of this scrolly mess (probably not complicated, but after a day's battling, I can't figure it out) I'd be very grateful. Just noticed that if I do allow scrolling, the footer menu doesn't scroll with the user. D'oh. Any ideas on that as well?? Code: *{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:auto}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;color:#000}
h1,h2,{font-family:"Century Gothic","Lucida Grande",Arial,sans-serif;font-size:40px}
a{text-decoration:none;color:#000;outline:0}
#menu{position:absolute;bottom:20px;left:141px;z-index:80;width:100%;line-height:12px;}
#menu div{height:66px;background:#808000;filter:alpha(opacity=60);padding:7px 0 0 7px;}
h1 {position:relative;left:-141px;margin-bottom:-73px;width:140px;opacity:0.99}
h1 a{padding:51px 10px 10px 0;color:white;background:#808000 url(go.gif) 0 -30px repeat-x;font-size:11px;text-align:right;display:block}
h1 a:hover{background:#808000 url(go.gif) 0 43px repeat-x;;color:red}
li.grass {height:12px;padding:0 5px;font-weight:bold;color:#999;display:block}
li.grass a {height:12px;padding:0 5px;font-weight:bold;color:white;display:block}
li.grass a:hover {height:12px;padding:0 5px;font-weight:bold;color:red;display:block}
#atlogoL {position:absolute;top:3px;left:10px;z-index:100}
#atlogo {position:absolute;top:3px;right:10px;z-index:100}
#lena {position:absolute;top:10%;right:20%}
#lena2 {position:absolute;top:2%;left:38%; z-index:100}
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}
p {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #267f23;
text-align: center;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #267f23;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
Code: <!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" media="screen" type="text/css" href="slimmed.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
</div>
<div id="left-sidebar">
<p>Ii </p>
</div>
<div id="main-content">
<h2>Why is this layout "perfect"?</h2>
<ul>
<li>Works in all major browsers</li>
</ul>
<br /><br />
<p>
Litterarum
</p>
<p>
Hendrerit
</p>
<p>
In
</p>
<p>
Ut
</p>
<p>
Videntur
</p>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p>Footer stuff.</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="menu">
<h1><a href="index.html">BOB</a></h1>
<div>
<ul>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
</ul>
</div>
</body>
</html>
Similar TutorialsHi, Before I was using this code for scrollbars for various Style Sheets on FORUMS: Code: .body
{
scrollbar-3dlight-color: #ffff00;
scrollbar-base-color: #0000ff;
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-highlight-color: #ff0000;
}
Now I've started to work on WEBSITES and this doesn't work with 'em. So. My question is, how can I get a scrollbar effect, I heard it has something to do with div/layer, but I dunno. Can someone plz explain. JamesRP. Hi, I'm having two different issues in Firefox 3 which occur only when pages have a scrollbar. 1) Whenever a page has enough content to be scrollable, the width of the scrollbar throws off the centering of the page. For some reason FF3 treats background image centering differently than centering a div using margin: auto;. This creates a minor 1px difference in centering, but there are image rollovers within the div structure which are meant to align perfectly with the background image and look awful otherwise. 2) I have a footer with a link to the website's site map. When pages have no scrollbar, the link to the site map does not work (no cursor change, hover effects, or page change). The same link works perfectly however on a page that does have a scrollbar (and actually, if you go to a page that doesnt have a scrollbar and then make the browser windows smaller in order to force scrolling, the link works fine). The website I'm working on is: http://sespaintball.com I have a page set up with a div overflow set to auto. Works great, until I add a flash file. In firefox etc get no problems, but msie 6 adds a horizontal scrollbar, which seems to scroll just a few pixels. Can anyone help? URL is: http://fostersdev.allit-services.com/test.html Is it possible? The classic Windows bar is so boring.... Hi, I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is: Code:
#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}
For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated. Thanks, Ralph Hi all, I'm working on a "toolbar" in a site, which users can populate with links and notices as they desire. Since it's possible that they'll put so much into the bar that it wont fit on the screen, I want to make it scroll horizontally - but without scrollbars. I'm hoping to have an area to the left and right of the toolbar that they can mouseover to scroll it in that direction. Here's a pictu I'm not having much luck getting it working, despite trying a few things google turned up... Apparently I can get rid of the scrollbars by having a div with overflow:auto inside one with overflow:hidden... (link) The same site also shows how to only a horizontal scrollbar... (link) I experimented a bit with white-space:nowrap to get the content to stay all on one line, which seems to work in FF (stays on one line inside the horizontally scrolling div) but not IE (stays on one line but stretches the div size)... Any ideas? Hi everyone I'm not sure weather this is a CSS issue. For that sake I'm not even sure if it's possible, but I'll take a try Is there any way I can totally remove the scrollbars from a textarea? I've noticed that firefox doesn't show them at all times, but IE seems to show them even when they're not necessary. I hate it when browsers jump when the scrollbar appears on a longer page. Is there any way to force scrollbars to stay on the page on all browsers? Hi, I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is: Code:
#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}
For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated. Thanks, Ralph hi, i worked pretty hard yesterday and finally my website works in firefox and internet explorer. for some reason, though, in internet explorer, the scrollbars on the index page are not showing up as coloured, even though it's specified in style.css and newsstyle.css . can anyone tell why i'm getting grey scrollbars, even in IE ? http://www.formone.net . Thanks. Dear all, I have an iframe, and the page contained has many divs with absolute positioning in various positions (it is a calendar, outlook style). I can scroll up and down the iframe to view the divs, but the divs actually overlap the scrollbars for the iframe which makes it difficult to use. This happens in IE6 and 7, but not in FF. has anyone come across this before? Many thanks, Mark I am working on a site with some simple CSS, and working with Firefox as a testing browser for the first time. The site layout has the main content in a 640px DIV that is centered in the browser. I had been driven crazy by what I thought was a bug in my coding, where certain pages would "shift" several pixels to the left. The problem only occurred in FF, not IE6. It wasn't until several possibilities were exhausted that I realized the problem was the scrollbars in FF. The CSS has the following: Code: div {position:relative;margin:auto;width:640px;background-color:orange;text-align:center;clear:both}
Because the margin is set to AUTO, it is centered within 100% of the browser window. When there is no vertical scrollbar, there's no problem. But when that vert scrollbar appears it takes up real estate in the FF window, pushing the centered DIV to the left. Is there a solution for this? I know most of the world uses IE, but I use FF and my sincere hope is that the rest of the world follows. *edit* Hi everyone. I recently redesigned my website and while it looks great in firefox, I'm having huge problems in IE 6.0. I have several pages with >50 thumbnails, and whenever these pages load in IE, scrollbars appear to the right and bottom of the div and quickly move by themselves to the upper left hand corner of the screen as the thumbnails load, shrinking the content into a little box of nothing in the upper left hand corner. The link to the site is in my profile, I am not allowed to post a url here since I'm new. The main page of the site is fine, but any of the links at the left will cause the problem because of all the thumbnails. I have been using "Group Photos" as the page to test. I am still a newbie at CSS and got this template for free and have tweaked it a bit. It came with an IE hack ("fix.css") that maybe isn't working properly. This is the IE hack: Code:
html
{overflow:hidden;}
body
{height:100%; width:100%; overflow:auto;}
Here is the relevant code from my main stylesheet ("eyecandy.css"): Code:
#sidebar
{position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0; text-align:right;}
body > #sidebar
{position:fixed;}
#menu a
{display:block; width:202px; padding:2px 18px 3px 0; color:#606060; background:#e0e0e0; font-size:1.1em; font-weight:normal; text-decoration:none; letter-spacing:-1px;}
#content
{width:685px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}
Can anyone help? I hate I can't even post a link to the site directly or even the css file to make it easier. Both the CSS files I named are in the parent directory if you want to see them. Hi, Please use Firefox and look at: https://67.18.220.222/~duoboots/secure/test_start.php Only on Firefox do I see scrollbars on the right white box. The white box is fixed width, and is supposed to expand vertically with the content. However, the white box does not expand as much as I'd like to. Eventually, as the content gets bigger, Firefox displays unwanted scroll bars. Then, if I simply press 'Refresh'... the scroll bars disappear, and Firefox displays the page exactly how I want it! Its really wierd because I can't test this properly. Once the page is refreshed, there are no scroll bars. But, a general user won't press Refresh..and will end up at that page eventually, to find unwanted scroll bars. I've tried it on Opera, and a friend said its definitely a Firefox bug. I am sure the <table> is causing the problem - because all other pages display fine. The scroll bars are only appearing on this particular page, with a <table>. Note : if you do not see scrollbars... then thats not a surprise, because Firefox is acting strange on this one.... I mainly see the scroll bars after signing in and accessing the actual PHP page that is dynamically generated. The above link is just a static version whose code I copied and pasted. Anyway, if anyone has had any similar problems with tables and overflow-scrollbars.. please could you let me know what you did about it? Some CSS: Code:
table.oa_results {
border: 1px solid #C9AA90;
border-collapse: collapse;
width: 310px;
}
table.oa_results td {
border: 1px inset #C9AA90;
padding: 2px 2px 2px 4px;
}
table.oa_results th {
border: 1px inset #C9AA90;
padding: 2px 4px;
font-weight: bold;
text-align: left;
}
.whitebox_general_oa {
width: 387px;
background: #FFFFFF;
line-height: 18px;
overflow:visible;
display: block;
clear: both;
}
Thanks very much! Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small? I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars. If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari. I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down! Any ideas? Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. |
|||||||