Trouble with template.

**Tye** · 12-28-2008, 10:53 PM

Okay, so here is what I'm dealing with. I want my template to look like this:

HERE

But it looks like this: (Also not aligned in IE)

THIS

My main problems:
- Help convert background color to dark grey
- Help with installing the navigation bar I want (RIGHT HERE)
- Help it run smoothly in IE.

Note: This is my first time building a template in Photoshop and converting it to actual code, so I'm a little lost.

Here is my Code:
<html>
<head>
<title>Layout</title>
<style type="text/css">
body {
background: url('bg-main.gif') repeat-x !important;
margin: 0;
padding: 0;
font-family:arial, tahoma, sans-serif;
font-size:13px;
background-color: #333;
}
#containter {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
}
#header {
background: url('header-bg.gif') no-repeat center;
wdith: 100%;
height: 235px;
margin: 0 auto;
}
#smallContainer {
margin: 0 auto;
padding: 0;
width: 856px;
height: 500px;
background: black center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="container">
<div id="header"> </div>
<div id="smallContainer">
</div>
</div>
</body>
</html>

**bluewalrus** · 12-28-2008, 11:24 PM

Give this a try. I dont have ie so cant help you there... and download the images and put them in from that script page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Layout</title>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}
html {
background:#333333;
}
body {
	background: url('bg-main.gif') repeat-x !important;
	margin: 0;
	padding: 0;
	font-family:arial, tahoma, sans-serif;
	font-size:13px;
	background-color: #333;
}
#containter {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#header {
  background: url('header-bg.gif') no-repeat center;
  wdith: 100%;
  height: 235px;
  margin: 0 auto;
}
#smallContainer {
  margin: 0 auto;
  padding: 0;
  width: 856px;
  height: 500px;
  background: black center;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="smallContainer">
<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>
</div>
</div>
</body>
</html>

**Nile** · 12-29-2008, 01:50 AM

Here's a cleaner version of bluewalruse's:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Layout</title>
<style type="text/css">
html {
  background:#333333;
}
body {
  background: url('bg-main.gif') repeat-x !important;
  margin: 0;
  padding: 0;
  font-family:arial, tahoma, sans-serif;
  font-size:13px;
  background-color: #333;
}
#containter {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#header {
  background: url('header-bg.gif') no-repeat center;
  wdith: 100%;
  height: 235px;
  margin: 0 auto;
}
#smallContainer {
  margin: 0 auto;
  padding: 0;
  width: 856px;
  height: 500px;
  background: black center;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{
  margin: 0;
  padding: 0;
  float: left;
  font: bold 13px Arial;
  width: 100%;
  overflow: hidden;
  margin-bottom: 1em;
  border: 1px solid #625e00;
  border-width: 1px 0;
  background: black url(blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
  display: inline;
}

.solidblockmenu li a{
  float: left;
  color: white;
  padding: 9px 11px;
  text-decoration: none;
  border-right: 1px solid white;
}

.solidblockmenu li a:visited{
  color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
  color: white;
  background: transparent url(blockactive.gif) center center repeat-x;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="smallContainer">
<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>
</div>
</div>
</body>
</html>

Thread: Trouble with template.

Thread Tools

Search Thread

Trouble with template.

Bookmarks

Bookmarks

Posting Permissions