|
CSS - Css A:link Function - Simple (hopefully!!!)
Hey all,
I have a problem. On my website I want the links in the navbar to go bold when you roll over them. However I want to keep the links on the page normal and have a different style for them? I am currently using a:link, a:hover etc..... Any ideas would be appreciated!!! Thanks. Jack. Similar TutorialsHi all, I am making a test page for a client. It's a VERY simple site (he's a simple guy ), but I am having a little trouble with something that's probably pretty easy. For some reason, though I just can't get it to cooperate. The site is at www.bartlett-family.net/test On the footer, you'll notice that it also has a few links and those links have the SAME properties (through the CSS) as the other page links on the left and right. I don't want that. I want the links in the footer to be WHITE at all times, whether clicked, hovered over, etc. How can I do this? Thanks! Chris ok, so after i click a link it goes to the css visited link. .menu_1a a:link {color:#666666; text-decoration: none;} .menu_1a a:hover {Background: #666666; color:white;} .menu_1a a:visited {color:#666666; text-decoratoin: none;} is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link any ideas? -kevin 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! PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
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* So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with: <img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div> But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution? *** EDIT: YOU CAN SEE AN EXAMPLE HE *** http://www.poweredpages.com/sample.php Thanks. *** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! *** Thanks in advance! Fairly straightforward problem: I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div. Anyway to set the content as fixed and just have the user scroll if the browser is too small? Thanks! Ohh.. and both divs the "blankDiv" and "header" are floated left... Code: #blankDiv{ width:10%; background-image:url("../images/header_tile.png"); background-repeat:repeat-x; height:224px; float:left; } #header{ float:left; }
Hi, 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'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem: img386.imageshack.us/img386/1795/ddddye5.png As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS: Quote: #maincontentleft { float : left; width : 252px; height: 100%; background-image : url("images/sidecontentbg.gif"); } #sidecontentbg { background-image : url("images/sidecontentbg.gif"); padding-left : 15px; padding-right : 15px; height: 100%; background-color: red; } #sidecontenttop { background-image : url("images/sidecontenttop.gif"); } #footer { padding-top: 5px; padding-bottom: 5px; background-color : #ebebeb; height : 35px; border : 1px solid #dbdbdb; text-align : center; } The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom. Hi, I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong. This is my CSS: PHP Code: body{ margin: 0 auto; } #wrapper{ width: 900px; margin: 0 auto; } Any ideas? 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> I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction? In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF. The test page is: http://www.kdays.com/box/kerrin.htm hye peeps i need to create a external css for my website www. losttv . 50webs. com would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books? any advise would be SO welcome ricki 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 Im really new to this so please forgive the stupid questions. I have a logo div and I want to output a bit of PHP to the right of the logo. I put my code right after the header div and it places the output under the image, not to the right. Here is my code: Code: <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"></a></h1>
<img src="cart.jpg" alt="Cart" />
<?php $_cartQty = $this->getSummaryCount() ?>
<?php if ($_cartQty>0): ?>
<?php echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?>
<?php echo $this->__('Cart Subtotal:') ?> <strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></strong>
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
<br />(<strong><?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?></strong> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
<?php endif ?>
<?php endif; ?>
<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
<div class="actions">
<button class="form-button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')">
<span><?php echo $this->__('Checkout') ?></span>
</button>
</div>
<?php endif ?>
<?php $_items = $this->getRecentItems() ?>
<?php if(count($_items)): ?>
<?php echo $this->__('Recently added item(s)') ?>
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
<script type="text/javascript">decorateList('cart-sidebar', 'non-recursive')</script>
<?php else: ?>
<?php echo $this->__('You have no items in your shopping cart.') ?>
<?php endif ?>
Red is the code im trying to position. Attached is an image showing at the top what it is currently, and then at the bottom what im trying to achieve. Is the best way to do this to create a seperate DIV with float right or something along those lines? |
|||||||