/    Sign up×
Community /Pin to ProfileBookmark

Forum and HTML newbie needs help!

Copy linkTweet thisAlerts:
May 31.2007

Hello folks,

I’ve been getting by on the basics of HTML thus far but it is time I looked to improve my skills. I am having a problem with :hover inside a div box. I can’t get the normal CSS style and the hover to work alongside each other.

I realise this is pretty basic but we all gotta start somewhere! Help much appreciated.

CSS
#bottomright {
width:173px;
height:94px;
position:absolute;
top:50%;
left:50%;
margin:40px auto auto 105px;
border:0px solid black;
text-align:left;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 10px;
}

#bottomright a:hover {
text-decoration: underline;
color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;

}

CODE
<body>
<div id=”center”><a href=”main movie.html”><img src=”enter.gif” alt=”” width=”254″ height=”236″ border=”0″ /></a></div>
<div id=”bottomleft”>Welcome to the online portfolio of new media designer Bruce Wilson.</div>
<div id=”bottomright”><a href=”mailto:[email protected]“>[email protected]</a></div>
</body>

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAMay 31.2007 — I'm not sure what you mean by "alongside each other," but I do notice that you've not set up the normal state for the link. Indicating the color in the parent div will not establish the color for the link within it; instead, the browser default color (usually blue) would be used. You need to define the link attributes:

#bottomright a {color: #fff;}

KDLA
Copy linkTweet thisAlerts:
@leadbellyauthorMay 31.2007 — Thanks KDLA,

I got the links bit sorted now but have hit another snag. When I open the page in ie the black body colour will not appear below the div boxes. Please see what I mean at http://www.bruce-wilson.co.uk.

Thanks again for any help anyone
Copy linkTweet thisAlerts:
@KDLAMay 31.2007 — Hmmm... it's all black for me using IE6.

KDLA
Copy linkTweet thisAlerts:
@leadbellyauthorMay 31.2007 — I'm on explorer 7, works great in ff, does anyone else have issues with the page? The background is still white below the div boxes, are they blocking the body tag?

Thanks KDLA + anyone else.
Copy linkTweet thisAlerts:
@WebJoelMay 31.2007 — CSS

#bottomright {

width:173px;

height:94px;

position:absolute;

top:50%;

left:50%;

margin:40px auto auto 105px;

border:0px solid black;

text-align:left;

font-family: Geneva, Arial, Helvetica, sans-serif;

color: #FFFFFF;

font-size: 10px;

}

#bottomright a:hover {

text-decoration: underline;

color: #FFFFFF;

font-family: Geneva, Arial, Helvetica, sans-serif;

}

CODE

<body>

<div [B]id="center"[/B]><a href="main movie.html"><img src="enter.gif" alt="" width="254" height="236" border="0" /></a></div>

<div id="bottomleft">Welcome to the online portfolio of new media designer Bruce Wilson.</div>

<div id="bottomright"><a href="mailto:[email protected]">[email protected]</a></div>

</body>[/QUOTE] I do not see any CSS for the id="center"... is there any additional-missing CSS that might help us decide what is wrong..?
Copy linkTweet thisAlerts:
@leadbellyauthorMay 31.2007 — Yeah sorry, this css didn't apply to the previous question.

Here it is:-

body {

background-color: #000000;

margin-top: 0px;

}

#center {

width:254px;

height:236px;

position:absolute;

top:50%;

left:50%;

margin:-118px auto auto -127px;

border:0px solid black;

text-align:center;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 10px;

}

#bottomleft {

width:173px;

height:94px;

position:absolute;

top:50%;

left:50%;

margin:40px auto auto -300px;

border:0px solid black;

text-align:left;

font-family: Geneva, Arial, Helvetica, sans-serif;

color: #FFFFFF;

font-size: 10px;

}

#bottomright {

width:173px;

height:94px;

position:absolute;

top:50%;

left:50%;

margin:40px auto auto 105px;

border:0px solid black;

text-align:left;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 10px;

}

#bottomright a:link {

color: #990000;

font-family: Geneva, Arial, Helvetica, sans-serif;

text-decoration: none;

}

#bottomright a:visited {

color: #990000;

font-family: Geneva, Arial, Helvetica, sans-serif;

text-decoration: none;

}


#bottomright a:hover {

text-decoration: underline;

color: #FFFFFF;

font-family: Geneva, Arial, Helvetica, sans-serif;

}

Thanks for the response
×

Success!

Help @leadbelly 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 5.24,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...