|
CSS - Fixed Size + Scrollbar
Hello.
I am creating a small web page and I have some troubles creating the style sheet. I want a small frame with information that I want to give a fixed size (150 px). If the text can't fit in the frame there has to be a scrollbar. Any help would be appreciated. Similar TutorialsI could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? Hi When you resize the window to a smaller window the css formatted page contracts and it looks bad. How can you make it add scrollbars so the content doesn't squish as it stays where it is but scrollbars are added to view the whole page. Can it be done as this has a bad effect on my webpage with a few containers when resized to a smaller size. <style type="text/css"> body{margin:0%;padding:0%;min-width:700px;overflow:auto;} I use %positioning for the containers so I guess that also resizes in smaller window mode. If I was to use pixel length and SR is 800X600 is that the actual size i use or would it be smaller? When content exceeds the window size, the fixed footer covers it. The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives. I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far. What I want: 1.A footer that sticks to the bottom of the viewport if there is not enough content AND stays below the container when the container is longer than the viewport. 2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width. Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Troubleshooting</title> <link rel="stylesheet" href="layout8.css" type="text/css" /> <link rel="stylesheet" href="round.css" type="text/css" /> </head> <body> <div id="header"> <div id="masthead"></div> <div id="topnav"><div class="searchbar">Search</div> <div class="homebar"><span>Home </span></div></div> </div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div> <div class="clear"> </div> </div> <div id="footer"></div> </body> </html> I think there's too much CSS to post here, but everything can be found at: www. observera. com/troubleshootingpage/index. htm CSS @ layout.css and round.css I appreciate any help you can offer Em Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike Hi there, I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it. This is my css: PHP Code: scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #d4e5ab; scrollbar-darkshadow-color: #517107; scrollbar-face-color: #719e07; scrollbar-highlight-color: #add450; Any ideas why that is? How can I fix a Div a set distance below another Div without a set height? Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B Is it possible to use css + javascript to create a scrollbar with only an arrow for scrolling down and another arrow for scrolling up and nothing else like default windows? If you can provide some links, i will appreciate. thanks colored scrollbars for the following css isn't working anyone know why?
Code: /*
style sheet (C) 2004 by Dr3am Designs, made by Dude
*/
body { background: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #D8DFE7; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; margin: 0px; padding: 0px; border: 0px; text-align: left; color: #D8DFE7; font-family: Verdana, Arial, Helvetica; font-size: 7pt; }
hr { background-color: #000000; color: #D8DFE7; height: 1px; border-width: 0px; }
a:link,a:active,a:visited { color: #D8DFE7; text-decoration: none }
a:hover { text-decoration: underline; color: #D8DFE7; }
li,ul { list-style-type: square; background-image: none; list-style-position: inside; color: #D8DFE7; }
input { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
textarea, select { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
form { margin: 0px; padding: 0px; }
td { background-color: #000000; color: #D8DFE7; font-family: Verdana,Arial,Helvetica; font-size: 7pt; }
img { border: 0px; }
now strangely it is working he http://www.dr3amdesigns.com/contact.php for the textarea scrollbar, but not for the page itself or the main page http://www.dr3amdesigns.com/ - any help, please? hi, http://cyrusnetworkslive.com/products.php?sub_category_id=ph100ce10&brand_id=mo1 How can I get rid of vertical scrollbar, I want only the horizantal one. I am doing something like the in my css. Code:
<style type="text/css">
div
{
background-color:#FFFFFF;
width:950px;
overflow: auto
}
</style>
Hi guys, I'd like to find out if there is any way to change the color of the scrollbar in a listbox using the css. And also, is there a way to change the width of the scrollbar as well? Thanks in advance. In the html below (see also http://www.creatief-denken.be/opl47k.html) I have in IE a horizontal scrollbar and a vertical scrollbar. In the #contentRight div I use the command "overflow: auto" in order to let the text scroll vertically. I want to get rid of the horziontal scrollbar but I don't want to use the command "overflow-x: none" and "overflow-y: auto", because then the vertically scrolling disappears completely on a MAC (OSX). I have tried already in many ways (change the width of the div's) to let the horizontal scrollbar disappear but it doesn't work. Is there an easy way to get rid of this horizontalscrollbar? This is the HTML: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
.tekst { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: 0px; line-height: 16px;}
#contentRight {position:relative; width:490px; top:-10px; right:0px; z-index:100; voice-family: "\"}\""; voice-family:inherit; width:505px; margin-left: 20px;}
/* Again, "be nice to Opera 5". *//*#contentRight {width:450px;}*/
#contentRight p {width:420px; font:12px/16px arial, helvetica, saborder-left-width: 10px; margin: 0px 0px 10px 0; padding-right:0px; padding-left:0px;}
#contentRight img{ border-bottom-style: solid; border-bottom-color: #9DEFC7;border-right-style: solid; border-right-color: #9DEFC7; border-left: 15px; border-left-style: solid; border-left-color: #9DEFC7; border-top-style: solid; border-top-color: #9DEFC7; }
#contentRight div { font-size: 11px/16px arial, helvetica, sans-serif; height: 335px; overflow: auto; width: 465px; }
H1 { color: #0C0F7E; font-weight: 400; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; margin-bottom: -5px;margin-left: 0px;}
-->
</style>
</head>
<body bgcolor="white" text="black">
<table border="0" bordercolor="red" width="100%" height="100%" align="center">
<tr height="100%">
<td align="center" height="100%" valign="top">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
<tr height="435">
<td colspan="3" height="435" width="510" bgcolor="#9DEFC7">
<div id="contentRight"><br>
<div class="tekst">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br><br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I'm trying to get the content on this site http://www.jarretporter.com/thaiorchid to expand down the page, and not under the footer. However, when there is little to no content, as currently on the Menu page, I would like for the footer to stay glued to the bottom of the page. If you'll view the Home and Contact pages you'll see what I'm referring to. Here's the code: Code:
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background: #000000 url('imgs/bg-tile.jpg') repeat-x 0px 0px;
color: #cdbc8d;
font-family: georgia;
font-size: 1em;
text-align: center;
}
#container{
position: relative;
margin: 0px auto;
padding: 0px;
width: 100%;
height: auto !important;
height: 100%;
min-height: 100%;
}
#header{
position: relative;
margin: auto;
width: 800px;
height: 145px;
background: url('imgs/orchid2.png') no-repeat top center;
clear: all;
}
#nav-glow{
margin: auto;
padding: 0px;
width: 800px;
height: 100px;
background: url('imgs/glow.png') no-repeat center 5px;
text-align: center;
clear: all;
}
#nav{
margin: 0px auto;
padding: 0px;
width: 100%;
height: 55px;
text-align: center;
}
#nav ul{
margin: 0px auto;
padding: 0px;
width: 600px;
height: 55px;
list-style-type: none;
}
#nav ul li{
margin: 0px;
padding: 0px;
float: left;
}
#nav ul li a{
padding: 0px;
width: 150px;
height: 50px;
float: left;
}
#content{
position: relative;
margin: auto;
padding: 0px 0px 50px 0px;
width: 500px;
font-family: georgia;
font-size: 1em;
color: #ae9e72;
text-align: left;
line-height: 1.5em;
clear: all;
}
#footer{
position: absolute;
bottom: 0 !important;
bottom: 0px;
margin: 0px;
padding: 20px 0px;
width: 100%;
color: #cdbc8d;
background: #fff url('imgs/foot-tile.jpg') repeat-x 0px 0px;
font-family: verdana;
font-size: .78em;
text-align: center;
}
Here's the gist of the layout: Code: <div id="container"> <div id="header"> </div><!-- end header --> <div id="nav-glow"> <div id="nav"> </div><!-- end nav --> </div><!-- end nav-glow --> <div id="content"> </div><!-- end content --> <div id="footer"> </div><!-- end foot --> </div><!-- end container --> How can I fix to have scroll bar in IE? It does have scrollbar in FF. It's mostly the main div. Any help? CSS Code: Original - CSS Code div#logo { position: absolute; top: 10pt; left: 20pt; width: 150pt; height: 150pt; /*border-width: medium; border: blue 4px dashed;*/ } div#news { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 20pt; width:150pt; height: 200pt; /*border-width: medium; border: red 4px dashed;*/ } div#main { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 180pt; width: 500pt; /*border-width: medium; border: green 4px dashed;*/ } /* navigation BEGIN */ div#topBar { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 10pt; left: 180pt; width:500pt; height: 150pt; /*border-width: medium; border: magenta 4px dashed;*/ } @media screen { div#topBar { position: fixed; } * html { overflow-y: hidden; } * html body { font-family: verdana, arial, helvetica, sans-serif; overflow-y: auto; height: 95%; padding: 0 0.05em 0 0.1em; /* top right bottom left*/ } * html div#topBar { position: absolute; } } /* navigation END */
Hello every one, Am sameer pandurangi and new to web development. I wanted to create a css for SCROLLBAR with rounded corners . Actually i dont know if there is any such property for this in scroll bar. Am able to change the color through css but am not getting the rounded corners for that. So i hope there is someone out there with some good idea. Thanks in advance. Hi guys, Currently, the only CSS I know of to edit the scrollbar is Code:
<style type="text/css">
body {
scrollbar-face-color: #9B9A9A;
scrollbar-shadow-color: #171717;
scrollbar-highlight-color: #171717;
scrollbar-3dlight-color: #171717;
scrollbar-darkshadow-color: #171717;
scrollbar-track-color: #171717C;
scrollbar-arrow-color: #171717;
}
</style>
</head>
However, I want a little more customization. Basically, the only thing I want to show is the actual bar in the middle that scrolls up and down. Nothing else. So, what I want to do is make everything else the normal color of the page, and make the bar in the middle a light color. The only problem is, the function scrollbar-face-color edits the bar itself, AND the arrow boxes above and below it. Is there are a more specific function to edit just the bar only? Thanks. Hi, Why does the following not change my scrollbar colours? PHP Code: body { font: 14px Arial, sans-serif; color: #18387B; background: #687BA3; margin-top: 5px; margin-left: 5px; SCROLLBAR-FACE-COLOR: #FF9900; SCROLLBAR-HIGHLIGHT-COLOR: #FF9900; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #666666; } |
|||||||