|
CSS - Help Selecting A Class Specific
For example lets say I have this line of code and I want to select the userid in order to style a particular user on a site/forum.
<div class='username'>Test <span class='userid'>(223647)</span></div> How do I go about selecting the 223647 ID so I can assign it a specific style? Thank you in advance for any help. Similar TutorialsI have a unique problem: I am working inside of a content management system. This system uses tables EVERYWHERE. I need to place a simple border around the table (or tbody tag, which does define a style, but still no class, and covers the same area i'm looking to place the border around) defining the main body of the site. I cannot edit this table to use an id or a class, and unfortunately, unlike in the past, I cannot hijack this table's class because this is one where it is not defined. I have tried using Code:
<style type="text/css">
tbody[style]
{
border: 1px solid #000000 !important;
}
</style>
which works, but only in firefox, and not IE7, or Google Chrome. I'm guessing i've exhausted my options. But i'm not sure. Any help would be GREATLY appreciated. Also, I do hope i've explained what i'm trying to do clearly. I sometimes have a tendency to not clarify certain things as much as i should 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;
}
Hi, I've came across multiple menu css examples which uses <span> or <b> intermediate tags to select the text within an anchor. These tags, however, seem like a crutch which shouldn't be need. How would I select this text without using the intermediate tags? Code: <ul class="mymenu"> <li class="current"><a href="http://www.xyz.com/"><b>xyz</b></a></li> <li><a href="http://www.abc.com/"><b>abc</b></a></li> <li><a href="http://www.aaa.com/"><b>aaa</b></a></li> </ul> Thanks I have a web site using XHTML 1.0 Strict. The main body of the web pages is absolutely positioned 225px from the left, 100px from the top and is 750px wide. There is a banner and menu at the top and then another menu with links to the left. They are also absolutely positioned as well. I am using IE 6.0 as the main web browser since this is a corporate environment. The problem that I am having is that when I select text in the main body it either selects everything from the top down to the cursor or from the cursor to the end. I have troubleshot this and narrowed it down to the absolute positioning. It works fine in IE 7 with the absolute positioning. Does anyone know why this is happening and is there a work around for this? Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code: #content {
position:absolute;
width: 750px;
left: 225px;
top: 100px;
z-index: 500;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
background-color: #ECE9E2;
}
Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... Hey guys, I am taking a computer science class at the moment and haven't received much direction on what to do. I had to design an HTML website from scratch which wasn't hard but now I have to incorporate CSS into the website using an external stylesheet to edit the entire website. I need to recreate these things and am wondering what I should be doing, any help is extremely appreciated. It's a mock-business type website. Here I have to have the picture on the left, a vertical line, and a paragraph on the other side, all within a border. s1224.photobucket.com/albums/ee361/millihax/?action=view¤t=staff-outline.gif And here I have to make a table that looks exactly like this but without the "colour" column. s1224.photobucket.com/albums/ee361/millihax/?action=view¤t=staff-outline.gif#!oZZ1QQcurrentZZhttp%3A%2F%2Fs1224.photobucket.com%2Falbums%2Fee361%2Fmillihax%2F%3Facti on%3Dview%26current%3Dtable-outline.gif Again, anything anyone can do for me is greatly appreciated as I am completely lost with this section of the assignment. I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes. Hi, I'm trying to create a CSS for a specific table, not all tables, the following code uses the code I need: PHP Code: table { border-collapse:collapse; } table, th, td { border: 1px solid grey; padding:15px; } How can assign/rename this to say mytable, if I change the top 'table' to .mytable still all tables on my page are changed Thanks for any help. Sanj I have a site www.carrie-anne.co.nz just refer to index.asp It has 3 css. I have a problem with main.css The problem is minor, but annoying. It is to do with the lhs menu called menucontainer. The menu is a list and the rules applied to it are quite specific. Below menucontainer is contactcontainer and that too has specific rules. What happens is that I am getting the menu text underlined when I state that decoration:none; On further testing by commenting out rules ( so they don't render ) I find that rules for contactcontainer are over-riding menucontainers. Can anyone shed any light? It is driving me spare.. Here is the css file. Code:
body {
background-color: black;
background-image: url(web_images/layout/carriebackground.jpg);
background-repeat: no-repeat;
background-position: left top;
padding: 0px;
margin-left: 80px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-attachment: fixed;
}
#container {
width: 800px;
}
#taglinecontainer {
width: 410px;
padding: 0px;
margin-left: 380px;
}
h1#carrieheadingmodelling {
background-image: url(web_images/layout/modelling.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 30px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingacting {
background-image: url(web_images/layout/acting.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 32px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingpromotional {
background-image: url(web_images/layout/promotional.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 39px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingtop {
background-image: url(web_images/layout/carrie_anne_freeman.gif);
height: 0px;
background-color: transparent;
background-repeat: no-repeat;
margin: 0px;
overflow: hidden;
padding-top: 61px;
background-position: right top;
}
/*------------------------------Menu stuff----------------------------------------------------*/
#_____________________________{}
#menucontainer {
width: 220px;
margin-top: 50px;
border-right: #330099;
border-bottom: #333399;
border-left: #336699;
padding: 0px;
margin-bottom: 30px;
height: 325px;
background-image: url(web_images/layout/menubackgroundtrans.png);
text-decoration: none;
}
h1#selectacatergory {
background-image: url(web_images/layout/menu.gif);
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 38px 0px 0px;
overflow: hidden;
height: 0px;
position: absolute;
width: 222px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* if ie- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='web_images/layout/selectacatergory.png');*/
}
#container #menucontainer ul {
width: 222px;
margin: 39px 0px 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
height: 240px;
position: absolute;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
text-decoration: none;
}
#container #menucontainer li {
margin: -10px 0px -12px;
padding: 20px 0px 6px 34px;
display: block;
height: 20px;
background-image: url(web_images/layout/butterfly.gif);
background-repeat: no-repeat;
background-position: 0px 11px;
border-bottom: 1px dotted #000000;
text-decoration: none;
}
#container #menucontainer ul li a:link, a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #FF6633;
font-weight: bold;
text-decoration: none;
margin-left: 3px;
}
#container #menucontainer ul li a:hover {
color: #FFFFFF;
text-decoration: none;
}
#container #menucontainer ul li a:active {
color: #FF6633;
text-decoration: none;
}
#container #menucontainer ul li#current {
margin: -10px 0px -12px;
padding: 20px 0px 6px 34px;
height: 20px;
background-image: url(web_images/layout/butterfly_current.gif);
background-position: 0px 11px;
border-bottom: 1px dotted #000000;
display: block;
text-decoration: none;
}
/*Contact Section*/
#________________________________________{}
#contactcontainer {
width: 225px;
position: absolute;
margin-top: 47px;
background-image: url(web_images/layout/menubackgroundtrans.png);
padding: 0px;
}
h1#contactme {
background-image: url(web_images/layout/contactme.gif);
background-color: #000000;
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 42px 0px 0px;
overflow: hidden;
height: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width: 225px;
}
#contactcontainer ul {
margin-top: 10px;
margin-bottom: 20px;
list-style-type: none;
padding: 0px;
width: 182px;
margin-left: 42px;
z-index: 1;
}
#contactcontainer li {
list-style-type: none;
color: #FF6633;
line-height: 2.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
margin: 0px;
padding: 0px;
}
#contactcontainer li a:link, a:visited {
list-style-type: none;
color: #FF6633;
line-height: 2.5em;
text-decoration: underline;
margin: 0px;
padding: 0px;
position: relative;
}
#contactcontainer li a:hover {
list-style-type: none;
color: #FFFFFF;
line-height: 2.5em;
text-decoration: none;
margin: 0px;
padding: 0px;
position: relative;
}
.photoholder {
display: block;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
width: 222px;
height: 207px;
border-top-width: 0px;
border-top-style: none;
}*/
#______________________rightcontent________________________{}
#rightcontent_holder {
width: 545px;
position: absolute;
margin-left: 250px;
margin-top: -324px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-image: url(web_images/layout/large_blackbutterfly.gif);
background-repeat: no-repeat;
background-position: right top;
}
#rightcontent_homepage {
}
#flow01, #flow02, #flow03, #flow04, #flow05, #flow06, #flow07{
float: right;
clear: right;
margin: 0 0.5em 0 0;
}
#flow01 {width:250px; height:80px;}
#flow02 {width:275px; height:60px;}
#flow03 {width:285px; height:42px;}
#flow04 {width:300px; height:80px;}
#flow05 {width:200px; height:50px;}
#flow06 {width:150px; height:45px;}
.hidecap {
display: none;
}
.homepagewelcometext {
background-image: url(web_images/layout/Welcome_w.gif);
background-repeat: no-repeat;
text-indent: 53px;
font-size: .75em;
line-height: 2em;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 10px;
}
.signature {
background-image: url(web_images/layout/carrie_sig.gif);
height: 75px;
width: 200px;
margin-left: 21px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 50px;
background-repeat: no-repeat;
}
#-----------------------footer---------------------{}
#footer {
background-color: #00264C;
border: 1px solid #166286;
margin-bottom: 5px;
margin-top: 35px;
position: relative;
width: 550px;
}
#footer p {
color: #FF6600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .6em;
text-align: center;
margin-bottom: 8px;
margin-top: 8px;
}
#crediting {
color:#000000;
margin: 0px;
padding: 0px;
display: block;
width: 500px;
}
.footerimages {
background-color: #000000;
margin-left: 48px;
}
.credittext {
color: #E17717;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
margin: 0px;
padding: 0px;
}
.standardcopy {
font-size: .75em;
line-height: 2em;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 10px;
}
#confirmation_holder {
width: 500px;
position: absolute;
margin-left: 275px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
}
div#crediting a#link, img {
text-decoration: none;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}
Hi, I've seen things like this in CSS elsewhe Code: <style type="text/css"><!--
td[width="350"] {
background-color: #FFFFFF;
}
--></style>
The above is just an example, and it might not even be what I'm looking for. But it appears that the above would only change the background color of a table cell that is 350 pixels wide (no other table cells will be changed)? Is this how this is done? And if not, I'm trying to do something along that concept, somewhat like this: Code: <style type="text/css"><!--
table[border="2"] td .classname {
color: #FFFFFF;
font-family: verdana;
}
--></style>
If this doesn't make sense, I'll try to reexplain. But if this can be done I'd be ever so grateful. Thanks! ~Kevin If I want to have all of my <td> flags to look a certain way within a <div> tag but not anywhere else how do I define the style to do this? Hello Gents, I am trying to get ride of the white space above the menu and above the big sliding banner...Any pointers would be great. getyoursongsmixed.com/wordpress is my site You guys rock thanks Hi, I need to make colored boxes a specific height. Also, the box must stretch to fit the text within it. The text will be updated when a user clicks different nav buttons. Here's my code:: Code: .category{
background-color:#8CC63F;
color:#000000;
font size:21pt;
height:36px;
}
the problem is that the box isn't 36 pixels tall. you can see my example he link Look at the box with the text description, and the box that says "cam tu dao". Any ideas. I've been trying everything I could think of. thanks This is a bit puzzling for me. I read that I can apply css to something based on id, which I have been doing, thats how my template is made, USING CSS :S. I need to apply css to an H2 that already has css applied to it but has a different id. Here is the page I need to do it to, view it and see why I need to. http://www.coldfusionzone.com/index.php?p=7 Look down towards where the comments are and youll see Leave a comment I need to change that to where it expands up to 40 pixels from the side, and has a black background without the stinkin date pic next to is . Now that Im talking about it im confused again. Ha ha I had it down pat but now that I need help im confused thats strange. But I need to apply a css style to it when it already has a css it.... Here the css style that controls it is on top and the css style im trying to use is on the bottom. PHP Code: div#content h2 { background: #000 url(images/date.jpg) no-repeat left center; background-color: #232323; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } div#content#postcomment h2 { background: #000; background-color: #000000; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } Hi, I have a weird litlle problem here... I have embedded a forum (invision) in my website. This forum uses a stylesheet for all its settings (duh). I can choose if I want to use it inline or external. Offcourse, my site also has its own stylesheet to work with. Because the forum code is on a <div > in my site, the css from the forum messes up my site. Is it possible to get the forum stylesheet to be only applicable inside the layer that it's on? Inline or linked? I tried using an iframe instead of a div, but that gives a heap of other trouble (especially cookie-related) so that's not an option... The title might seem like an oxymoron, but here follows what I want to do, for a navbar I am making, where the links are divided into categories, each with their own header div, I do not want those header divs to be visible unless there is any content (text) in them, but at the same time, if there is content in them, I want them to take specific dimensions. Is there a way to achieve this? That is, either do not appear at all, but if it is to appear, it is to be a certain specified height and width. The min- and max width/-height's do not do the trick here, however I suspect I am far from the first to want to do this so there ought to be a hack or solution of some sort. Maybe I should add that it is only the height that is an issue here really. I want it to be 19px lest not appear at all. URL (Why doesn't the image show up?) http://drupal.org/files/issues/browser%20view.jpg The small div with the class "left" doesnt stretch to 100%. What could be the problem? Here is the html: Code: <div class="content-wrapper">
<div class="top">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="content">
<div class="left"></div>
<div class="center">
<div id="content" class="column"><div class="section"></div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
And here the CSS: Code: .content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom,
.content-wrapper .left,
.content-wrapper .center,
.content-wrapper .right {
float: left;
}
.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom {
width: 100%;
padding: 0px 8px;
}
.content-wrapper .center {
width: 100%;
}
.content-wrapper .left,
.content-wrapper .right {
height: 100%;
min-height: 100%;
}
.content-wrapper .left {
width: 8px;
margin-left: -8px;
background: url("../images/side_left_bg.png") repeat-y;
}
.content-wrapper .right {
width: 8px;
margin-right: -8px;
background: url("../images/side_right_bg.png") repeat-y;
}
.content-wrapper .top,
.content-wrapper .bottom,
.content-wrapper .top .center,
.content-wrapper .bottom .center {
height: 9px;
}
.content-wrapper .top .left {
background: url("../images/edge_top_left.png") no-repeat;
}
.content-wrapper .center {
background: white;
}
.content-wrapper .top .right {
background: url("../images/edge_top_right.png") no-repeat;
}
.content-wrapper .bottom .left {
background: url("../images/edge_bottom_left.png") no-repeat;
}
.content-wrapper .bottom .center {
background: url("../images/bottom_bg.png") repeat-x;
}
.content-wrapper .bottom .right {
background: url("../images/edge_bottom_right.png") no-repeat;
}
Any help on this would be very appreciated! Thanks in advance! |
|||||||