View Full Version : stuck on css coding and div layout

11-21-2011, 05:25 AM
Hi everyone,

I am stuck on my current design project. I've attached my HTML and CSS coding as well as a .jpg of the web comp.

Here is my issue - I cant get the nav links over the grey nav bar. Ive tried various float and position codings, with no luck.

Any suggestions to make this happen, please?!

Thanks in advance!


p.s. - dreamweaver seems to have stopped previewing in browser correctly for me, in both safari and firefox. it was working and then stopped. i make changes in dreamweaver and the dont update to the browser preview. Mac OSX 10.6.8. any thoughts?

11-21-2011, 05:34 AM
sorry, those screenshot pics appear hard to read. try these:





11-21-2011, 06:29 AM
post the code, not going to squint at the images


11-21-2011, 04:10 PM
Thx, Sammy!


<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Monarch Welding & Engineering, Inc.</title>

<meta name="description" content="Monarch Welding & Engineering, Inc. Boiler Repair, ASME Shop Fabrication, Structural Erection, and Mechanical Installation" />

<link href="styles.css" rel="stylesheet" type="text/css" />


<div id="container">
<div id="header" class="clear">
<h1><a href="#"><img src="images/logo.png" /></a></h1>

<div id="picbar">
<ul id="picbarul">
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
<li><img src="images/pic3.jpg" /></li>
<li><img src="images/pic4.jpg" /></li>

<div id="navcontainer">
<div id="navbar"><img src="images/navbar.png" />

<ul id="nav">

<li><img src="images/history.png" /></li>
<li><img src="images/experience.png" /></li>
<li><img src="images/certifications.png" /></li>
<li><img src="images/safety.png" /></li>
<li><img src="images/services.png" /></li>
<li><img src="images/contactus.png" /></li>


<div id="body content">
<p>Monarch Welding and Engineering is Michigan's premier
industrial construction expert.

A family owned and operated business, Monarch Welding and
Engineering is proud to have been serving our community for
over 80 years. With a rich history and vast experience
Monarch Welding and Engineering is willing and able to
support any and all projects.* Our team of experts are
committed to insuring each project is executed safely and
efficiently. Monarch Welding and Engineering looks forward to the opportunity to support your company and its needs.
<br />

The areas we service are diverse and ever growing:
- Engineering Firms <br />
- General Contractors <br />
- Chemical <br />
- Petroleum <br />
- Automotive <br />
- Steel Mills <br />
- Utilities <br />
- Manufactures <br />


<div id="body content 2">
Areas of expertise: <br />
- ASME Shop fabrication <br />
- Boiler Repair / maintenance / fabrication <br />
- Refinery Repair <br />
- Steel fabrication <br />
- Structural steel <br />
- Piping systems <br />
- Conveyors / material handling systems <br />
- Duct work <br />
- Cooling towers <br />
- Heat exchangers <br />
- General contracting <br />
- Turnkey project management <br />
- Engineering consulting <br />
<br />
Only to a name a few ...

<div id="logodupe">
<img src="images/logodupe.png" />
<div id="footer-container">
<div id="footer">
<div id="footerbar">
<img src=/>

<div id="footer contact">
<img src="images/footercontact.png" />





<style href="styles.css" rel="styelsheet">@charset "UTF-8";
/* CSS Document */

.clear:after {
content: ""; display: block; clear: both;

.clear { zoom: 1; }

body {
font-family: Arial, Helvetica, sans-serif;
background: #fff;
text-decoration: none;
text-align: center;


margin-left: auto;
margin-right: auto;
width: 960px;
text-align: left;


#header {
padding: 0px;
margin: 0px;
position: relative;
top: 10px;


#picbar {
list-style: none;
margin-left: 120px;
position: relative;
top: 3.5px;


#picbarul li {
display: inline;

#navcontainer {
list-style: none;
margin-top: 40px;


#navbar {


#nav li {
list-style: none;

11-21-2011, 11:52 PM
wrap your code with
next time



html {
height: 100%;

so you want #nav ON TOP of the image? have you ever considered setting the image as a background to the #nav instead of using <img>?

#nav {
background: url('/images/navbar.png');

if not, then set

#navbar img {
width: 100%;
height: 200px;
position: absolute;
left: 0;
top: 0;