Welcome Guest ( Log In | Join )

Discover the best free computer help!
Learn more about Geeks to Go by taking the tour. Want to ask a question, reply to a topic, or remove all advertising? It's easy, fast and free. Join today!
Spyware, virus, trojan, fake security or privacy alerts? Please start with our malware cleaning guide.
     
 
 Reply to this topicStart new topic
CSS Help Requested To Align Heading
tomeross
post Nov 16 2007, 12:56 AM
Post #1


New Member
*
Posts: 2
OS: Windows Vista
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 File(s)
Attached File  help.zip ( 29.96K ) Number of downloads: 14
 
Go to the top of the page
 
+Quote Post
Ax238
post Nov 16 2007, 09:03 AM
Post #2


TA Moderator
Group Icon
Posts: 1,281
From: SET HOMEPATH
OS: Windows 95/98/2000/XP/Vista
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 ohmy.gif . 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):
CODE
<!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 File(s)
Attached File  test_header.html ( 1.59K ) Number of downloads: 18
 
Go to the top of the page
 
+Quote Post
Major Payne
post Nov 16 2007, 04:06 PM
Post #3


Trusted Techie
Group Icon
Posts: 4,632
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



Edited out. Moderator did not consider this post constructive.

Ron

This post has been edited by Major Payne: Nov 19 2007, 05:11 AM
Go to the top of the page
 
+Quote Post
tomeross
post Nov 17 2007, 09:06 AM
Post #4


New Member
*
Posts: 2
OS: Windows Vista
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
Go to the top of the page
 
+Quote Post
Ax238
post Nov 18 2007, 12:06 AM
Post #5


TA Moderator
Group Icon
Posts: 1,281
From: SET HOMEPATH
OS: Windows 95/98/2000/XP/Vista
There are a number of things said about Firefox that are not entirely based on facts.

QUOTE
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:

Looking pretty good!

Firefox 2.0:

Close, but not quite.

Opera 9:

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.

QUOTE
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

QUOTE
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).

QUOTE
Web Standards have evolved even now to CSS2.1 I believe.
Correct, but it is still in Candidate Recommendation status

QUOTE
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

This post has been edited by Ax238: Nov 19 2007, 10:29 AM
Go to the top of the page
 
+Quote Post
Ax238
post Nov 18 2007, 12:12 AM
Post #6


TA Moderator
Group Icon
Posts: 1,281
From: SET HOMEPATH
OS: Windows 95/98/2000/XP/Vista
Tom,

thumbsup.gif 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
Go to the top of the page
 
+Quote Post
Major Payne
post Nov 18 2007, 12:46 AM
Post #7


Trusted Techie
Group Icon
Posts: 4,632
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



Edited out. Moderator did not consider this post constructive.

Ron

This post has been edited by Major Payne: Nov 19 2007, 05:12 AM
Go to the top of the page
 
+Quote Post
Ax238
post Nov 18 2007, 01:09 AM
Post #8


TA Moderator
Group Icon
Posts: 1,281
From: SET HOMEPATH
OS: Windows 95/98/2000/XP/Vista
Ron,

QUOTE
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.

QUOTE
Comcast.net and its related sources are so far out of date and not worth consideration.
Modified 10-10-2007, not too dated.

QUOTE
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

This post has been edited by Ax238: Nov 19 2007, 10:31 AM
Go to the top of the page
 
+Quote Post
Major Payne
post Nov 18 2007, 02:27 AM
Post #9


Trusted Techie
Group Icon
Posts: 4,632
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



Edited out. Moderator did not consider this post constructive.

Ron

This post has been edited by Major Payne: Nov 19 2007, 05:12 AM
Go to the top of the page
 
+Quote Post
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 
RSS Time is now: 7th January 2009 - 07:17 PM
Advertisements do not imply our endorsement of that product or service. The forum is run by volunteers who donate their time and expertise. We make every attempt to ensure that the help and advice posted is accurate and will not cause harm to your computer. However, we do not guarantee that they are accurate and they are to be used at your own risk.
Powered By IP.Board © 2009  IPS, Inc.