|
CSS - Alternating Row (tr) Colors
I see that CSS3 will finally have support for this, but I thought I'd stumbled upon support in CSS1 or CSS2(.1) also. I even printed it out, though I can't find it now.
Does anyone know how to alternate row colors in CSS2.1 without resorting to tr.row1 and tr.row2 or scripting? Similar TutorialsHi, I am trying to alternate 2 images for posts at a forum(in phpbb2) and i've applied the classes but it doesn't seem to take effect Here's the CSS : Code: /*
The original RockstarVO Theme for phpBB version 2+
Created by TK Creationz
*/
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #EDE4DB;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif; }
a:link,a:active,a:visited { color : #0099FF; }
a:hover { text-decoration: underline; color : #DD6900; }
hr { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}
/* This is the border line & background colour round the entire page */
.bodyline { background-color: #EDE5DB; border: 1px #98AAB1 solid; }
/* This is the outline round the main forum tables */
.forumline { background-color: #F2EFE9; /* border: 2px #006699 solid; */ }
/* Main table cell colours and backgrounds */
td.row1 { background-color: #E8E8E8; }
td.row2 { background-color: #D8D8D8; }
td.row3 { background-color: #E0E0E0; /*#D1D7DC;*/ }
/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: #0099FF;
background-image: url(images/Top_middle.jpg);
background-repeat: repeat-x;
}
/* Header cells - the blue gradient backgrounds */
th {
color: #000000; font-size: 11pt; font-weight : bold;
background-color: #D0D0D0; height: 25px;
/* background-image: url(images/Top_middle.jpg); */
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/Top_middle.jpg);
background-color: #0099FF;
background-repeat: repeat-x;
}
td.catBorder {
border-top: solid #0099FF 10px;
background: transparent;
}
td.catBMiddle {
background-image: url(images/Bottom_middle.jpg);
background-color: #0099FF;
background-repeat: repeat-x;
}
/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; background-color: #D0D0D0; height: 28px; }
/* the last 3 rows */
td.row3Right,td.spaceRow {
background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }
th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }
/* Post borders and corners */
td.postVerLCorners {
background-image: url("images/Post_left.gif");
background-repeat: repeat-y;
background-position: right;
padding: 0;
}
td.postVerRCorners {
background-image: url("images/Post_right.gif");
background-repeat: repeat-y;
background-position: left;
padding: 0;
}
td.postHorTCorners {
background-image: url("images/Post_top.gif");
background-repeat: repeat-x;
background-position: bottom;
padding: 0;
}
td.postHorBCorners {
background-image: url("images/Post_bottom.gif");
background-repeat: repeat-x;
background-position: top;
padding: 0;
}
/* Post table fill color */
td.posttdColor {
background-color: #F3EDE5;
}
th.postthColor {
background-color: #F3EDE5;
}
.postColor {
background-color: #F2EFE9;
}
td.postColorRow1 {
background-color: #F2EFE9;
background-image: url("images/03.png");
background-position: bottom right;
background-repeat: no-repeat;
}
td.postColorRow2 {
background-color: #F2EFE9;
background-image: url("images/09.png");
background-position: bottom right;
background-repeat: no-repeat;
}
/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2 {
font-weight: bold; font-size: 20px; font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #000000;
}
/* General text */
.gen { font-size : 12pt; }
.genmed { font-size : 10pt; }
.gensmall { font-size : 10pt; }
.gen,.genmed,.gensmall { color : #585858; }
a.gen,a.genmed,a.gensmall { color: #0099FF; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #00CCFF; text-decoration: underline; }
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #006699; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }
/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.cattitle { text-decoration: none; color : #FFFFFF; }
a.cattitle:hover{ text-decoration: underline; color: #FF6600; }
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 10pt; color : #0099FF; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #43C6DB; }
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }
/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #000000;}
/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; }
/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}
/* Quote & Code blocks */
.code {
font-family: Arial, Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
/* Copyright and bottom info */
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}
/* Form elements */
input,textarea, select {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
}
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF;
}
input { text-indent : 2px; }
/* The buttons used for bbCode styling in message post */
input.button {
background-color : #EFEFEF;
color : #000000;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The main submit button option */
input.mainoption {
background-color : #FAFAFA;
font-weight : bold;
}
/* None-bold submit button */
input.liteoption {
background-color : #FAFAFA;
font-weight : normal;
}
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: #DEE3E7; border-style: none; }
/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");
Here's the view_topic_body.tpl code : PHP Code: <link href="Rockstar02.css" rel="stylesheet" type="text/css" /> <table width="100%" cellspacing="2" cellpadding="2" border="0"> <tr> <td align="left" valign="bottom" colspan="2"><a class="maintitle" href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a><br /> <span class="gensmall"><b>{PAGINATION}</b><br /> </span></td> </tr> </table> <table width="100%" cellspacing="2" cellpadding="2" border="0"> <tr> <td align="left" valign="middle" width="43%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}" class="nav">{FORUM_NAME}</a></span></td> <td width="8%" align="right" valign="middle" nowrap="nowrap"><span class="nav"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" align="middle" /></a> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a></span></td> </tr> <tr> <td align="right" valign="middle" width="100%" colspan="2"><span class="nav"><a href="{U_VIEW_OLDER_TOPIC}" class="nav">{L_VIEW_PREVIOUS_TOPIC}</a> :: <a href="{U_VIEW_NEWER_TOPIC}" class="nav">{L_VIEW_NEXT_TOPIC}</a> </span></td> </tr> </table> <table width="145%" cellspacing="0" cellpadding="0" border="0"> <tr align="right"> <td class="catHead" width="20" align="left" valign="top"><img src="templates/myfs_trupti2/images/Top_blueLeft.jpg" width="11" height="44" /></td> <td height="44" colspan="2" align="left" valign="middle" class="catHead"> <a class="cattitle" href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></td> <td class="catHead" height="44" align="left" valign="top"><img src="templates/myfs_trupti2/images/Top_blueRight.jpg" width="20" height="44" align="right" valign="top" /></td> </tr> <tr align="right"> <td height="20" colspan="4" align="left" valign="top" style="background: transparent;"> </td> </tr> {POLL_DISPLAY} <!-- BEGIN postrow --> <tr> <td class="postVerLCorners" nowrap="nowrap" width="20" align="right" valign="bottom"><img src="templates/myfs_trupti2/images/Post_TopLeftCorner.jpg" width="20" height="20" align="right" valign="bottom" /></td> <td class="postHorTCorners" nowrap="nowrap" height="20" width="150" align="right" valign="bottom"></td> <td height="20" colspan="1" nowrap="nowrap" class="postHorTCorners"> </td> <td nowrap="nowrap" width="20" height="20" align="left" valign="bottom"><img src="templates/myfs_trupti2/images/Post_TopRightCorner.jpg" width="20" height="20" align="left" valign="bottom" /> </td> </td> </tr> <tr> <td width="20" class="postVerLCorners"> </td> <td class="posttdColor" width="150" height="200" align="left" valign="top"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span><br /></td> <td class="{postrow.ROW_CLASS}" width="100%" height="28" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="posttdColor" width="100%"><a href="{postrow.U_MINI_POST}"><img src="{postrow.MINI_POST_IMG}" width="12" height="9" alt="{postrow.L_MINI_POST_ALT}" title="{postrow.L_MINI_POST_ALT}" border="0" /></a><span class="postdetails">{L_POSTED}: {postrow.POST_DATE}<span class="gen"> </span> {L_POST_SUBJECT}: {postrow.POST_SUBJECT}</span></td> <td class="posttdColor" valign="top" nowrap="nowrap">{postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}</td> </tr> <tr> <td class="posttdColor" colspan="2"><hr /></td> </tr> <tr> <td class="{postrow.ROW_CLASS}" height="200" align="left" valign="top" colspan="2"><span class="postbody">{postrow.MESSAGE}{postrow.SIGNATURE}</span><span class="gensmall">{postrow.EDITED_MESSAGE}</span></td> </tr> </table></td> <td class="postVerRCorners" width="20"> </td> </tr> <tr> <td class="postVerLCorners" width="20"> </td> <td class="posttdColor" width="150" align="left" valign="middle"><span class="nav"><a href="#top" class="nav">{L_BACK_TO_TOP}</a></span></td> <td class="posttdColor" width="100%" height="28" valign="bottom" nowrap="nowrap"><table cellspacing="0" cellpadding="0" border="0" height="18" width="18"> <tr> <td class="posttdColor" valign="middle" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG}<script language="JavaScript" type="text/javascript"><!-- if ( navigator.userAgent.toLowerCase().indexOf('mozilla') != -1 && navigator.userAgent.indexOf('5.') == -1 && navigator.userAgent.indexOf('6.') == -1 ) document.write(' {postrow.ICQ_IMG}'); else document.write('</td><td class="posttdColor"> </td><td class="posttdColor" valign="top" nowrap="nowrap"><div style="position:relative"><div style="position:absolute">{postrow.ICQ_IMG}</div><div style="position:absolute;left:3px;top:-1px">{postrow.ICQ_STATUS_IMG}</div></div>'); //--></script><noscript>{postrow.ICQ_IMG}</noscript></td> </tr> </table></td> <td class="postVerRCorners" nowrap="nowrap" width="20"> </td> </tr> <tr> <td class="postVerLCorners" width="20" height="20" align="right" valign="top"><img src="templates/myfs_trupti2/images/Post_BottomLeftCorner.jpg" width="20" height="20" align="right" valign="top" /></td> <td class="postHorBCorners" align="left" valign="middle"> </td> <td class="postHorBCorners" height="20" valign="bottom" nowrap="nowrap"> </td> <td class="postVerRCorners" nowrap="nowrap"><img src="templates/myfs_trupti2/images/Post_BottomRightCorner.jpg" width="20" height="20" align="left" valign="top" /></td> </tr> <tr> <td colspan="4" height="10" border="10"> </td> </tr> <!-- END postrow --> <tr align="center"> <td class="catBottom" colspan="4" height="28"><table cellspacing="0" cellpadding="0" border="0"> <tr><form method="post" action="{S_POST_DAYS_ACTION}"> <td align="center"><span class="gensmall">{L_DISPLAY_POSTS}: {S_SELECT_POST_DAYS} {S_SELECT_POST_ORDER} <input type="submit" value="{L_GO}" class="liteoption" name="submit" /></span></td> </form></tr> </table></td> </tr> </table> <table width="100%" cellspacing="2" cellpadding="2" border="0" align="center"> <tr> <td align="left" valign="middle" nowrap="nowrap"><span class="nav"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" align="middle" /></a> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a></span></td> <td align="left" valign="middle" width="100%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}" class="nav">{FORUM_NAME}</a></span></td> <td align="right" valign="top" nowrap="nowrap"><span class="gensmall">{S_TIMEZONE}</span><br /><span class="nav">{PAGINATION}</span> </td> </tr> <tr> <td align="left" colspan="3"><span class="nav">{PAGE_NUMBER}</span></td> </tr> </table> <table width="100%" cellspacing="2" border="0" align="center"> <tr> <td width="40%" valign="top" nowrap="nowrap" align="left"><span class="gensmall">{S_WATCH_TOPIC}</span><br /> <br /> {S_TOPIC_ADMIN}</td> <td align="right" valign="top" nowrap="nowrap">{JUMPBOX}<span class="gensmall">{S_AUTH_LIST}</span></td> </tr> </table> Here's the link to my forum : My Forum P.S: when i refresh the topic page on the site and 'View Source' it does show that the classes(postColorRow1 & postColorRow2) set for the background image change are alternating, but CSS does not take effect. Please help. Help please! I'm trying to apply css to my source to position div elements in alternating columns like this: stuff1 stuff2 stuff3 stuff4 [etc.] My source looks like this: <div id="container"> <div class="item">stuff1</div> <div class="item">stuff2</div> <div class="item">stuff3</div> <div class="item">stuff4</div> [etc.] </div> I've been able to do this by applying styles like this: #container{ width:250px; } .item{ width:100px; height:100px; margin-right:10px; float:left; display:inline; } But there's a problem. Because all of the elements in #container are floated, the #container div has no height. So any content that's placed after #container in the source overlaps with the items (like the footer I need to add to the page). And unfortunately I cannot add a height to #container because the number of items within it are variable (and so the height is variable). I could apply alternating styles to the item divs and I can add <br/> tags and stuff within the code. I just cannot easily reorder the items in the source. I'd love some help with this. Good karma. Thanks, Bob I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color. What could be the cause of this? Thanks. wait, i just figured out that its the image that is a different color... so my new question is, why? hello everyone, I can't get colors to show in firefox for the life of me. I have this used by a javascript mutliple times and need different colors. Help please, let me know if you need more info. Code: .signalButton{
width:80px;
height:4;
background-color: #0066FF;
}
Thank You, Wasim I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this? thanks Suppose I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer_div {
width: 800px;
height: 300px;
background-color: red; }
.interior { background-color: #ffffff; }
</style>
</head>
<body>
<div id="outer_div">
<div class="interior">
<p>Hello I am some text. </p>
<p>How are you today?</p>
<p>Would you like some waffles?</p>
</div>
</div>
</body>
</html>
The way this appears in FireFox (I haven't tested in other browsers yet) is that the 3 lines print on a white background that spans the width of the browser and then sits on top of the red background. The way that I would like it to appear is for the white background to extend only as far as the longest line. Also, I can't assume that it will only be paragraph tags, it may be links, images, headers, lists, well anything. My question is how can I achieve this? Basically I don't want the inner div to automatically be as wide as the outer div but only as wide as it needs to be. Hi, Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website? Thanks Excuse me but i am a little thick on this one: How do I create different colored link style for say a: 1. navigation bar 2. footer bar 3. main body Does making classes make sense in this situation doug Hey everyone. I posted this in another forum, but we were unable to get the issue resolved, so I thought I would try posting here. I am having trouble getting some colors to work on my pages with CSS. I went through and made an index.html, in which I setup all my layout, graphics, colors, etc. I then took that and turned it into header.php and footer.php, with a new index.php file. My problem is that now when I upload up index.php to the server and go to view it, all the text formatting and layout of the page works fine, but the background, heading, link, etc. colors are just showing up as the defaults. The colors that I am working with are not from the websafe pallet, but I think that they are supported by most browsers (519A00, 5B4C34, 33435A, E5EDF9). Now that I think about it, it cant be browser support because it all works just fine in the index.html file. The link to the previous forum post is here There was a rather long discussion on possible causes there, but we never found a solution. I would really appreciate any help you may be able to offer. Thanks in advance, -Jonathan I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks! here's the url http://www.emotika.com/testing/test.htm here's the source 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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
}
.arrows{
margin: 0px 0px 2px 5px;
}
.headingrule{
margin-right: 3em;
margin-left: 1em;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
}
#maincontent{
margin-top: 1em;
margin-bottom: 1em;
margin-right: 200px;
}
.maincontentbox{
background-color: #F0F0F0;
border: 1px solid #CCCCCC;
margin-left: 3em;
margin-right: 3em;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px 8px;
}
#rightcontent{
position: absolute;
width: 200px;
top: 1em;
right: 0px;
padding: 5px;
border: 1px solid #CCCCCC;
}
#footer{
background-color: #F0F0F0;
clear: both;
}
#wrapper {
position: relative;
width: 100%;
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="maincontent">
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WELCOME...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WEEKLY SPECIALS...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<!--End Main Content Div-->
</div>
<!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} -->
<div id="rightcontent">
CONTACT INFO
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p> </p>
</div>
<!-- Footer Div Stretches Total Width -->
<div id="footer">
here's the footer
</div>
<!--End Wrapper Div -->
</div>
</body></html>
Hello all I need help please :-) I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working Code:
<style type="text/css">
body {
background-image: url(./images/pgbg.gif);
color: #000000;
/*the below link attributes does not work */
visited: color:#000000; text-decoration: none;
link: color:#000000; text-decoration: none;
focus: color:#000000; text-decoration: none;
active: color:#000000; text-decoration: none;
hover: color: #CC0000;
}
.header{
background-image: url(./images/header.png);
background-color:#E6E6E6;
position:absolute;
width: 900px;
height: 100px;
left: 50px;
top: 5px;
}
.navbox1{
/*General Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 115px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.navbox2{
/*Users Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 310px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.loginbox{
/*Login Box*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 400px;
padding-left: 5px;
}
.content{
background-color:#E6E6E6;
position:absolute;
width: 700px;
height: 455px;
left: 250px;
top: 115px;
padding-left: 10px
}
.footer{
position:absolute;
width: 700px;
left: 100px;
top: 585px;
color: #D6E7D3;
}
</style>
Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why. Here is my css its at bestinefight.net/memberlist.php Code: /* Memberlist */
#navcontainer {
width: 210px;
margin-left:109px;
}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}
#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}
#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}
#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}
#profile {
width:260px;
height:180px;
margin: 40px auto;
}
#memberlist {
width:250px;
height:300px;
float:left;
}
#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}
#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}
Here is the code for my page. Code:
<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>
<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>
<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>
</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>
I'm making a page and I've got an a:link specification. I want a separate specification for a part of the page under a .header tag. The background on that part of the page doesn't match the a:link color I have specified for the rest of the page. So I want one specifically for the .header tag. Doesn't seem to be working though. How do you think I should throw it in there? Hi guys I've this code, it looks fine in IE (damn..) but it does not look in Firefox Code:
body {
scrollbar-track-color: #D8AFAF;
scrollbar-face-color: #660000;
scrollbar-highlight-color: #927373;
scrollbar-3dlight-color: #663333;
scrollbar-shadow-color: #660000;
scrollbar-darkshadow-color: #660000;
scrollbar-arrow-color: #FF0000;
}
What's wrong ? - my Firefox version (1.0.1) - the css code ? thanks I've set-up a few link colrs in a style sheet - I see it working in mac IE, and Safari - but not IE in windows. Most of the formatting is being ignored. I'm going to try setting all attributes (link, visited, hover...) for each set but that seems like a reach. any ideas? the link: http://www.eightbyten.com/rc_store/shopcart_test.html the style sheet directly: http://www.eightbyten.com/rc_store/link.css Thanks! Hi. I have a form in a php script where among other fields the visitor picks a color from a select tag. I can manage the select list with the following code: <option style={background:red;} value=1>red</option> <option style={background:yellow;} value=1>yellow</option> ...and so on... but when I use the select to pick a color the browser highlights my selection using blue color. The problem is that this blue overwrites my color so the visitor can see all the other colors but not the one he is choosing ... Is there a way to control the highlighting color of the select tag? Sorry if this has been answered before... i couldn't find an answer... Greetings all. I am building a site which displays data in tables, with different background colors and different text colors. I am using CSS for everything, and it's working out great. Very happy with it so far. What I want to do, and can't seem to figure out, is link / visited colors. In each line of data, some of the columns are links. I want to set the link text color to the same as the non-link text color. I can override the text color easily enough. If I want a row to be white on red, I do that by saying: <tr style="background-color: #f00; color: #fff" >. I cannot figure out how to change a link color. The cells in the row that are links, I want to make them white on red also. Not just the default link color for the page. Any help would, of course, be greatly appreciated. Thanks, Tom I need to make a list of these movies in CSS, and I'm a bit of a noob.: Pulp Fiction The Matrix Lost In Translation V for Vendetta Fight Club It needs to have the following: *** a separate CSS document to be the style sheet *** horizontal lines and blank lines between items as described above *** assorted colors for different pieces of information *** class selectors to cause some pieces of information to be Underlined and/or in large type *** the enlarged first-letter effect *** a horiziontal line in an in-line style as described above *** an assortment of generic fonts Can someone help me out with this? I know its easy but I'm struggling with CSS. Thanks! Again I am new to CSS so bear with me here...I did search this forum before posting this... I am using a 3 column template, I am having some problems between the "#columns" with the heading <h*> of these columns. as long as each column has a differnt heading size all is well but if two columns have the same size heading I can't seem to be able to make them different colors hi all ! I have this code that defines a scroll table: Code: div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:975px;
font-weight: bold;
}
And this css that controls what should or shouldnt be printed. Code: @media print{
TH.noprint, TD.noprint, P.noprint, table.noprint
{
display: none;
}
}
@media print{
div.scrollingDiv{
height: auto;
width: 1000px;
vertical-align:middle;
font-size-adjust:
}
}
THe problem is that when I print the table the colors inside that table are not printed... I have no clue what it could be. Any idea is appreciated. THanks in advance! |
|||||||