XHTML block item inside and inline item
 

Ok, I've been working on this site (www.glassrock.net/weblog) for a
little while now. Everything works perfectly except one peice of code.
I would like to have everything XHTML 1.0 Transitional however I have
an <h2> outside a <div>. I have tried putting the <h2> inside the
<div> however the resulting formatting looks a bit funny. This
particular peice of code is for a blank image with 4 links to the right
of it.

Here is the peice of code with some long urls removed so it is
readable:
------------------
<div id="right">
<div class="sidebar">

<h2 style="text-align: left;">
<div class="link-note">
<img src="about.jpg" alt="about.jpg" />
&nbsp;&nbsp;&nbsp;&nbsp;[<a href="about.html">&nbsp;About&nbsp;</a>]<br
/>

&nbsp;&nbsp;&nbsp;&nbsp;[<a
href="contact.html">&nbsp;Contact&nbsp;</a>]<br />
&nbsp;&nbsp;&nbsp;&nbsp;[<a href="faq.html">&nbsp;FAQ&nbsp;</a>]<br
/><br />
&nbsp;&nbsp;&nbsp;&nbsp;[<a
href=""><strike>&nbsp;Pictures&nbsp;</strike></a>]<br /><br />
</div></h2>
------------------
This works, but as you can see I have an <h2> ouside a <div> which is a
no-no.

The relevant peices of CSS are as follows:
------------------
body {
margin: 0px 0px 0px 0px;
background: #6f0100
}
#outer{
background: url(http://www.glassrock.net/weblog/w_images/border.jpg)
repeat-y center;
width: 740px;
padding: 0px;
}
#container {
line-height: 140%;
text-align: left;
padding: 0px;
width: 700px;
background-color: #FFFFFF;
}
#right {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}
..sidebar {
padding: 15px;
}
..sidebar h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
}
..link-note {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
padding: 2px;
margin-bottom: 15px;
margin-top: 0px;
letter-spacing: 0px;
vertical-align: middle;
}
------------------
You can see how I'd like it to look on the website,
www.glassrock.net/weblog. It's the black image with text floating to
the right. When I put the <h2> inside the <div> the links become
centered (in the space they have next to the picture) and the last link
ends up below the picture. I've tried just about everything I can
think of and have nearly given up. I nearly gave up when trying to
make it look the same in IE and Firefox, that took a while. Any help
you can give me would be fabulous.

PS - I have the same error on the sidebar in the donate section but If
I can have some help fixing the first one I'm sure I can manage to fix
the second one on my own.

Thanks!

Re: XHTML block item inside and inline item
 

tj.tzavaras@gmail.com wrote:
> Ok, I've been working on this site (www.glassrock.net/weblog) for a
> little while now. Everything works perfectly except one peice of code.
> I would like to have everything XHTML 1.0 Transitional however I have
> an <h2> outside a <div>. I have tried putting the <h2> inside the
> <div> however the resulting formatting looks a bit funny. This
> particular peice of code is for a blank image with 4 links to the right
> of it.
>
<SNIP CODE>
> You can see how I'd like it to look on the website,
> www.glassrock.net/weblog. It's the black image with text floating to
> the right. When I put the <h2> inside the <div> the links become
> centered (in the space they have next to the picture) and the last link
> ends up below the picture. I've tried just about everything I can
> think of and have nearly given up. I nearly gave up when trying to
> make it look the same in IE and Firefox, that took a while. Any help
> you can give me would be fabulous.
>

Why do you want any of that to be an <h2>? As far as I can see, they're
links, not headings. Why not just remove the <h2> tagging?

Also, why are you using &nbsp; all over your page to position things?
Thats' what CSS is for (margins and padding, etc.)


(Oh, one other thing. If you're going to make your page Transitional
rather than Strict, you have no excuse not to make it validate!)


--
Oli

Re: XHTML block item inside and inline item
 

Your criticism inspired me to change. And change fixed my problem.
Thanks!