|
CSS - No0b Question, Applying The Same Style To Two Rules With A Comma
I was reading that if you wanted to apply the same style to more than one rule, you can use a comma, but I'm having a weird quirk happen when I do that.
for example: h1, h2 {color:olive;} For some reason, it's only applying to h2. Even when I place it so that there are no parent elements. I've validated the xhtml and the css. What's the deal? I'm a total newbie to CSS and web design in general. Sorry if I'm using the wrong terms for things. Similar TutorialsSo the basic rules a 1) Author style sheets 2) User style sheets 3) Default browser sheets Now when you get into Author style sheets... You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets. I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner. To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: green;">What am I?</p>
</body>
</html>
As expected, the inline style wins. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p>What am I?</p>
</body>
</html>
The header style information wins. (regardless of position of @import) Code:
<html>
<head>
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>What am I?</p>
</body>
</html>
External style sheet wins (<link />). How does position influence precedence of: external style sheets (Both @import and <link />) and header style information? hey guys i have this so far
Code: div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
background-color: #e4ebeb;
}
but what i can figure out is how to show the link they are on as a selected button so having the button be red if they are on that link... Code: <div id="navbar2"> <ul> <li><a href="index.php?page=update">Basic</a></li> <li><a href="link2.html%20">Button 2</a></li> <li><a href="link3.html%20">Button 3</a></li> </ul> </div> Sidebar div's background is messed up. Its background should be black until the end, but its cut short. Check it he http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4 PHP Code: #products .sidebar { background: #000000; color: #CCCCCC; padding: 10px 0 0 0; } #products .sidebar ul { margin: 0; padding: 0; list-style: none;} #products .sidebar li { display: block; float: left; width: 124px; padding: 10px 5px 10px 15px;} #products .sidebar li ul { line-height: 15px; } #products .sidebar li li { display: list-item; background: url(../images/img07.gif) no-repeat left 50%; padding: 0 0 0 10px;} #products .sidebar h2 { font-size: 12px; margin: 0px; color: #FFFFFF;} #products .sidebar a { font-size: 10px; text-decoration: none; color: #CCCCCC;} #products .sidebar a:hover { text-decoration: underline;} #products .clear { clear:both; height:1px; width:1px; overflow:hidden; } PHP Code: <div class="clear"></div> <div class="sidebar"> <ul> <li> <h2>Lorem Ipsum</h2> <ul> <li><a href="#">Fusce dui neque fringilla</a></li> <li><a href="#">Eget tempor eget nonummy</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> </ul> </li> <li> <h2>Recipient</h2> <ul> <li><a href="#">Family</a></li> <li><a href="#">For Him</a></li> <li><a href="#">For Her</a></li> </ul> </li> <li> <h2>Price</h2> <ul> <li><a href="#">Under $50</a></li> <li><a href="#">$50-$75</a></li> <li><a href="#">$75-$150</a></li> <li><a href="#">$150 & Up</a></li> </ul> </li> </ul> </div> <div class="clear"></div> Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ? I would like to create an effect similar to the one found on http://www.macromedia.com that when you click in the search box, the edge of the searchbox changes color. I know how to change the color of the box, but I do not know how to make the box switch whenever it is clicked on or in focus. Can anyone help me? Hello All, following is my code Code: <html>
<head>
<style type="text/css">
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<select name="slt" >
<option class="test">value1</option>
<option>value2</option>
<option>value3</option>
</select>
</html>
In the above code i am trying to apply style for first option i got the color for first option but not the size and weight. The font-size and font-weight attributes are not applied.... can some one help me out in this... Please help me ASAP Thanks in Advance Ramesh I tweaked a style sheet (changed some margins, colors, etc.) and uploaded it to my server, but sometimes they just don't show up. I've deleted the old style sheet first, cleared my cache and tried different browsers - even restarted my computer. When I download the style sheet and look at it, it's the correct one but it just won't display my changes. It's almost like the server is referring to my old one. Anyone else have this problem or know how I can fix it? I'm going a little crazy... My Question is... When I put an image in a stylesheet, when does it get loaded? Does it get loaded when the style sheet gets loaded or does it get loaded only if I'm using the style on the page that has the image? The reason I ask... I have a lot of images in my style sheet, and I'm concerned about performance. Only some of the images in the style sheet are used on each page, but never all of them at once. I'm wondering if I should split up my style sheet into smaller style sheets, so that I will never be loading images for a page that I'm not going to be using on that page. (this would require the inclusion of 2 smaller style sheets on each page instead of 1 big style sheet). My style sheet is over 200 kb right now, and that does not include the image file sizes. Please advise. Hi all, very new at this so please pardon. I am attempting to format a series of 3 columns (using the CSS holy grail) into the main body of a .asp page. Everything goes smoothly, I have the columns looking exactly as I want them, however the style sheet appears to be causing problems with the header and footer of my asp page. Namely, it has caused the previously smoothed corner images (.gifs) in the header and footer to have a 90 degree thick white border around them. I assume that my style sheet for the body of the page is affecting elements in the header and footer as well, causing them to look odd. Is there a way to have a style sheet only affect part of my code locally and not all of it globally? Or make certain parts of my code immune to the style sheet via some sort of markup? Thanks! FYI for those interested: the style sheet I am trying to use to format my divs (frame(content left, content right, content center and content header)) is body { text-align:center; border:0px solid #000; } #frame { width:830px; margin-right:auto; margin-left:auto; margin-top:auto; padding:0px; text-align:left; } #contentleft { width:175px; padding:0px; left:auto; top:auto; float:left; background:#fff; border:0px solid #000; } #contentcenter { width:480px; padding:10px; float:left; text-align:left; background:#B7C8EE; } #contentright { width:175px; padding:0px; right:auto; top: auto; float:right; background:#fff; border:0px solid #000; } #contentheader { background:#345EA2; width:auto; } p,h1,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; padding-top:10px; } #contentheader h1 { font-size:14px; padding:10px; margin:0px; } #contentright p { font-size:10px} The .asp page I want to use this style sheet on is <!--#include file="headerauth.asp"--> <meta http-equiv="Content-Language" content="en-us"> <body topmargin="0" leftmargin="0"> <link rel="stylesheet" type="text/css" href="sddm.css" /> <link rel="stylesheet" type="text/css" href="box2.css" /> <STYLE> A:link {font-weight:bold} A:hover {background:white;} A:hover {background-color:white;} A:visited {color:green} A:active {color:red} </STYLE> <!--#include file="footer.asp"--> The sheet appears to be affecting both my headerauth.asp and footer.asp which I do not want it to do. Is there a way to stop it from propogating to both of these other files? Or perhaps wrap the code for each of these in some sort of a tag that tells it not to use the css? What are the naming rules for CSS? No numbers in class names? Any other char not OK? 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;
}
Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help I'm using this for a horizontal rule, I'm after a 1 pixel blue line... Code:
hr {
border: 0;
width: 98%;
height: 1px;
color: #003366;
}
But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all. What's wrong? Hey all, What are your techniques for making unique horizontal rules? At the moment I am using this code to separate content: Code:
/* CSS */
.line {
height: 5px;
background-image: url(../img/bg_3x7.gif);
background-repeat: repeat-x;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 0px;
}
Html: Code: <div class="line"></div> The above code works great for all non IE-PC browsers... when I view on PC with IE, there appears to be 5px of padding added to top and bottom... is very annoying... IE is a POS, I hate IE... Anyway, does anyone have any suggestions for a more universal way to get a unique <hr /> on a page? I would prefer something that will be an exact height in any browser/platform. Cool cool cool, Thanks! Cheers Micky Hi guys and gals. Right does any one know any CSS specfic Internet Explorer 8 rules that I can run in the CSS sheet. Something like -ie- -msie- would be nice. Also for those of you who have not tried IE8 beta download it , it's really good, ok still bugs to work out fair enough but what I'm really fond of is the built in dev bar that comes as standard, if there is an add-on like Yslow I think I'm going to convert. Applied this as a div id and a div class, neither of which apply css to the links and text properly. Also hashed all selectors. Some of these are to be followed by regular text/explanations. What am I missing here? Code: .cont { /*container*/
position: relative;
background: #FBFBFB;
float:left;
border: 1px solid #D3D3D3;
width: 195px;
color:#999;
text-decoration: none;
}
#vt-r {
color:#999999;
text-decoration: none;
font-size: 0.90em;
font-weight: 400;
margin: 10px 0px 7px 15px;
}
.vt-r:link {
color:#3366CC;
text-decoration: none !important;
font-size: 0.70em;
font-weight: 400;
padding: 15px 5px 0 0;
margin: 10px 0px 7px 15px;
}
.vt-r:hover {
color:#333;
text-decoration: underline;
}
<div class="cont">
<div id="vt-r">
<a href="/urladdress.htm">LINK1</a><br>
Example text.<br>
<a href="/urladdress.htm">LINK2</a><br>
<a href="/urladdress.htm">LINK3</a><br>
</div>
</div>
The CSS in this file:
Code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title>Comments on 2005-02-09: February 9, 2005 - Final Game</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" /> <link rel="stylesheet" type="text/css" href="comments.css" /> </head> <body> <h2>Posting on 2005-02-09: February 9, 2005 - Final Game in <a href="refresh.php" id="title">XMLBlog</a></h2> <div class="entry"> <p class="normal">I woke up like usual. <em class="entry">My mom couldn't find my lunch bag, so I had to show her.</em></p> <p class="happy">On the way to school, I nearly fell asleep on the bus. <em class="entry">Surprisingly, I felt more rested than before.</em></p> <p class="normal">We had a sub in Physics, along with homework. <span class="happy"><em class="entry">While doing my homework, I talked to this guy that sits nearby.</em></span></p> <p class="happy"><span class="sad">At the beginning of class, I tried to switch with someone to sit near a friend, but our sensei didn't allow it.</span> We just did reading in Japanese, <em class="entry">where I was better than a majority of the class as far as Katakana is concerned</em>. Also, we looked at pizza menus and added up our cost in <ruby><rb>円</rb><rt>エン</rt></ruby>. <em class="entry">some of them looked so delicious, which made me hungry.</em></p> <p class="normal">We watched a video in health, and nothing else.</p> <p class="happy">I basically had English off, since I already finished all of my work. <em class="entry">I also found out that my pre-write can count as a rough draft, since I didn't really do one. Along with that, I get to turn in my completed vocabulary in a day late, since I proved to her that I had it done.</em> For the most part, I just read while listening to music.</p> <p class="sad">Lunch alone, again.</p> <p class="normal">Math was comprised mainly of continuing work on our investigations. <em class="entry">This one didn't have proofs, which made it easier.</em> Due to our teacher talking about homework, we didn't move onto the next one.</p> <p class="normal">We started off with playing our warm-ups for Solo & Ensemble, then went to free time. <em class="entry">For the most part, I goofed off.</em> <span class="hider">Also, someone was trying to lift a stand up, but the top flew off and hit them in the chin, hard.</span></p> <p class="sad">Once home, I found that the euphonium I was waiting for didn't arrive yet.</p> <p class="normal">I had a normal trombone lesson this time. <em class="entry">I made somewhat considerable progress, and was taught better hand positions.</em></p> <p class="happy"><strong class="entry">The euphonium came!</strong> It took a while, but it finally arrived. <em class="entry">The nice <strong class="entry">Bach 5GS</strong> my mom bought was too small, since we thought the instrument would be a small-shank. Still, the instrument came with a 6 1/2 AL from Jupiter, which I shall use for the time being.</em></p> <p class="happy">Later on, I found out that there was a 5GS there. <em class="entry">Earlier, I had called Mills about it, and they eventually replied saying there was one.</em> My dad and I went there and bought it.</p> <div class="story"> <div class="title">Final Game (Bothell Lost N/A)</div> <div class="storybody"> <p class="normal">After a quick lyre readjustment for my new euphonium, my dad and I dashed off to the school...</p> <h>Enter: Eighth Graders</h> <p class="normal">When I got there, I found out how <em class="entry">huge</em> the band was. <em class="entry">There even was another baritone player from my old school!</em> My section commented on how good my instrument looked. <em class="entry">When we warmed up, he also commented on the great tone it had.</em></p> <p class="normal"><span class="sad">We had trouble cramming into the stands, so we had to cover a full section and around 1/3 of another.</span> Throughout the entire game, I told the eighth grader some things to remember, and cracked a few jokes with him.</p> <p class="normal">When the game actually started, we got into our final setup. <span class="sad"><em class="entry">I was near someone that annoyed me.</em></span> <em class="entry">Also, I talked to the 'leader' of the trumpets a bit, as well.</em> The game for our team was going decently. </p> <p class="sad">The guy in front of me got more annoying. He also hit my section where it hurts most. <em class="entry">I kind of got back at him when he snuck my cell phone away from me.</em> Still, he cracked jokes no matter what. <span class="normal"><em class="entry">Also, the group thrusts were a little messy, but decent to say the least. It <strong class="entry">may</strong> be that the eighth graders haven't gotten used to them yet.</em></normal></p> <p class="normal">At half-time, the little girls danced up with the cheerleaders. <em class="entry">Someone made an insightful comment about how their parents paid them to be sluts.</em> <span class="happy"><em class="entry">Also, the trumpet leader danced and sang with them, and a few of us joined in.</em></span> Of course, we played a few songs. The percussion played, and we did our thing.</p> <p class="happy">Rest came with the third quarter. <span class="sad">Though, when I went to buy drinks, they only had <strong class="entry">Powerade</strong>, which was <em class="entry">okay</em></span> Once back in the stands, I shared the candy I bought with a couple of friends while we chatted. Also, I performed the <strong class="entry">Baritone Test</strong> on the eighth grader's instrument, which proved it as a euphonium. <em class="entry">Though, it still seems too light and small to be a real euphonium. It's the same brand as mine, but a lower-end model.</em></p> <p class="normal"><span class="sad">Our team was losing badly.</span> Still, we kept up our little spirit through it all. It all ended as usual.</p> <p class="happy">My section and I talked on the way back from our last game as sophomores. Also, we played us some <strong class="entry">Oompa</strong>!</p> </div> </div> <p class="normal">After the game, I wondered if there was a Denny's party. My dad and I checked twice, most likely finding it as false; so I went home.</p> </div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 9, 2005 - Final Game&date=2005-02-09" method="post" name="comment" id="main"> <div class="right"> <img src="comments_files/right_main_bar.png" alt="right_side" /> </div> <div class="left"> <img src="comments_files/left_main_bar.png" alt="left_side" /> </div> <div class="center"> Date: <input type="textarea" class="upper" name="date" value="2005-02-09" readonly="readonly" /> Title: <input type="textarea" class="upper" name="title" value="February 9, 2005 - Final Game" readonly="readonly" /> <br /> Name: <input type="textarea" name="name" class="lower" /> E-mail: <input type="textarea" name="e-mail" class="lower" /> </div> <div class="comment"> <input type="textarea" name="comment" class="text" /> <input type="submit" value="Post!" class="click" /> </div> </form> </body> </html> I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Greetings Not sure about the best way to go about this. I have an Unordered List that has a set height for the List Items. Like so: Code:
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left ul li {
text-align: center;
float: left;
margin-right: 20px;
height: 200px;
margin-bottom: 20px;
}
This works fine for most of the pages, but there is one where I really need the height of the <li>'s to be 350px. I tried just adding a class like Code:
.comics {
height: 350px;
}
I tried adding this to the <li> Code:
<li class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></li>
and also just a <span> Code:
<li><span class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></span></li>
but it still kept the 200px height. Do I need to make a whole new <li> code or am I missing something? I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 |
|||||||