• Locked
3 replies [Last post]
Wed, 2009-10-21 09:35
wozzabikes
Offline
newbie
London
Last seen: 13 years 14 weeks ago
London
Timezone: GMT+1
Joined: 2009-10-21
Posts: 4
Points: 5

Hi there, i have a problem with my header for the site i'm building, trying to achieve this:
Screen shot 2009-10-21 at 10.31.03_0.png

I want the left handside to expand the full width of the browser, the blue, to extend the full width of browser and the graphical area be centred, i have achieved it using absolute positioning but get a scoll bar at the bottom which isn't good.

Current Code below:

Content for id "content" Goes Here

Thanks for any help in advance.

Top
Tags:
Wed, 2009-10-21 09:37
#1
wozzabikes
Offline
newbie
London
Last seen: 13 years 14 weeks ago
London
Timezone: GMT+1
Joined: 2009-10-21
Posts: 4
Points: 5

<style 

<style type="text/css">
<!--
#left {
	background-color: #999999;
	height: 140px;
	width: 100%;
	background-image: url(images/head_green_bg.jpg);
	background-repeat: repeat-x;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF0000;
	border-right-color: #FF0000;
	border-bottom-color: #FF0000;
	border-left-color: #FF0000;
	position: absolute;
	top: 0px;
	left: 0px;
}
#content {
	background-color: #CCCCCC;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 140px;
	height: 300px;
}
#left #innerleft {
	background-color: #FFFFFF;
	float: right;
	height: 140px;
	width: 50%;
	background-image: url(images/head_blue_bg.jpg);
	background-repeat: repeat-x;
}
#new {
	height: 138px;
	width: 100%;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	position: absolute;
	top: 0px;
	left: 0px;
}
#new #innernew {
	margin-right: auto;
	margin-left: auto;
	width: 700px;
	background-image: url(images/main_header.jpg);
	height: 140px;
	position: relative;
	clear: none;
}
-->
</style>
</head>
 
<body>
<div id="left">
  <div id="innerleft"></div>
  </div>
<div id="new">
  <div id="innernew"></div>
</div>
<div id="content">Content for  id "content" Goes Here</div>
</body>
</html>

Top
Wed, 2009-10-21 09:38
#2
wozzabikes
Offline
newbie
London
Last seen: 13 years 14 weeks ago
London
Timezone: GMT+1
Joined: 2009-10-21
Posts: 4
Points: 5

<style 

<style type="text/css">
<!--
#left {
	background-color: #999999;
	height: 140px;
	width: 100%;
	background-image: url(images/head_green_bg.jpg);
	background-repeat: repeat-x;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF0000;
	border-right-color: #FF0000;
	border-bottom-color: #FF0000;
	border-left-color: #FF0000;
	position: absolute;
	top: 0px;
	left: 0px;
}
#content {
	background-color: #CCCCCC;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 140px;
	height: 300px;
}
#left #innerleft {
	background-color: #FFFFFF;
	float: right;
	height: 140px;
	width: 50%;
	background-image: url(images/head_blue_bg.jpg);
	background-repeat: repeat-x;
}
#new {
	height: 138px;
	width: 100%;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	position: absolute;
	top: 0px;
	left: 0px;
}
#new #innernew {
	margin-right: auto;
	margin-left: auto;
	width: 700px;
	background-image: url(images/main_header.jpg);
	height: 140px;
	position: relative;
	clear: none;
}
-->
</style>
</head>
 
<body>
<div id="left">
  <div id="innerleft"></div>
  </div>
<div id="new">
  <div id="innernew"></div>
</div>
<div id="content">Content for  id "content" Goes Here</div>
</body>
</html>

Top
Wed, 2009-10-21 09:39
#3
wozzabikes
Offline
newbie
London
Last seen: 13 years 14 weeks ago
London
Timezone: GMT+1
Joined: 2009-10-21
Posts: 4
Points: 5

<style 

<style type="text/css">
<!--
#left {
	background-color: #999999;
	height: 140px;
	width: 100%;
	background-image: url(images/head_green_bg.jpg);
	background-repeat: repeat-x;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF0000;
	border-right-color: #FF0000;
	border-bottom-color: #FF0000;
	border-left-color: #FF0000;
	position: absolute;
	top: 0px;
	left: 0px;
}
#content {
	background-color: #CCCCCC;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 140px;
	height: 300px;
}
#left #innerleft {
	background-color: #FFFFFF;
	float: right;
	height: 140px;
	width: 50%;
	background-image: url(images/head_blue_bg.jpg);
	background-repeat: repeat-x;
}
#new {
	height: 138px;
	width: 100%;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	position: absolute;
	top: 0px;
	left: 0px;
}
#new #innernew {
	margin-right: auto;
	margin-left: auto;
	width: 700px;
	background-image: url(images/main_header.jpg);
	height: 140px;
	position: relative;
	clear: none;
}
-->
</style>
</head>
 
<body>
<div id="left">
  <div id="innerleft"></div>
  </div>
<div id="new">
  <div id="innernew"></div>
</div>
<div id="content">Content for  id "content" Goes Here</div>
</body>
</html>

Top
  • Locked