Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

CSS Help Requested To Align Heading

Started by tomeross , Nov 16 2007 12:56 AM

  • Please log in to reply

#1
tomeross
Posted 16 November 2007 - 12:56 AM

tomeross

    New Member

  • Member
  • Pip
  • 2 posts
I can do this with tables in 5 minutes, but I can't seem to get css to work. I took the Laura.com Crash Course for CSS and I understood it, but when I try to put it into action I run up against a wall. I would appreciate any help you can give me. Attached is a zip file with the code and the images.

Where I have the code: <div align="left"> and <font class="dt">, I tried <div align="left" class="dt"> but it ignored the font size etc...

I've also tried <span>'s, floats (left & right). It just doesn't make sense to me. I can't seem to understand how CSS thinks....

Thanks,
Tom

Pictures:

goal.jpg: What I want the final output to look like
test_pic.jpg: What it looks like using the css I have
test_heading.jpg: the heading picture
bg_header.gif: the header background picture

CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<STYLE type=text/css media=screen>
BODY {
MARGIN: 0px;
COLOR: #222222;
BACKGROUND-COLOR: #FFF;
TEXT-ALIGN: center
}
#header {
WIDTH: 80%;
HEIGHT: 120px;
background-image: url("images/bg_header.gif");
}
#headerblock {
MARGIN-LEFT: auto;
WIDTH: 650px;
MARGIN-RIGHT: auto;
TEXT-ALIGN: left
}
font.dt {
font-family: Arial;
font-size: 10px;
padding-left: 1.7em;
}
#goright {
TEXT-ALIGN: right;
padding-right: 1.7em;
}
</STYLE>
</HEAD>
<BODY>
<!-- H E A D E R -->
<DIV id=header>
<DIV id=headerblock>
<hr>
<img align="middle" src="images/test_heading.jpg" width="575" height="78" alt=""> </DIV>
<div align="left">
<font class="dt">
<script type="text/javascript">var d = new Date()
var weekday=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY")
var monthname=new Array
("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + " ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
</div>
<div id="goright">http://www.website.com </div></font>
<hr align="center">
</DIV>
</DIV>
<!-- E N D H E A D E R -->
</body>
</html>

Attached Files

  • Attached File  help.zip   29.96KB   221 downloads

  • 0

Advertisements

#2
Ax238
Posted 16 November 2007 - 09:03 AM

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Hello Tom,

All that I wanted to do was take a look at your source, but I started tinkering with it, and finally found that I had completed it for you :) . We'll get to the source, but first a few notes.

You can use "float:left" and "float:right" to get two divs to be horizontally aligned. I added that to your "goright" div and also to the newly labeled "goleft" div (CSS Float Theory: Things You Should Know). This did not alone solve the issue though. I added "overflow:none;" to both the "header" and the "headerblock" divs to ensure they are more appropriately aligned. I changed the "header" width to be the same as the "headerblock" width, as it was throwing off the hr's.

I removed the font.dt, along with the font tag because the same thing can be achieved by setting the font properties inside the two div tags, which I also did. I also added a padding-bottom to both divs.

I moved the hr tags to be outside of the headerblock. I also added CSS for the hr tags to keep them the same width and alignment as everything else. Other than that, everything looked OK. Oh yeah, I also set all the tags to lowercase and formatted them as well, closed open tags, and cleaned up anything I saw that needed to be. It looks good in IE and Opera (and Firefox now).

Here's the source (I'm attaching the new file as well):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
<style type="text/css" media="screen">
body {
	margin: 0px;
	color: #222222;
	background-color: #FFF;
	text-align: center
}
#header {
	width: 650px;
	height: 120px;
	background-image: url("images/bg_header.gif");
	overflow:none;
	margin-left: auto;
	margin-right: auto;
}
#headerblock {
	width: 650px;
	text-align: left;
	overflow:none;
}
#goleft {
	float:left;
	font-family: Arial; 
	font-size: 10px;
	text-align: left;
	padding-left: 1.7em;
}
#goright {
	float:right;
	font-family: Arial; 
	font-size: 10px;
	text-align: right;
	padding-right: 1.7em;
}
hr
{
 	margin-left: auto;
	width: 650px;
	margin-right: auto;
}
</style>
</head>
<body>
<!--  H E A D E R  -->
<div id="header">
	<hr />
	<div id="headerblock">
		<img align="middle" src="images/test_heading.jpg" width="575" height="78" alt="" />
		<div id="goleft">
			<script type="text/javascript">
				var d = new Date()
				var weekday=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY")
				var monthname=new Array
				("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")
				document.write(weekday[d.getDay()] + "  ")
				document.write(d.getDate() + " ")
				document.write(monthname[d.getMonth()] + "  ")
				document.write(d.getFullYear())
			</script>
		</div>
		<div id="goright">http://www.website.com </div>  
	</div>
	<br /><hr />
</div>
<!--  E N D   H E A D E R  -->
</body>
</html>

Edit: Firefox incorrectly displayed the bottom hr, so I took out the padding-bottom and added a line break.

Regards,

Ax

Attached Files


  • 0

#3
Major Payne
Posted 16 November 2007 - 04:06 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Edited out. Moderator did not consider this post constructive.

Ron

Edited by Major Payne, 19 November 2007 - 05:11 AM.

  • 0

#4
tomeross
Posted 17 November 2007 - 09:06 AM

tomeross

    New Member

  • Topic Starter
  • Member
  • Pip
  • 2 posts
Thanks for the help. It does work. I will study your css and compare it to mine. Maybe I'll eventually understand it. I apparently need to do more reading about css. It's not the css syntax or inheritance that gets me, it's how css applies your css to your page I can't seem to grasp.

Thanks again
Tom
  • 0

#5
Ax238
Posted 18 November 2007 - 12:06 AM

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
There are a number of things said about Firefox that are not entirely based on facts.

Firefox does not display code incorrectly.

That's an interesting statement. Before we get into the facts, let's do some analysis of how the browsers handled the bottom padding of the floats (took out the <br /> and replaced it with the padding-bottom of 1.5em on the floats):

Internet Explorer 6/7:
Posted Image
Looking pretty good!

Firefox 2.0:
Posted Image
Close, but not quite.

Opera 9:
Posted Image
Looking pretty good!

It is apparent that Firefox failed this test, while IE and Opera passed with flying colors.

Try The Second Acid Test with Firefox (it should display a smiley face). It appears Firefox displays incorrectly.

It is the one and only CSS2 compliant browser available.

Not so, Amaya, Camino, Epiphany, Rock, Galeon, iCab, K-Meleon, Konqueror, Netscape, Netscape Navigator 9, OmniWeb, Opera, Safari, SeaMonkey, and Shiira are also among the CSS2(.1)-compliant browsers available. But no browser has of yet implemented CSS2 completely.

Check these sites out for more comparisons:
CSS - Contents and compatibility
Comparison of web browsers - Wikipedia, the free encyclopedia

If your code does not display properly in FF, you are using incorrect code in the CSS and/or html.

Hmm, according to the W3C (Web Standards Consortium) HTML validator, "This Page Is Valid HTML 4.0 Transitional!". The CSS code was declared "Valid CSS information" (after taking out the overflow:none, which did not affect the CSS display).

Web Standards have evolved even now to CSS2.1 I believe.

Correct, but it is still in Candidate Recommendation status

Once the "powers that be" quit arguing, CSS3 will be out. Some good things in CSS3, but present CSS3 proposals make it more bad than good.

It looks to me that CSS3 is coming along quite nicely:
CSS: Current Work. Judging by the list, I personally can't see why it would be more bad than good.

Regards,

Ax

Edited by Ax238, 19 November 2007 - 10:29 AM.

  • 0

#6
Ax238
Posted 18 November 2007 - 12:12 AM

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Tom,

:) Great, glad to hear it! Yes, CSS is quite challenging to pick up on at first, but the more you use it, the easier it comes. I think even the CSS greats have problems getting things working correctly, moreso because CSS is left to the browsers to support and interpret. I'd advise you to think of HTML as the content and CSS as the design layout. If you keep those two things separated, you'll do well.

Regards,

Ax
  • 0

#7
Major Payne
Posted 18 November 2007 - 12:46 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Edited out. Moderator did not consider this post constructive.

Ron

Edited by Major Payne, 19 November 2007 - 05:12 AM.

  • 0

#8
Ax238
Posted 18 November 2007 - 01:09 AM

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Ron,

As usual, you found all the sites that are going to support your side of the debate.

Please don't make assumptions, these are all very neutral sources. I haven't even chosen a side, except to say that Firefox is no more infallible than the rest of the browsers.

Comcast.net and its related sources are so far out of date and not worth consideration.

Modified 10-10-2007, not too dated.

It's just that they are not implementing the complete CSS2 standards, whereas, Firefox is much more compliant in regards to that standard.

No web browser completely implements CSS2 standards, Firefox actually trails a couple browsers in its standards compliance level.

I do agree that we are in a disagreement that could be perpetual, but that's not the point. I really wasn't trying to convince you to change your mind, I merely wanted to get the facts out and let people know the truth.

Best Regards,

Ax

Edited by Ax238, 19 November 2007 - 10:31 AM.

  • 0

#9
Major Payne
Posted 18 November 2007 - 02:27 AM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Edited out. Moderator did not consider this post constructive.

Ron

Edited by Major Payne, 19 November 2007 - 05:12 AM.

  • 0
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP