| View previous topic :: View next topic |
| Author |
Message |
D1Doris
Joined: 28 Sep 2008
Posts: 17
|
 Posted: Wed Oct 15, 2008 6:10 pm custom add/msg me box |
 |
|
|
I found this picture of a scroll. Now I'd like to put an 'add me' and a 'msg me' button on it.
I want it to look like they're written on the scroll, but when you hover over them, you'll see a border that makes them look like buttons.
I've got two problems that I can't fix:
- how to make the border invisible when you're not hovering over the buttons or clicking them.
Right now the borders are solid silver in IE. In Firefox one of them is transparent and the other ons is black... weird.
- how to place them in the middle instead of at the top. I put padding in my code, but it doesn't seem to work..
Here's the code:
<div style="width:150px;
height:176px;
background-image:url(http://i199.photobucket.com/albums/aa227/D1Doris/Scroll.png);">
<a class="aadd" href="add me link">
<img src="http://i199.photobucket.com/albums/aa227/D1Doris/addmebutton.jpg" width="98" height="36" />
</a>
<a class="amsg" href="msg me link">
<img src="http://i199.photobucket.com/albums/aa227/D1Doris/msgmebutton.jpg" width="98" height="42" />
</a>
<style>
a:link img {border:none;}
a:hover img {border-style:outset;color:silver;}
a:active img {border-style:inset;color:silver;}
.aadd {padding: 44px 71px 96px 25px;}
.amsg {padding: 93px 71px 51px 25px;}
</style>
</div>
Can anyone help me with this? |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 1417
Location: Biloxi, MS
|
| Posted: Thu Oct 16, 2008 5:11 am |
|
|
|
Try this:
| Code: |
<style type="text/css">
a:link img {
border: 0;
text-decoration: none;
}
a:visited {
border: 0;
text-decoration: none;
}
a:hover img {
border: 1px outset silver;
text-decoration: none;
}
a:active img {
border: 1px inset silver;
text-decoration: none;
}
div#image_wrap {
width: 150px;
height: 176px;
background: #f0f url(http://i199.photobucket.com/albums/aa227/D1Doris/Scroll.png) no-repeat center scroll;
}
div#image_subwrap {
width: 98px;
height: 100px;
margin: 0 auto;
margin-top: 46px;
border: 0 solid #f00; /* Check for positioning only */
}
.aadd {
display: block;
width: 98px;
height: 36px;
margin-bottom: 6px;
}
.amsg {
width: 98px;
height: 42px;
}
</style>
<div id="image_wrap">
<div id="image_subwrap">
<a class="aadd" href="add me link" title="Add Me"><img src="http://i199.photobucket.com/albums/aa227/D1Doris/addmebutton.jpg" alt="Add Me"></a><a class="amsg" href="msg me link" title="Message Me"><img src="http://i199.photobucket.com/albums/aa227/D1Doris/msgmebutton.jpg" alt="Message Me"></a>
</div>
</div> |
Really hate the way MySpace makes you add your code.  Hope this works as it worked fine in my HTML Editor. |
|
D1Doris
Joined: 28 Sep 2008
Posts: 17
|
| Posted: Thu Oct 16, 2008 4:10 pm |
|
|
|
Thanks for that, it's exactly how I want it, only the position of the buttons is still not right. In IE they get placed on the left side of the picture and in FF they get placed at the top of the picture...
This may be a stupid question, but I just started learning about HTML and CSS: Do I need to change the div#image_subwrap for that?
And can you tell me what that #f0f after background in div#image_wrap means?
Thanks a lot! |
|
D1Doris
Joined: 28 Sep 2008
Posts: 17
|
| Posted: Thu Oct 16, 2008 4:25 pm |
|
|
|
| Another problem: every time I use a # in my code, myspace changes it to # and then the code doesn't work anymore. That's why I used classes instead of id's. Do you know of a way to get around this problem? |
|
D1Doris
Joined: 28 Sep 2008
Posts: 17
|
| Posted: Thu Oct 16, 2008 4:30 pm |
|
|
|
| I mean 'and'#035; |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 1417
Location: Biloxi, MS
|
| Posted: Thu Oct 16, 2008 7:31 pm |
|
|
|
| D1Doris wrote: |
Thanks for that, it's exactly how I want it, only the position of the buttons is still not right. In IE they get placed on the left side of the picture and in FF they get placed at the top of the picture...
Looked fine in my IE. What version are you using? May have to redo code for Firefox and use conditional statements to make IE behave.
This may be a stupid question, but I just started learning about HTML and CSS: Do I need to change the div#image_subwrap for that?
May not work unless you can get it coded to make both browser happy.
And can you tell me what that #f0f after background in div#image_wrap means?
The #f0f is the background color used while image loads. Remove it if you don't want it or change to same color as background color your page is. #f0f is just shorthand for #ff00ff.
Thanks a lot! |
|
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 1417
Location: Biloxi, MS
|
| Posted: Thu Oct 16, 2008 7:36 pm |
|
|
|
| D1Doris wrote: |
| Another problem: every time I use a # in my code, myspace changes it to # and then the code doesn't work anymore. That's why I used classes instead of id's. Do you know of a way to get around this problem? |
The number (pound/hash) sign "#" uses the character entity code of &# 35 ; (without spaces). Ergo, &# 35 ; (without spaces) = #. Most hex color codes for MySpace leave out the "#" entirely and the colors seem to work. Reason why I hate coding for MySpace. Just try putting in &# 35 ; (without spaces) and see if it works. If not, remove them. |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 1417
Location: Biloxi, MS
|
| Posted: Thu Oct 16, 2008 8:45 pm |
|
|
|
See if this is better. Only changed the CSS. Looks good to me in Firefox, IE 6/7/8:
| Code: |
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
a:link img {
border: 0;
text-decoration: none;
}
a:visited {
border: 0;
text-decoration: none;
}
a:hover img {
border: 1px outset silver;
text-decoration: none;
}
a:active img {
border: 1px inset silver;
text-decoration: none;
}
div#image_wrap {
width: 150px;
height: 176px;
background: #f0f url(http://i199.photobucket.com/albums/aa227/D1Doris/Scroll.png) no-repeat center scroll;
}
div#image_subwrap {
width: 98px;
height: 84px;
margin: 0 auto;
margin-top: 46px;
border: 0 solid #f00; /* Check for positioning only */
}
.aadd {
/* display: block; */
width: 98px;
height: 36px;
margin-top: 50px;
margin-bottom: 6px;
}
.amsg {
width: 98px;
height: 42px;
}
</style>
<!--[if gte IE 6]>
<style type="text">
div#image_wrap {
width: 150px;
height: 176px;
margin-top: 150px;
background: #f0f url(http://i199.photobucket.com/albums/aa227/D1Doris/Scroll.png) no-repeat center scroll;
}
div#image_subwrap {
margin-top: 46px;
}
.aadd {
width: 98px;
height: 36px;
margin-bottom: 6px;
}
.amsg {
width: 98px;
height: 42px;
}
</style
<![endif]--> |
|
|
D1Doris
Joined: 28 Sep 2008
Posts: 17
|
| Posted: Tue Oct 21, 2008 3:49 pm |
|
|
|
| It's working now! Thanks a lot for your trouble and for answering my questions! |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 1417
Location: Biloxi, MS
|
| Posted: Wed Oct 22, 2008 10:34 am |
|
|
|
| You're welcome. I love happy endings. |
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
