Can anyone remind me how to link with a div, and if possible to open the new location in a new window, preferably without using anything that's been depriciated.
(Also is it possible to replace div with img and still link to somewhere.)You don't need to link with a div - use a standard <a> tag and apply a class or ID to get the style you need (you will probably need display: block).
I believe the target attribute is not deprecated for opening in a new window, though the WCAG says you should not use new windows.
You can either put the <img> inside the <a> or set it as a background to the tag, I believe.
AdamI depends upon which version of markup you use regarding target.
If you are following XHTML 1.1 you don't get that option of opening new windows, unless you either fiddle with eXtensibility or use JavaScript in the approate manner to allow fallback, or normal linking as with: <!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/worthvalley/wvyfc10.php">http://www.xhtmlcoder.com/worthvalley/wvyfc10.php</a><!-- m --> [Contact Form] link, will still function.1. Div is not a frame. You can't open a page in a div. I believe this was not what you were asking. I put it in there in case you were.
2. Linking, as mentioned by Robert and Adam, is done using the <a> tag.
3. The *really correct* way of opening a new browser window is not to open one
4. The *correct* way of opening a new window is
<a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" onclick="window.open('page.html'); return false;">Page opens in a new window if javascript is turned on</a>
5. The *working* way of opening a new window is
<a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" target="_blank">Page opens in a new window</a>
Use HTML transitional for this.
6. You may not enclose a div within <a> as div is a block-level element. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html"><div>All this links to the page. Blah Blah.</div></a> is INCORRECT.
7. Image being an inline element, can be within <a>. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html"><img src="image.gif" alt="Open this page"></a> is perfectly valid and accessible.
8. This is a CSS forum. This question is more appropriate in HTML forum.
9. As you dont seem to be a HTML newbie, why am I explaining all this to you? Gosh I need a break.
10. And this is 10th and final reason why people say Niket's lost his mind.
Take care
NiketBut just for instance, how would I use a div as a link?You can't.
Although <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html"><div>...</div></a> may work in most browsers, its incorrect.
You can create a link out of contents of a div:
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html">This is link to the page. Anything that goes in here should be inline content. Image is allowed: such as <img src="image.gif" alt="this image links!!">. And you can go on and on...</a></div>Originally posted by nkaisare
You can't. Not yet. One of the more interesting things in the XHTML 2.0 working draft is the ability to treat any element as a link. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/xhtml2/mod-attribute-collections.html#col_Hypertext.XHTML">http://www.w3.org/TR/xhtml2/mod-attribu ... text.XHTML</a><!-- m --> 2.0 is still a hotchpotch of some good, but many bad ideas in my opinion.I must say that I don't share your opinion. I didn't see a single bad idea there.not sure how valid this is but i think it would do what you are looking for.
'<div style="cursor:hand" onClick="window.open('http://www.matthewrele.com','','width=200,height=200,menubar=1,location=1,status=1,scrollbars=1')">blah blah blah</div>'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
a.menu {
position: relative;
display: block;
border-left: 7px solid #900;
background-color: #600;
font-family: Arial, Helvetica, Sans-serif;
font-size: 120%;
font-weight: 900;
padding-left: 5px;
color: white;
text-decoration: none;
}
a.menu:link {
border-left: 7px solid #900;
background-color: #600;
padding-left: 5px;
color: white;
}
a.menu:active {
border-left: 7px solid #c00;
background-color: #900;
padding-left: 15px;
color: #f00;
}
a.menu:visited {
border-left: 7px solid #900;
background-color: #600;
padding-left: 5px;
color: white;
}
a.menu:hover {
border-left: 7px solid #c00;
background-color: #900;
padding-left: 15px;
color: #ff0;
}
#mainMenu {
position: static;
width: 30%;
background-color: #600;
}
-->
</style>
</head>
<body>
<div id="mainMenu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3schools.com/" class="menu">W3Schools.com</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.alistapart.com/" class="menu">Alistapart.com</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/" class="menu">W3.org</a>
</div>
</body>
</html>
I know it's kind of long, but using the code above will make the anchor tag act like a DIV tag, which is the affect that you want.
I've found that this affect works best in Internet Explorer under two conditions:
1. The first element in your menu that contains the block-level <a> tags MUST be positioned statically (position: static
. That is, the first child element of the body tag that contains the menu must be positioned statically.
2. The <a> tags must then be positioned relatively (position: relative. And every element inside the statically positioned element must be positioned relatively also.
One last note:
The W3C recommends you put the psuedo-elements of the anchor tag in the order below:
a:link
a:active
a:hover
a:visited
I have them ordered slightly different:
a:link
a:active
a:visited
a:hover
I want the hover psuedo-element to take precedence over the other three, so you can see the mouse hover affect even if the link is visited. If you want the visited link affect to appear even if the mouse is hovering over the link, simply reorder the link styles the way the W3C recommends.The following works just fine in MSIE, Opera and Mozilla. There's no need to play around with positioning. The JavaScript method will fail for about 13% of those users.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
#menu a {display:block}
-->
</style>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/REC-html32">HTML 3.2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/html4/">HTML 4.01</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/xhtml1/">XHTML 1.0™</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/xhtml11/">XHTML 1.1™</a>
</div>
(Also is it possible to replace div with img and still link to somewhere.)You don't need to link with a div - use a standard <a> tag and apply a class or ID to get the style you need (you will probably need display: block).
I believe the target attribute is not deprecated for opening in a new window, though the WCAG says you should not use new windows.
You can either put the <img> inside the <a> or set it as a background to the tag, I believe.
AdamI depends upon which version of markup you use regarding target.
If you are following XHTML 1.1 you don't get that option of opening new windows, unless you either fiddle with eXtensibility or use JavaScript in the approate manner to allow fallback, or normal linking as with: <!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/worthvalley/wvyfc10.php">http://www.xhtmlcoder.com/worthvalley/wvyfc10.php</a><!-- m --> [Contact Form] link, will still function.1. Div is not a frame. You can't open a page in a div. I believe this was not what you were asking. I put it in there in case you were.
2. Linking, as mentioned by Robert and Adam, is done using the <a> tag.
3. The *really correct* way of opening a new browser window is not to open one
4. The *correct* way of opening a new window is
<a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" onclick="window.open('page.html'); return false;">Page opens in a new window if javascript is turned on</a>
5. The *working* way of opening a new window is
<a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html" target="_blank">Page opens in a new window</a>
Use HTML transitional for this.
6. You may not enclose a div within <a> as div is a block-level element. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html"><div>All this links to the page. Blah Blah.</div></a> is INCORRECT.
7. Image being an inline element, can be within <a>. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html"><img src="image.gif" alt="Open this page"></a> is perfectly valid and accessible.
8. This is a CSS forum. This question is more appropriate in HTML forum.
9. As you dont seem to be a HTML newbie, why am I explaining all this to you? Gosh I need a break.
10. And this is 10th and final reason why people say Niket's lost his mind.
Take care
NiketBut just for instance, how would I use a div as a link?You can't.
Although <a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html"><div>...</div></a> may work in most browsers, its incorrect.
You can create a link out of contents of a div:
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html">This is link to the page. Anything that goes in here should be inline content. Image is allowed: such as <img src="image.gif" alt="this image links!!">. And you can go on and on...</a></div>Originally posted by nkaisare
You can't. Not yet. One of the more interesting things in the XHTML 2.0 working draft is the ability to treat any element as a link. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/xhtml2/mod-attribute-collections.html#col_Hypertext.XHTML">http://www.w3.org/TR/xhtml2/mod-attribu ... text.XHTML</a><!-- m --> 2.0 is still a hotchpotch of some good, but many bad ideas in my opinion.I must say that I don't share your opinion. I didn't see a single bad idea there.not sure how valid this is but i think it would do what you are looking for.
'<div style="cursor:hand" onClick="window.open('http://www.matthewrele.com','','width=200,height=200,menubar=1,location=1,status=1,scrollbars=1')">blah blah blah</div>'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
a.menu {
position: relative;
display: block;
border-left: 7px solid #900;
background-color: #600;
font-family: Arial, Helvetica, Sans-serif;
font-size: 120%;
font-weight: 900;
padding-left: 5px;
color: white;
text-decoration: none;
}
a.menu:link {
border-left: 7px solid #900;
background-color: #600;
padding-left: 5px;
color: white;
}
a.menu:active {
border-left: 7px solid #c00;
background-color: #900;
padding-left: 15px;
color: #f00;
}
a.menu:visited {
border-left: 7px solid #900;
background-color: #600;
padding-left: 5px;
color: white;
}
a.menu:hover {
border-left: 7px solid #c00;
background-color: #900;
padding-left: 15px;
color: #ff0;
}
#mainMenu {
position: static;
width: 30%;
background-color: #600;
}
-->
</style>
</head>
<body>
<div id="mainMenu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3schools.com/" class="menu">W3Schools.com</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.alistapart.com/" class="menu">Alistapart.com</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/" class="menu">W3.org</a>
</div>
</body>
</html>
I know it's kind of long, but using the code above will make the anchor tag act like a DIV tag, which is the affect that you want.
I've found that this affect works best in Internet Explorer under two conditions:
1. The first element in your menu that contains the block-level <a> tags MUST be positioned statically (position: static
. That is, the first child element of the body tag that contains the menu must be positioned statically.2. The <a> tags must then be positioned relatively (position: relative
. And every element inside the statically positioned element must be positioned relatively also.One last note:
The W3C recommends you put the psuedo-elements of the anchor tag in the order below:
a:link
a:active
a:hover
a:visited
I have them ordered slightly different:
a:link
a:active
a:visited
a:hover
I want the hover psuedo-element to take precedence over the other three, so you can see the mouse hover affect even if the link is visited. If you want the visited link affect to appear even if the mouse is hovering over the link, simply reorder the link styles the way the W3C recommends.The following works just fine in MSIE, Opera and Mozilla. There's no need to play around with positioning. The JavaScript method will fail for about 13% of those users.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
#menu a {display:block}
-->
</style>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/REC-html32">HTML 3.2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/html4/">HTML 4.01</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/xhtml1/">XHTML 1.0™</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/xhtml11/">XHTML 1.1™</a>
</div>