|
CSS - <li> Class Not Styling Properly
I am creating a flyout menu with css that uses unsorted lists in its structure. I have each <ul> take a class that defines several style options, such as color, border, etc., as well as a different style when the mouse hovers over. For specific pages, I want a specific <li> entry to retain the hover-over state at all times. How can I do this? Here's my CSS:
Code:
.menu, .menu ul li {
color: #ffffff;
background: #000000;
}
.menu {
width: 137px;
}
.menu ul {
width: 83px;
}
.menu a {
text-decoration: none;
color: #eee;
padding: .1em .1em;
display: block;
}
.menu a:hover, .menu li:hover>a {
color: #000000;
background: #ffffff;
}
.menu li:hover{
border-top: 1px solid #000000;
}
and here's the html Code:
<ul class="adxm menu">
<li class="current"><a href="http://www.aplus.co.yu/" title="Digital Work - Non-Design">digital</a>
<ul>
<li><a href="http://www.aplus.co.yu/">retouching</a></li>
<li><a href="http://www.aplus.co.yu/feeds/">manipulation</a></li>
</ul>
</li>
<li><a href="http://www.aplus.co.yu/adxmenu/" title="Design Work">design</a>
<ul>
<li><a href="#">packaging</a></li>
<li><a href="http://www.aplus.co.yu/adxmenu/">print</a></li>
<li><a href="http://www.aplus.co.yu/adxmenu/instructions/">motion</a></li>
</ul>
</li>
<li><a href="http://www.aplus.co.yu/wch/" title="Illustrations">illustration</a>
</li>
<li><a href="http://www.aplus.co.yu/lab/" title="About Me/Contact">about</a>
</li>
</ul>
</div>
I want the first <li> to retain the hover state style properties at all times when on this page to indicate that the user is on the "digital" page. Is there any way to do this? Similar TutorialsI am trying to add sub navigation to my footer area. I tried codes below but didnt work. http://www.pearl.ru/isdunyasi/ #footer { width:800px; font-size:10px; color:#aaaaaa; } #footer .navigation{ width:800px; background:#aaaaaa; } #footer .navigation li{ float:left; list-style-type:none; border-right:1px solid #ffffff; white-space:nowrap; } #footer .navigation li a{ display:block; padding:0 5px; font-size:12px; text-transform:uppercase; color: #FFFFFF; } #footer p { padding:0; margin:0; text-align:center; } hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: 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=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
I see that layout on my site is completely broken in IE7... funnyfurniture.net Could anybody help me to fix my css... Hi, my xml code is: <room> <features> <pool/> <Aircon/> <Radio/> <DVD/> <beds double="2"/> </features> </room> <room> <features> <pool/> <TV/> <VCR/> <beds twin="1" double="2"/> </features> </room> i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list. This is the code i have so far: features{ } features:before { content:"Features"; font-weight:bold; } beds:before{ content:"Beds: "; } beds[sofa-bed]:after{ content:attr(sofa-bed)" x Sofa-bed "; } beds[double]:after{ content:attr(double)" x Double "; } beds[twin]:after{ content:attr(twin)" x Twin "; } The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed. Any idea's? Hi Guys, Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table. All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad. I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this? Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table? Charlie I have a menu constructed <div><ul><li><a><img><p>. The li is margined as 16% to space a given number of links across the page in the 100% div. I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work. Any ideas how I can get the <a> border to surround the <img><p> tags? I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet. The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page. Bottom of the Page http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/ The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code. One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags. The following class style did not produce the <textarea> desired attributes. Code:
pre.CodeExample {
/*background-color: transparent;*/
border: medium inset #CCCCCC;
font-family: "Courier New", Courier, monospace;
margin: 1em 2em 1em 2em;
overflow: auto;
padding: .5em .5em .5em .5em;
white-space: nowrap;
}
Please let me know what are the default CSS attributes for the <pre> and <textarea> tags. Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link. http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed. div.ExampleOutput pre.CodeExample Hello all, need a little help on a small link styling issue I am having. I am using the following style for links with the target="_blank" attribute, and it is working fine, but it is also applying itself to images that are linked with the _blank attribute: Code: article.post a[target~="_blank"],
article.post a[target~="_blank"]:visited {
background:url(/Images/web/template/body2alt/external.png) center right no-repeat;
padding-right: 12px;
color: #0066CC;
text-decoration:underline;
}
Is there another line I can add to my CSS file so it will only apply this style to text and not images? I tried the following, but it didn't help: Code: article.post img a[target~="_blank"],
article.post img a[target~="_blank"]:visited {
background:none;
padding:0;
}
Thanks for any help you can offer. I have a CSS table that is rendering well with no problem in IE browser but it is skipping three rows in the Firefox browser. I can't figure out why it is skipping those three rows which are rows 2, 4, 8. Here's the code: Code: <body>
<div align="center"><link href="../css/theme2.css" rel="stylesheet" type="text/css">
<tbody><tr>
<td style="background-repeat: no-repeat;" background="/images/chart-header.jpg" height="44"><table width="720" border="0" cellpadding="8" cellspacing="0" height="34">
<tbody><tr>
<td class="chart_head border" width="150" height="34">PROVIDER<span class="provider border">your name here</span></td>
<td class="chart_head border" width="53">PRICE</td>
<td class="chart_head border" width="98">SPACE</td>
<td class="chart_head border" width="150">HOSTING BONUSES</td>
<td class="chart_head border" width="98">REVIEWS</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 1 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150"> </td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" />free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!---- Row 2 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$1.98</td>
<td class="space border" width="98">1GB</td>
<td class="bonuses border" width="150"><img src="/images/support.png" alt="hosting support" width="16" height="16" />customer support<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" /> free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 3 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$1.99</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/support.png" width="16" height="16" />customer support<br><img src="images/panel.png" width="16" height="16" />easy control panel</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!------ Row 4 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/computer.png" alt="free domain" width="16" height="16" /> free domain & setup<br><img src="/images/software.png" width="16" height="16" /> free website builder<br><img src="images/support.png" width="16" height="16" />customer support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 5 ------->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$2.49</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/video.png" alt="video hosting" width="16" height="16" />FFMPEG hosting<br><img src="/images/computer.png" width="16" height="16" /> free website transfers<br><img src="images/support.png" width="16" height="16" />customer support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!------ Row 6 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/support.png" width="16" height="16" />24/7 Tech Support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 7 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.49</td>
<td class="space border" width="98">150 GB</td>
<td class="bonuses border" width="150"><img src="/images/transfer.png" alt="transfer" width="16" height="16" />unlimited traffic<br><img src="/images/software.png" width="16" height="16" />website builder<br><img src="images/shopping_cart.png" width="16" height="16" />eCommerce software</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 8 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.50</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/security.png" width="16" height="16" /> free security suite <br><img src="images/computer.png" width="16" height="16" /> free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 9 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$6.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/software.png" alt="website builder" width="16" height="16" /> free site builder<br><img src="/images/coins.png" width="16" height="16" /> $50 free Ad Credits<br><img src="images/computer.png" width="16" height="16" />free domain with signup</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 10 ---->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/battery.png" width="16" height="16" /> critical data backup<br><img src="images/computer.png" width="16" height="16" /> free domain</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
</body>
</html>
</body>
Hi, Im trying to style the button tags, mainly to obtain rounded corners, using images. I can't use '<a>' links to style, which would be simpler, as the button is being used for a program written specifically to use button tags. I have the button working in IE 5, 8 and 9 and firefox but other incarnations do not. body { behavior:url( hover.htc ); } Code: /* REQUIRED BUTTON STYLES: */
button {
position: relative;
color:#000000;
border: 0;
padding: 0;
cursor: pointer;
overflow: visible; /* removes extra side padding in IE */
outline: 0;
}
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button span {
position: relative;
display: block;
white-space: nowrap;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Google Chrome only - fix margins */
button span {
margin-top: -1px;
}
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
button.submitBtn {
padding: 0 15px 0 0;
margin-right:5px;
font: normal 12px Tahoma;
color:#000000;
text-align: center;
background: transparent url(btn_sprite2.gif) no-repeat right -140px;
}
button.submitBtn span {
padding: 3px 0 7px 15px;
height:15px;
background: transparent url(btn_sprite2.gif) no-repeat left top;
color:#000;
}
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
background-position: right -210px;
}
button.submitBtn:hover span, button.submitBtnHover span {
background-position: 0 -70px;
}
button.submitBtn:active, button.submitBtnActive { /* the redundant class is used to apply the hover state with a script */
background-position: right -140px;
}
button.submitBtn:active span, button.submitBtnActive span {
background-position: left top;
}
Code: <button value="submit" class="submitBtn"><span>Submit</span> The above is the method i have used so far. Does anyone know how i could improve on this, or another method that maybe beneficial? Any help will be appreciated. Cheers. Trying to match up http://kansasoutlawwrestling.com/v3/index.html from http://kansasoutlawwrestling.com/v3/wrestling2.jpg . Trying to figure how what I should do for css styling for the poll in the bottom right and see what others thing about how that right div looks in general. Hi I wonder if you can help me im just doing some stuff with css as practice and need to know about table bordering basically i can border the intire table and all the cells but i just want to be able to put a border around the rows not the individual cells but the rows in the table Hello, I am trying to style my form inputs, textareas and selects as follows: input, select, textarea { border: solid 6px #ECF0F9; color: #252525; font: normal 0.75em Verdana, Geneva, sans-serif; padding: 0.25em; width: 520px; } I am having a few problems: Firefox 3: 1. The select is narrow than the inputs and textareas; 2. When I click the select the dropdown borders look different ... some are thinner than others. IE 7: 1. The select is narrow than the inputs and textareas; 2. The border of the select is not changed. What am I doing wrong and how can I make the appearance of a Select look the same across various browsers? Can I do this with JQuery? Thanks, Miguel Hi Guys, I'm getting a weird formatting problem with IE. I'm trying to create an H2 element, and it's working fine in Chrome and FF. But in IE, it's all spaced out. For the life of me I can't figure out why. Check out this link in IE and FF (or chrome) http://details.at/h2_test.cfm In FF/Chrome, it looks right. Title, underlined, and a button floated to the right. They are all level. in IE, it seems to push the button below the title text, but then floats it to the right. Here's the code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<STYLE>
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #146eb4;
font-size: 1.2em;
width:100%;
}
.h2_button
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
float:right;
margin: 0 0 0 0;
}
</STYLE>
<title>Untitled</title>
</head>
<body>
<div id="content">
<H2>This is a test <INPUT class="h2_button" type="submit" name="Go" value="Create"></H2>
<P>brown fox jumps over fat piggie</P>
</div>
</body>
</html>
Hi folks. I need some help with css. I have a wordpress template that has a thumbnail populated on a home page. The problem is that it looks like this: URL http://i55.tinypic.com/aoulhf.png and what I would like it to look like is this : URL http://i55.tinypic.com/2wd22r8.png And the code of the page is he Code:
<strong><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></strong><br>
<?php get_the_image( array( 'image_scan' => true,'width' => '75', 'height' => '75' ) ); ?><?php the_content_limit(80, ""); ?>
I know I should use DIV tags and css but I don't know how. Please ,anybody help. Thanks Hello, I have built a new navigation system for this website I'm rehabbing. Please note that the new navigation is only currently installed on the Newsroom section. I used this method (as was suggested by several people in this forum). I'm new to this method so now I need some help. The menus appear to be working but I would like some help with styling these so they look awesome. Here is a list of things I'd like to do (help with any or all of these would be appreciated): 1. I'd like to add a small border around the drop-down menu without adding a border to the img buttons I have. These images fit perfectly in the Navigation div and if a border is added around each one, the Resource button goes to a second line... very undesirable. 2. Is there a way to widen the drop-down menus? As you can see, most of the categories in each menu don't fit on one line. 3. I also is there a way to add a hover background color to the links? Thank you for your insight! I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size).. Is there an easy way to do this? for example http://member.classifieds.com/userjoin.php the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this. Hi is there anyway of making the height of the textbox smaller. I know you an change the width of it Thanks |
|||||||