Jump to content

proper CSS?

CNT

By CNT
in CSS

Recommended Posts

CNT Member

CNT

Posted
Posted

I don't mean to ask for how to do coding. Just recent other thread made me think if I might be misunderstanding the world of CSS? So, I like to post the website link I create for a church (they asked me to create a website for them). I explained to them that I am a beginner, they accept. This is a good way for me to get a website out there. I like to post my coding for two of the HTML page, and I want you guy to look it over, let me know if I did the CSS correctly or I not taken full advantage of CSS. If there's something I could done better, of course tell me about it.Stylesheet.css

body{	background-image: url("images/bg.png");	background-repeat: repeat-y;	font-size: 2em;}#content{	margin-left: 8em;}#lscontent{	margin-left: 8em;	width: 55em;}ul#navigation{	font-size: 18pt;	margin-left: 0;	padding-left: 0;	list-style-type: none;	float: left;}ul#navigation a{	display: block;	text-decoration: none;	background: #000000;	color: #ffffff;	padding: .2em .5em;	border-bottom: 1px solid #ffffff;	width: 7em;}ul#navigation a:hover{	background: #ffff00;	color: #000000;}ul#navigation li{	display: inline;}etc...

Home.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>	<title>WDEM</title>	<link rel="stylesheet" href="Stylesheet.css" type="text/css" /></head><body><h1>Wisconsin Deaf Evangelism Ministry</h1><div><ul id="navigation"><li><a href="Home.htm">Home</a></li><li><a href="Aboutus.htm">About Us</a></li><li><a href="Leaderships.htm">Leaderships</a></li><li><a href="Events.htm">Events</a></li><li><a href="Videos.htm">Videos</a></li><li><a href="Register.htm">Register</a></li><li><a href="Links.htm">Links</a></li><li><a href="Churches.htm">Churches</a></li><li><a href="ContactUs.htm">Contact Us</a></li></ul></div><div id="content"><p>Welcome to Wisconsin! Hi how are you today!?</p><p>News:</p><p><b>1/1/2011:</b> Happy New Year!</p></body></html>

Aboutus.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>	<title>WDEM</title>	<link rel="stylesheet" href="Stylesheet.css" type="text/css" /></head><body><h1>Wisconsin Deaf Evangelism Ministry</h1><div><ul id="navigation"><li><a href="Home.htm">Home</a></li><li><a href="Aboutus.htm">About Us</a></li><li><a href="Leaderships.htm">Leaderships</a></li><li><a href="Events.htm">Events</a></li><li><a href="Videos.htm">Videos</a></li><li><a href="Register.htm">Register</a></li><li><a href="Links.htm">Links</a></li><li><a href="Churches.htm">Churches</a></li><li><a href="ContactUs.htm">Contact Us</a></li></ul></div><div id="content"><p>We are UPC.</p></div></body></html>

As you can see, I repeat use the navigation for every page. I want to avoid using frames or tables (best to avoid those, right?). To see the working website, it's:www.WDEM.orgThank you.Chuck

Link to comment
Share on other sites
trinistorm Member

trinistorm

Posted
Posted

Try to avoid styling tags like <b> in the future. The aim is to have CSS provide the style. Use font-weight:bold modifiers instead.

Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted

I like the look of your site and the way you position the menu. Contrast is good as is the highlighting when mouse-over the menu (hover).technical noteUL is a block element and therefore can be given position, float etc. as you have done. I do not believe it necessary to enclose it inside a DIV...unless there are compatibility issues I have not run across yet. Only use a div to enclose something when it is necessary.layout suggestion....you might try to remove the white line at the bottom of the last menu item so that the top and the bottom of the menu are BLACK. You can do this by targeting the last element with a class

<li class="last"><a href="ContactUs.htm">Contact Us</a></li>

and in the style sheet

ul#navigation a .last{	border-bottom: 1px solid #000000;}

note that in the OVERRIDE you only need to define what is different. "a.last" has already inherited the properties of "a"You might have to play with the padding on the last item so the last box does not appear to be one pixel bigger. It was probably good to use EM for line height for users who use larger text but it may be hard to reconcile with pixels for the border. A bit of patience will get it right.There are two things that fall in my pet peeves.1 Your H1 title jumps a bit left to right from one page to another. You have H1 CENTER on a fluid page width. On the surface this is good that the title will be centered regardless of my browser width. But even when my browser is extra wide (1000px or more) the title still jumps from page 1 to page 2. It seems there is something on about half the pages that makes them more than 100% of the browser width.2 Please remember to proofread carefully. The second sentence of the opening page has two errors......this is not CSS but affects the quality of your site.keep up the good work...Guy

Link to comment
Share on other sites
CNT Member

CNT

Posted
  • Author
Posted
I like the look of your site and the way you position the menu. Contrast is good as is the highlighting when mouse-over the menu (hover).
I like it too, but as I look at it over and over, it's "black and yellow", it doesn't match with anything on the overall website. But, it's a start. I am aiming for people with low vision or legal blind.
Your H1 title jumps a bit left to right from one page to another. You have H1 CENTER on a fluid page width. On the surface this is good that the title will be centered regardless of my browser width. But even when my browser is extra wide (1000px or more) the title still jumps from page 1 to page 2. It seems there is something on about half the pages that makes them more than 100% of the browser width.
YES! I couldn't see why it does that. I even had a professional web teacher looked at this specific issue, he couldn't see why either.I am still trying to understand what you saying. I am Deaf and even I type good for English, but I still need to read it over and understand what others say as well. I am not seeing error? I wish I have a mentor to guide me thru this first stage of my web development.I have Visual Studio 2008 (ASP.NET w/AJAX), I am still overwheleming with ASP properties (yes, I took 3 day course and have read ASP books). So, I am just using VS as my HTML editor (I like the way it spells out the codes and color). No need for Dreamwaver.Chuck
Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted
I like it too, but as I look at it over and over, it's "black and yellow", it doesn't match with anything on the overall website. But, it's a start. I am aiming for people with low vision or legal blind.YES! I couldn't see why it does that. I even had a professional web teacher looked at this specific issue, he couldn't see why either.
agreed..perhaps yellow is not pretty but it is good contrast. maybe take a bright blue on black to sort of go with the background theme.as for the h1 moving around - perhaps sometimes too complicated means give up.Try aligning your H1 with the menu float 55em....it should still look good though not centered.Patience is required. test in small increments, one little piece at a time. You will get there.
Link to comment
Share on other sites
music_lp90 Member

music_lp90

Posted
Posted
As you can see, I repeat use the navigation for every page. I want to avoid using frames or tables (best to avoid those, right?). To see the working website, it's:
You may want to consider using something like a php include for the navigation. This way you can create one file with your navigation in it and then wherever you want it to apper on a page you write:
<?php include("navigation.php"); ?>

You would have to save all of your .htm pages as .php files to do this, though, but then when you have to update the navigation, it's in one place instead of updating every page. You also would have to have php on your server or asp or whatever language you use to do the includes.

Link to comment
Share on other sites
CNT Member

CNT

Posted
  • Author
Posted
You may want to consider using something like a php include for the navigation. This way you can create one file with your navigation in it and then wherever you want it to apper on a page you write:
<?php include("navigation.php"); ?>

You would have to save all of your .htm pages as .php files to do this, though, but then when you have to update the navigation, it's in one place instead of updating every page. You also would have to have php on your server or asp or whatever language you use to do the includes.

I appreciate you sharing that idea. It's something I will look into. PHP is still confusing for me to understand, but hope someone can sit down with me and explain the concept of it. Yes, I review a lot of W3S site.So, in close, what I have now is normal proper usage of CSS with navigation (in which I will have to do it for every HTML page) (see below)?
<div><ul id="navigation"><li><a href="Home.htm">Home</a></li><li><a href="Aboutus.htm">About Us</a></li><li><a href="Leaderships.htm">Leaderships</a></li><li><a href="Events.htm">Events</a></li><li><a href="Videos.htm">Videos</a></li><li><a href="Register.htm">Register</a></li><li><a href="Links.htm">Links</a></li><li><a href="Churches.htm">Churches</a></li><li><a href="ContactUs.htm">Contact Us</a></li></ul></div>

Chuck

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...