Using CSS does anyone have any idea how to make a header a link and then place that l

mguise

11-03-2011, 10:15 PM

Using CSS does anyone have any idea how to make a header a link and then place that link/header in a paragraph and have everything look normal?...and validate.

I have been fighting with this for hours.

This is what I have so far it does not work

.pinline {
display: inline;
}
.h2home {
text-transform: none;
color: #000;
font-style: normal;
font-size: 1em;
text-decoration:underline;
display: inline;
}
.h2home A {
COLOR: #000;
text-decoration:none;
font-weight: normal;
font-size: 1em;
text-decoration:underline;
display: inline;
}
.h2home A:hover {
COLOR: #59AFE2;
text-decoration:underline;
font-weight: normal;
font-size: 1em;
display: inline;
}

Here is the html

<p class="pinline">Whether it’s
<h2 class="h2home"><a href="graphicdesign.html">brand marketing</a></h2>
or <h2 class="h2home"><a href="web.html">web development</a></h2>, as a premier Iowa design company we offer a wealth of skills, resources and talent. If you are searching for services internationally, nationally or locally you have come to the right place.</p>
<p class="pinline">Developing successful, solid, striking and userriendly
<h2 class="h2home"><a href="webdesign.html">websites</a></h2> is our specialty. To that end we will construct a <h2 class="h2home"><a href="mobile.html">mobile</a></h2> version of your website that is effortless to navigate. We offer you the ability to take control and update your <h2 class="h2home"><a href="cms.html">website content</a></h2> with relative ease. We’ve got your secure online E-Commerce
store covered. <h2 class="h2home"><a href="custom.html">Custom applications</a></h2> or <h2 class="h2home"><a href="flash.html">Flash</a></h2>
powered experiences, we can build it from the ground up
<p>Utilizing <a href="social.html">social media tools</a>, <a href="analytics.html">web analytics</a>, <a href="seo.html">search engine optimization or marketing</u></a> your website will reach your target audience, in turn strengthening your bottom line. </p>

teedoff

11-03-2011, 10:38 PM

What does the validator tell you your errors are?

Excavator

11-03-2011, 10:42 PM

Hello mguise,
That is quite a bit of "tag soup" there. You cannot have a heading tag inside a paragraph tag. Try span in it's place.

Instead of span, you can just put your class on the anchor itself. You can see I've done that in some of the links in this example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #fc6;}
#header {
width: 800px;
margin: 20px auto;
background: #ccc;
}
.pinline {
display: inline;
}
.h2home {
text-transform: none;
color: #000;
font-style: normal;
font-size: 1em;
text-decoration:underline;
display: inline;
}
.h2home A, a.h2home {
COLOR: #000;
text-decoration:none;
font-weight: normal;
font-size: 1em;
text-decoration:underline;
display: inline;
}
.h2home A:hover, a.h2home:hover {
COLOR: #59AFE2;
text-decoration:underline;
font-weight: normal;
font-size: 1em;
display: inline;
}
</style>
</head>

<body>
<div id="header">
<p class="pinline">
Whether it's <span class="h2home"><a href="graphicdesign.html">brand marketing</a></span>
or <span class="h2home"><a href="web.html">web development</a></span>, as a premier Iowa
design company we offer a wealth of skills, resources and talent. If you are searching for
services internationally, nationally or locally you have come to the right place.
</p>
<p class="pinline">
Developing successful, solid, striking and userriendly <span class="h2home"><a href="webdesign.html">websites</a></span>
is our specialty. To that end we will construct a <span class="h2home"><a href="mobile.html">mobile</a></span>
version of your website that is effortless to navigate. We offer you the ability to take control and update your
<span class="h2home"><a href="cms.html">website content</a></span> with relative ease. We've got your secure online
E-Commerce store covered. <a href="custom.html" class="h2home">Custom applications</a> or <a href="flash.html" class="h2home">Flash</a>
powered experiences, we can build it from the ground up
</p>
<p>
Utilizing <a href="social.html">social media tools</a>, <a href="analytics.html">web analytics</a>, <a href="seo.html">
search engine optimization or marketing</a> your website will reach your target audience, in turn strengthening your
bottom line.
</p>
</div>
</body>
</html>

teedoff

11-03-2011, 10:50 PM

That is quite a bit of "tag soup" there. You cannot have a heading tag inside a paragraph tag.

He mentioned "and validate" so I thought maybe he could figure out he had heading tags inside his paragraph tags.

mguise

11-04-2011, 04:10 PM

Thanks for the feedback. I agree, I created allot of soup trying to do something that does not validate. Next time I will pay closer attention to what W3C says.

Again, always appreciative for the responses.