Log in

View Full Version : CSS Help


NADB
09-14-2007, 04:55 PM
Hi,

The following code is the header of my page. I need an example of how my code should be written between the <H></h> tags. I know the absolutes shouldn't really be there and other little tidbits but that's the way my editor that i use does it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="bv_" style="position:absolute;left:103px;top:131px;width:1036px;height:6px;z-index:0" align="left">
<img src="bv01649.gif" id="Shape1" align="top" alt="" border="0" width="1036" height="6"></div>
<div id="bv_" style="position:absolute;left:108px;top:9px;width:1028px;height:157px;z-index:1" align="left">
<img src="bv01650.gif" id="Shape2" align="top" alt="" border="0" width="1028" height="157"></div>
<div id="bv_" style="position:absolute;left:901px;top:20px;width:175px;height:28px;z-index:2" align="left">
<font style="font-size:24px" color="#32CD32" face="Monotype Corsiva"><b>Sign UP | Log In</b></font></div>
<div id="bv_" style="position:absolute;left:164px;top:50px;width:201px;height:72px;z-index:3" align="left">
<font style="font-size:64px" color="#FFFFFF" face="Arial">LOGO</font></div>
</body>
</html>

Same thing for my footer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<style type="text/css">
img { behavior: url("pngfix.htc"); }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="half1000.png" id="Image2" alt="" align="top" border="0" width="1030" height="174" style="position:absolute;left:219px;top:197px;width:1030px;height:174px;z-index:0">
<div id="bv_" style="position:absolute;left:269px;top:255px;width:146px;height:25px;z-index:1" align="left">
<font style="font-size:21px" color="#FFFFFF" face="Monotype Corsiva">Driving Directions</font></div>
<div id="bv_" style="position:absolute;left:484px;top:255px;width:112px;height:25px;z-index:2" align="left">
<font style="font-size:21px" color="#FFFFFF" face="Monotype Corsiva">Traffic Alerts</font></div>
<div id="bv_" style="position:absolute;left:664px;top:255px;width:123px;height:25px;z-index:3" align="left">
<font style="font-size:21px" color="#FFFFFF" face="Monotype Corsiva">Auto Insurance</font></div>
<div id="bv_" style="position:absolute;left:859px;top:255px;width:182px;height:25px;z-index:4" align="left">
<font style="font-size:21px" color="#FFFFFF" face="Monotype Corsiva">New and Used Vehicles</font></div>
<img src="white600.png" id="Image1" alt="" align="top" border="0" width="600" height="49" style="position:absolute;left:435px;top:302px;width:600px;height:49px;z-index:5">
<div id="bv_" style="position:absolute;left:454px;top:308px;width:94px;height:37px;z-index:6" align="left">
<font style="font-size:32px" color="#9B0000" face="Arial"><b>home</b></font></div>
<div id="bv_" style="position:absolute;left:542px;top:318px;width:117px;height:25px;z-index:7" align="left">
<font style="font-size:21px" color="#9B0000" face="Arial Narrow"><b>questions</b></font></div>
<div id="bv_" style="position:absolute;left:632px;top:313px;width:94px;height:31px;z-index:8" align="left">
<font style="font-size:27px" color="#9B0000" face="Arial Narrow">about us</font></div>
<div id="bv_" style="position:absolute;left:721px;top:305px;width:164px;height:43px;z-index:9" align="left">
<font style="font-size:37px" color="#9B0000" face="Arial Narrow">contact us</font></div>
<div id="bv_" style="position:absolute;left:865px;top:319px;width:69px;height:23px;z-index:10" align="left">
<font style="font-size:19px" color="#9B0000" face="Arial Narrow">privacy</font></div>
<div id="bv_" style="position:absolute;left:922px;top:319px;width:101px;height:23px;z-index:11" align="left">
<font style="font-size:19px" color="#9B0000" face="Arial Narrow"><b>terms of use</b></font></div>
<div id="bv_" style="position:absolute;left:1113px;top:255px;width:84px;height:25px;z-index:12" align="left">
<font style="font-size:21px" color="#FFFFFF" face="Monotype Corsiva">Gas Relief</font></div>
</body>
</html>

Any help would be appreciated. Thanks in advance.
NADB
boogyman
09-14-2007, 05:54 PM
1) the Transitional DOCTYPE was designed for when CSS was first coming of age about 10 years ago, and really should not be used anymore. Also the XHTML is not supported by Internet Explorer, thus you should be using HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PAGE TITLE</title>
</head>
<body>


2) you should only have 1 <head></head> section per page, and you are describing 2 sections of 1 page, that are really being served as 2 entirely different pages within the same, undoubtedly this will confuse the browser and cause problems so get rid of the </body></html> after the first section and get rid of the entire doctype/head portion of the bottom section

3) now I do not want to criticize what you are doing, but not only are you using absolute positioning on every single element, but the way in which you construct those elements are put together leads to problems.
the html portion of the webpage should be content and only content... let the CSS deal with how everything looks. After taking out all of your inline styles and depreciated elements (eg <font> tag) the header has multiple images that arent really doing anything, and the footer has a bunch of links that I would think would be more appropriate for the main navigation section of a page... eg (home, about us, etc...)

if you could explain what it is you are trying to do that would greatly help us to help you.

from what i can see, you want the logo in the upper left, you want a login / register in the bottom right of the "top section"
then in your footer section you just have a bunch of random text that im assuming will become links



<div>
<p>Driving Directions &nbsp;&int;&nbsp;
Traffic Alerts &nbsp;&int;&nbsp;
Auto Insurance &nbsp;&int;&nbsp;
New and Used Vehicles &nbsp;&int;&nbsp;
home &nbsp;&int;&nbsp;
questions &nbsp;&int;&nbsp;
about us &nbsp;&int;&nbsp;
contact us &nbsp;&int;&nbsp;
privacy &nbsp;&int;&nbsp;
terms of use &nbsp;&int;&nbsp;
Gas Relief</p>
</div>
Twey
09-14-2007, 06:38 PM
I know the absolutes shouldn't really be there and other little tidbits but that's the way my editor that i use does it.Then you seriously need to drop that editor. This code is hideous: the absolute positioning makes for a completely inflexible page, and the inline CSS makes for huge amounts of bunk markup. Pragmatically speaking, you'd actually be better off using a <table> for layout than all this rubbish. This isn't how CSS is meant to be done. What was the editor, Microsoft Word?
NADB
09-14-2007, 07:04 PM
Boogyman,

I really do appreciate your kind response. The editor that I am using is writing this code. What I am trying to do is get away from these WYSIWYG editors.

Yes you are right about the images in the header. I am using images as part of the header. Here again. I am using a editor that doesn't use header or footer tags. All it does is group everything together in the body.

I am trying to learn how to code. If you can give me an example of how to code a page correctly using header, body,footer along with the css. I will be able to use that as a guide to get me started.

Twey if you have any suggestions on a good editor that i can use to help me with coding please by all means let me know.

Thanks for the help,
NADB
boogyman
09-14-2007, 07:31 PM
wysiwyg editors do offer some good tools, however the casual code writer doesnt know how to properly use those tools, and ends up creating a real mess. HTML Kit is a freeware editor that I think you might like to try.

however most people in programming use text editors like notepad, which really offer little to no support in helping you program. personally I use Dreamweaver 8 in code view, however I am trying to learn more about the world of Linux thus I have been venturing into the world of VIM.

and as for proper coding techniques, well that can be written in like a 20page report about what to put where and how do this or do that, but a very very simple example would be something like




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PAGE TITLE</title>
___JAVASCRIPT_/_CSS_/______
</head>
<body>

__BODY___

</body>
</html>


there are 3 basic ways of integrating javascript / css into a file.

1) Externally: create a new text file and store your code. CSS would need extension .css and havascript would have .js.
this is ideal for things that you will need to use across multiple pages (site wide)
you then would put a link between the <head> </head> to properly link the appropriate file


<link type="text/css" rel="stylesheet" href="path/to/file.css">
<script type="text/javascript" src="path/to/file.js"></script>


2) Embedded: these are put within <head><head> tag again, except these styles are intended to be used on this single page only


<style type="text/css">
selector {
property: value;
}
</style>
<script type="text/javascript">
function dText(msg) {
alert(msg);
}
</script>


3) In-line: these are things that you put within the tag you wish to affect. and these will only take effect on this perticular tag.


<a href="somepage.html" style="background-color:#000000">This will have a black background</a>
<a href="somepage.html" onclick="alert('this link has been clicked'); return false">You are about to be alerted</a>



the body portion of any page is where you should house all of the content of the page. <table> are not meant to be used as the layout schema, but rather for specific content data, such as record keeping. <div> and <p> and other html tags should be the main focus of a layout schema and together with the use of CSS you can create any layout necessary.

for some tutorials on how to do this any many others, you can do a simple search on google for css layouts or html with css or something like that. you can also visit www.w3schools.com which offer many tutorials for beginners and if you have any specific questions about how to do something please dont be afraid to ask
NADB
09-14-2007, 08:51 PM
Boogyman,

You have been a big help. Thanks.

NADB.