Help with DIV and CSS layout (pics included)

DannyCare

11-11-2010, 10:37 PM

Hi there! I'm currently coding a layout I designed, however I've encountered a problem. Here's a picture of how I want the layout to look:

http://i53.tinypic.com/2dsk7iv.png

Now obviously this will be thriving with text and images when finished, me and my friend are coding it together. We've gotten everything perfect so far apart from the bit just above the white content area, the part where it gives a 3D effect below the header. The image is not a screenshot but the actual layout created in Photoshop

Up until this point has been coded using CSS and DIV layering, the plan is eventually to include PHP for the content etc. The corners of this one row will not go into place though, and when they do, they always mess up when the page becomes smaller (because at the minute the layout is using a width of 100%) This is how it's appearing in my browser:

http://i54.tinypic.com/hx27vb.png

I've tried Firefox, Chrome and Safari, all bringing up the same results.

I'm quite new to coding so any suggestions would be helpful, thank you :)

Danny

Excavator

11-12-2010, 12:56 AM

Hello DannyCare,
It's impossible to guess how you're putting this site together without seeing your code. Since it's an issue with images, a link to the test site would be best so we can see them.

DannyCare

11-12-2010, 02:06 PM

I'm sorry, how silly of me haha. Right the coding is here:

http://pastie.org/1292647

That's the source, then the CSS file is:

http://pastie.org/1292649

The test site is here:

http://193.33.178.141/defconbeta/

Sorry for my stupidity haha!

Excavator

11-12-2010, 02:48 PM

Here's couple different examples that may help you...Just copy/paste this code into a new .html file and open with your browser to view -<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 100%;
margin: 30px auto;
padding: 25px 0; /*just some separation for demonstration only*/
background: #999;
overflow: auto;
font-size: 0.8em;
}
.nav_bg {
height: 32px;
background: url(http://193.33.178.141/defconbeta/images/bg.png);
}
.float_L {float: left;}
.float_R {float: right;}
.nav_bg2 {
margin: 100px 0 0; /*just some separation for demonstration only*/
height: 32px;
background: url(http://193.33.178.141/defconbeta/images/nav_bg.png);
position: relative;
}
#leftImg {
height: 32px;
width: 32px;
position: absolute;
top: 0;
left: 0;
}
#rightImg {
height: 32px;
width: 32px;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="nav_bg">
<img src="http://193.33.178.141/defconbeta/images/nav_lc.png" width="32" height="32" class="float_L" />
<img src="http://193.33.178.141/defconbeta/images/nav_rc.png" width="32" height="32" class="float_R" />
</div>
<div class="nav_bg2">
<img src="http://193.33.178.141/defconbeta/images/nav_lc.png" id="leftImg" />
<img src="http://193.33.178.141/defconbeta/images/nav_rc.png" id="rightImg" />
</div>
</div>
</body>
</html>