HTML Help

omegajam · Joined: 28 Feb 2009 Posts: 1

Hello everyone, I am trying to build website and I don't have lot of experience in design (I know a little html, css and basic js) anyway I create first code from some knowledge and a lot of different templates that put together. My question is if anybody like to check if I make some mistakes and if it possible to make it more simple (make it right way)!

my html/php file is:

Code:
<body>
<div id="headerwrap">
<div id="header">
<div class="headerleft">
<a href="weblink.com"><img src="/img/logo_v2.png" /></a>
</div>
</div>
<div id="navmenubg">
<div id="navmenu">
<ul class="menu">
<li><a href="weblink.com">Home</a></li>
<li><a href="weblink.com/product">Product</a></li>
<li><a href="weblink.com/about">About</a></li>
<li id="right">
<form method="get" id="searchform" action="action goes here /">
   <div class="searchinput">
   <input type="text" class="inputbox" value="value goes here" name="s" id="s" />
   <input type="submit" value="Search" class="searchbutton" />
   </div>
</form>
</li>
</ul>
</div>
</div>
<div id="bgshadow">
</div>
</div>
</body>

my css file:

Code:
body {
width: 100%;
height: 100%;
color: #000000;
background: #FFFFFF;
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
margin: 0px auto 0px;
padding: 0px;
}

/*** Header ***/

#headerwrap {
width: 100%;
background: #FFFFFF;
margin: 0px auto 0px;
padding: 0px;
position: relative;
}

#header {
width: 960px;
margin: 0px auto 0px;
padding: 0px;
position: relative;
overflow: hidden;
}

.headerleft {
width: 300px;
float: left;
font-size: 14px;
margin: 0px;
padding: 0px;
}

.headerleft a img {
border: none;
margin: 10px 0px 0px 20px;
padding: 0px;
}

.headerright {
float: right;
margin: 0px;
padding: 0px;
}

/****** Main Menu ******/

#navmenubg {
background: #223344;
}

#navmenu {
width: 960px;
height: 35px;
margin: 10px auto 0px;
padding: 0px;
position: relative;
border-left: 1px solid #FFFFFF;
}

.menu, .menu ul {
width: 720px;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}

.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5;    /* thus we need to apply explicit z-index here... */
}

#right {
margin: 0;
padding: 0;
border: 0;
display: block;
float: right;
position: relative;
z-index: 5;
}

/**** Style Main Menu ****/

.menu, .menu ul li {
color: #EEEEEE;
background: #223344;
}

.menu ul {
width: 11em;
}

.menu a {
text-decoration: none;
color: #EEEEEE;
padding: .5em 1em;
display: block;
position: relative;
border-right: 1px solid #FFFFFF;
}

.menu a:hover {
color: #fc3;
}

/**** Background Shadow ****/

#bgshadow {
background: transparent url(img/bgshadow.gif) repeat-x;
margin: 0px auto 0px;
padding: 0px;
width: 100%;
height: 10px;
}

/**** Search Form ****/

#searchform {
background: #FFFFFF;
margin: 5px auto 0px;
padding: 0px;
}

.searchinput {
width: 320px;
height: 27px;
border: none;
margin: 0;
padding: 0;
display: inline;
}

.inputbox {
width: 240px;
display: inline;
height: 19px;
border: 1px solid #FFFFFF;
}

.searchbutton {
background: url(img/search_button.png) no-repeat; /* my search image have res: 72x25 */
color: #FFFFFF;
border: 0px solid #FFFFFF;
height: 25px;
width: 72px;
margin: 0;
margin-bottom: -1px;
padding-bottom: 3px;
cursor:pointer;
}

Thanks to everybody!!
[/code]

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4286 Location: MS

Found no coding errors in CSS. You can check/validate your own CSS here:

CSS Validator

You can check/validate your HTML code errors here:

HTML Validator

be sure to set Options to "Show Source" and "Verbose". Your html code shows no DocType, yet you are showing code written for an XHTML 1.0 DocType.

sticks464 · Joined: 31 Dec 2006 Posts: 2624

This is the way I would code this. Less div's and less css. Div's by default have 100% width so there is no need to set a 100% width on them. There is a conditional statement added because IE does not understand inline-block. The entire content is inside a master container with 100% width. It can easily be changed to a set width and centered. The div inside the form was not needed for valid code. The page validates as xhtml and css validated also.

Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { /* remove browser defaults */
margin:0;
padding:0;
border:none;
}
:focus {outline:none;} /* remove dashed border from links in Mozilla browsers */
* html body{ /* font size for IE 5 and 6 */
font-size:xx-small;
f\ont-size:x-small;
}

body {
color: #000000;
background: #FFFFFF;
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
}
.headerleft {
width: 300px;
font-size: .88em;
margin: 10px;
}
.headerleft img {
margin: 10px 0px 0px 20px;
}

/* Main menu */
#navmenu {
background:#223344;
}
ul.menu {
list-style: none;
line-height:1.5;
margin-left:100px;
}

ul.menu li {
position: relative;
display:inline-block;
padding:2px 0 5px 0;
}
ul.menu li a {
display: inline;
text-decoration: none;
color: #eee;
padding: 5px 10px;
border-right: 1px solid #ccc;
}
/* commented backslash mac hiding hack \*/
* html ul.menu li a {height:1%; position:relative;}
/* end hack */

ul.menu li a:hover {
color: #fc3;
}
ul.menu li a.last {border-right:none;}
ul.menu li.search {margin-left:40px;}

/* Search form */
.searchinput {
width: 320px;
}
.inputbox {
width: 240px;
padding:3px 0;
}
.searchbutton {
background: url(img/search_button.png) no-repeat; /* my search image have res: 72x25 */
color: #FFFFFF;
width: 72px;
height:25px;
cursor:pointer;
}

#bgshadow {
background: transparent url(img/bgshadow.gif) repeat-x;
height: 10px;
}
</style>



</head>

<body>
<div id="wrapper">
<a class="headerleft" href="weblink.com"><img src="/img/logo_v2.png" alt="" width="" height="" /></a>
<div id="navmenu">
<ul class="menu">
<li><a href="weblink.com">Home</a></li>
<li><a href="weblink.com/product">Product</a></li>
<li><a class="last" href="weblink.com/about">About</a></li>
<li class="search">
<form method="get" id="searchform" action="action goes here /">
<input type="text" class="inputbox" value="value goes here" name="s" id="s" />
<input type="submit" value="Search" class="searchbutton" />
</form>
</li>
</ul>
</div>
<div id="bgshadow"></div>
</div>
</body>
</html>