PDA

View Full Version : How to make links in div (no javascript)?


henryhayes
01-14-2011, 07:43 PM
I have been searching google for step-by-step procedure that adds link, hover, etc to a div without using Javascript.

It should be possible to do it by making new CSS rule,
choose compound as selector type,
write a:link as name for actual link
write a:hover for the mouseover part
and so on.

My problem is i dont see the connection between the compound names and the div ive build.

All answers i have found is finished code CSS and HTML, but i need to understand how to produce the CSS and HTML.

Id be extremely gratefull if someone can step me through the procedure in DW?

gentleone
01-14-2011, 08:02 PM
You can't set a link on a div... well not directly then. It is possible, but that would be bad practice.... or actually in HTML5 it is allowed to wrap a block-level element (like a div) in an anchor tag <a href="#"><div>content</div></a>Anyways you can't do it in design view, because like I said it was not done to do so they left that option out.

DWcourse
01-14-2011, 08:08 PM
But you can use a link as if it were a div. Just set display to block in the CSS.

gentleone
01-14-2011, 08:13 PM
But you can use a link as if it were a div. Just set display to block in the CSS.
Now.. :lol:

henryhayes
01-14-2011, 10:54 PM
Thx for answers.

I tried DWcourse answer.
Created named anchor.
Created new CSS with display: block
and added the CSS to named anchor.

Works fine except the result is the reverse of what i want to do..

I might need to specify my goal:

I want a div to contain a link that opens new page when clicked. No javascript used
Also the div must be able to hover / mouseover.

Ive been able able to construct a div with a hover-version that works.

HTML
<div class="menubutton">HOME</div>
<div class="menubutton:hover"></div>

CSS
.menubutton {
text-align: center;
height: 22px;
position: relative;
z-index: 3;
overflow: hidden;
float: left;
width: 130px;
font-family: "Palatino Linotype", "Book Antiqua", serif;
color: #003;
visibility: visible;
background-color: #69F;
font-size: 16px;
font-weight: bolder;
text-decoration: none;
}
.menubutton:hover {
background-color: #CCC;
height: 22px;
width: 130px;
position: relative;
visibility: visible;
z-index: 3;
float: left;
}

I was sure i could go ahead and use something like these found by google about same topic "link in div":

a:link {color: #003399;}
a:visited {color: #9966CC;}
a:hover {color: #CCCCCC;}
a:active {color: #FF0000;}

Any ideas?

gentleone
01-15-2011, 06:04 PM
So if I understood it right you just want menu buttons when hovered it change the background color?

You don't use divs for that, but an unordered list and if you want to open a page you need an anchor tag to make links from those menu buttons.


<ul id="nav">
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>


And then you can style it with CSS how you want it. For examples check this link:
http://css.maxdesign.com.au/listamatic/index.htm

henryhayes
01-16-2011, 12:42 PM
thx for the link gentleone. Amazing amount of code for lists there!
However ive tried to avoid javascript as mentioned, and secrectly unordered lists as well! Im very new to CSS and get easily confused with the li's and ul's and a's.

Thats why ive been looking for a more simple (less timeconsuming) way to make clicable buttons with hover and txt, that can easily be duplicated into a div navbar.

Im nearly there, but have a problem with hovering the txt.
These are the elements:

The is navbar wrapper. Just a container:

#navbar {
background-color: #E9DCF3;
height: 30px;
width: 950px;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 2;
}

Heres the menubutton as a class for copying multiple times:

.menuknap {
background-color: #5684B1;
float: left;
height: 26px;
width: 130px;
border: 2px solid #E3EBF2;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 3;
}

This is the txt-styling and placement in menubutton:

h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFF;
text-align: center;
position: relative;
visibility: visible;
z-index: 4;
top: -12px;
text-transform: uppercase;
font-weight: bolder;
font-variant: normal;
text-decoration: none;
}

And the these two does mouseover and onclick effects:

.menuknap:hover {
background-color: #E3EBF2;
}
.menuknap:active {
background-color: #B76C51;
}

The html-code for these elements will look like this
(code for menuknap:hover and menuknap:active can be deleted; effects will still work):

<div id="navbar">
<div class="menuknap"><h3>home</h3></div>
<div class="menuknap:hover"></div>
<div class="menuknap:active"></div>
</div>

Now i make the hyperlink:
<a href="linkpage.html" target="_self"></a>

And add a span tag to it:
<a href="linkpage .html" title="thelinkpage" target="_self">
<span class="xxx" id="xxx" style="xxx" title="xxx"></span></a>

And attach the the CSS from menubutton to the span class:
<a href="linkpage .html" title="thelinkpage" target="_self">
<span class="menuknap" id="xxx" style="xxx" title="xxx"></span></a>

And finally add txt to the button:
<a href="linkpage .html" title="thelinkpage" target="_self">
<span class="menuknap" id="xxx" style="xxx" title="xxx"><h3>with link</h3></span></a>

Now ive got a button with hover, onclick, txt and a link to new page.
When creating the next menubutton I simply copy the code above and change link and txt in h3.

The original div <div class="menuknap"><h3>home</h3></div> can be deleted.

For the visited funtion on the page linked to, i have to change bg-color in .menuknap and rename to fx .visitedmenuknap.
Then insert the visitedmenuknap on linkpage and delete the original menuknap or link-span code

My two problems concerns the txt on buttons:
How do i make the <h3>home</h3> hover same way as .menuknap:hover?

And i have to find a way to make <h3>home</h3> stay hovered after opening the linkpage.

If these two issues could be solved as one it would be excellent.

Any suggestions?

All comments to constructing navbar this way will be appreciated

gentleone
01-16-2011, 01:30 PM
Uhm... no, mate... an unordered list is the way to go for menus.

Corrosive
01-17-2011, 06:47 AM
However ive tried to avoid javascript as mentioned, and secrectly unordered lists as well! Im very new to CSS and get easily confused with the li's and ul's and a's.

Thats why ive been looking for a more simple (less timeconsuming) way to make clicable buttons with hover and txt, that can easily be duplicated into a div navbar.

LMAO!

HenryHayes, listen to gentleone. Unordered lists ARE the tool for making a menu. That is it. How is your way less confusing or convoluted than a simple list of links, styled with CSS? Also, what you are doing makes no sense at all semantically.

If you don't want to learn how to build websites...Why are you building a website? If you don't want expert advice...Why are you asking for (and then ignoring) expert advice?

Read your post back but change website or web design with your favourite hobby/activity/pastime, then replace unordered lists with the key tool used in that activity and see how daft it sounds!

henryhayes
01-17-2011, 10:45 AM
Corrosive, gentleone.
Youre the knowledge, im merely the daftsounding hobbyist..

I will dive into the ul and most probably return later a lot wiser saying "of course you were right; ul is the only way to go"

However the code i posted actually works ok -semantical or not. If everyone does the same as everyone else nothing ever changes, right?

gentleone
01-17-2011, 11:09 AM
If everyone does the same as everyone else nothing ever changes, right?
Unless the change is for an improvement, then.. yes. Your unorthodox way of constructing a simple (different states) menu button with 5 divs was not.

Web pioneers already figured out that a menu is a list of links, so that's why using an unordered list is semantically correct and styling it with CSS is a breeze.

Corrosive
01-17-2011, 11:11 AM
However the code i posted actually works ok -semantical or not. If everyone does the same as everyone else nothing ever changes, right?...

...Said the man who 'invented' the square wheel ;)