/    Sign up×
Community /Pin to ProfileBookmark

image positioning

when i place a certain image (lightnin) above my css buttons, it makes my
buttons inoperable. the buttons work fine, except when the image is overlapping the buttons extended vertical space.

does it have to do with the way my css buttons are displayed?
i’m using IE browser. here’s my code and a url, if you wanna take a look:
[url]http://fatbottoms.atspace.com/zbrindex.html[/url]

p.guitar { position:absolute; top: 17px; left:271px }

p.lightnin { position:absolute; top:-24px; left:101px }

.buttons a { margin-left:122px;
color: #0000CC;
border: 4px solid;
background-color: #FFCC00;
font: bold 18px verdana;
text-decoration: none;
border-color: #FFFF00 #CC9900 #CC9900 #FFFF00;
display: block;
width: 105px; margin-top:16px;
padding-top:2px; padding-bottom:2px;
text-align: center; }

.buttons a:hover {
color:#0000FF;
border: 4px ridge;
background-color: #FFCC00;
font: bold 18px verdana;
text-decoration: none;
border-color: #00FFFF;
display: block;
width: 105px;
text-align: center;}

<body>

<div class=”buttons” style=margin-top:302px>
<a title=”home sweet home” href=”brindex.html”>HOME</a>
<a title=”storyline & character desc.” href=”intro.html”>INTRO</a>
<a title=”archives of all the strips” href=”archives.html”>STRIPS</a>
<a title=”merchandise” href=”http://cafepress.com/bluesrock”>SWAG</a>
<a title=”request a custom drawn strip for yourself” href=”donations.html”>CUSTOM</a>
<a title=”contact” href=”mailto:[email protected]“>EMAIL</a>
</div>

<div class=”globe”><img src=”brorbit1.jpg”></div>
<!–<img style=”position:absolute; top:290px; left:289px” src=”brlogo2.gif”>–>

<p class=”guitar”><img src=”guitarsave1.gif”></p>

<p class=”lightnin”><img src=”lightnin2.gif”></p>

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@FangAug 11.2005 — Remove the image lightnin2.gif and place it as the background in the body:body { margin:0; padding:0; background: #006 url(lightnin2.gif) no-repeat 101px -10px;}


[URL=http://validator.w3.org/check?verbose=1&uri=http%3A//fatbottoms.atspace.com/zbrindex.html]Validate[/URL] your page.
Copy linkTweet thisAlerts:
@fatbottomsauthorAug 11.2005 — hey your code works great except, now part of the lightnin image is overlapped (hidden ) behind the globe image, because of the way i cropped the globe image (rectangle ). can i set up the buttons in a table and have it work? how would i code this?
×

Success!

Help @fatbottoms spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...