Thursday, November 11, 2010

Banners, Sideboards, Text Sizing and Main Body

Well the time has come.  I have learned strict XHTML.  I know some designing via CSS and I have plodded through theoretical text about user design and structure.  Now I think I know how I want my page to look (the group graphed it) but putting all those CSS commands to work is the real crux of the issue.  It takes a lot of tweaking.  And when you have the page looking just how you want you find changing the size can mess up the layout!  Sighh....

I focused on the banner and navigation bar today and made some headway.  Here's the code this week:

body {background-color: beige;}
h1 {color: orange;}
h2 {font-stle: sans-serif;}
#banner {
background-color: beige;
width: 100%;
margin: 0px;
}


#logo {
padding: 5px;
float: left;
}


#bannertext {
height: 100px;
font-family: ariel;
padding-top: 8px;
margin-left: 400px;
}


#navmenu {
width: 100%;
height: 80px;
margin: 0px;
background-color: blue;
}


#navmenu ul {
list-style: none;
padding: 0px;
margin: 0px;
}


#navmenu li{
width: 180px;
text-align: center;
float: left;
}


#navmenu a:link {
text-decoration: none;
line-height: 50px;
}


#navmenu a:visited {
text-decoration: none;
color: orange;
line-height: 50px;
}


#navmenu a:hover {
text-decoration: none;
display:block;
width: 180px;
line-height: 40px;
background: yellow;
}



Next week let's see what improvements I make and if I get the side menu created and some work on text size options for visually disabled.

No comments:

Post a Comment