|
CSS - Restyle Anchor
Hello,
On a bottom of a form I have 2 buttons: Submit and Cancel. Submit is an input and submits the form. Cancel should just redirect the user to a new page without submitting the form. I need the Cancel button to look the same as the Submit button. If I use an input of type button as Cancel button I am able to do that but then I need to rely on "onclick" to redirect the user ... I think would be better to use an anchor. However, I am having a problem in styling the anchor to make it look the same as the Submit input. Could someone tell me how to style the anchor and if using an anchor is better then using the button? My code: http://www.27lamps.com/Labs/Buttons/Buttons.html Thanks, Miguel Similar TutorialsHello, I am trying to create something really simple: An image anchor with a height of 100px where the image is centered inside the anchor ... However, this is not working: http://www.27lamps.com/Beta/Bar/Anchor.html I added a red background to the anchor to check it out. Any idea how to make this work? Thanks, Miguel If you look at this site with IE6 there is a strange behaviour with the in-page anchor links where IE6 will set them all 'visited' (grey) even when they have not been visited. www.warehammid.dorset.sch.uk/ The ordinary site navigation links work OK (grey only if visited). With all other browsers all works OK even IE7. Any ideas as to why IE6 does not conform (is it a bug)? I'm sure its something to do with the '#'. Code below for you to see. Here is an example xhtml code: <!-- NAVIGATION --> <!-- Navigation Level 3 --> <div class="leftsideCol"><!-- InstanceBeginEditable name="sideNav" --> <ul> <li class="title">In-Page links</li> <li><a href="#">Governors</a></li> <li><a href="#pta">Parents Association</a></li> <li><a href="#staff">Staff</a></li> </ul> .... </div> and here is its CSS styling: .leftsideCol ul { margin: 0px 0px 0px 0px; padding: 0px; } .leftsideCol li { display: block; list-style: none; } .leftsideCol li.title { /*title of column is actually an li*/ color: #fff; text-transform: uppercase; text-align: center; font-weight: bold; background-color: #41a9ef; height: 21px; border-bottom: 2px solid #0c578d; line-height: 1.5em;/*to center lfc top header*/ } .leftsideCol li a { height: 1.3em; padding: 0px 0px 0px 2px; border-left: solid 7px #fff; font-weight: bold; text-decoration: none; } .leftsideCol li a:link { color: #0c578d; } .leftsideCol li a:visited{ color: #888888; } .leftsideCol li a:hover, .leftsideCol li a.selected{ border-left: solid 7px #d52c1e; border-bottom: 1px solid #d52c1e; } I have an interesting problem. I'm using a basic <div> for my content in the center of my page. On one page (a FAQ page) I'm using a table to display the question/answer part. At the top of the page, above the table, I have a bunch of questions (I'm sure you've seen this layout before). I'm trying to link the questions to anchors set to specific rows in my table, and it's just not working. I use <a name="blah"> for the anchor and <a href="#blah"> for the link...and what it does is take me to the very top of the entire table. Every link, every time. Regradless of where in the table the anchor is declared it just takes me to the top of the table. The table scrolls about 1.5 screens, so it should be going further. I placed a tag just after my </table> and just before my </div> and it worked perfectly, took me right to the bottom of the page. But when I moved it to just inside the </table> it quit working, and took me to the top of the table. That was far too much for one paragraph...sorry. Now, understand that I'm not using a table for the "question link" part of the page, only the "question/answer" part. I just can't figure this out, and it looks too nice in the table to go trying to do it all with css. The rest of my site so far is pretty much tableless, and I'm pretty new to css. The reason I'm asking here, is I figure it must have something to do with the css since I've seen the same code work fine on a table layout. Sorry if this is a dumb question, or if I should ask it somewhere else. I'm just losing my mind. i want to make it so a certain div is always at the bottom, but i cant do it by playing a min-height on the div above it, is there a solution to this problem? Hello, I am applying a style to a anchor tag. This anchor is created by an ASP.NET page and is inside a list item. I know the style is working because I applied it to the anchor in a page that has only this. .Test { background-color: #101010; color: #E2E2E2; padding: 4px 10px 6px 12px; text-decoration: none; font: normal 1.2em Verdana, Geneva, sans-serif; } <a href="Test.aspx" class="Test">Testing</a> However, when I apply it to the anchor inside the list item I don't get the bottom margin unless I add "display: block" to the style! But then the background is extended 100%. I don't know what is going on. I tried everything I could think off. Here is the code where the Test style is giving me problems: ... <li> <label for="tbMessage" id="lMessage">Mensagem<span class="Required">*</span></label> <textarea name="tbMessage" rows="4" cols="20" id="tbMessage"></ textarea> </li> <li> <a id="lbSubmit" class="Test" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphSite$cfSendContact$lbSubmit", "", true, "ContactForm", "", false, true))'> Send </a> </li> </ul> Any idea why this is happening? All I am trying to do is to make my anchor look as a simple button. Thank You, Miguel I am hacking a clients css. Can someone tell me where I am going wrong. His site is a Smarty one. Here is the meta tags. The website is www.russiansweets.us and I am trying to format the links in the right nav menu underneath the search function that are presently red. I added class A.one:{} Class but it seems not to make a difference. I get the same color links before as after (red) Code:
<html>
<head>
link href="stylenew.css" rel="stylesheet" type="text/css">
{literal}
<style>
A
{
COLOR: red;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A:hover
{
COLOR: #993300;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
// here is the part I added a.one
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
a.one:hoover
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
</style>
//end of what I added
{/literal}
Here is the html Code:
<td>
<a class="one" href="disclaimer.php">Disclaimer</a>
</td>
What is the proper way to specify an anchor target in CSS? i have a horizontal navigation pane in which i want 5 links to be placed across the top. any ideas? ive tried setting the width a percentage and a fixed width but no luck. width:50px; How does css work when it comes to inheriting Anchor Styles? For instance, check this out. http://section31.us/temp/csslinks.html The following has 2 styles for links, one red and one blue. It only works if I define the styles in the same order that I place them in my html document. Is there anyway around this? If you need more clarification, please let me know. This is a simple question. In my menu system, I want my "items" to look like links. I've put the text in an Anchor tag... but I then get the, for this time at least, undesired blue underline action going on... What CSS do I need to use to prevent this. I want my <div> tag and/or my <a> tags to not change... Thanks. This one has me completely baffled. IE6 and 7 are not seeing the following link. This is from the IE6 view source: Code: <div class="corner-login" <a href="/account">Login</a> | <a href="/user/register">Join</a> </div> The word 'login' renders on the left but no link, just dead text. The join link on the right works fine. I cannot for the life of me figure out why. Do you see something that I don't in this code? Anyone have any idea what could be going on? I'm not extremely familiar with CSS, as I've only used a few simple implementations of it. Please move this if it's in the wrong place, but I was wondering if it was possible to alter the behavior of <a> tags so that when clicked, instead of loading the page specified in the src, it executes a JavaScript function, providing the src for a value. It seems to me that this would be done through CSS. I could go through and replace each "src='src'" with "onClick='function(src)'", but there are far too many pages, each with far too many links, to edit. So it seems it would be easier to simply import a CSS style in each page that'll have the same effect. Any ideas? Is it possible to apply an A style inline? Eg inside a tag? You can do this obviously: Code: <div style="background: url(blah.gif);">blah</div> But is it possible to apply an A (anchor) style in the same fashion. I do have a very valid reason to do this; being that I need to slide a background image using background-position, but the image is not known until the page loads..... Thanks for any pointers. There's a weird bug with named anchor which I'll describe in detail (screen shots will also follow) for posterity as the example page will most likely change : there's a header div followed by a main div containing a centered div with a right sidebar div floating on the left. In the content div there's the page description followed by a picture gallery including a full size image with some thumbnails on the side included in the div which the thumbnails are linked with it as a named anchor. The problem lies that when the named anchored is referred to (linked) it's pushed all the way up right next to the header div ; not only the content div but also the sidebar which I think is weird. I've tried setting margin-top higher than the header div just in case this case broke the normal flow of blocks (which its end sets the beginning of the following content) but whatever margin I set the behavior remained the same. I noted the behavior in FF2, FF3 & Safari 3.2.1 although IE6, IE7 & Opera 9.63 doesn't have the behavior as I'd like to end up with (as with IE). Sadly the forum rules forbid me from posting links, but I would be happy to send them to you privately. Please note that it's my first time posting on this site and that I've searched the subject in vain prior to starting this new thread. Does anyone know if there is a css property that applies to links that are linked to anchored tags on the page? Can there be a selector just for links that go to an anchor tag? I don't want to use a seperate class for only those links. thanks Hi, I am trying to position a image after the text link. If the link is in a single line then it works good, but when it goes to next link then the image disappears. This is the code: Code: <style>
.master {
font-family: arial;
font-size: 12px;
width: 200px;
}
.master a{
font-weight: bold;
color: #999;
text-decoration: none;
background: url(1px.gif) no-repeat fixed right bottom;
padding: 0px 15px 0px 0px;
}
.master a:hover {
text-decoration: underline
}
</style>
<div class="master">
<a href="#">Link Title: Cascading Style Sheets (CSS) forum</a><br/>
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the "learning CSS" page. For background information on style sheets, see the Web style sheets page.
</div>
Please advice. Thanks in advance. Hey all, I'm having a minor problem with an anchor (a.return, at the bottom of the page) on the following page: calvarychapeljax.com/fellowship.php In FF, Chrome, and IE8, it is displaying "properly" (a relative term, for sure ) on one line. In IE7 (and possibly prior IE versions; I don't have IE6 to test), the anchor is stacking vertically. I can't figure out if there's a wrapping issue, if there is less space in the way IE7 is interpreting the CSS, etc. What makes it worse is I have this anchor on other pages (webelieve, musicministry) and it is fine, even in IE7. Is the table affecting it? Any ideas? Hello, I want to have every anchor in a paragraph have this effect when mouse-overed. p a:hover {background-color:#00bff3;color:#fff;} It works fine but what I didn't think about was any image I may put into a paragraph that is wrapped in an anchor will also get it. How can I exclude anchored images in paragraphs from this effect? Hello, In a page I have: 1. An input (type="submit") button that submits a form. 2. An anchor that cancels the form submission and redirects the user to a page. I am trying to make both look the same having a padding a background color. I tested in Firefox and in IE but in both cases the two don't look the same. I am also using a Reset.css. I posted an example with the HTML and CSS code he http://www.27lamps.com/Labs/Buttons/Buttons.html Could someone help me out with this? Thanks, Miguel [link removed] In IE6, the category "At-A-Glance Telephone/Address Book" has a large vertical gap inserted at the first space. It only happens on this page (that I've found). It doesn't happen on other pages with the same number of nested lists. Shortening the name of the category so it doesn't wrap just moves the gap to the next category down. Any idea what's causing this? Thanks much in advance. ------- Someone on another forum figured it out. It was just IE6 choking on the left padding used to indent each sublevel. Reduced the padding for IE6 only to fix it. |
|||||||