|
CSS - Header,left Navbar,1 Col Content,and Footer
I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help.
Code:
#header {
left: 0;
width: 100%;
height:125px;
top: 0;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar{
width:122px;
height:100%;
background-color:#3f79a1;
position: absolute;
top: 125px;
left: 0px;}
#footer{
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
position: absolute;
bottom: 0;
left:0;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
}
Similar TutorialsI'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical I want to do this design: http://hermann.sonyextreme.com/upload/design.png * means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px. I've set it up like this: Code: <div id="container">
<div id="header">
</div>
<div id="main">
<div id="menu">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
But no matter what I try, the css just keeps ****ing with me So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you Thanks in advance Hermann http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx Ok I guess this is a pretty tough for someone who knows layout using tables very well, but is pretty much clueless doing layout with css. I have a graphic header that needs to have a width of 100% and a height 90px.. It is made from an image that is split into 3 sections. The left slice is the logo fixed width 204px. The middle slice is really just background: #10301B and the right side is 185px. So far I have this and it seems to work ok... CSS: #headcontainer { position:absolute; width: 100%; height: 90px; background-color: #10301B; margin: 0; padding: 0; top: 0px; } #headleft { float: left; position:absolute; width: 204px; left: 0px; } #headright { position:absolute; width: 185px; right: 0px; float: right; margin: 0; } HTML <div id="headcontainer"> <div id="headleft"><img src="header_left.jpg"> </div> <div id="headright"><img src="header_right.jpg"> </div> </div> The problem for me now is that I want a horizontal navbar that resizes like the header above it and I dont know how to do this lol.... lets call the source image navbar.jpg and it is 29px in height. Where do I go from here?? If I call what I have (the resizable header) row 1... then the navbar is row 2... and I dont know how to start row 2 . Ive attached a jpeg of what the layout needs to look like. thanks in advance....any help is greatly aprreciated !! Hey all, This is my first post in the CSS forum, as i have just started a project to make a 100% validated CSS based site, however i am having a little trouble. On the page in question www.chewie.co.uk/3phones.com/ i have a 3 column layout with the navigation on the left and a news section on the right, middle coloumn houses page content. The problem that i am having is that i cannot get the div to reach down the page to the footer, so as you an see i am left with an ugly white space between them. As i say i am just starting so it is a little confusing, but i have searched around the net, tried to add more container divs, played around with the attributes etc, but just cant fix it because i dont understand why it is happening. If any one could shed some light i would be very grateful... Nav div html Code:
<!-- Left Navbar -->
<div id="navBar">
<div id="sectionLinks">
<h3>Section Links</h3>
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
</div>
<!--end navBar div -->
Nav div CSS... Code:
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
height: 100%;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #dddddd;
}
Thanx for reading. I haven't been able to get the blue footer's left & right margin/padding to just fall into place. I have been working on this for 3 weeks now. This is my only last open item to complete the layout feature. Grrrr.... So, I welcome any help. The red div I made is just a buffer padding that offset and keep the text be inside the blue div. (For text readablity). CSS code Code:
a
{
color: #000000;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
body
{
margin: 0px; /* remove margins */
padding: 0px; /*remove padding */
border: 0px; /* remove borders */
height: 100%; /* fix height to 100% for IE */
max-height: 100%; /* fix height for other browsers */
width: 100%;
overflow :hidden; /* get rid of scroll bars in IE */
color: #000000;
font-family: Verdana;
font-style: normal;
font-weight: normal;
}
div
{
margin: 0px;
padding: 0px;
}
html
{
margin: 0px; /* remove margins */
padding: 0px; /* remove padding */
border: 0px; /* remove borders */
height: 100%; /* fix height to 100% for IE */
max-height: 100%; /* fix height for other browsers */
width: 100%;
/* background: #fff; */ /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden; /*get rid of scroll bars in IE */
/* */
}
p
{
margin: 0px;
padding: 0px;
}
div.divFooterBody
{
/* margin: -100px -2px 0px 0px; */ /* Margin-Top need to be in negative range to fix the location due to Gecko browsers bug with the overflow setting... Also, Margin-Left need to be in negative range to fix the location due to IE bug with the overflow setting... */
/* padding: 8px 0px 8px 0px; */ /* Margin-Left & Margin-Right need to be at 0px due to incorrect padding & location of several div tags in varieties of browsers... */
background: #ffffe0;
width: 80%;
border: 1px solid #000000;
color: #000000;
font-family: verdana;
font-size: 10pt;
font-style: normal;
font-weight: normal;
z-index: 5;
}
div.divLayoutContent
{
position: relative;
height: 100%;
max-height: 100%;
display: block;
overflow: auto;
z-index: 3;
}
div.divLayoutFooter
{
position: absolute;
bottom: -1px;
right: 15px;
/*margin: 0px 15px 0px 0px; */
width: 100%;
height: 50px;
/* display: block; */
z-index: 4;
}
div.divLayoutHeader
{
position: absolute;
top: 0px;
right: 15px;
margin: 0px;
width: 100%;
height: 100px;
display: block;
z-index: 5;
}
div.divLayoutFooterBuffer1
{
position: absolute;
bottom: -1px;
/* padding: 0px 5px 0px 5x; */
/*padding-left: 8px;*/
/*padding-right: 8px;*/
/*margin-right: -40px;*/
/*padding-left: -10px;*/
/*margin-left: 25px;*/
/* margin-top: 19px; */
/* padding: 20px 17px 10px 31px;*/ /* ??(padding-left 15px + 16px) padding-left:16px is the buffering to correct the absolute position - right of 15px... */
width: 100%;
height: 90px;
display: block;
background-color: #0000ff;
}
div.divLayoutFooterBuffer2
{
height: 100px;
display: block;
background-color: #ff0000;
}
div.divLayoutHeaderBuffer1
{
padding: 12px 0px 12px 16px; /* padding-left:16px is the buffering to correct the absolute position - right of 15px... */
color: #ffffff;
font-family: Verdana;
font-size: 250%;
text-align: center;
background: #000000;
}
div.divLayoutHeaderBuffer2
{
height: 100px;
display: block;
background-color: #ff0000;
}
HTML code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Web Layout</title>
</head>
<body>
<div class="divLayoutHeader">
<div class="divLayoutHeaderBuffer1">blah blah...</div>
</div>
<div class="divLayoutContent">
<div class="divLayoutHeaderBuffer2"></div>
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
<div class="divLayoutFooterBuffer2"></div>
</div>
<div class="divLayoutFooter">
<div class="divLayoutFooterBuffer1">hhh
<div class="divFooterBody">
blah blah
<a href="#">blah</a>
<a href="#">blah</a>
<a href="#">blah</a>
<a href="#">blah</a>
</div>
</div>
</div>
</body>
</html>
Thanks... In my footer I'm having a problem with my links aligning left. I'm not sure how I would go about coding it so that Promotional Kit aligns left underneath Headshot v2. I tried text-align: left in ul, li, and in the footer link section but nothing. I may need to change the layout all together which is fine, but I could use your help. Thanks in advance http://www.lonniebruhn.com/sitelab/ and here is the css code: Code: body, html {
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
background-color: #000;}
#container {
margin: 0px auto 90px auto;
width: 940px;
text-align: left;
background-image: url(images/container-bg.jpg);
background-repeat: no-repeat;
background-color: #1d1d1d;;
overflow: hidden}
object {
display:block;
z-index:1}
#header {
width: 920px;
position: relative;
top: 5px;
margin: 0 auto;
background-color: #333;
border: 2px #000 solid;}
#header h1 {color: #ffffff;
font-size: 2em;
font-family: Impact, "Arial Black", Trebuchet, sans-serif, "Times New Roman";
line-height: 90%;
text-align: center;
margin: 0;
padding: 10px;}
.quote {
position: relative;
text-align: right;
Left:10px;
font-family: "Arial Black", Verdana, Helvetica, Arial, sans-serif;
color: #ffcc33;
font-size: .5em;
font-style: italic;
}
#logo {
position: relative;
margin:0 auto;
background-image: url(images/header-logo.jpg);
background-repeat: no-repeat;
width:920px;
height:120px;
border: 2px #000 solid;
}
#left {
margin: 15px 10px 0px 10px;
width:180px;
position: relative;
width: 180px;
float: left;
border: 2px #000 solid;
background-color: #333;}
#left h1{
height:20px;
margin: 10px auto;
color: #ffcc33;
font-family: Impact, "Arial Black", Verdana, Helvetica, Arial, sans-serif;
font-size: 1.50em;
text-align: center;
text-decoration: underline;
}
#dates {
position: relative;
margin: 0 auto;
text-align: left;
}
#dates ul {
margin:0;
color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: .625em;
font-weight: bold;
position: inherit;}
#dates li {
padding: 10px 0 5px 5px;
list-style-image: url(images/1.gif);
display: list-item;
margin: 0px 18px 15px -15px;
list-style-type: none;
text-align:left;
border-bottom: 2px #ffcc33 dashed;}
#mainbody {
position: relative;
background-color:#333;
width: 480px;
min-height:320px;
margin: 15px auto;
right: 20px;
border: 2px #000 solid;
}
#right {
position: relative;
width: 220px;
background-color: #333;
min-height: 320px;
float: right;
border: 2px #000 solid;
margin-top: 15px;
margin-right: 10px;}
#right h1 {
text-align: center;
color: #ffcc33;
font-family: Verdana, Arial, sans-serif;
font-size: 1.25em;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;}
#footer-wrap {
background-image: url(images/footer-bg.gif);
width: 100%;
height: 78px;
z-index: 2;
left: 0;
bottom: 0;
position: fixed;
text-align:left}
#footer-left {
position:fixed;
width: 244px;
min-height:68px;
margin-top: 5px;
border-right: 2px #000 solid;
left:-25px;
padding-right: 25px;
float:left;}
#footer-left ul{
display: block;
margin:0;
width:244px;
list-style-type: none;
}
#footer-left li {
display: inline;
margin-right:10px;
}
#footer-wrap a:link, #footer-wrap a:visited, #footer-wrap a:active {
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .75em;
text-decoration: none;
}
#footer-wrap a:hover {
text-decoration: underline;}
#footer-center {
position: fixed;
}
#footer-right {
position: fixed;
}
p {
margin:0 25px 25px 25px;
font-size: .875em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
color: #fff;
text-align: justify;}
#links{
text-align: right;
padding: 2px;
}
#links a:link, #links a:visited, #links a:active {
right:8px;
font-weight: bold;
font-size: 0.625em;
font-family: Verdana, Arial, sans-serif;
color: #cccccc;
font-family: Verdana, Arial, sans-serif;
text-decoration: none;
position: relative;}
#links a:hover {
text-decoration: underline;}
#links ul {margin: 0; list-style-type:none}
#links li {
display: inline;
}
#menu
{ height: 15px;
width: 920px;
height:22px;
position: relative;
margin: 0 auto;
background-color: #333;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;}
#menu ul{margin: 0 auto;}
#menu li
{ float: left;
margin: 0;
padding: 0;
list-style: none;
}
#menu li a
{ display: block;
height: 20px;
text-decoration: none;
padding: 0 19px 0 19px;
border: 2px #000000 solid;
text-transform: uppercase;
font-size: 0.75em;
font-family: Verdana, Helvetica, Arial,sans-serif;
color: #ccc;
background-color: #666;}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ border: 2px #000000 solid; background-color: #3f3f3f;
}
.postdate {
display:block;
margin: 10px 20px 20px 20px;
padding-left: 10px;
color: #ffcc33;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.75em;
background-color: #000;}
.post p {
margin: 0px 5px 0px 5px;
font-size: .75em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
padding-top: 20px;
line-height: 120%;
}
.post h1 {
margin: 0px 5px 0 5px;
color: #ffcc33;
font-size: 1.2em;
font-family: Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
text-decoration: underline;}
.post h2 {
margin: 0px 20px 0 20px;
color: #ffcc33;
font-size: .6em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 15px 10px 5px 10px;
text-transform: uppercase;
border-bottom: 8px #666 double;}
.blue {
color: #3399ff;;
margin: 5px 0 10px 0;
display: block;}
.video {
width: 190px;
margin: 10px auto 0px auto;
z-index: 1}
I'm currently using .php to include a common header and footer. Is there a way to use CSS to include a common footer. Not the style, but the text themselves. Hello. I'm presently writing a JavaScript applet which will be included into websites to produce a dynamically created header and footer through PHP. That's not important for the most part. What I would like to do is create the header and footer through CSS. I do, howver, have a slight problem. I can not have the user edit their websites in any way except for adding the script inclusion. (<script language="javascript" src="http://webaddress/script.js">) Now, this is what I've come up with for the CSS. css Code: Original - css Code body { padding: 25px 0 25px 0; } .ixga_header { position: fixed; font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; top: 0; left: 0; } .ixga_header table,tr,td { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_header a, a:visited { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } .ixga_header a:hover { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } /* hide from mac ie5 \*/ .ixga_header { position: absolute; } /* end hide from mac ie5 */ html>body .ixga_header { position: fixed; } .ixga_footer { position: fixed; font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; bottom: 0; left: 0; } .ixga_footer table,tr,td { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_footer a, a:visited { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; }
body {
Does this seem right to you? Now, the HTML injected by the remote script is as follows. html Code: Original - html Code <div class="ixga_header"> <link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" /> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')"> <td align="left"> <b> <a href="http://gaming.localhost"> Gaming Network </a> </b> - <a href="http://ds.localhost"> Demonic Sights: The Adventure Begins </a> - <a href="http://ds2.localhost"> Demonic Sights: The War of Aegis </a> - <a href="http://ta.localhost"> Total Apocalypse </a> </td> <td align="right"> <a href="http://localhost/login.php">Login</a> | <a href="http://localhost/register.php">Register</a> </td> </tr> </table> </div> <div class="ixga_footer"> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')"> <td align="left"> This is a test footer. Woo. </td> </tr> </table> </div>
<div class="ixga_header">
<link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" />
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')">
<td align="left">
<b>
<a href="http://gaming.localhost">
Gaming Network
</a>
</b>
-
<a href="http://ds.localhost">
Demonic Sights: The Adventure Begins
</a>
-
<a href="http://ds2.localhost">
Demonic Sights: The War of Aegis
</a>
-
<a href="http://ta.localhost">
Total Apocalypse
</a>
</td>
<td align="right">
<a href="http://localhost/login.php">Login</a>
|
<a href="http://localhost/register.php">Register</a>
</td>
</tr>
</table>
</div>
<div class="ixga_footer">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')">
<td align="left">
This is a test footer. Woo.
</td>
</tr>
</table>
</div>
The problem I face is that any HTML on the original page somehow gets shoved UNDER the footer, no matter the case, as if it just shoves the data that SHOULD be there into the footer division itself. Can someone please suggest a better method I can take of doing this? Or perhaps point me to a resource where I can see how to dynamically add a header and footer to a webpage through CSS _WITHOUT_ having to include a division for the page contents itself? This needs to work out of the box. Thanks in advance. Hey I am creating a website in php with a header and footer attached as in: <?php include("header.php"); ?> I have set the minimum height of the page to 600px however in IE it doesnt' work it displays half up the page In Firefox it is fine but in IE it doesn;t work any clues? cheers J I have a Corporate Phone List extension sheet that is served on our Intranet. When users print this document from their browser IE defaults to 0.75 margins all around and has IE's default header and footer. Over 300 people will be printing this document. Is it possible to set the margins and get rid of the header/footer through either CSS or HTML? I have had some success in moving the margin of the tables through a stylesheet but I don't know how to set it for the whole page and I don't know how to get rid of the default header/footer. Code: <link rel="stylesheet" href="print.css" type="text/css" media="print" /> Code: td {font-size: 9pt;}
table {margin:0em 1em 0em 1em}
jililu.com/portfolio2 I have upload the files that I currently have. I like to have the trapeziod header where the edges will align with the content. Right now I have the header with three sections, a left image, right image and a box in the center. It doesn't seems to be working. Eventually I would also like a drop shadow for the header. I have been trying this for days and it is not working. Can anybody please help. !!!! Hello! I'm here after much googling, and I am bashing my head against the wall, so any help is appreciated: Footer and header, fixed size, attached to top and bottom of screen. I want the center div to be a fluid height to sit between the header and footer, and if the content extends beyond that, I want it to scroll within the div, not the page. Here, I'm linking to a picture to explain more clearly: portlandworkshop-dot-com-slash-projects-slash-divs-dot-jpg (it won't let me direct link.. durrr) Nothing I do seems to fix this conundrum... Can ANYONE point me in the right direction? Hello to all those reading A really simple question for the knowledgeable, I suppose, however a question nevertheless. I've attached and image to try and save us all time and be as straightforward as I can. How would I accomplish the following with CSS? Problem: if I use absolute positioning on header and footer, I have difficulties centering them. Problem #2: how can I assign fixed values to header and footer and allow the body to stretch dynamically to accomodate different resolutions and\or content. In other words make the middle piece of the design mobile\fluid. I am new to PSD to html slicing. i want some help on how this the following template would be sliced for footer and header. Will i need have one large back ground image or seperate for header n footer I'm having two issues with IE on my site. 1. IE is displaying the body background image (bg.jpg) throughout the entire page. 2. IE is pushing the sidebar way down. Neither of these issues exist in Firefox. I think the second issue may have something to do with the first issue. Here is the relevant code. Code: html,body * {
padding:0px;
margin:0px;
}
body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#fb7d21;
margin:0 auto;
height:100%;
}
div#container {
width:792px;
margin:0 auto;
background-image:url(images/filler.jpg);
background-repeat:repeat-y;
}
div#header {
width:792px;
height:109px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-top:20px;
}
div#content {
float:left;
width:570px;
padding:0 0 0 10px;
margin-top:-40px;
}
div#sidebar {
float:right;
width:212px;
margin-top:-95px;
}
div#footer {
clear:both;
width:792px;
height:84px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
}
You can see the issues on my site here. Any idea what is causing this? Thanks in advance. There is an invoice preview webpage. I want to set header and footer information off while printing it. I know we can edit the page setup settings. But I wanted to know if we can do something without changing the default page setup settings. With default setting inside page setup, webpage title and webpage path are displayed for header and footer respectively. Thanks |
|||||||