Simplify and correct code (html and css)

omegajam · Feb 28, 2009

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!!

Vragabond · Feb 28, 2009

You're missing important elements for a valid page, such as a doctype, html and head (and all the necessary elements in the head).

Structure otherwise seems OK. It might be a little convoluted with additional divs for backgrounds (how come you need a separate element for background?), but I cannot see the page in question. CSS seems solid.

Run both HTML and CSS through W3 validator to check for any mistakes.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

omegajam · Feb 28, 2009

Thank you for reply! My original index.php file containing all nesesery elements like head and doctype....
I am not sure how I can clean my code from extra divs, I also check my site thru w3 validator and it's showing that all good!
thanks for help!

Vragabond · Feb 28, 2009

You have one div that has nothing but a background. If you put this background on the div inside the background div, why would that not work?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

omegajam · Mar 1, 2009

thanks for tip! I'll try it!

ChrisHunt · Mar 3, 2009

I would start by describing your document with the minimum number of elements to properly describe its structure, then add extra <div>s if, and only if, they are required to achieve a certain presentational effect. Experienced designers can dive straight in with all the framework <div>s they're going to need, beginners should start with the bare bones!

For your site, those bones might be something like this:

Code:

<body>
  <div id="header">
    <a id="logo" href="weblink.com"><img src="/img/logo_v2.png" /></a>

    <div id="menubar">
      <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>
      </ul>
      <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>
    </div>
  </div>
  <div id="main">
    <p>Main content goes in here</p>
  </div>
</body>

That's essentially the code you have, shorn of (seemingly) excess <div>s. Some might need to reappear to achieve your desired effect. Remember that you can apply CSS to any element - you don't necessarily have to wrap <a>s or <form>s or <ul>s in a div.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Simplify and correct code (html and css)

omegajam

IS-IT--Management

Vragabond

Programmer

omegajam

IS-IT--Management

Vragabond

Programmer

omegajam

IS-IT--Management

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor