|
CSS - Simple Css Question
Hi...
I was just wondering.. when u have something like: margin:5px 10px which side does the 5px and 10px apply to? thanks in advance Similar TutorialsHi, I see something like this, span.small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> my question is why they put the word span. Why not do .small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> I loaned my CSS book to remote colleague si I can't look at it. I have a simple td.BLUEBG {background-color: #0000BC; color: #FFFF00; font-weight: bold} now I want to put <a href=""">xxx</a> stuff in those TD's and I want them to be yellow too. I tried td.BLUEBG A:link {color: #FFFF00; text-decoration: none} and now some of those links turn yellow and some don't. Here is a snippet of my generated code: <tr> <td class=BLUEBG>Controls</td> <td class=BLUEBG>Last edit</td> <td class=BLUEBG>Approved by</td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Manufacturer">Manufacturer</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Description">Description</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Code">Code</a></td> <td class=BLUEBG>Comments</td><td class=BLUEBG><a href="xxxxxxxxx.php?sortby=Submitter">Submitter</a></td> </tr> This is simple (I think) -- I'm a bit new to CSS and still learning, so I really appreciate any help you guys have to offer. I have this page - vitalmodels (DOT) com/V3/ The columns on the right/left, the backround extends past the bottom graphic. I basically need the bottom graphic to be at the literal bottom of the div container so that it closes off the box cleanly. I have tried vertical align/bottom/baseline to no avail. And this is only in mozilla/safari as well... Any suggestions? Also, a second question. The 3 columns (divs) in the main area, are within a single container div... they don't push that container down when populated with information, and merely overlap... right now I have the container set to a height in order to look decent, but when it's set to "auto" the content in the columns seems to do nothing. Again, I REALLY appreciate any help I get here... thanks again. -Ryan This is the code if you need it - PHP Code: #index_left_column { padding: 0px; float: left; height: auto; width: 194px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; left: 16px; background-image: url(images/index/left_column_bg.jpg) and PHP Code: <div id="index_left_column"> <p><img src="images/index/left_column_featured_female.jpg" alt="" width="194" height="26" /></p> <?php include("inc/m_female.php"); ?> <p><img src="images/index/left_column_featured_male.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_male.php"); ?> <p><img src="images/index/left_column_featured_photog.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_photographer.php"); ?> <p><img src="images/index/left_column_bottom.jpg" alt="" width="194" height="7" /></p> </div> Im trying to position 3 divs like in this image the html will look like this: Code: <div id="container"> <div id="rightGrey></div> <div id="blueContent"></div> <div id="leftGrey></div> </div> how will the css look like ? I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me. The book gives an example: Code: <HTML>
<HEAD>
<TITLE>StarBuxx Coffee</TITLE>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</STYLE>
</HEAD>
<BODY>
<H1>StarBuxx Coffee Beverages</H1>
<H2>House Blend, $1.49</H2>
<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
<H2>Mocha Cafe Latte, $2.35</H2>
<P>Expresso, steamed milk and chocolate syrup.</P>
<H2>Cappuccino, $1.89</H2>
<P>A mixture of espresso, steamed milk and foam</P>
<H2>Chai Tea, $1.85</H2>
<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
</BODY>
</HTML>
In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated? Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y. Gray is a color. Grey is a *colour* Sorry for the confusing title, I didn't know how I could describe it better. Anyways, here is the 'problem' I am currently using for my website Cufon. Which works great. However with Internet Explorer 8 it becomes really slow. Therefor I decided to use: PHP Code: <![if !(IE 8)]> <script type="text/javascript" src="js/myriad-pro.cufonfonts.js"></script> <script type="text/javascript"> Cufon.replace('.example1') ('.example2') ('.example3') ('.example4') ('.example5'); </script> <![endif]> This works great, however not for everything. Some parts of the scripts, which calls Cufon in the script itself, it doesn't work and Cufon will still be displayed in IE8 (with all negative results from it). Several included scripts / parts have the following code in it: PHP Code: <?php echo "<script language=\"javascript\" type=\"text/javascript\">"; echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; echo "</script>"; ?> Now is it possible to make a same statement as with <![if !(IE 8)]> within the PHP script(s)? So if it's any browser other than IE8 it will load the Cufon, but if it's IE8 it will not load Cufon? Hopefully someone understands what I mean here, cause it's kinda hard to explain for me... //update If I use: PHP Code: <?php echo "<![if !(IE 8)]>"; echo "<script language=\"javascript\" type=\"text/javascript\">"; echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; echo "</script>"; echo "<![endif]>"; ?> My script / order form stops working completely... :S Update! It's working now!! Thanks! http://www.invalidheart.org/test/ works in IE fine, but in FF the background and the footer stay up at the top, when it should be scrolling down with the rest of the content. any ideas? Thanks in advance. Hello Guys, I have the following problem with my .css: #pagerank { margin: 20px 0 20px 0; padding: 8px; width: 225px; float: left; background-color: #F6F8F9; border: solid #eee 0px; background-repeat:no-repeat; background-image:url(top3.jpg); I need this background-repeat:no-repeat; to be in the same line as this: background-image:url(top3.jpg); kind of like this: background-image:url(top3.jpg) no-repeat; but I dont know how to format it correctly how do you do it? Best Reagrds, Brill Hi, In the code below, when i put the font to arial, i do not see any difference, i mean if I have it arial or if I do not have any style tags it does not make any difference the way text look. Am I doing something wrong here. Code:
<html>
<head>
<style>
td {font-family:arial}
</style>
</head>
<table>
<tr><td>John</td></tr>
<tr><td><p>Pong</p></td></tr>
</table>
</html>
Hi, I have the following code: <h1>Some text <span class='special'>special text</span></h1> And my CSS: Code:
.special {
font-size: 10pt;
}
h1 .special {
font-size: 20pt;
}
The problem is, the SPECIAL text within the H1 tag above still remains as 10pt I want it to be 20pt only within the h1 tag. Is there a way I can do this? (Worst case: I would need to add a new style and update all my HTML code to use this new style..but I'm hoping there's a quick CSS fix) Many thanks! I am working on this website : http://five-art.com and the code for the nav bar is : Code: <div class="content"> <table><tr><td><h1>[5]Art</h1></td><td class="navtop"> :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> </div> I added the table so that I could have two different font sizes without the text going to the next line. What would be the best way to do this with css. Thanks! Hi people! Just a n00bish pondering I have... Which would be the more efficient code Code: #logo, #logo a {
left: 45px;
top: 30px;
width: 190px;
height: 100px;
}
or Code: #logo {
left: 45px;
top: 30px;
width: 190px;
height: 100px;
}
#logo a {
height: 100px;
}
I only need to specify height for '#logo a' but the first code appears less cluttered to me. Which code would be more kind on the server? Thanks in advance!... Ok. I have some javascript functions I want to happend whenever a button is pressed. Would it be easiest to use <div> tags to section off parts of a larger images as "special link areas" that really have nothing in them. And when they are clicked, respond appropriately? I hate using ImageMaps, and I'm hoping this is an alternative, if maybe easier solution... Hi I have img tags in my html with border="0". I am replacing the html stylings with CSS and want to know what the equivelant would be? Is it Code: border-width: none; Or does the img tag really need the border="0" in it at all? Thanks in advance!! I have two easy questions about CSS... 1. Can two font-size settings interfere with each other if the they overlap? For example, suppose I have a page set to have the font at size 14px. Then within that page, I do a <p> tag that sets the font size to 10px. Is the font size relative (do they add, multiply, whatever), or is 10px absolute? It seems like 32px is a lot for a heading I'm making, but that's how big I needed to set it for it to look like a heading... It wouldn't show up super-big on another computer with a different browser, would it? 2. Is there any way in CSS to change the amount of space before and after a <p> tag? I have one paragraph right after another, and I want to get rid of some of the space that is between them. Thanks in advance. Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left. thanks in advance. Hi all, I need to have two CSS stylesheets that change the background color of my page. All I need to know is the CSS code to change the background color. Cheers. Hey all, I have a seemingly simple problem with my link and header styles that I keep thinking had a really obvious solution which I can't see, so maybe it will be glaringly obvious to someone on here! Notes: I'm a bit of a css beginner and I'm using Wordpress on my site. I want to style the link-attributes of a specific <h3> tag so it won't underline when hovered. (the current hover-decoration is specified in the overall a: styles of the website). Only thing is that I can't use a link class because the <h3> tag has only <?php the_category(', ') ?> inside, which displays and links to the relevent categories of a blog post. So how can I style the link without creating a link class?? Appreciate anyone's thoughts on this, Cheers! 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. |
|||||||