Jump to content

CSS + picture


m.huber614
 Share

Recommended Posts

I have a picture that I'm trying to use to represent a link and for some reason it keeps getting cut in half long ways and aligned with the bottom.Here is my CSS code:

#about{}#about a{	background-image:url(images/linkAbout.gif);	background-repeat:no-repeat;}#about a:hover{	background-image:url(images/linkAboutH.gif);	background-repeat:no-repeat;}

and my html:

<div id=navbar>	<div style="position:relative; top:10px;" id="container">		<span id="about"><a href="about.html"><img height="37px" width="267px" /></a></span>	</div>	</div>

if I could post a picture of the issue i would. not sure how to upload.your help is greatly appreciated.

Link to comment
Share on other sites

why use <img> if you are setting the background with CSS? you might just want to get rid of the <span> and <img> altogether and just make your selectors like so:

//CSS#container a{	background-image:url(images/linkAbout.gif);	background-repeat:no-repeat;}#container a:hover{	background-image:url(images/linkAboutH.gif);	background-repeat:no-repeat;}//HTML<div id="navbar">	<div style="position:relative; top:10px;" id="container">		<a href="about.html"></a>	</div></div>

why are you using position:absolute? Don't forget the parenthesis around navbar

Edited by thescientist
Link to comment
Share on other sites

I was using Position:relative; because I just wanted it to move 10px from where it otherwise would've been placed. also <img> was placed there as a placeholder for the anchor. Notice there is no img reference, just height and width values. If I get rid of these it will literally disappear all together or assume no dimensions. then no background images appear.

Link to comment
Share on other sites

then just set the width and heights on the anchor. eventually as you build your page, you should really consider using margins and paddings to organize the layout of your page, not using positioning straight from the start. Create the layout on a piece of paper, making a box for each section and work from there.

Edited by thescientist
Link to comment
Share on other sites

also, just realized, you will have to set your anchors to display block.I think you will be better served by considering the use of lists for your menu, however.

Link to comment
Share on other sites

So this is what i changed the code to

/html	<div id=navbar>		<div id="about"><a href="about.html" style="height:37px; width:267px;"></a></div>	</div>/css#about{	margin-top:10px;}#about a{	background-image:url(images/linkAbout.gif);	background-repeat:no-repeat;}#about a:hover{	background-image:url(images/linkAboutH.gif);	background-repeat:no-repeat;}

no picture appears nor can I find where the anchor or div are, not even after defining background-color:#00f for the about id.I admit, it's been some time since I've done this but I think I retained enough that an error like this should not be occurring.my fault, didn't see the last post. Display:block worked like a charm. Thank you so much! How did you know that would work? Also, thanks for the additional advice. I really appreciate it.

Edited by MH614
Link to comment
Share on other sites

anchors are inline elements, and thus are "resistant" to width and height properties.
...which means you need to add this to your #about a declaration:display: block; Edited by ShadowMage
Link to comment
Share on other sites

...which means you need to add this to your #about a declaration:display: block;
:)
my fault, didn't see the last post. Display:block worked like a charm. Thank you so much! How did you know that would work? Also, thanks for the additional advice. I really appreciate it.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...