|
CSS - [homework] Creating A Class Attribute With Text And Used With Div Tag
I have an assignment and it says "A class attribute for text to be used with the DIV tag, named SPECIAL (for division), which indents the text division (all lines in the division) by 25 pixels and sets the font size to 14 point. "
I am not sure how to write this out in CSS format, can someone help me? Similar TutorialsI am trying to retrieve the color and background attributes of a CSS class defined in a .css external file. I would like to retrieve the attributes in a JavaScript function, given the class name. I am trying to invert the colors of a table cell background and hyperlink text. --begin style sheet-- table.submenu { background:#66CCFF; position:absolute; visibility:hidden; font:8pt Arial; font-weight:bold; color:#FFFFFF; text-decoration:none; } a.menulink:link,a.menulink:visited,a.menulink:active { color:#FFFFFF; text-decoration:none; font-weight:bold; } --end style sheet- --begin javascript-- function invertmenu(elmntID,elmntClass) { //the first two lines of code do not work var textColor = elmntClass.style.color; var backColor = elmntClass.style.background; document.all[elmntID + "link"].style.color = backColor; document.all[elmntID].style.background = textColor; } --end javascript-- --begin html code-- <tr><td class="submenu" id="techdept1" onmouseover="invertmenu('techdept1','submenu')" onmouseout="invertmenu('techdept1','submenu')"><a href="t40/default.asp" class="menulink" id="techdept1link">T-40</a></td></tr> --end html code-- thanks for your help! - tim Trying to create a table psuedo class so that the specific attributes apply to the target table. Not sure if my syntax is correct. What I would like is to call the ID DataTable and have it cascade thru the tr, td...... Here are my tags: #DataTable { width:auto; border-collapse: collapse; border:1px solid #cccccc; border-spacing :20px;} #DataTable tr { border-spacing:20px;} #DataTable td.headerDescription{ width: 240px;} #DataTable td.fundCell { width: 240px; text-indent:40px;} #DataTable td.percentageCell { width: 60px; vertical-align:middle; text-align:center; border-right:1px solid #cccccc;} #DataTable td.seperator { border-top:1px solid #cccccc;} #DataTable td.assetCategory { width: 240px; text-indent:20px; vertical-align:middle;} #DataTable td.headerColumn { font-weight:bold ; width:40px; background-color:#F0F0F0 ; text-align :center;} #DataTable td.leftHeaderColumn { font-weight :bold ; width:40px; background-color:#E0E0E0 ; text-align :center ; border-left:1px solid #cccccc;} #DataTable td.assetClass { width: 240px; vertical-align:middle; font-weight :bold;} #DataTable td.performanceCell { width:60px; background-color:#E0E0E0 ; text-align :center ; vertical-align :middle;} Hi: Does anyone know of a site(s) that deal with text presentation in CSS? I'm looking not for the plain text manipulation but for really, really good FX(maybe?) text presentations. Just place a link to a site(s) that you consider you would be looking for. Also, if it has been mentioned in the forum, kindly show me the link to it. Thanks. having an issue with trying to work out the best way to overcome my current issue. what i am trying to accomplish best case scenario is as i hover over a link i get a descriptive box over on the right of this describing what the link is preferable like the nav bar always visible near the top right . now i have got some examples of trying to get this to work but it not that good currently. I am currently using a span to accomplish this but have a few issues with it so far. the first two links are my css sheet and the verified html page but it doesn't look the way i want it. the third link is the page that is more like what i want. but still not 100% what i need. be aware my whole page is self sizing so absolute position with measurements are out of the question. Please help and if span is not the option whatever someone can suggest to put me on the right path. I currently using pure css and html for the page but running out of ideas if no suggestions will use java if that will accomplish the task needed be but prefer not too. CSS verified theknowledgeden .com / default .css Verified html theknowledgeden .com / ancient-afr .html non verified html but closer to what i am trying to accomplish. theknowledgeden .com / ancient -asia .html How do create text that has a background AND foreground image? The effect I am after is looking through one image (I already have a transparent one that should work) to see text which is on top of a background image. I figure that these would come into play...but I have not been able to make the right combination of divs, etc., to make this happen. .back { background: url(backsrc.gif) bottom left repeat-x; } .fore { background: url(foregrdsrc.png) bottom left no-repeat; } I don't think this detail will matter, but just in case... I want this appearance for the text of every <td> in a particular table. Thanks, oak island Hi: Can anyone tell me whether you can create raised shadowed text or forms with CSS? If it is, how can you do it? Thanks for the tip! I have a few lines of text which have different formatting setups. But there seems to be an extra space between the two lines of text. Why is this? Here is the css for the text: Code:
h1{
color:#534741;
text-decoration : none;
font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
padding-left: 18px;
}
h2{
font-size: 16px;
color:#1133aa;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
h3{
font-size: 12px;
color:#534741;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
Here is the text itself: Code:
<div id="centerformbottom">
<h1>or call</h1>
<div id="centerformbottomleft">
<h2>Janine Todd</h2>
<h3>312.848.9388
<a href="mailto:janine@imaginehealthsolutions.com ">janine@imaginehealthsolutions.com </a></h3>
</div><!--centerformbottomleft-->
<div id="centerformbottomright">
<h2>Bob Brodell</h2>
<h3>312.659.4242
<a href="mailto:bob@imaginehealthsolutions.com">bob@imaginehealthsolutions.com</a></h3>
</div><!--centerformbottomright-->
</div><!--centerformbottom-->
Here's a link to the page itself: http://www.childevangelismncwi.org/ImageHealth/Contact.htm Thanks! Hi all, I've got an div set up for images, which just has a style of padding-right 15px; . Now, I've got a text div with a style of padding-right 5px; . Whenever I put that div in after the image div, the text appears below the image. Can anyone tell me how to make it so the text appears next to the image (on the right)? Cheers. So basically im a total noob. I'm in a CS110 level class, and can't figure out this stupid project. I need to make two pages using html/css wtf do I do? I can't get the header image to work, and i need to connect the two pages using css. This is what i have so far: <html> <body> <img border="1" src=/home10/mwh/public_html/110/Project 2/Images/javajam.JPG alt="JavaJam" /> </body> </html> Could someone please help? 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 want to set a width for a div so that its left hand edge is at the left edge of the viewing window and its right hand edge is at a particular location in a centered layout and retains that width (ie it stretches) when the window is resized. A percent width will not achieve this. Can anyone explain how it can be done? I'm using frames and I want all my anchors to launch in a separate frame. Right now I'm doing: Code: <a href="http://example.com" target="MAIN">example</a> Can I put something in my stylesheet that will automatically launch all links in the "MAIN" frame? Thanks. <div type="test"> I am interested in the type attribute. The reason is this... I have a Janus GridEx on my asp.net form and I want to add some css styles to it. There is no ID defined, nor a class of which I can inherit. I can't modify the code for this tag so I was hoping I could use the type attribute to identify this div in my css.... This is the code for the DIV I'm talking about: Code: <div type="4" style="position:relative;padding:0px 0px;width:100%;overflow-x:auto;overflow-y:auto;"> Anyone has any experience with this? Thanks! Hi people, What is the equivalent of this div style attribute in css? <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 500px; height: 300px"> Its the overflow what I'm looking for. -just edited this that I have the solution sorry beginners corner Attempting to inherit all main attributes of a column, and modifying few, what is the correct way to inherit/overwrite the attributes of col3 here ? Code: .col3, col3b {
float: left;
position: relative;
background: #FFFFFF;
width: 25%;
height: 80%;
left: 3%;
border-left: 1px solid #333;
margin: 3px 2px 4px 0;
}
.col3b {
border-left: none !important;
}
Tried as well like: Code: .col3 {
}
.col3 .col3b {
border-left: none !important;
}
note: not talking about a single 'inherit' value I'm quite fluent in xhtml, css, and other crap...but I'm not sure why this doesn't work -> the height attribute is set to a percentage, yet it doesn't work...I know its acceptable i checked the css reference. view source on this Validated xhtml strict 1.01 EDIT: I FIGURED IT OUT... I NEEDED TO PUT THIS html, body { height:100% ; width:100% } 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">
<head>
<title></title>
<style type="text/css">
<!--
body
{
font-family: tahoma, verdana, arial
}
#main
{
width: 60%;
margin: 10px auto;
border: solid 1px #333;
background-color: #fff
}
#header
{
padding: .5em;
background-color: #fff
}
#sidebar
{
float: left;
width: 100px
}
#content
{
padding: 20px;
border-left: dotted 1px #ccc;
margin-left: 140px
}
#footer
{
padding: .5em;
border-top: solid 1px #ccc
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<form action="login.php" action="post">
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="password" name="password" /></p>
<p><input type="submit" value="Login"></p>
</form>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<div id="content">
This is the content
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Why doesn't this automatically adjust the size of the div next to it? Am I better going for the position attribute here guys? Cheers Hi. I was developing a website . I decided to use float in order to align content on my webpage. Everything worked fine in IE but when I viewed page in NS then linkbar and main area that supposed to be aligned correctly, where collided together. The link to this webpage is: http://www.itcollege.ee/~rbomberg/hagerel/index.php If viewed in NS then you should notice that the links on the left are not aligned properly and main body text is also dislocated. The CSS file used for this website is available at: http://www.itcollege.ee/~rbomberg/hagerel/test.css Thanks for all the help. |
|||||||