Multiline not lining up 1

[bam720]

I am still new to CSS, and know HTML pretty well. I have been working on ym new site from scratch to learn CSS, while trying to keep it 4.0.1 Strict complient and CSS Complient by W3C standards. Anyway, the thing I am running into is When I have a multiline text It's not correctly lining up as with the first line. You can see what I'm talking about here:

http://www.brombomb.com/news.php

I'm making the database from scratch as well as my template. The appropriate CSS code I am using looks like this:
News Article Box

div.note_box{
	background-color:#0000FF;
	width: 30%;
	text-align: left;
	margin: 10px;
	border-style: solid;
	border-color: #0000FF;
	border-width: 5px;
	border-bottom-width: 10px;
	position: relative;
	left: 35%;	
}

span.note_header{
	width: 50%;
	margin: 10px;
	border: 10px solid gray;
	line-height: 150%;
	background-color: gray;
}

span.note_date{
	width: 50%;
	margin: 10px;
	border: 2px solid #FFA500;
	line-height: 100%;
	font-size: 10pt;
	background-color: #FFA500;
}

span.note_body{
	width: 40%;
	margin-left: 10px;
	margin-bottom: -3px;
	font-size: 11pt;
	background-color: #FFFFFF;
	color: #000000;
	position: relative;
	top: -5px;
}

Comment Box

div.comment_box{
	background-color:#0000FF;
	width: 15%;
	text-align: left;
	border-style: solid;
	border-color: #0000FF;
	border-width: 0px;
	bottom-border-width: 2px;	
	position: relative;
	left: 42%;
}

span.comment_name,.comment_date,.comment_body,.comment_website{
	font-size: 9pt;
	color: #FFFF00;
	position: relative;
	left: 10%;
}

I know the colors are ugly, but I'm still in the setup phase. If you have any other constructive critiques or I'd appreciate them.

 

[bam720]

Ideally, I'd like the part that says "Muhahaha" to be lined up (left and top edge) to the previous line. Thanks in advance for the help.

 

[traingamer]

A step in the right direction: Lose the span tag and the br. Use p or something else

SPAN.note_date {
	BORDER-RIGHT: #ffa500 2px solid; BORDER-TOP: #ffa500 2px solid; FONT-SIZE: 10pt; MARGIN: 0 10px; BORDER-LEFT: #ffa500 2px solid; WIDTH: 50%; LINE-HEIGHT: 100%; BORDER-BOTTOM: #ffa500 2px solid; BACKGROUND-COLOR: #ffa500
}
SPAN.note_body {
	FONT-SIZE: 11pt; MARGIN-BOTTOM: -3px; MARGIN-LEFT: 10px; WIDTH: 40%; COLOR: #000000; POSITION: relative; TOP: -5px; BACKGROUND-COLOR: #ffffff
}
p.note_body {
	FONT-SIZE: 11pt; MARGIN-BOTTOM: 0; MARGIN-LEFT: 10px; COLOR: #000000; margin-TOP: 3px; BACKGROUND-COLOR: #ffffff
}

<SPAN class=note_date>Posted On: 2007-01-01 
22:27:46</SPAN><p class=note_body>Laughing at the idea of using a word 
press plugin template. Muhahaha </p></DIV>

Most of your problem seems to be a result of the use of the span - you're not really using them inline, so you can style some other tag (like a paragraph tag) in my example.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[bam720]

Wow, that worked simply and beautifully. Maybe you could explain (or point me to an explanation), on the use of span and/or div tags? I thought that the div tag was for styling "chunks" of text and that span is for an element (say making something bolded). I though p tags were for Paragraph and thus not a styling element and the same for br. Ive been learning off the w3c school website, which has good examples but I don't see real explanations of those tags. Thanks again for the quick tip. Star for your efforts.

 

[traingamer]

You typically want to use a <span> to style something within a line. Like if I wanted two bold words in the middle of a sentence. See Span and Div for a more in-depth explanation.

You could redo your sections a number of different ways: as definition lists:

<div class=note_box>
<dl>
<dt>And for My Next Trick</dt>
<dd>Posted On: 2007-01-01 22:27:46</dd>
<dd>Laughing at the idea of using a word 
press plugin template. Muhahaha</dd>
</dl>
</div>

or

<div class=note_box>
<h4>And for My Next Trick</h4>
<p class=note_date>Posted On: 2007-01-01 22:27:46</p>
<p class=note_body>Laughing at the idea of using a word 
press plugin template. Muhahaha </p>
</div>

...or...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[bam720]

thanks for the link and the explanation. I appreciate it.