[SOLVED] styling a div with a link and hover

This is a discussion on "[SOLVED] styling a div with a link and hover" within the Web Page Design section. This forum, and the thread "[SOLVED] styling a div with a link and hover are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page [SOLVED] styling a div with a link and hover

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.




Reply
 
LinkBack Thread Tools
  #1  
Old Oct 31st, 2007, 10:31
New Member
Join Date: Oct 2007
Location: London
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
[SOLVED] styling a div with a link and hover
Sorry for this question if its dumb, Im relatively new to css so I'm hoping someone can help. I am setting up a gallery with an image and text contained inside a div called thumbnail.

I want to create a link for each div container, but I also want a hover state on the div which fills with a colour (but doesn't effect the image inside). I'm not sure how to go about adding a link to the each div with a hoverstate.

Please find the link to the page here,

http://www.twistedjunkie.eclipse.co.uk/gallery.html




thanks..
lister
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Oct 31st, 2007, 11:13
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: styling a div with a link and hover
You could set the display: block property on the link (a { ... } ) with a width and height ...

Code: Select all
#somediv a {
    display: block;
    width: 50px;
    height: 100px;
}

#somediv a:hover {
    background-color: #900;
}
Something like that?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Oct 31st, 2007, 11:56
New Member
Join Date: Oct 2007
Location: London
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Re: styling a div with a link and hover
sorry for my lack of CSS, how do you go about adding a link to the div area (im using dreamweaver at the mo) without effect the content inside. at the moment I have a div class called thumbnail.

HTML: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>gallery example</title>
<style type="text/css">
<!--

body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 17px;
}


#container {
    height: 400px;
    width: 410px;
    margin-right: auto;
    margin-left: auto;
    border: thin solid #CCCCCC;
    padding-left: 10px;
    padding-top: 10px;
}

.thumbnail {
    float: left;
    width: 60px;
    border: 1px solid #999;
    padding: 5px;
    text-align: center;
    background-color: #993333;
    height: 75px;
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 0;
}

.clearboth { clear: both; }

-->
</style>
</head>
<body>
<div id="container"> 
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="http://www.webforumz.com/images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>


</div>
</body>
</html>
Last edited by karinne; Oct 31st, 2007 at 11:57. Reason: To display code in posts, use the vBcode tags ;)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Oct 31st, 2007, 12:09
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: styling a div with a link and hover
This works

HTML: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>gallery example</title>
    <style type="text/css">
    <!--

    body,td,th {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #FFFFFF;
        line-height: 17px;
    }
    
    
    #container {
        height: 400px;
        width: 410px;
        margin-right: auto;
        margin-left: auto;
        border: thin solid #CCCCCC;
        padding-left: 10px;
        padding-top: 10px;
    }
    
    .thumbnail {
        text-align: center;
    }
    
    .thumbnail a {
        display: block;
        float: left;
        width: 60px;
        border: 1px solid #999;
        padding: 5px;
        background-color: #933;
        height: 75px;
        color: #fff;
        text-decoration: none;
        margin: 0 10px 10px 0;
    }
    
    .thumbnail a img {
        border: 0;
    }
    
    .thumbnail a:hover {
        background-color: #339;
    }
    
    .clearboth { clear: both; }
    
    -->
    </style>
</head>

<body>

<div id="container"> 

    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <br class="clearboth">
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <br class="clearboth">
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <br class="clearboth">
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <div class="thumbnail"><a href=""><img src="http://www.twistedjunkie.eclipse.co.uk/images/image.gif" alt="" width="60" height="60"><br>Caption</a></div>
    
    <br class="clearboth">


</div>
</body>
</html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Oct 31st, 2007, 13:16
New Member
Join Date: Oct 2007
Location: London
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Re: styling a div with a link and hover
Thanks alot for that, I noticed you changed the .thumbnail css contents with the .thumbnail a css contents and also created a new thumbnail a img with a border of 0. At the moment Im trying to work out how this works...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Oct 31st, 2007, 13:19
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: styling a div with a link and hover
Oh right ... I wanted to describe what I did but then this piece of crap that people call computer froze on me ... again ...

So ... yes ... basically I moved everything you had in .thumbnail { } to .thumbnail a { } except for the text-align property.

I had to add the .thumbnail a img { } to remove the white border it was creating around that image.

hth
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Oct 31st, 2007, 13:33
New Member
Join Date: Oct 2007
Location: London
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Re: styling a div with a link and hover
Thanks for all your help, problem solved... Top forum!!!!!!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

« Loosing my mind??? | How to wrap Text in a button? »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] magical ie6 hover states AndrewChip Web Page Design 1 Mar 31st, 2008 13:03
a:link, active, hover, visited.... mcdanielnc89 Web Page Design 35 Nov 8th, 2007 22:10
styling my form (problem) - link danny322 Web Page Design 9 Nov 8th, 2007 01:22
[SOLVED] Styling more than one list Lchad Web Page Design 7 Nov 2nd, 2007 06:09
CSS Hover on individual Link (li) ??? j4mes_bond25 Web Page Design 1 Jun 14th, 2006 21:08


All times are GMT. The time now is 18:08.

Contact Us - Web Design & Development Forums - Archive - Top

Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Online Casino :: Web Hosting :: Football Betting :: Web Development India :: Football Stats :: Free Bets :: Extreme Clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Search Engine Optimisation :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42