PDA

View Full Version : How to remove horizontal scroller?



Haisook
06-25-2005, 01:59 AM
I need to remove the horizontal scrollers on my website cause I don't need them at all. I just use the vertical ones.

Here is the code:
<div id="sidebar" style="position:absolute; width:270px; height:315px; z-index:1; left: 133px; top: 250px; overflow: scroll; visibility: visible;" class="dashedborder">
<table width="250px" height="200px" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td valign="top">

And here is the website:
http://sims2screens.blogspot.com/

As you can see, there is no extra width. So the horiz scrollers (arrows) are just useless.


I'm sorry I'm so noob at CSS. I just need the code to remove that thing. Thanks in adv..

TheBigT
06-25-2005, 02:19 AM
Here is a fix for IE but I will search for something that will work in firefox... if anyone knows anything feel free to chime in. I changed the stuff in red.


<div id="sidebar" style="position:absolute; width:270px; height:315px; z-index:1; left: 133px; top: 250px; overflow-x: hidden; overflow-y: scroll; visibility: visible;" class="dashedborder">

TheBigT
06-25-2005, 02:32 AM
Alright well I figured it out...

First off you have to edit your header... that thing that has the css stuff in it already. I will give you the revised one with the stuff that was changed in red. Just replace all of it.


<style type="text/css">
<!--
body {
background-image: url(http://www5.domaindlx.com/haisook/Blog/sims2logo.jpg);
background-color:#5B29A7;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-repeat: no-repeat;
background-position: center top;
font-family: arial, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #333333;
letter-spacing: 0px;
scrollbar-track-color: #BCA8E6;
scrollbar-base-color: #BCA8E6;
scrollbar-arrow-color: #5B29A7;
scrollbar-DarkShadow-Color: #BCA8E6;
}
.dashedborder {
border: 0px dashed #C5C2B3;
}
.sidetitle {
font-size: 11px;
text-transform: uppercase;
color: #B81785;
font-weight: bold;
}
a:link {
color: #5B29A7;
text-decoration:none;
font-weight: bold;
}
a:visited {
color: #5B29A7;
text-decoration: none;
font-weight: bold;
}
a:active {
color: #5B29A7;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #6732BA;
text-decoration: underline;
}
.blogdateheader {
font-size: 11px;
color: #ffffff;
letter-spacing: 6px;
}
.blogitemtitle {
font-weight: bold;
color: #B81785;
letter-spacing: 1px;
}
.byline {
font-style: italic;
font-weight: bold;
color: #333333;
}
div.dashedborder {overflow: auto;
}
-->
</style>

Put this if you want your sidebar div to be changed to have no horizontal scroll


<div id="sidebar" style="position:absolute; width:270px; height:315px; z-index:1; left: 133px; top: 250px; visibility: visible;" class="dashedborder">


Put this if you want your maincontent div to have no horizontal scroll too if not just leave it. The real ID of it is layer1 though, I called it maincontent because that is what it is on your page.


<div id="Layer1" style="position:absolute; width:430px; height:495px; z-index:2; left: 440px; top: 70px;" class="dashedborder">

Haisook
06-25-2005, 04:10 AM
Oh thanks so much!! That was too nice!

dd2me
06-29-2005, 10:17 AM
although I have put overflow:hidden, I still can scroll down if I have mouse with scroll button

jscheuer1
06-29-2005, 10:27 AM
although I have put overflow:hidden, I still can scroll down if I have mouse with scroll buttonHorizontally?