T
tj.tzavaras
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" />
[<a href="about.html"> About </a>]<br
/>
[<a
href="contact.html"> Contact </a>]<br />
[<a href="faq.html"> FAQ </a>]<br
/><br />
[<a
href=""><strike> Pictures </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!
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" />
[<a href="about.html"> About </a>]<br
/>
[<a
href="contact.html"> Contact </a>]<br />
[<a href="faq.html"> FAQ </a>]<br
/><br />
[<a
href=""><strike> Pictures </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!