Learn VBA & Macros in 1 Week!

CSS - Want To Use Image As A Send Button

Full Excel VBA Course - Beginner to Expert

Want To Use Image As A Send Button	View Content

Full Excel VBA Course - Beginner to Expert

Want To Replace Submit Button With Image, But Don't Want Words On Image

Similar Tutorials

View Content

Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like

Code:

<input type="image" src="..."

and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much?

Css Button To Image

Similar Tutorials

View Content

Hello,

Does anyone know of a way to design a button using CSS (or something else), and then save it as an image file?

Thanks,
Jeff

Button Image Alignment.....

Similar Tutorials

View Content

Hi There,

If you put images in in replacement for standard form buttons they don't align properly.

I have been trying to move away from nested tables with my current work in favour of css layouts and was wondering if there is any quick and easy way to align button images?

If you look at the following URL the 'add to basket' buttons are higher up thean they should be.....

http://www.storesprite.org/taml/vie...l?category_id=3

Thanks

Change Button Image?

Similar Tutorials

View Content

Hi,

Is it possible to change the default button image so that the same image can be used even when different text is set as the value of the button?

I mean, can I change the button image in a way, that it will appear correctly when the value is set to "OK" and also when the value is set to "Much Longer Value"?

Thanks and Regards,
Sim085

Image And Radio Button Over It

Similar Tutorials

View Content

Hi,

I need quick help with this: I need to make matrix 4x4 of images. Each image has radio button over it (input type=radio). No table.
Please show me some code with it - I know only the image has z-index:-1 and button z-index:0 but I have some trouble with position:absolute vs relative. It shouldn't be hard.

Example:
h t t p://img.photoamp.com/pa/07/07/21/gmqeT8S.jpg

TIA

Help With Image Button With Text

Similar Tutorials

View Content

Hello,

I have a <h2> header consisting of "Contacts". I want an add button to the right of the header. The add button should be an 32 px image which changes upon hover, and the words "new" below the image. The image "new.png" is 32 px wide and 64 px high, and consists of the two images on top of each other.

The following code is close but not perfect, and have several questions: How should I push the text under the image? Should the anchor go inside of the h2 tag? Any other improvements?
Thank you

Code:

<style type="text/css">
a.button{
    background-repeat: no-repeat;
    background-position: 100% 0px;
    height: 24px;
    width: 24px;
    margin: 0 0 10px 0;
    padding: 4px;
}    
    
a.button:hover{background-position: 100% -32px;}

.icon-32-new	{ background-image: url(new.png); }

</style>

<h2>Contacts
<a href="index.php?page=add_contact" class="button icon-32-new">New</a></h2>

Rollover Button With 1 Image File?

Similar Tutorials

View Content

i ahve seen sites, using one image rollover that has one image one on top of the other...

can someone give me a clue on the syntax thanks

Submit Button Background-image

Similar Tutorials

View Content

I'm having trouble setting the background image of a submit button. This is my code:

Code:

<input class="submit" type="submit" name="submit" value="Submit" style="background-image:url('img/enter.jpg');" />

I've also tried putting the css in my external css file in the .submit tag... didn't work. I know the path to the image is correct because the following works:
Code:

<input type="image" src="img/enter.jpg" />

What gives? Thanks

Ie7 Problem: Button Image Not Shown

Similar Tutorials

View Content

Hello,

I have a weird problem with IE7. My solution works fine on FireFox, IE8 and even IE6, but on IE7 the button image does not want to load. Here is the HTML and CSS.

Code:

<!DOCTYPE html>
<html>
<head>
	<style>
		.sayhello{
			background: url("hello.png") no-repeat scroll 0 0 transparent;
		    border: medium none;
		    height: 49px;
		    margin-top: 10px;
		    text-indent: -9999px;
		    text-transform: capitalize;
		    width: 85px;
		}
	</style>
</head>
<body>
	<input type="button" onclick="javascript:alert('hello');" value="Say Hello!!" class="sayhello">
</body>
</html>

I can get the button to show if I set the button as position:absolute or else display:block. However these would create me other problems. Is there any other way how I can get the button to show? considering I want to show the button in relative position and next to other buttons.

Image Submit Button Alignment Problem

Similar Tutorials

View Content

hi

i have following xhtml

Code:

<body>
<div id="content" class="centrehack">
<div id="header"  class="centrehack">
 <div id="topRightLogin"> 
 <form action="#" method="post">
 <input type="text" name="uname" value="username" />
 <input type="password" name="passwd" value="password" />
 <input type="image" src="images/headerlogin.gif" />
 
 </form>
 </div>

and following css

Code:

.centrehack { margin: 0 auto 0 auto; }
#content { width:960px; text-align:center; height:100%; overflow:visible; background:url(images/headerback.gif) repeat-x; }
#header { width:960px; height:47px; text-align:center; }

#topRightLogin { 
 width:450px;
 height:47px;
 float:right;
 color:#fff;
 font-weight:bold;
 font-family:Verdana, Geneva, sans-serif;
 border:#000 solid 1px;
 height:30px;
 display:block;
 padding:0;
}

#topRightLogin input,submit { 
 display:inline;
 padding:0px;
 margin-left:5px;
 height:21px;
 margin-top:0px;
}

i want to display form fields and submit button in a single line with perfectly aligned horizontally. but the form fields are showing empty area above them and going down than the submit button. the problem remains same in all browser.

i am attaching a screenshot of the problem as well. any help is much apprecated. thanks

Css Background-image Button Method Slightly Changed

Similar Tutorials

View Content

Using A Background-image On A Submit Button Adds An Extra Border In Ie

Similar Tutorials

View Content

i'm trying to style my submit button to have a gradient background with a solid blue border. looks awesome in FF, however when I try to apply the background image to the submit button in IE (6 and 7), there will be an extra border inside of the blue border. it seems to be whatever color i set my background-color to.

Code:

border: 1px solid #69A2CC;
background: transparent url(gradient.jpg) no-repeat scroll 0 center;

Problem: Positioning Image Submit Button Moves Textfield Also

Similar Tutorials

View Content

Hi Everyone,

I have a problem trying to position a submit button on a search form. The button is an image saying "go" and I am trying to move the button down by a few pixels using CSS.

Whenever I use margin-top:3px; the textfield is also moved down although I am using a class on the button of "goButton" (see code below). I want to be able to move the button only.

CSS code:

Code:

#searchField {display:inline;}
#goButton  {display:inline; margin-top:3px;}
.goButton {margin-top:3px;}

HTML/PHP code:

Code:

$output = '<div id="searchField"><span class="white">Search</span><input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'" type="text" size="'. $width .'" value="'. $text .'"  onblur="if(this.value==\'\') this.value=\''. $text .'\';" onfocus="if(this.value==\''. $text .'\') this.value=\'\';" /></div>';

if ( $button ) {
	$button = '<div id="goButton"><A HREF="javascript:document.searchForm.submit()" 
onmouseover="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/goOver.gif\'" 
onmouseout="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/go.gif\'" 
onclick="return val_form_this_page()">

<IMG SRC="/silence/templates/rhuk_solarflare_ii/images/go.gif" 
WIDTH="19" HEIGHT="19" BORDER="0" ALT="Go" 
NAME="go_but" class="goButton"></A></div>';
}

Full CSS code:

Code:

html, body {margin: 0; padding: 0; border: 0;}

html {
	height: 100%;
}

body {
	color: #5f5c5c;
	background-color: #8091b4; 
	font-family: verdana, sans-serif; 
	font-size: 80%; 
	text-align: center;
	margin: 10px 0;
line-height: 130%;
	height: 100%;
	margin-bottom: 1px;
	font-size:10px; /*added to change all font sizes*/
}


.clr {
	clear: both;
}

.outline {
  border: 1px solid #cccccc;
  background: #ffffff;
	padding: 2px;
}

#buttons_outer {
	width: 635px;
  	margin-bottom: 2px;
	margin-right: 2px;
	float: left;

}

#buttons_inner {
	border: 1px solid #cccccc;
	height: 21px !important;
	height: 23px;
}

#pathway_text {
  overflow: hidden;
	display: block;
	height: 25px;
	line-height: 25px !important;
	line-height: 22px;
	padding-left: 4px;
	border: 1px solid #ccc;
	margin-bottom: 2px;
}

#pathway_text img {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 6px;
}

#buttons {
	float: left;
	margin: 0px;
	padding: 0px;
	width: auto;
}


ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}

ul#mainlevel-nav li
{
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	font-size: 11px;
	line-height: 21px;
	white-space: nowrap;
	border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #333333;
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #fff;
	background: #c64934;
}


#search_outer {
	float: left;
	width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
	padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	
	border: 0px;
	
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #c64934;
	margin-top:3px;
	
}

#header_outer {
	text-align: left;
	border: 0px;
	margin: 0px;
}

#header {
	float: left;
	padding: 0px;
	margin-right: 2px;
	width: 635px;
	height: 150px;
	background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
	float: left;
	width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
	margin-top: 2px;
	width: 165px;
}

#left_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-left: 2px;
	/** border: 1px solid #cccccc; **/
	float: left;
	width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	float: left;
	padding: 0px;
	height: 70px;
}

#poweredby_inner {
	float: right;
	padding: 0px;
	margin-left: 0px;
	height: 70px;
}

#right_outer {
	margin-left: 2px;
	width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;
}


.user1_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

.user2_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

table td.body_outer {
	padding: 2px;
	border: 1px solid #cccccc;
}

.maintitle {
	color: #ffffff;
	font-size: 40px;
	padding-left: 15px;
	padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
	float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
	margin-right: 10px;
	float: right;
}

#footer {
	text-align: center;
	padding: 3px;
}

#footerNew {
	font-size:12px;
	padding: 3px;
	margin-left:20px;
	margin-right:8px;
	border-top:1px solid #7f91b4;
	padding-bottom:400px;
}

#footerLeft {
	float:left;
	margin-left:0px;
	color:#5f5c5c;
	font-size:10px;
	padding-left:0;
	
	}

#footerRight {
margin-top:-15px;
	float:right;
	margin-right:0px;
	padding-right:0;
	}

.contactRollover {
margin-right:0px;
display:inline;
float:right;
width:52px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
text-indent:-9999px;
}

a{ outline:none;}

a.contactRollover:link, a.contactRollover:visited, a.contactRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
}

a.contactRollover:hover {background-position:-52px 0;}

.legalRollover {
display:inline;
float:right;
width:93px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
text-indent:-9999px;
}


a.legalRollover:link, a.legalRollover:visited, a.legalRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
}

a.legalRollover:hover {background-position:-93px 0;}


#searchField {display:inline;}


#goButton  {display:inline;}


.goButton {margin-top:3px;}



.goRollover {
display:inline;
float:left;
width:19px;
height:19px;
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
text-indent:-9999px;
}


a.goRollover:link, a.goRollover:visited, a.goRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
}

a.goRollover:hover {background-position:-19px 0;}


ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
	text-align: left;
	font-size: 11px;
}




/* Joomla core stuff */
a:link, a:visited {
	color: #c64934; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #900;	text-decoration: none;
	font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}


table.contentpaneopen td {
   padding-right: 5px;
  
   }

p.contentpaneopen  {
   padding-right: 5px;
  
   
   }

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-left: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
}

.button {
  color: #c64934;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
	padding: 2px;
	border:solid 1px #cccccc;
	background-color: #ffffff;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-right: 5px;
}

.contentheading {
	height: 30px;

	color: #002469;
	font-weight: normal;
	font-size: 16px;
	white-space: nowrap;
	padding-left:2px;
}



.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #cccccc;
	text-align:left;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.moduletable {
	padding: 0;
	margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
	background-color : #ffffff;
}

.sectiontableentry2 {
	background-color : #f9f9f9;
}

.small {
	color: #999999;
	font-size: 11px;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #999999;
	font-size: 11px;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #999999;
	font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
}

a.mainlevel#active_menu {
	color:#fff;
	font-weight: bold;
}

a.mainlevel#active_menu:hover {
	color: #fff;
}

a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #c64934;
	text-align: left;
}

a.sublevel:hover {
	color: #900;
	text-decoration: none;
}

a.sublevel#active_menu {
	color: #333;
}

.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

form {
/* removes space below form elements */
	margin: 0;
 	padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
	display: block;
	height: 1.5em;
}




/*added styles*/

#search {
height:30px;
width:190px;
background-color:#4c6696;
	margin-top:0px;
	
	
	
}

.white {
color:#fff;
padding:5px;
font-size:11px;
}



/*Added from 3 col layout*/



p  {margin: 0; padding: 8px;}

h2 {font-size: 1.2em; text-align: center; padding: 10px;}

.clear { clear: both; }

a {text-decoration: underline; font-weight: bold; color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}


.wrapper {
margin: 0 auto;
width: 768px;
text-align: left;
/*background: #add8e6;*/
background: #ffffff;
border: 0px solid #000;
color:#5f5c5c;
}

/*** Below is the Tan hack, needed because the decorative side borders (thin black) on 
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/

* html .wrapper {
width: 771px; 
w\idth: 768px; 

}

.outer {
border-left: 150px solid #ffffff;  
border-right: 190px solid #ccd3e1;
background: url(images/blackline.gif) 100% 0 repeat-y;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes 
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different 
BG location, due to a BG placement variation. 
***/

* html .outer {
background:  url(images/blackline.gif) 565px 0 repeat-y;
}

.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: 620px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border: 0px solid #000;
border-width: 0 0 0 0px;

}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/

* html .inner {
width: 100%;

}

.float-wrap {
float: left;
width: 567px;
margin-left: -150px;       /*** Same length as left column width ***/

}

/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
.left {
	margin-top:25px;
	
}


#line {
border-right:1px solid #000000;
height:100%;
}

.right {
float: right; 
width: 190px;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
background-color:#ccd3e1;
}

* html .right {
margin: 0 -190px 0 0; /*** IE gets this margin. ***/
}

.center {
margin-top:23px;
float: right;
width: 415px;
background: url(/silence/templates/rhuk_solarflare_ii/images/navBlueLine.gif) repeat-y 0 0;


}

.leftCenter {

width:2px;

}

.wide {
background-color: #002469;    /* header and footer colours */
width: 100%; 
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;


}

.wide p {padding: 5px;}

.top {border-width: 0 0 0px;

overflow:hidden;}

.bottom {border-width: 2px 0 0;}

/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}



.grey {
	color:#5f5c5c;
	
}
.newsflash {
	padding: 15px 10px;
	width:175px;
		color:#5f5c5c;
	font-size: 10px;
}

.newsflashTitle {
	color:#4c6696;
	font-weight:bold;
	margin-left: -7px;
	font-size: 11px;
}


a.readon {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}

a.readon:hover {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}

a.readon:visited {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}

Any help would be greatly appreciated.

Thanks.

P.s. How do I post links to the site on here?...I tried but it removed the URL saying (URL address blocked: See forum rules)

Elimination Of Bluish/purple Border Around Button Image (link)

Similar Tutorials

View Content

Hi,

I have pictorial buttons that really are <a href's></a> with img buttons in between.
When viewed in IE i get a bluish/purple box around my buttons.

I want to eliminate the link marking around the images.

How do I do this?

Thanks for all and any suggestions.

Melroy

Image Button To Rollover W/diff Color And Stay Active

Similar Tutorials

View Content

i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this?

this is what my code looks like:

Code:

a:hover#index {
	background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
    background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
    background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
    background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
    background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
    background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
    background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
    background: url("./images/search-red.png") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search   {
	width: 86px;
	height: 27px;
	float: left;
	margin-top:6px;
	position:relative;
	left: 115px;

}

a#index {
	background: url("./images/home-grey.png");
}
a#design {
	background: url("./images/dande-grey.png");
}
a#howto {
	background: url("./images/howtobuild-grey.png");
}
a#installation {
    background: url("./images/installation-grey.png");
}
a#dean {
    background: url("./images/deansblog-grey.png");
}
a#forum {
    background: url("./images/userforum-grey.png");
}
a#plan {
    background: url("./images/planbike-grey.png");
}
a#search {
    background: url("./images/search-grey.png");
}

Css Hide "css Menu & Image" Until User Clicks Button

Similar Tutorials

View Content

Hi, not sure if it is possible but i thought it may be possible in CSS...

I was wondering:

* I have a shopping cart (using JS)
* A CSS based Navigation which is "View Shopping Cart"
* An form button called "Add to cart"

** I want the CSS based Nav, to be hidden, until the user clicks on the form button, then it is visible, so that the user can click on it...

Anyone know how this is done???

Cheers

Jackson

Button:hover, Button:active Rollover Effect

Similar Tutorials

View Content

i know that IE doesnt support the :hover being added to anything but links, is this the same with :active?
was just wondering whether i could have a style change when the user clicks on a form button

Adding Border To Button Alters It Button "identity" In Ff

Similar Tutorials

View Content

basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it?

Send Html Email Using Linked / Embedded Css

Similar Tutorials

View Content

Hi,

Not sure if I'm posting in the right area, but here goes.

I'm trying to learn how to send HTML emails, and as I'm in the process of revamping our website using only CSS (no tables), I wanted to format the emails in the same way.

I've created 2 html pages in Dreamweaver - in one, I linked to my stylesheets, and in the other I copied and pasted the contents of the stylesheets and embedded them in my html page. The incorrect result described below is exactly the same for both.

In Outlook, following instructions I found on Macromedia's website, I created a New email, did Insert -> File, clicked the dropdown arrow beside the Insert button, and clicked Insert As Text.

It inserts the images fine, so obviously it's finding the path I've specified (I have alternated between using an absolute path and using a relative path and a base tag) but the layout is completely wrong, eg. the 'LeftPanel' which I've specified as :

#LeftPanel {
position:absolute;
top: 105px;
left: 5px;
width: 190px;
height: 400px;
border: 1px solid #000033
}

is taking up the full width of the email - basically everywhere I've set a specific width/height are not being displayed as specified at all. I've used a browser to view the work I've done on the revamp of the actual website and everything is exactly right, so the stylesheets are working correctly in that context.

Anyone any ideas what the problem is?

Thanks a lot,
J.

Css: Change Background Image And Text Colour When Hovering On An Image Link

Similar Tutorials

View Content

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)