|
CSS - How To Make A Html Input Button Tag Look And Behave Like An Html Hyperlink?
Hi,
I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? Similar TutorialsI'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy) The problem: Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear. Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world. shortened HTML: Code: <div class="menu"> menu here </div> <div class="contents"> the rest of page </div> shortened CSS: Code: .menu
{float: left;
width: 20%;
padding: 1%;
}
.contents
{float: left;
padding: 1%;
width: 76%;
}
How would I make a textbox flat with css? so that there is 1 solid black line around it? HI, Here is my problem : I have an image which I want to use as a link. I put it between the <a></a> tags. I have define a CSS for it : Code:
a.toto:link { color: #474747;}
a.toto:visited { color: #474747;}
a.toto:hover { color: #00BAFF;}
In IE 6, the image show up with a border of different colour than listed above and when I move the pointer over it, this border doesn't change colour as a text-link does. In FF, all work pretty well as I wanted. See example on www.steax.com (hope it's work, my server doesn't feel good these days) Thx Hi! How does padding and margin on text and images behave? And on other inline elements? Didn't get it to work in IE6. Thank you It's the effect where you click on a link or a button and a new bit of content appears, pushing down everything below it. Clicking it again makes that content disappear and all the original text move back up. Google uses it in a number of places, notably at the bottom of any search result. At the very bottom, below the "Goooogle" page number thing, there's a little plus sign to the left of "Add a result". Clicking that makes new content appear. I see it in a lot of places and I love the effect! I don't know if its Ajax or CSS or whatever, so I don't know how to properly search for a tutorial, but could anyone point me in the right direction? I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
solved. Hi i have a css code as below, Code:
.profile a:link, a:active, a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #3B6D06;
text-decoration: none;
}
.profile a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
color: #DE6200;
}
and I am using it as Code: <a href='http://domain.com' class=profile>text</a> but it is not applying css settings on the hyperlink. can anyon help please? thanks Hi I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet.. Kindly post ur suggestions to my email adddress godwinsharmila@yahoo.com Thanks in advance.. Regards Sharmila The width spreads across the whole page, i only want it to be as long as the content in the div. How can i solve this? Code: <style type="text/css">
.three {
display:block;
width:auto;
height:100px;
position:relative;
border:1px solid black;
}
.three a {
width:100%;
height:100%;
position:absolute;
}
</style>
Code: echo "<div class='three'><a href='two'></a>test</div>"; Hay gys !..... I'm confusing of this, i want to give the anchor from css class, and give hyper link inside the anchor,so how can i achieve this ? pls help ! Thanks hello friends, please tell me how can i specify a hyperlink, active, hover and visited attribute in body { } for example i have the following css BODY { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #F2F2F2; font-family: Arial; font-size: 11px; color: #000000; text-align: left; } now i want to specify the default hyperlink with active, hover and visited attribute within body. Thx. Im not certain whether or not this is an HTML or CSS problem, or if its just a bug i will have to live with. I cannot for love nor money get IE6 to use my specified link colors... ---------FROM MY CSS SHEET--------------------- a:link { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:active { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:visited { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } A:hover { background-color: #FFCC33 ; color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } a:hover img { background-color: #000000; } A:link.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:active.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; background-color: #000000 } A:visited.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:hover.noback { color : #000000 ; background-color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } in Firefox, this is all displayed as I want it to be, but in IE6, I get pants defaults. I have been able to remove the initial color by adding <Body link="000000"> to the body, but, that doesnt seem like a complete solution. I have spent all morning at work (nice job i know) trying to figure this out, and have had no joy... I bow to the infinate wisdom of the masses. Hey guys. I am having trouble getting a column to go the full length of the page. Here is a link to the page http://www.tjshafer.com/projects/ca...me/subpage.html I have marked in the page where the table is that should have a height of 100%. Also here is the section that needs to be 100%. This is the td which has the code in it, Code: <td id="leftcell" valign="top" height="100%"> <!--begin table for menu which includes background--> <table border="0" cellspacing="0" id="menucell"><tr><td width="247" valign="top"> <!--begin menu table--> <table cellspacing="0" id="menuitems" border="0" width="159"> <tr><td> </td><td id="menuheader" align="left" width="159" style="line-height:12px"> <br>CONTEMPORARY<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot" border="0"> Casual Dining & Bar Stools</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Entertainment</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Office</a><br><br> WICKER & RATTON<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Dining</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br><br> OUTDOOR<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Cast Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wrought Iron</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> All Weather Wicker</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wood</a></td> </tr> </table> <!--end menu table--> </td></tr></table> <!--end table which includes background--> </td> I tried adding height="100%" everywhere i could think. Any help would be greatly appreciated. hey guys i didnt know what to do so came here to ask im making just one web page, i have done all the coding and everything is set it works fine in Firefox and works fine with IE7 and IE8.... but i am having problems with the page when i open with IE6 help would be appreciated as a new user i cannot add webpage link anyone who is interested to help i can PM them the webpage or here im adding webpage hope i dont get banned for this linux103.mysite4now.net/desimafia/test2/tvshows.htm view it in IE6 and you will know the problem thanks I have this website that i am using CSS for much of the styles. I have used hotspot hyperlinks in parts of the images. Now there is the blue line that a link in html normally has around the entire div the hotspot is in. If clicked its the purple colour that a clicked (visited) hyperlink has. The link to the page in question is itxtme.com/still_lime/os_z_b.html This only occurs in IE, it is not occuring in Opera. All the other links are working correctly. All source is in the webpage (view/source code) Kind regards how i can work around this! Scott I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great. HTML <a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank"> <img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" /> </a> CSS a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934} I've got my normal navigation links styled using the standard a:link, a:hover etc etc. I want to include an image on one of my pages which links to a download, because the style applies to all 'a hrefs' the properties for my text links are assigned to the image (for instance a border is given). Is there a way to assign a different class to the image hyperlinks? Cheers. On my page I have 2 different hyperlink styles, one for my menu and one for any hyperlink in the content. One is under #menu in my stylesheet and the other under #content. With FF everything looks great, but when I open my site in IE6, the hyperlink styles seem to combine. Any ideas? |
|||||||