Need some help with HTML for my website

[sjheiss]

Ok, let me start off by saying I know quite a bit of HTML, but something is going wrong that I can't figure out. My website is http://www.theriotmod.com
I'm not trying to advertise, I just want to show you what I'm trying to do.

What I'm trying to do is create borders with <p style="border: #FFFFFF 5px> around the navigation and news columns individually.
Through trial and error, I've come to the conclusion that I can't have another <p style="blahblahblah"> or a <h#> inside of the border.
If I try to, it creates a small border with nothing in it above the "news" title.
So, what I'm trying to do, is have a border around each column, while being able to control the text size. :thumbsup:

[maxvee8]

normally border style is written like

<p style="border: 1px solid #FFFFFF;">
Text
</p>

and yes you can have more than one

tell it what thickness you want 1px
style solid / dashed / dotted
colour of the border.

im not sure what you exactly want tho... why dont you just style the div containers or do you want to style the content...


cant you do #navigation {border: 1px solid #FFFFFF;} in a style sheet and the same with the #content div

you could target each side like border-left if it has aa douvble border in the middle

[sjheiss]

<p style="border: groove #FFFFFF 5px">
<h1>NEWS</h1>
<p style="font-size: 150%;"><b>3/16/08</b></p>
<p style="font-size: 100%;"><b><u>Weapon Models</u></b></p>
Recently we hired hired a new staff member in the modelling department,
his name is Harry Atkins, he's been hard at work the past 2 days
and has already completed all the weapons for the Arsenal along with a
few things like the bobby pin and hand cuffs.
Heres a little glimpse at what hes been working on.
</p><br><br>


Ok, in bold is what I'm trying to put in. I don't think it's in the wrong order, but it could be. :confused: When I do this, an empty box is created between the banner and the NEWS headline, but if I take out the font-size and h1, it works fine, but looks odd. I want to be able to have the h1 and font-size with the border.

[sjheiss]

normally border style is written like

<p style="border: 1px solid #FFFFFF;">
Text
</p>

and yes you can have more than one

tell it what thickness you want 1px
style solid / dashed / dotted
colour of the border.

im not sure what you exactly want tho... why dont you just style the div containers or do you want to style the content...


cant you do #navigation {border: 1px solid #FFFFFF;} in a style sheet and the same with the #content div

you could target each side like border-left if it has aa douvble border in the middle

I don't quite understand what you mean there, as I don't have a whole lot of CSS knowledge. If you wouldn't mind showing me what to do, here is my CSS:

body {
background: #000000;
margin: 0;
padding: 0;
font-family: verdana, sans-serif;
font-size: 8pt;
color: #aeadad;
line-height: 17px;
text-align: center;
}

td { font-family: verdana, sans-serif; font-size:8pt}

b, i, u { letter-spacing: 1px; }

hr {
border: 0;
width: 95%;
color: #660000;
background-color: #660000;
height: 2px;
}

h1 {
font: 13pt "Trebuchet MS";
text-transform:uppercase;
margin:20px 0 5px 0;
color:#D8D8D8;
letter-spacing:2px;
border-bottom:#2E2E2E 1px solid;
}

b, i, u { color:#FFFFFF; }

a:link, a:Visited, a:active {
font-size: 8pt;
color:#C70000;
font-weight: bold;
text-decoration: none;
}

a:hover { color: #C85353; }


input, textarea, option, select {
font-size: 8pt;
border: 0px;
font-family: verdana, sans-serif;
color: #8E8E8E;
background: #101010;
}

div#banner {
height: 0px;
}


div#container {
background: #000000;
margin: 0 auto 0 auto;
text-align: justify;
width: 780px;
}

div#wrap {
background: #000000;
height: 500px;
padding: 0 45px 0 50px;
}

div#title {
padding: 135px 0 0 0;
}

#bot { padding-top:105px; margin-left:10px; margin-right:-100px; }

#bot a {
font-weight: bold;
text-transform:uppercase;
margin-right:35px;
line-height:17pt;
padding:10px 15px 10px 15px;
background: #3E3E3E;
border-top:#0e0e0e 2px solid;
color:#14C9DA;
}

#bot a:hover { border-top:#5AF2FF 2px solid; background:#F54D67; color:#7AC127;}


#nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 188px;
}

#nav li a:visited, #nav li a:link {
margin-top: 5px;
display:block;
padding: 2px 0px 5px 18px;
color:#DF2B2B;
}

#nav li a:hover, #nav li a:active {
color:#fff;
background:#000;
text-decoration:none;
}

div#navigation {
float:left;
padding: 0 0 5px 0;
}

div#navigation a { height: 15px; }

div#content {
width: 485px;
float: right;
padding: 0 0 0 0;
}

div#footer, #footer a {
background: #000000;
}

[PappaJohn]

Nesting <h1> or <p> tags inside of a <p> tag is invalid markup. A <p> cannot contain a block level element.

A <div> could be used here, and with the proper padding / margin would eliminate the need for the extraneous <br> tags at the end.

[sjheiss]

Nesting <h1> or <p> tags inside of a <p> tag is invalid markup. A <p> cannot contain a block level element.

A <div> could be used here, and with the proper padding / margin would eliminate the need for the extraneous <br> tags at the end.

If that is so (which I was already guessing) what would the CSS code look like for that?

I could do that, but they don't really bother me, and they aren't breaking anything.

[maxvee8]

<style>
#newsentry{border:5px groove #FFFFFF; padding:5px;}
p.date{font-size: 20px; color:#FFFFFF; font-weight: bold;}
p.title{font-size: 16px; color:#FFFFFF; font-weight: bold; text-decoration:underline;}
</style>


<h1>NEWS</h1>

<div class="newsentry">

<p class="date">3/16/08</p>
<p class="title">Weapon Models</p>

Recently we hired hired a new staff member in the modelling department,
his name is Harry Atkins, he's been hard at work the past 2 days
and has already completed all the weapons for the Arsenal along with a
few things like the bobby pin and hand cuffs.
Heres a little glimpse at what hes been working on.

</div>

something like that obviously youll have to change the colours and stuff but thats preety much how you should do it.. as little css in the html as possible all styling should go in a style sheet unless you want to use a span

[sjheiss]

<style>
#newsentry{border:5px groove #FFFFFF; padding:5px;}
p.date{font-size: 20px; color:#FFFFFF; font-weight: bold;}
p.title{font-size: 16px; color:#FFFFFF; font-weight: bold; text-decoration:underline;}
</style>


<h1>NEWS</h1>

<div class="newsentry">

<p class="date">3/16/08</p>
<p class="title">Weapon Models</p>

Recently we hired hired a new staff member in the modelling department,
his name is Harry Atkins, he's been hard at work the past 2 days
and has already completed all the weapons for the Arsenal along with a
few things like the bobby pin and hand cuffs.
Heres a little glimpse at what hes been working on.

</div>

something like that obviously youll have to change the colours and stuff but thats preety much how you should do it.. as little css in the html as possible all styling should go in a style sheet unless you want to use a span

Awesome! It works now, now I'm just cleaning up my code and other stuff :D