Header footer not appearing proper using css

svibuk · May 31, 2011, 12:15pm

header mater
</div>
</div>

<div id=“footer” >
<p>footer matter</p>
</div>

and this is teh css

#main
{
/**/
background-repeat: no-repeat;
background-image: url(images/header.jpg);
width: 997px;
height: 284px;
}

#header {
width: 778px;
height: 284px;
}

#footer
{
clear: both;
height: 36px;
padding: 15px 0;
background-color:Black;
background-repeat: no-repeat;
background-image: url(images/footer.jpg);
border-top: 5px solid #5592C6;
text-align: center;
}

i am haviing teh above code
the footer appears properly ie the full width of the page
but header image is not full width of the page. some portion on the right side of the page is balnk
i tried a lot by chnaging width of the div conating the header , image width etc

but nothing changed

PaulOB · May 31, 2011, 12:37pm

Hi,

There are three issues here that you need to either rectify or clarify.

You say you want the header full width like the footer but you have nested it inside #main which is only 997px wide and 2) then you have also made the header width 778px.

Finally 3) the header image isn’t repeated so will only full the available space assuming that the background image is large enough.

I’m assuming that you wanted a 100% wide header and footer with a centred middle section like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#main {
    /**/
    background-repeat: no-repeat;
    background-image: url(images/header.jpg);
    width: 997px;
    height: 284px;
}
#header {
    height: 284px;
    background-color:blue;
}
#footer {
    clear: both;
    height: 36px;
    padding: 15px 0;
    background-color:black;
    background-repeat: no-repeat;
    background-image: url(images/footer.jpg);
    border-top: 5px solid #5592C6;
    text-align: center;
}
</style>
</head>
<body>
<!-- header begins -->
<div id="header"> header mater </div>
<div id="main">
    <p>content</p>
</div>
<div id="footer" >
    <p>footer matter</p>
</div>
</body>
</html>

You would still need to make sure the header image is repeated or fades into the background for large screen sizes (unless you wanted a repeat).

Actually I just noticed you mentioned header image and not header div so are you talking about this code:


#main
{
/**/
background-repeat:  no-repeat;
background-image: url(images/header.jpg);
[B]width:  997px;[/B]
height: 284px;
}

That image (assuming its large enough) will only fill 997px width because that’s the width on the container. On your footer you have no width so it stretches 100%.

You may need to clarify all the points above as its all rather confusing

svibuk · May 31, 2011, 12:48pm

thanks i got it
i just incresed the image width

thnaks

armin3000 · August 5, 2011, 8:19am

I have changed widths using % instead of fixed width. but I have the same problem. All things are ok but the main frame in background still have the old width.
here is my css:

body {
	background: #2f3f4e url(images/v2/bg.png) top repeat-x;
	color: #222;
	text-align: center;
	line-height: 1.4;
	font-family: Tahoma;
	font-size: 13px;
}
a:link, a:visited {
	color: #1359AE;
	outline: 0;
	text-decoration: none;
}
a:hover, a:active {
	color: #C62222;
	outline: 0;
	text-decoration: underline;
}
#container {
	background: url(images/v2/container.png) repeat-y;
	width: 97%;
	color: #222;
	text-align: right;
	margin: auto auto;
}
#content {
	width: 91%px;
	margin: auto;
	line-height: 1.4em;
}
.menu ul {
	color: #000000;
	font-weight: bold;
	text-align: right;
	padding: 4px;
}
.menu ul a:link {
	color: #000000;
	text-decoration: none;
}
.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}
.menu ul a:hover, .menu ul a:active {
	color: #4874a3;
	text-decoration: none;
}
#panel {
	background: #efefef;
	color: #000000;
	font-size: 11px;
	border: 1px solid #D4D4D4;
	padding: 8px;
}
table {
	color: #222;
	font-family: Tahoma;
	font-size: 13px;
}
.tborder {
	background: #ccc;
	width: 100%;
	margin: auto auto;
	border: 1px solid #999;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
.thead {
	background: #026CB1 url(images/v2/thead.png) top left repeat-x;
	color: #ffffff;
	padding: 7px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
}
.thead a:link, .thead a:visited {
	color: #ffffff;
	text-decoration: none;
}
.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}
.tcat {
	background: #ADCBE7 url(images/v2/tcat2.png) repeat-x;
	color: #fff;
	font-size: 12px;
}
.tcat a:link, .tcat a:visited {
	color: #fff;
}
.tcat a:hover, .tcat a:active {
	color: #fff;
}
.tcat2 {
	background: #ADCBE7 url(images/v2/tcat2.png) repeat-x;
	color: #fff;
	font-size: 12px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
}
.tcat2 a:link, .tcat a:visited {
	color: #fff;
	text-decoration: none;
}
.tcat2 a:hover, .tcat a:active {
	color: #fff;
	text-decoration: underline;
}
.trow1 {
	background: #f5f5f5;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
}
.trow2 {
	background: #F1F1F1;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
}
.trow_shaded {
	background: #ffdde0;
}
.trow_selected td {
	background: #FFFBD9;
}
.trow_sep {
	background: #e5e5e5;
	color: #000;
	font-size: 12px;
	font-weight: bold;
}
.tfoot {
	background: #026CB1 url(images/v2/thead.png) top left repeat-x;
	color: #ffffff;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
}
.tfoot a:link, .tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}
.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}
.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px solid #4874a3;
	padding: 10px;
}
.navigation {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}
.navigation a:link, .navigation a:visited {
	text-decoration: none;
}
.navigation a:hover, .navigation a:active {
	text-decoration: none;
}
.navigation .active {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}
.smalltext {
	font-size: 11px;
}
.largetext {
	font-size: 16px;
	font-weight: bold;
}
input.textbox {
	background: #ffffff;
	color: #000000;
	padding: 2px;
	border: 1px dotted grey;
	font-family: Tahoma;
	font-size: 13px;
}
textarea {
	background: #ffffff;
	color: #000000;
	line-height: 1.4;
	padding: 2px;
	border: 1px dotted grey;
	font-family: Tahoma;
	font-size: 13px;
}
select {
	background: #ffffff;
	border: 1px solid #0f5c8e;
}
.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}
.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}
.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}
.autocomplete_selected {
	background: #adcee7;
	color: #000;
}
.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}
.popup_menu .popup_item {
	background: #fff;
	color: #000;
}
.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}
.trow_reputation_positive {
	background: #ccffcc;
}
.trow_reputation_negative {
	background: #ffcccc;
}
.reputation_positive {
	color: green;
}
.reputation_neutral {
	color: #444;
}
.reputation_negative {
	color: red;
}
.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}
.valid_field {
	border: 1px solid #0c0;
}
.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-right: 22px;
}
.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-right: 22px;
}
.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}
img {
	border: none;
	vertical-align: middle;
}
.clear {
	clear: both;
}
.hidden {
	display: none;
	float: none;
	width: 1%;
}
.float_left {
	float: left;
}
.float_right {
	float: right;
}
.menu ul {
	list-style: none;
	margin: 0;
}
.menu li {
	display: inline;
	padding-right: 5px;
}
.menu img {
	padding-left: 5px;
	vertical-align: top;
}
#panel .links {
	margin: 0;
	float: left;
}
.expcolimage {
	float: left;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}
img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}
hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}
#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}
blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}
blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}
blockquote cite span {
	float: right;
	font-weight: normal;
}
blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}
.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}
.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}
.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Tahoma;
	font-size: 13px;
}
.subforumicon {
	border: 0;
	vertical-align: middle;
}
.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}
form {
	margin: 0;
	padding: 0;
}
.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}
.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}
.popup_menu a.popup_item:hover {
	text-decoration: none;
}
.autocomplete {
	text-align: left;
}
.subject_new {
	font-weight: bold;
}
.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}
.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
	margin-bottom: 15px;
}
.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
	margin-bottom: 15px;
}
.high_warning {
	color: #CC0000;
}
.moderate_warning {
	color: #F3611B;
}
.low_warning {
	color: #AE5700;
}
div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}
div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}
div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.gif) no-repeat 0;
}
div.error.ul {
	margin-left: 24px;
}
.online {
	color: #15A018;
}
.offline {
	color: #C7C7C7;
}
.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}
.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}
.pagination .pages {
	font-weight: bold;
}
.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}
.pagination a {
	border: 1px solid #81A2C4;
}
.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
	color: #000;
}
.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}
.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}
.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}
.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}
.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}
.forum_legend dd {
	float: right;
	margin-left: 10px;
}
.forum_legend dt {
	margin-left: 10px;
	float: right;
}
.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}
.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}
.post_body {
	padding: 5px;
}
.post_content {
	padding: 5px 10px;
}
.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-right: 13px; 
	vertical-align: middle;
	border: none;
}
#header {
	background: transparent url(images/v2/header.png) no-repeat;
	height: 115px;
	position: relative;
}
#header_home_link {
	position: absolute;
	width: 59%;
	height: 100px;
	top: 7px;
	right: 0;
}
#logo, #logo_with_tagline {
	text-decoration: none;
	color: #FFF;
	font-family: "Rockwell", Tahoma;
	letter-spacing: -1px;
	font-size: 40px;
	font-weight: bold;
	position: absolute;
	top: 48px;
	left: 25px;
	text-shadow: #17222C 1px 1px 1px;
}
#logo_with_tagline {
	top: 38px;
}
#tagline {
	color: #AABBC8;
	font-family: Tahoma;
	font-size: 17px;
	font-weight: bold;
	font-style: italic;
	position: absolute;
	top: 70px;
	left: 25px;
	text-shadow: #17222C 1px 1px 1px;
}
#header_search {
	width: 21%;
	height: 50px;
	position: absolute;
	top: 40px;
	left: 45px;
}
#search_input {
	position: absolute;
	left: 13px;
	top: 13px;
	width: 16%;
	font-size: 14px;
	border: solid 1px #FFF;
}
.overlabel {
	color: #888888;
	position: absolute;
	top: 14px;
	left: 17px;
	z-index: 1;
	padding: 2px;
	border: 1px dotted grey;
	
	font-family: Tahoma;
	font-size: 13px;
}
.overlabel-apply {
	color: #888;
	position: absolute;
	top: 14px;
	left: 17px;
	z-index: 1;
}
#navigation {
	height: 54px;
	background: url(images/v2/navigation.png) no-repeat;
	position: relative;
}
#subscribe {
	color: #FFF;
	position: absolute;
	height: 25px;
	width: 20%;
	top: 17px;
	right: 20px;
	text-align: center;
}
#subscribe a {
	text-decoration: none;
	font-weight: bold;
	background-color: #852F32;
	padding: 2px 4px;
	color: #FFF;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	text-shadow: #3D1618 0 1px 1px;
	border-top: solid 1px #3D1618;
	border-bottom: solid 1px #BB4C46;
	position: relative;
	top: 1px;
}
#subscribe #rss_icon_link {
	position: absolute;
	width: 40px;
	height: 40px;
	top: -12px;
	right: 232px;
	border: none;
	background: none;
}
#subscribe a:hover {
	background-color: #000;
}
.after_post_rss {
	margin-top: 20px;
	padding: 20px 20px 20px 75px;
	background: url(images/v2/after_post_rss.png) no-repeat 17px 17px #FFFCD5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: solid 1px #F2E0AC;
}
#footer {
	clear: both;
	height: 80px;
	background: url(images/v2/footer.png) no-repeat;
	position: relative;
}
#copyright {
	color: #AEC0C9;
	position: absolute;
	top: 20px;
	left: 40px;
}
#copyright a {
	text-decoration: none;
	font-weight: bold;
	color: #FFF;
	text-shadow: #2D3D4D 0 1px 1px;
}
#copyright a:hover {
	color: #ffffff;
	text-decoration: none;
}
#copyright .copyright_owner {
	color: #DDEEF3;
}
#site_map {
	position: absolute;
	width: 49%;
	height: 25px;
	top: 20px;
	right: 40px;
	text-align: right;
	color: #424F62;
}
#site_map a {
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	text-shadow: #2D3D4D 0 1px 1px;
	margin-left: 12px;
}
#site_map a:hover {
	text-decoration: none;
}

#credits {
	clear: both;
	text-align: center;
	position: relative;
	top: -5px;
	padding-bottom: 20px;
	font-size: 11px;
	color: #5C6D7C;
}

#credits a {
	text-decoration: none;
	color: #9AABB9;
}
#credits a:hover {
	color: #FFF;
	text-decoration: none;
}


.iletisim {
	background: transparent url(images/v2/iletisim.png) no-repeat left center;
	padding-left: 20px;
}
.yukari {
	background: transparent url(images/v2/yukari.png) no-repeat left center;
	padding-left: 20px;
}
.arsiv {
	background: transparent url(images/v2/arsiv.png) no-repeat left center;
	padding-left: 20px;
}
.anasayfa {
	background: transparent url(images/v2/anasayfa.png) no-repeat left center;
	padding-left: 20px;
	vertical-align: text-top;
	width: 16px;
	height: 16px;
}
.navayrac {
	background: transparent url(images/v2/ok.gif) no-repeat left center;
	padding-left: 13px;
	vertical-align: text-top;
}
.navbit {
	background: transparent url(images/v2/nav_bit.gif) no-repeat left center;
	padding-left: 15px;
	vertical-align: text-top;
}
.alt_forumlar {
	list-style: none;
	margin: 0;
	padding: 0;
}
.alt_forumlar li {
	width: 50%;
	float: right;
}
.yazar a:link, .yazar a:visited {
	color: #333333;
	text-decoration: none;
}
.yazar a:hover, .yazar a:active {
	color: #333333;
	text-decoration: none;
}
.moderasyon {
	background: #FAFCFE url(images/v2/moderasyon.png) center left no-repeat;
	color: #465584;
	background-color: #FAFCFE;
	border-left: 4px solid #b28383;
	border-right: 1px dotted #000;
	border-top: 1px dotted #000;
	border-bottom: 1px dotted #000;
	padding: 4px;
	padding-left: 50px;
	margin: 0px auto 8px auto;
}
#panel .remember_me input {
	vertical-align: middle;
	margin-top: -1px;
}
.hiddenrow {
	display: none;
}
.selectall {
	background-color: #FFFBD9;
	font-weight: bold;
	text-align: center;
}
.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}
._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}
._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}
._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}
.pagination_breadcrumb {
	background-color: #f5f5f5;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
}
.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

and here is my forum add: forums.svus.ir

please help me how can I fix this problem.

PaulOB · August 5, 2011, 11:36am

Hi,

You can’t use a 1554px wide image for your main frame background and then expect it to grow and shrink with the viewport.

If you want a fluid container with background then at the basic level you need one div to hold the left side image and another nested div to hold the right side image and then 2 more nested divs for the repeating top and bottom sections.

You can’t just change a fixed layout into a fluid one when the layout is graphically heavy. You need a method as used in Jasons round corner technique which cuts down on the elements needed.