|
CSS - Control Bg Color In A Dropdown?
Hi there,
Check out this screen shot: ...okay, I guess I can't attach a shot or paste a URL to the shot.. I'm using a hoverstate on a dropdown of orange with reverse text - I'm able to get both the background and the text to do what I want but I can't seem to control the WIDTH of the background. Here's where I'm controlling that backgound (orange) behind the dropdown items. #nav ul li a:hover { text-decoration:none; background-color:#d3862a; color: #ffffff; height: 15px; width: 100%; padding: 0px; margin: 0px; display:block; does anyone out there have any ideas? THANKS SO MUCH! Similar TutorialsHi, I am at this point too tired to continue to search for my answer, so I am going to just ask... I would like to be able to control the color and underlining of the links in the unordered list. This list will appear on every page in the site. I am not sure what the CSS code is or in which class/id to place it in my css file. the page code is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="nav.js" type="text/javascript"></script>
<title>Natura Culina :: Welcome</title>
</head>
<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()" bgcolor="#D89607">
<div class="allcontent">
<div id="header">
<ul id="navigation">
<li><a href="index.php">home</a></li>
<li><a href="products.php">products</a></li>
<li><a href="ingredients.php">ingredients</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="testimonials.php">testimonials</a></li>
<li><a href="links.php">links</a></li>
</ul><!---end navigation--->
</div><!-- end header -->
<div class="textArea">
<p align="center"><span class="header1">Welcome to
Natura Culina Organic Skin Care </span></p>
<p><br />
<img src="/images/all229.jpg" width="367" height="233" align="left" class="left" /><span class="bodyBold">Natura
Culina</span> creates luxurious skin care products that will appeal to your
senses, inspired by skin care traditions used at centuries old European
Spas.</p>
<p>We are <em><span class="bodyBold">so over</span></em> using chemical
solutions for our skin problems because they are so unsatisfactory.<br>
We are <em><span class="bodyBold">so back</span></em> to feeding
our skin with natural ingredients, oils, vitamins and antioxidants.</p>
<p>All the oils used in our products are cold pressed and certified
organic. All our ingredients are carefully blended to create effective,
nourishing and natural products for your skin. All body products
are made after placing an order to assure freshness. </p>
<p> </p><p> </p><p> </p>
<p align="center"><em><span class="bodyBold">Start loving your skin
again with Natura Culina Food For Your Skin.</span></em></p>
</div><!---end contentBGColor--->
</div><!---end allcontent--->
</body>
</html>
and the CSS sheet code is this: Code: body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #D89607;
}
#body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #E1A21A;
}
.allcontent {
width: 736px;
margin-left: auto;
margin-right: auto;
border: thin dotted;
margin-top: 10px;
}
#header {
background-image: url(/images/banner1.jpg);
background-repeat: no-repeat;
height: 260px;
margin-top: -18px;
}
.textArea {
background-color: #E1A21A;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#navigation li {
float: left;
list-style: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 240px;
}
#navigation {
font-size: 16px;
font-weight: bold;
color: #fff;
}
img.left {
padding: 0px 10px 0px 0px;
float: left;
}
.header1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.bodyBold {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
}
.itemBorder { border: 1px solid #73090E }
.itemText { text-decoration: none; color: #F3F7FD; font: 14px Arial, Helvetica }
.itemTextHeaders { text-decoration: none; color: #E6EBF2; font: bold normal 13px Verdana, Arial, Helvetica, sans-serif}
Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! I want to use the following script found here. I want to alter it so that on rollover a DIV is shown instead of the IMG. Within the DIV will be the IMG and some copy. I have tried to do this but always end up with the rollovers not placing correctly, or the copy shows at all times. Thanks for the suggestions and help. Hello everybody, I not an expert in CSS but getting better at it. I'm trying to control the look and feel of a table but its not working. Any help you can give me would be greatly appreciated. <div id="page-container"> <div class = "data_table"> have the table all setup and some css works and some done. </div> </div> Quote: <body> <div id="page-container"> <div class = "data_table"> <table width="760" border="1" cellpadding="0" cellspacing="0"> <tr> <th> Ticket # </th> <th> Description </th> <th> Created </th> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.yahoo.com/');"> <td> 473875 </td> <td> unable to install network card </td> <td> Dec.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.microsoft.com/');"> <td> 474723 </td> <td> Need help setting up my router </td> <td> sept.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://Imar.Spaanjaars.Com/');"> <td> 463175 </td> <td> Need microsoft word training</td> <td> Jan. 07.08 </td> </tr> </table> </div> </div> from external css file Quote: #data_table .table { border: 1px solid black; border-bottom: 1; border-left-style: solid; } #data_table .th { border: 1px solid black; border-bottom: 1 solid black; background: lightgreen; } #data_table .td { border-bottom: 1px solid black; border: 1; } Hi I am making a website where i have a main heading on all pages' start. I want to control its looks with CSS, i have an external CSS that controls links and body text etc. i have tried in external CSS Code: H2 {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFCC99;
}
and on pages i use <h2> heading is here </h2> but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet. Please shed some light on this... thanks Can I use CSS or javascript to control the page details of an IFRAME? Such as printing in landscape orientation? If it is possible, how? Hi I have the html below and I only want to display the "initial text" and the "some more text" bits of text. Is this possible using only CSS without any modifications to the html e.g. adding id's ? <div id="snav"> <p><span id="somespan">You are he <a title="home page" href="/content/index.html">Home</a> <a href="http://www,saving.com">initial text here </a><br />Some more Text here.</span></p> </div> thanks. G Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> Hello I am looking for the correct way to control the alignment of elements in my HTML page. in the old days, I used to add the <center> tag whenever I wanted to center some content. if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center"> I also noticed the CSS rule text-align. My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules regards Hello I know that on IE I can control the look of the scrollbar via: * scrollbar-face-color * scrollbar-highlight-color * scrollbar-shadow-color * scrollbar-3dlight-color * scrollbar-arrow-color * scrollbar-track-color * scrollbar-darkshadow-color Is it possible to control its look also in Firefox 1.0 and Opera 7.54? regards Hello I have the following CSS rule for some text: .Text { font-size:13; color:#2C506A; font-weight:bold; } When the browser renders it, it uses anti-aliasing to give it a better look. I am interesting in displaying the same text without anti-aliasing. Is this possbile via CSS? is there a way to tell the browser to not anti-alias the text? If so, how? regards I'm loading a pdf document into my html document through an iframe. The document it is being embedded into is a layer that acts like a popup window who's width and height can be adjusted by dragging the window. I'm trying to have the iframe maintain 100% height, but can't seem to get it. <div style="height:350px;"> <iframe src="test.php" height="100%" width="100%"></iframe> </div> Now if I change the height from 350 to 100% on the div element, the iframe will resize to fit to 100% as the window is resized. However the downside to this is that when the iframe initially loads it's only about 50px in height. Suggestions on how to both maintain 100% and initialize at a fixed width? Hi, I not very good at CSS and I need to create a page that shows divs in other order that are in the script: in my page i want to be something like this: Code:
<body id="body" >
<div id="bodyHolder" >
<div id="mainHolder" >
<div id="mainColumn">Here will be the main content</div>
<div id="leftColumn" > Left Column</div>
</div>
<div id="topLogoHolder">Site Logo</div>
<div id="topMenuHolder" > Top Menu</div >
</div>
<div id="footerHolder"> Footer</div>
</div>
but I want to show: Site Logo, Top Menu, Left Column, Main Column, Footer My problem is with Footer. I can't get to position at the bottom of page (not at the window) because the Main Column is not fixed. The CSS code is : Code:
body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;}
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px; width:810px;}
#leftColumn {text-align:left; display:block; float:left; width:180px; }
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block; position: absolute; bottom:0px; height:100%; clear:both;}
I really don't what to try (google gives me no clue... all my attempts failed ) I'll appreciate any help! Thanks a lot in advance Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code:
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 15px;
}
#header {
clear: both;
}
#topmenu {
width: 100%;
height: 30px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 20px;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
clear: both;
}
#topmenu a {
width: 150px;
height: 28px;
color: #ffffff;
background-color: #990000;
text-align: center;
text-decoration: none;
border-right: 1px solid #ffffff;
padding-top: 2px;
float: left;
}
#topmenu a:hover {
width: 150px;
color: #990000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border-right: 1px solid #990000;
float: left;
}
#body {
color: #000000;
background-color: #ffffff;
margin: 10px 0px 10px 0px;
clear: both;
}
#footer {
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
border-top: 2px solid #990000;
padding-top: 5px;
clear: both;
}
#footer a {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: underline;
}
#leftmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-right: 0.5%;
float: left;
}
#contents {
color: #000000;
background-color: #ffffff;
width: 58.5%;
padding-left: 0.5%;
padding-right: 0.5%;
float: left;
}
#rightmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-left: 0.5%;
float: right;
}
.contentbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.menubreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.footerbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 2px;
clear: both;
}
.menutoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.contenttoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.menu {
width: 100%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
float: left;
}
.menu a {
width: 98%;
height: 19px;
color: #000000;
background-color: #eeeeee;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menu a:hover {
width: 98%;
height: 19px;
color: #ffffff;
background-color: #990000;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menucontent {
width: 96%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.menucontent a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.menucontent a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.subcontentright {
color: #000000;
background-color: #ffffff;
text-align: right;
}
.content {
width: 98%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5px;
float: left;
}
.content a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.content a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.input {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 13px;
}
.menuformcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
.menuformsubcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
clear: both;
}
.menuformlabels {
color: #000000;
background-color: #ffffff;
width: 50%;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.menuformfields {
color: #000000;
background-color: #ffffff;
width: 48%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2%;
float: left;
}
.menuformsubmit {
color: #000000;
background-color: #ffffff;
width: 100%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help. single page site is here "petermarsphotography dot com" Hello people I have a silly style-related question I am trying to render a simple HTML table The table has 2 rows on its left column and one cell on its right column (rowspan = 2) What I am trying to do is to cause the top-left cell to have a fixed height, and to give the remaining height to the cell below it (in the same column). This should work no matter how tall is the table Here is my snippet: Code: <html> <body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="45" valign="top" style="padding-right:5px; padding-top:5px;"><img src="graphic.jpg" width="30" height="40" style="border:1px solid red;"></img></td> <td width="99%" rowspan="2" valign="top" style="padding-bottom:5px;">This<br> is<br> the<br> content<br> of<br> the<br> text<br> on<br> the<br> right</td> </tr> <tr> <td width="50" style="padding-bottom:5px;" valign="top">text under photo</td> </tr> </table> </body> </html> The code behaves correctly when viewed in Firefox 1.5 (see attachment screenshot) but when viewed in IE6.0, the top-left cell seems to ignore my height request... any help would be appreciated i made a nice pop up div with object details. when i control scroll and resize the browser contents everything follows except this pop up div. so the content inside explodes or shrinks where the actual div height and width stay the same. what have you guys done to fix this? thanks |
|||||||