|
CSS - Proper Scrollbar Technique
Thanks for reading my question.
I went to http://jigsaw.w3.org/css-validator/ to see how I was doing on my CSS. Seems I'm doing ok. I am just having problem with the Scrollbar portion. What is the proper way of doing this? Here is my result from the validation Quote: Errors URI : file://localhost/kelly.css * Line: 0 Context : #info Property scrollbar-face-color doesn't exist : #ffac11 * Line: 0 Context : #info Property scrollbar-highlight-color doesn't exist : #ffac11 * Line: 0 Context : #info Property scrollbar-shadow-color doesn't exist : #d4940e * Line: 0 Context : #info Property scrollbar-arrow-color doesn't exist : #b12514 http://www.websitedev.de/css/validator-faq says a bit about it. Just wondering if Any of the scrollbar stuff is allowed, and will be validated? Thanks, Brad Similar TutorialsI was looking for the best way to implement rounded corners for my website and its been difficult evaluating the different methods and deciding which way is the best way to go. So far the mountaintop method looks the most promising. The idea is to create a transpatent gif with the corners of the image as a white mountain shape. When you make this the background of the CSS div, the color of the background offsets and creates the image of rounded corners. I am having a small issue implementing that as well, for example, ive created two images one for the top and one for the bottom, but I am not quite sure how to implement it as you cannot specify two background images per CSS div. Anyone have any thoughts on this? Sorry about the vague description, but I'm wondering how to achieve an effect like the ones on this page: http://www.csszengarden.com/?cssfile=/196/196.css&page=0. I've seen the effect on many other websites, but I can't find them at the moment. On the page the content div grabs your attention effectively because its borders make it pop out from the background. How are the border images and divs setup to achieve this effect? I am using this: http://alistapart.com/articles/cssdropshadows/ for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center 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? Hi there. I've got two styles defined for links...one of which is Code:
A:link#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
}
A:visited#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
}
A:hover#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
display:inline;
}
when i want the link to be the 'redir' style, i put Code: <a href="http://www.whatever.com" id="redir">clicky</a> but that won't validate because id's are supposed to be unique. what's the deal? thanks! I have recently begun training on CSS. I would say I am pretty skilled with the basics of creating a layout. I can pretty much do any layout, 3 column, 2 column, or whatever. The way I have been doing this is though is to specify the width using pixels of each <div> area. I have also been specifying the margins: and padding: using the exact pixels as well. I know this way does not cause the website to resize when I resize my browser. I also know that in order to cause it to resize I need to use %'s and such. Is there an advantage to this besides the obvious resizing ability. What do you guys all do? And is the best way to do a layout to use the <div> and then set up my scripts to display in the content <div> area each time? Thanks. Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
Hi , I am really stuck in this css . i have tried a lot but cant get it working right in i.e6 . It is working fine with firefox but not i.e 6 .I am already using a javascript which makes css works for i.e 6 . i have attach the image where it shows the difference . Here is my css code . Code:
#nav, #nav ul{
margin:0 0 0 18px;
top:auto;
padding:0px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2em;
font-weight:bold;
font-family:"times new roman";
letter-spacing:-1px;
font-size:17px;
}
#nav li ul{
font-size:15px;
font-weight:normal;
background-color:#000000;
width:auto;
height:auto;
top:auto;
margin:0;
letter-spacing:0px;
border:0 none black;
}
#nav a{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
}
#nav a:hover{
color:#FFB208;
cursor:pointer;
}
#nav li{
float:left;
position:relative;
margin:0 0 0 12px;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:33px;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
vertical-align:text-top;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0 0 0 10px;
float:left;
right:auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
Javascript code:- Code:
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
}
);
}
$(document).ready(function(){
mainmenu();
});
Is there anything more i need to do in my css file? Regards, Umair alright I have a css/folder in root directory. I have files in child directories, I'm calling the parent file by ../folderlocation/file to use my css but my images wont load that are in that css... The files in root directory show images that use exact same css.. only difference is those files are in root, and the one in child directories wont show images. The layout is shown though, any suggestions or tips would be greatly appreciated. Hello all. May I ask for your help? I just finished developing a site for personal page (e.g. blog, myspace, etc) promotion, but I'm having troubles correcting my stylesheet. The home page is basically a bunch of pictures of people, but I don't have anyone loaded in the system yet, so I can't get a feel for whether or not it is behaving properly. This probably sounds like SPAM, but oh well. Would anyone be willing to give it a try and provide your thoughts in this post? The web address is http://www.klik.us. Thanks a ton for any help/comments. hi, is this the proper way to do this? i'm trying to have every link with certain properties and then have classes define specific links. it works, but i wonder if this is the proper way to do so. Code:
a:link{color: #0000dd; font-family: tahoma; font-size:12px;}
a:active{color: #0000dd; font-family: tahoma; font-size:12px;}
a:visited{color: #0000dd; font-family: tahoma; font-size:12px;}
a:hover{color: #0000ff; font-family: tahoma; font-size:12px;}
a.big {font-weight:bold;}
thank you CSS Definition: span.votelinks { right: 0; position: absolute; padding: 1px 280px 0 0; background: none; font-size: 12px; font-weight: bold; } Its use in a .tag file: <span class="votelinks"> <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=true"><img border=0 src="${pageContext.request.contextPath}/images/good.gif"/></a> ( ${requestScope.UP_VOTES} ) <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=false"><img border=0 src="${pageContext.request.contextPath}/images/bad.gif"/></a> ( ${requestScope.DOWN_VOTES} ) </span> The problem is that the icons are centered perfectly but the text isn't. Is there a way to only pad the text? Thanks in advance, Mark Prior to doing any serious mobile work, I learned if you had an image that was mostly decorative and didn't need to be read as part of the content, you used a background image. In today's world you have to support many mobile devices. There's a nice trick with <img> tags where you give them a max-width of 100%, and they will scale down proportionately on mobile devices. As far as I can tell, there isn't quite as good of a solution for background-images. Say I have a background image in a div, and I set the dimensions to match the background size - 600 x 300. To allow it to scale down on mobile devices, I set a max-width of 100%. But that doesn't scale the background image down, just crops it. So I set background-size: contain, which makes the background scale, but the div is still 300px tall. And that's where I run into the problem. How do I tell the div to only be as tall as its background? Am I missing something? There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop. temporary site <--- fixed. in a state of constant change. The css is layout.css . I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies). I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up. I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page 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? 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 I've searched the web hi and low yet I have not found any answers. I am using an iframe (it's a love-hate relationship) for my website. I have my index page loaded up with a flash .swf which influences the iframe to switch pages when the user clicks on any of the provided links. *PROBLEM* One of my links consists of a blogger- formulated with 'cryptic blogger code' which I have no intention on learning- just working around. However, no matter how hard I try and mess around with the blogger page's html code, I cannot get rid of the x-axis scrollbar- it appears when it is not needed at all and I am unsure of doing anymore messing around for fear of messing up the code. I've also tried adjusting the actual iframe script but still no results. Please- if any html/css demi-gods/goddesses can help me get rid the the iframe's horizontal scrollbar BUT keep the vertical one, you'll be my best friend :P Here are the websites: (ps- tell me what you think- and it isnt finished) URL <- actual site URL <- blogger page (you can see where i've tried to edit it but still no results) -Jason (i posted this in the html section hoping some html guys would help me- but it was a dud ) 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; } 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. |
|||||||