|
CSS - How To Format Select List?
I need to know how to format a selection list, what I want to do is change the color of the arrow how do I do this?
Tim Similar TutorialsI tried this to change the background color of a select tag by using color code and nothing happens. It works only in NS6+ and not in IE. IE only accepts color names but not color codes. Code: <select name="sele1" onfocus="this.style.background='#ffffcc'"> If I put a color name eg. 'red' then the background color changes. Is there a way for it to accept color codes too. Thanks how can you specify a new font size in a select list. I need to make the items appearing in that list smaller than they already are. Is there any way to add a horizontal scrollbar to a SELECT listbox that works in both Mozilla and IE? I have a mutiple-select enabled box with about 50 items, only displaying 10 rows, and some of the rows are really wide because the text is very lengthy. I'd like to add a horizontal scrollbar to the SELECT box in addition to the vertical scrollbar. Here's what I've tried - I'm running Windows XP and testing with Firefox 1.0 and IE 6.0.2. a) Adding various overflow styles, like overflow:scroll and overflow-x:scroll. None of these cause the horizontal scrollbar to show up. b) Adding the mozilla "-moz-scrollbars-horizontal" style, which doesn't add it even in Mozilla. c) Surrounding the SELECT inside a DIV tag, with scrollbars. This works, and IE is even smart enough to remove the vertical scrollbars on the SELECT listbox if I make it tall enough to show all choices at once. However, in Mozilla, the vertical scrollbar stays visible even when it's not needed. So in this case I end up with two vertical scrollbars - one for the SELECT and one for the DIV. I tried various things to disable the Mozilla vertical scrollbar but that didn't work either. So basically I'm looking for a way to either: a) Add a horizontal scrollbar to a SELECT that works in both browsers. b) Or, a way to disable the vertical scrollbar in the SELECT object in Mozilla Firefox, so that I can use the DIV trick. Any clues? Hi. I see that if I put this in a select class="classname" then IE6 and IE7 do not honor the css rules. It works in Firefox and Chrome (have not tested others).... I also see that if I put inline styling to each option then it works in IE, but not if I use class="classname" in each option. Do I allways have to use inline styles on each option for IE or is there a way to make it understand: class="classname" for the select or the option ??? I would prefer not to use inline styling though.... puhhh Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, I have an OL list (the numbered one) and the horz gap between the list item number (as automatically generated by OL) and the text of the LI is too big (according to client). Looks fine in FF but is bigger alright on IE (ahem naturally .....) I've played with the CSS for both the OL & LI styles even setting all margins and paddings to 0 but without effect on the gap. Is there any way to style that gap? Code below. Kevin <ol class="most_read"> <li class="most_read_li">Apples</li> <li class="most_read_li">Oranges</li> </ol> .most_read { text-align:left; color:#808080; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin-left:30px; padding:0px; margin-top:5px; } .most_read_li { margin-bottom:7px; margin-right:7px; } Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks hi all, i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly how to display the 5th field in correct format...below is the code i have written in css.. if there are more than 4 fields tell me how to display all in correct format. .form label { float:left; width:100px; padding:10px 10px 0 10px 0; font-weight:bold; } could anyone tell me if there is something out of order here;? css Code: Original - css Code .heav {color: #333333; font-weight: bold; } .mast {color: #333333; font-size: x-small; font-family: Arial, Helvetica, sans-serif; } hr.center {color: #dddddd} .header {background: #CCCCCC; border-top: 2px solid #BB2F00; margin: 3px 0 0 0; padding: 3px; } .footer {background: #BB2F00; color: #FFFFFF; border-top: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; margin: 8px 0 0 0; padding: 2px; font-size: x-small; font-weight: normal; font-style: normal; } .carL {color: #999999; font-size: x-small; font-weight: normal; font-style: normal; clip: rect(auto auto auto auto); font-family: Arial, Helvetica, sans-serif;} .pvc {color: #BB2F00; font-weight: bold;} .talign {text-align: center;} .clip {color: #FFFFFF; font-size: small; background-color: #333333; clip: rect(auto auto auto auto); } .margin {margin: 5px;}
I have been scouring this forum trying to find the correct answer. I have a list of links in an unordered list. I am using css to style the list. The one thing I can't seem to figure out is, if I have the wrong doctypes or my css is wrong. I have replaced the bullet for the li tags with background images. One is just a line the other is a line with an arrow. I am trying to push the type over a little past my arrow. In the css I have put a padding-left: 1 em; on the li tag. It works in IE but not firefox, so I added padding-left: 10; This seemed to push the li tag over in firefox. The next problem was when I went to put the doc types in. I put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> above the <html> tag. Once again it worked in IE but not Firefox. I took out the doctype tag and inserted <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> inside the <head> tags. This seems to work in both IE and Firefox. Is this an incorrect way to put a doc type in? Below please see the css I am using and my header info Code: /*right hand nav bar*/
#nav ul{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li{
background: url(../images/divider_rht_nav.gif) repeat-x bottom;
padding-top: 0.3em;
padding-bottom: 0.6em;
padding-left: 1 em; /*this is for IE*/
padding-left: 10; /*this is for FireFox*/
}
#nav a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height: 13px;
color: #325087;
}
#nav a:hover {
color: #CC0000;
line-height: 13px;
}
#nav li.selected {
color: #174A4A;
font-weight: bold;
background-image: url(../images/divider_rht_nav_arrow.gif);
}
.heading {
font-weight: bold;
color: #174A4A;
font-size:10px;
}
.headingspace {
font-weight: bold;
color: #174A4A;
font-size:10px;
margin-top: 1.5em;
}
/*end style*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin Area - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/master.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/master_print.css" rel="stylesheet" type="text/css" media="print">
<script language="javascript" type="text/javascript" src="scripts/validate_admin_login.js"></script>
</head>
I'm new to CSS but have read more in the past two days than I care to tell you about. I'm stuck on how to reference a deeply nested element that is automatically generated by a drupal view. The problem lies with the fact that I can select it directly and style it but other views (pages) are rendered with the exact same attributes (Name, Class, and ID). The Class of the page or view is different but is nested about seven tags back. My question is: How can I select the Element to be styled when the only differentiator is so far back in the hierarchy of the page without using a local or inline CSS? The following are snippets of the two pages that share the same Element attributes (<select name="filter0" class="form-select" id="edit-filter0" >) Thanks for any suggestions you might have. Mike ********* First page ******************* Code: <div class='view view-firstview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
******** Second Page ******************** Code: <div class='view view-secondview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
Dear Friends, I have been trying to make a stupid title bar, that i did with tables, now using css. This is what the code for a titlebar looks like in table form: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="10"> <img src="img_inside_article_title-bar_left.gif" width="10" height="30"></TD> <TD colspan=2 height="30" background="tile_inside_article_titlebar_bak.gif"> <p class="left"> <span class="strong_white"> Title</span></p></TD> <TD width="14"> <img src="img_inside_article_title-bar_right.gif" width="10" height="30"></TD> </TR> </table> and would like to convert it into css. All my attempts have been very wrong, and i need help. I'd give my css code, but it is sooo wrong.......that it would be better to start from scratch. basically this is the idea: (Left Corner Image)(Title area that streaches across width of web page)(Right Corner Image) HELP Fz105 Hi. How do I know the shorthand property value format? For example: p { margin: 1em 2em 2em 1em; } How do I know which one is top, bottom, left, right? Can u do this as well? p { margin: 1em 2em; } What about other property do they always follow the same format and order? Any help will be great. Thanks. Suppose I have a few tables I want to format vertically. If they are quite wide, chances are simply doing <table id="a">...</table> this will probably happen automatically. Ever, with a wide enough screen they might format horizontally. To fix this, I could to the following: <table id="a">...</table><br><table id="b">...</table><br><table id="c">...</table> but unfortunately, <br> also adds extra unwanted spacing. Is there a was to CSS the <br> tag to avoid this, or is there a CSS method to indicate that each successive table should be below the last, not to the right? Skolem I am trying to define 5 different types of links in one style sheet. I have three questions. 1. How would I declare it in the style sheet? I have tried the following, which does not work: a.typea { font-weight: bold; color: #E8C960; text-decoration: underline; } 2. How would I refer to the class in the HTML? I have tried the following which does not work: <a href="link.htm" class="typea">Some Link</a> and <span class="typea"><a href="link.htm">Some Link</a> 3. Can you assign a rollover class to link classes? I tried the following which does not work: a.typea:hover { font-weight: bold; color: #06FF00; text-decoration: none; } Any help on this is appreciated. I can't be limited to only one type of link throughout an entire dynamic website. D I've noticed some characters at the beginning and end of CSS files: Quote: /* <!-- */ /* CSS content here */ /* --> */ What is the purpose? Lately, I see articles everywhere telling us to ditch tables and use CSS to position forms. I don't necessarily have a problem with using CSS although I'm admitedly a bit new to using it for anything more than basics like sizing, color, borders and backgrounds. But my basic question is why ditch the tables? Tables have been around since the inception of html. They work with any browser you care to name and the provide a valid function allowing developers to position things on the screen in a pleasing manner. The flow of data in tables is simple, so the developer and usually the user can predict where the cursor will go when the user hits the tab key. There are certainly problems with tables, such as text wrapping or being truncated when the screen resolution is lower than the developer designed for and the positioning is not as clean as absolute positioning with CSS. Absolute positioning with CSS can lead to its own problems though. If the user has fonts set to a different size or odd video settings the size of the object positioned may not be large enough to display the text. This can cause object to overlap making the page unreadable. It may sound as if I'm just trying to hang on to the old way of doing things, and there may be a bit of truth in that, but more I'm asking for valid reasons to change the way I do things. I actually like finding new ways of doing things but there has to be a benefit to it. How will swithing to CSS layout instead of tables make my pages better for my users or easier to develop and maintain for me? I look forward to your responses. |
|||||||