Jump to content



Photo

Making a div as linkg using display: block; ? help please

html css

  • Please log in to reply
7 replies to this topic

#1 eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 13 January 2013 - 14:38

Hello,

im trying to make my div as a link using the display:block in css.

I need the all div to be clickable and directing to the link inside it and i cant put a div insade a <a> as its not valid.

Searching the net, i found that i should use display:block but is not working.

Here is my code:
Posted Image


but is not working.
any suggestions why?
the div containg the <a> has paddings, could this be the reason?

is there anyother clean way to do it?

thanks in advance.


#2 MikeChipshop

MikeChipshop

    Miniman

  • Tech Issues Solved: 3
  • Joined: 02-October 06
  • Location: Scotland
  • OS: Win 8, Win 7, Vista, OSX, iOS, Android, WP8 and various Linux distro's
  • Phone: HTC 8X / Nexus 5

Posted 13 January 2013 - 14:42

Style the <a> rather than the <div>.
<div> tags are already block level elements so setting as block isn't going to make any difference to it's default state. Set the <a> to block instead.

#3 OP eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 13 January 2013 - 14:48

Style the <a> rather than the <div>.
<div> tags are already block level elements so setting as block isn't going to make any difference to it's default state. Set the <a> to block instead.


hey
thans for your reply
im stying the a... plz check the css

.menu_item{
   
    font-family: 'ge_ss_text_lightregular' ,Arial, Helvetica, sans-serif;
    font-size:20px;
    height:50px;
    position:relative;
    float:right;
    padding-top: 13px;
    padding-left:40px;
    padding-right:40px;
    cursor:pointer;
}
.menu_item a{
color:#FFFFFF;
text-decoration:none;
}

.block{
display:block;
}


#4 OP eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 13 January 2013 - 14:54

owwwwwwwwwwwwww it works

thank a lot for u
i had to move the paddings inside the a

#5 MikeChipshop

MikeChipshop

    Miniman

  • Tech Issues Solved: 3
  • Joined: 02-October 06
  • Location: Scotland
  • OS: Win 8, Win 7, Vista, OSX, iOS, Android, WP8 and various Linux distro's
  • Phone: HTC 8X / Nexus 5

Posted 13 January 2013 - 15:04

Yup, hence the 'style the <a>'.
Good stuff man. Glad you got it sorted.

#6 OP eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 13 January 2013 - 20:41

ok now if i need to have another color for the link of the page being visited
example:
<a href="test.php">TEST</a>
<a href="test2.php">test2</a>

both being in the menu.
If i am in test.php how can i change the color of the link test.php? shouldnt a:active{ color:red;} do the stuff? (its placed in css after the :hover) ?

#7 OP eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 13 January 2013 - 20:58

anybody?

#8 MikeChipshop

MikeChipshop

    Miniman

  • Tech Issues Solved: 3
  • Joined: 02-October 06
  • Location: Scotland
  • OS: Win 8, Win 7, Vista, OSX, iOS, Android, WP8 and various Linux distro's
  • Phone: HTC 8X / Nexus 5

Posted 14 January 2013 - 11:19

Add a new class like '.current-page' to the <li> of the current page item and apply a style via your style sheet, like so..

.menu-class li.current-page a {
	color:#ff0000;
}

I notice you're using floated <div> tags when you really should be using a list ( <ul> ) with each menu item being a new <li> as the navigation is an un-ordered list of links.



Click here to login or here to register to remove this ad, it's free!