Web Design Forum: Problem with selectable DIVs - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Problem with selectable DIVs

#1 User is offline   Crispy 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 327
  • Joined: 10-July 09
  • Reputation: 2
  • Gender:Male
  • Location:Wrexham, North Wales
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 06 January 2010 - 04:22 PM

Hey guys, I'm having a problem with selectable divs, I've been at this the past hour and wondering if anyone could help me out.

Basically the sites made up six squares, I want the squares to work as the one on the top left does, my problem comes when I try to apply a link to this square, Ideally I'd like it so that the user has the choice of clicking the div and the text to be directed to the specific page, i.e work. I've tried everything I can think of but I must be making a stupid mistake, any help would be much appreciated, Thankyou

I've included the code below:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mind Castle - Portfolio of Graphic Designer Chris Palmer</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div class="logo" onclick="location.href='/work.html';"></div>

<div class="work"><div id="inner"><h3>work</h3><p>check out my latest projects</p></div></div>
<div class="about" onclick="location.href='/work.html';"><a href="/about.html"><div id="inner"><h3>about</h3><p>a little about me</p></div></div>
<div class="blog" onclick="location.href='/work.html';"><a href="/blog.html"><div id="inner"><h3>blog</h3><p>creative journey</p></div></div>
<div class="contact" onclick="location.href='/work.html';"><a href="/contact.html"><div id="inner"><h3>contact</h3><p>get in touch</p></div></div>
<div class="twitter" onclick="location.href='/work.html';"><a href="/twitter.html"><div id="inner"><h3>twitter</h3><p>join the conversation</p></div></div>

</div>


</body>
</html>


CSS:
@charset "utf-8";
/* CSS Document */

body {font-family:Helvetica Neue, Arial, Helvetica, sans-serif; color:#888; }
p {font-size:12px; padding-top:10px; }
h3 {font-size:32px; }

#container { width:960px; margin:0 auto; }
#inner {margin-left:80px; margin-top:120px;}

.logo { margin-top:200px; width:319px; height:319px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; float:left; }
.work { margin-top:200px; width:319px; height:319px; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; float:left; }
.about { margin-top:200px; width:320px; height:319px; border-bottom:solid 1px #ccc; float:left; }

.blog { width:319px; height:320px;  border-right:solid 1px #ccc; float:left; }	
.contact { width:319px; height:320px;   border-right:solid 1px #ccc; float:left; }				
.twitter { width:320px; height:320px;  float:left; }				

.logo:hover { color:#000; }
.work:hover { color:#000; }

.about a:hover { color:#000; }
.about a { text-decoration:none; color:#888; }

.blog:hover { color:#000; }
.contact:hover { color:#000; }
.twitter:hover { color:#000; }

0

#2 User is offline   rallport 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 3,813
  • Joined: 03-January 10
  • Reputation: 266
  • Gender:Male
  • Location:England, UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 07 January 2010 - 12:38 AM

The following inline code will work, but now we have a range of Javascript frameworks such as JQuery that you can use to remove ugly inline code: 

<div onclick="location.href='http://www.play.com';"></div>


..using JQuery

<div class="meh"></div> 
/* Doc. Ready Code */
$("div.meh").click(function(){
 document.location.href = $(this).attr("rel");
});


BTW: this isn't very accessible either, as users with JavaScript disbaled won't be able to follow your links.
0

#3 User is offline   Crispy 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 327
  • Joined: 10-July 09
  • Reputation: 2
  • Gender:Male
  • Location:Wrexham, North Wales
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 07 January 2010 - 12:11 PM

I'm thinking of remaking it using images, that way I can have a image hover thing too, do you think that would be a better option?
0

#4 User is offline   rallport 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 3,813
  • Joined: 03-January 10
  • Reputation: 266
  • Gender:Male
  • Location:England, UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 07 January 2010 - 12:42 PM

Yes I'd it's better then your original idea :)

What exactly are you trying to achieve btw? As if the site needs to meet an WAI compliance standrads then your site would not work the same when images are turned off.
0

#5 User is offline   Crispy 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 327
  • Joined: 10-July 09
  • Reputation: 2
  • Gender:Male
  • Location:Wrexham, North Wales
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 07 January 2010 - 07:20 PM

I've uploaded it to give a better example, http://www.fier.co.u...olio/index.html I'm just struggling because Ideally I need people to be able to click the links to be directed too, but as soon as I make it a link it gets rid of my div:hover :(
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users