Member Avatar for donhomez

Hi

Im not all new to HTML but im still learning.
Im having a issue with my footer it wont stretch out.

Here's a image: http://i.imgur.com/JZx0V.png

And here's the CSS Code

#footer {
    color: #ffffff;
    margin: 0;  padding: 0;
    float: right;
    background: #000000 url(foot.png) repeat center top;
    width: 1500px;
}

I been strugglin with this soon 3 hours, so i really need some help
Thanks in advance.

stress.png 92.84 KB
Edited by donhomez
  • 4 Contributors
  • 9 Replies
  • 110 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by shekinah.chumz

Dani AI

Generated

Quick diagnosis based on the CSS you posted: the site layout is wrapped by #wrap at 950px, while #footer is inside that wrapper and also floated. That combination is why the footer graphic appears clipped to the wrapper. Moving the footer outside the centered wrapper (or making the footer a true full‑width block) is the clean solution — this follows the inner/outer footer idea mentioned by and the repeat advice from .

A recommended structure (move the footer outside #wrap):

</div> <!-- end #wrap -->

<footer id="footer">
  <div class="footer-inner">
    <!-- left/right columns here; keep their widths the same as your content wrapper -->
  </div>
</footer>

Practical rules to apply after you change the markup:

  • Make the outer footer a normal block (no float) and clear any floats so it sits below the page columns. That outer element should span the viewport and hold the repeating background image.
  • Keep a centered inner container (e.g. .footer-inner) at 950px to align the footer text/columns with the rest of the site. Float your left/right footer columns inside that inner container as before.
  • Avoid hacks like forcing width:1500px on an element inside a centered wrapper. Use width:100% for the outer footer and fixed max-width/centered inner container for content alignment.

Debug tips: use the browser dev tools to inspect computed size and check ancestor overflow (an overflow:hidden ancestor can clip overflowed backgrounds). Temporarily add an outline to see box boundaries. For reference on the related CSS properties see MDN: background-repeat, float, and clear. This approach keeps the decorative background full width while preserving your 950px content alignment.

Recommended Answers

All 9 Replies

Member Avatar for JorgeM

If the picture itself is say, 1px, then do not apply a width of 1500px. You should use:

#footer {background-repeat:repeat-x;}

If the #footer style is being applied to a div, the div would take up 100% of the space within its parent container.

Member Avatar for donhomez

Thanks for the replies
When i try repeating the thing with x or y
the footer image either disapers or just stays in the same frame.

Its like the wrapper stop it from strecthing out not sure.
Look when i Mark all of it

The line is perfect from where the Footer stops from strecthing out.

http://i.imgur.com/Aae6C.png

I have no issues with the Header.

Edited by donhomez
Member Avatar for Member #46692

Post your html, css files

Member Avatar for donhomez

Heres the whole CSS FILE

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }

html { background: #1a2529 url(bg.gif) repeat; }

body {
    font: 11px/165% 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
    color: #ffffff;
    margin: 0;  padding: 0; 
    background: #000000 url(bg2.jpg) no-repeat center top;
    text-align: center;
}

/* Links */
a, a:visited {
    text-decoration: none;
    color: #BEBEBE; 
}
a:hover {
    color: #fff;
}

/* headers */
h1, h2, h3 {
    font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;
    color: #FAFAFA;
}
h1 {
    font-size: 3.1em;   
    letter-spacing: -2px;
    padding: 15px 10px 5px 10px;    
}
h2 {
    font-size: 2em;
    color: #895F30;
    padding: 20px 10px 5px 10px;    
}
h3 {
    font-size: 1.7em;   
    font-weight: normal;
    padding: 20px 10px 5px 10px;        
}

p, dl { padding: 10px; margin: 0; }

ul, ol {
    margin: 10px 20px;
    padding: 0 20px;
}
ul { list-style: none; }

dt {
  font-weight: bold;
  color: #FAFAFA;
}
dd {
  padding-left: 25px; 
}

/* images */
img {
    padding: 6px;
}
img.float-right {
    margin: 5px 0px 10px 10px;  
}
img.float-left {
    margin: 5px 10px 10px 0px;
}

code {
    margin: 5px 0;
    padding: 15px;
    text-align: left;
    display: block;
    overflow: auto;  
    font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace ;
    /* white-space: pre; */
    background: #070707;
    border: 1px solid #111;   
}
acronym {
    cursor: help;
    border-bottom: 1px dotted #5B5B5B;
}
blockquote {
    margin: 15px 10px;
    padding: 10px 10px 10px 35px;  
   background: #070707 url(quote.gif) no-repeat 10px 10px;
    border: 1px solid #111; 
    font-weight: normal;
    font-size: 17px;
    line-height: 1.6em;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;  
    color: #808080; 
}

/* start - table */
table {
    margin: 15px 10px; 
    border-collapse: collapse;          
}
th {
    background: #000;
    color: #FAFAFA;
    height: 38px;
    padding-left: 12px;
    padding-right: 12px;    
    text-align: left;
    border-left: 1px solid #211E20;
    border-right: 1px solid #211E20;
    border-bottom: 1px solid #211E20; 
    border-top: 1px solid #ffffff;
}
tr {
    color: #5b5b5b;
    height: 34px;       
}
td {
    padding-left: 12px;
    padding-right: 12px;
    border: 1px solid #111; 
    background: #35383f;
}
/* end - table */


/* form elements her Email */
form {
    margin: 20px 10px; 
    padding: 15px 25px 25px 20px; 
}
form p {
    border-bottom: 1px solid #101010;
    padding: 12px 0 5px 0;  margin: 0;  
}
label {
    font-weight: bold;  
    color: #FAFAFA;
}
input, select, textarea {
    margin: 5px 0;
    padding: 5px;
    font: normal 1em Verdana, Tahoma, sans-serif;
    color: #6A6969;
    background: #0C0C0C;  
    border: 1px solid #1C1C1C;
}
option { padding-right: 0.5em; } 

#name, #email, #message{
    width: 480px;
}
input.button { 
    font: bold 12px Arial, Verdana, Sans-serif; 
    height: 30px;
    padding: 2px 3px; 
    margin-top: 8px;
    color: #ffffff;
    background: #000;
    border-width: 1px;
    border-style: solid;
    border-color: #1B1B1B;
}

/* ------------------------------------------
   LAYOUT
------------------------------------------- */ 
#wrap {
    width: 950px;   
    margin: 0 auto;
    text-align: left;       
}
#content-wrap {
    clear: both;
    width: 950px;   
    float: left;    
    padding-top: 15px;
    padding-bottom: 50px;   
    background: url(midline.gif) repeat-y 600px 0;  
    border-top: 0px solid #121212;
    border-bottom: 0px solid #121212;
}
#header {
    position: relative;
    width: 950px;   
    height: 370px;  
    margin: 0; padding: 0;          
}
#header h1#logo-text a {
    position: absolute;
    margin: 0; padding: 0;
    font: bold 65px 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
    letter-spacing: -1.5px;
    color: #F8F8F8;
    text-decoration: none;
    text-transform: none;

    /* change the values of top and left to adjust the position of the logo*/
    top: 125px; left: 25px; 
}
#header h1#logo-text a:hover {
    background: none;   border: none;
}
#header p#intro {
    position: absolute;
    margin: 0; padding: 0;
    font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5em;
    font-style: normal;
    text-transform: none;
    color: #2b77c2;
    width: 400px;

    /* change the values of top and left to adjust the position */
    top: 205px; left: 30px;     
}

/*  Navigation  */
#nav {
    position: absolute;
    margin: 0; padding: 0;      
    height: 50px;
    left: 10px; top: 30px;          
}
#nav ul {
    float: left;
    list-style: none;
    height: 50px;
    margin: 0 0 0 5px; padding: 0;  
    display: inline;
}
#nav ul li {
    display: inline;
    margin: 0; padding: 0;
}
#nav ul li a {
    float: left;
    margin: 0;  padding: 0 12px;
    font: bold 15px/50px 'Trebuchet MS', Helvetica, Arial, Geneva, sans-serif;
    text-decoration: none;  
    color: #2b77c2; 
    text-transform: uppercase;
}
#nav ul li a:hover, 
#nav ul li a:active {
    color: #eee;
    background: none;
    border: none;
}

/* Main Column */
#main {
    float: left;
    width: 565px;
    padding: 0; margin: 0 0 0 -60px;
    display: inline;        
}
#main h2 {
    padding: 5px 12px;
    margin: 15px 5px 10px 5px;
    font: bold 2.4em 'Trebuchet MS', Helvetica, Arial, sans-serif;              
    color: #ffffff;
    border-bottom: 1px solid #121212; 
    background-image: url(pattern.gif); 
}
#main h2 a {
    color: #ffffff;
    text-decoration: none;      
    border: none;       
}
#main ul li {
    list-style-image: url(bullet.gif);
}

/* Sidebar */   
#sidebar {
    float: right;
    width: 300px;
    padding: 0; margin: 0px 18px 0 0;       
    display: inline;    
}   
#sidebar h3 {
    padding: 5px 12px;
    margin: 15px 5px 10px 0;
    font: bold 2.4em 'Trebuchet MS', Tahoma, Helvetica, Arial, sans-serif;              
    color: #ffffff;
    border-bottom: 1px solid #121212; 
    background-image: url(pattern.gif);     
}
#sidebar ul.sidemenu {
    text-align: left;
    margin: 20px 5px 20px 0px; 
    padding: 0;     
    border-top: 1px solid #111;     
}
#sidebar ul.sidemenu li {
    list-style: none;
    padding: 8px 10px;
    margin: 0;      
    border-bottom: 1px solid #111;
}
* html body #sidebar ul.sidemenu li {
    height: 1%;
}
#sidebar ul.sidemenu li a {
    text-decoration: none;  
    border: none;
    color: #666666;
    font-weight: bold;      
    font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
    font-size: 14px;        
}
#sidebar ul.sidemenu li a span {
    color: #444;    
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-weight: normal;    
    font-size: 11px;
}
#sidebar ul.sidemenu li a:hover,
#sidebar ul.sidemenu li a:hover span {  
    color: #fff;    
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { border: none; }

/* header quick search */
#sidebar form#quick-search {
    padding: 0; margin: 20px 0 35px 0;
    border: none;
    width: 290px; height: 33px;
    background: url(header-search.gif) no-repeat;       
}
#sidebar form#quick-search p {
    margin: 0; padding: 0;      
}
#sidebar form#quick-search input {
    float: left;
    border: none;
    background: transparent;
    color: #4E4E4E; 
    margin: 0;
}
#sidebar form#quick-search .tbox {
    margin: 5px 0 0 5px; 
    width: 240px;   
    display: inline;    
}
#search form#quick-search .btn{
    width: 24px; height: 24px;          
}
#sidebar form#quick-search label {
    display: none;
}

/* footer */
#footer {
    color: #ffffff;
    margin: 0;  padding: 0;
    float: right;
    background: #000000 url(foot.png) repeat center top;
    width: 1500px;
}
#footer a { 
    color: url(ftb.gif) repeat center top;
    border: none;
}
#footer a:hover {
    color: url(ftb.gif) repeat center top;
}
#footer .rssfeed {
    background: url(ftb.gif) repeat center top;
    padding-left: 17px;
}
#footer-left {
    float: left;
    width: 57%;
}
#footer-right {
    float: right;
    width: 21%;
}

/* postmeta */
.postmeta { 
    padding: 7px 5px; margin: 20px 10px 30px 10px;  
    font-size: 1em; 
    color: #545454;
    border: 1px solid #111; 
    background: #070707; 
}
.postmeta .date{ margin: 0 10px 0 5px;  }
.postmeta a.comments { margin: 0 10px 0 5px;    }
.postmeta a.readmore { margin: 0 10px 0 5px;    }

.post-info { font-size: .95em; padding-top: 3px; margin-left: 5px; color: #444; }
.post-info a, .post-info a:visited { color: #AE275A; }

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.no-border { border: none; }
.clearer { clear: both; }
.clear {    display:inline-block; }
.clear:after {
    display:block; 
    visibility:hidden; 
    clear:both; 
    height:0; 
    content: "."; 
}

@charset "UTF-8";
/* CSS Document */
Edited by donhomez
Member Avatar for donhomez

My Footer is inside the wrapper hmm..
thats not good is it can that be it ?

im lost on this one.

Edited by donhomez because: no
Member Avatar for Member #46692

Well you should have an inner footer like the one in that tutorial?

Try that first.

Member Avatar for shekinah.chumz

hi I am a new member here.. ahm how to put a background of your website using Css? thank you..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.