keith1001
asked on
CSS Styling - Div Box and H1 Links
I have h1 tags inside a div box (want the whole div box clickable) below and the h1 tag links have underlines and I am trying to get rid of them. I am missing something here....
------------------------CS S--------- --------
<a href="#">
<div id="home-annoucement">
<h1 class="annoucement1">Open House </h1>
<h1 class="annoucement1">Today!</h1>
<h1 class="annoucement1">Click here for more information...</h1>
</div><!-- home-annoucement -->
</a>
------------------------CS
#home-annoucement {
background-color: #FFC;
padding: 4px;
height: 70px;
width: 880px;
border: 1px solid #FC3;
margin-left: 13px;
}
#home-annoucement h1 {
font-size: 18px !important;
color: #000 !important;
margin: 0px !important;
padding: 3px !important;
text-align: center !important;
text-decoration: none !important;
}
For class="annoucement1", 'annoucement1' is not the same as #home-annoucement h1 that you show above. You need to find plain 'annoucement1' in your CSS.
Do it like this instead:
<div id="home-annoucement" onclick="location.href='http://www.wolframalpha.com/';" style="cursor:pointer;">
<h1 class="annoucement1">Open House </h1>
<h1 class="annoucement1">Today!</h1>
<h1 class="annoucement1">Click here for more information...</h1>
</div>
<!-- home-annoucement -->
Wrapping a div in an anchor tag like that isn't standards compliant and could cause you some headaches in the future.
The inline js in my example isn't very elegant and there are other methods, but it'll get the job done.
The inline js in my example isn't very elegant and there are other methods, but it'll get the job done.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.