Nesecito su ayuda estoy comenzando a crear mi pagina web pero tengo un problema con la parte interior de mi plantilla la adapte segun habia hecho siempre en PWG pero esta tiene algo raro pues la parte de abajo la de "Copyright © 2011...etc" no baja segun la pagina va avanzando osea que cuando el contenido de la pagina se hace mayor al limite donde esta este, lo sobrepasa por arriba en vez de este adaptarse y y quedar debajo como siempre, por si no se entendi bien lo que quiero decir aqui dejo dos capturas de pantalla del problema para que vean:
Asi es como deberia verse la pagina con el no importa como sea el contenido de largo (en este caso hise una de prueba con menos contenido para q vean)
http://img.webme.com/pic/r/ruizdiazstudios/problema2.jpg
Y asi es como se ve la pagina de mal cuando el contenido sobrepasa el limite de abajo:
http://img.webme.com/pic/r/ruizdiazstudios/problema.jpg
ven como se sobrepone la pagina al copyright etc...
Por favor si alguno sabe que tengo que cambiar en el codigo css, de la plantilla o que hago para que se vea normalmente la web, cuando el contenido se hace largo este no pase sobre la parte inferior y esta baje junto con el... aqui dejo el codigo para q me digan q cambiar:
Este es codigo css por ensima de la pagina.
Cita: <!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Music Shop</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="outer-wrapper">
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="http://www.freewebsitetemplates.com"><span>01</span> ABOUT SHOP</a></li>
<li><a href="http://www.freewebsitetemplates.com"><span>02</span> GALLERY</a></li>
<li><a href="http://www.freewebsitetemplates.com"><span>03</span> FREE MUSIC</a></li>
<li><a href="http://www.freewebsitetemplates.com"><span>04</span> ARTIST</a></li>
<li><a href="http://www.freewebsitetemplates.com"><span>05</span> CONTACTS</a></li>
</ul>
</div>
<div id="topcon">
<div id="topcon-inner">
<h2>Welcome to Music Shop</h2>
<p>Don't forget to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add a new free website template almost daily.</p><p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
</div>
</div>
Cita:
html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #FFFFFF;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #3A0404 url(******page_bg.jpg) repeat-x;
font: 11px arial, sans-serif;
color: #464544;
padding-bottom: 10px;
}
/** layout **/
#outer-wrapper {
background: url(*******wrapper-bg.jpg) repeat-x;
width: 778px;
height: 732px;
margin:auto;
}
#wrapper {
background: url(*****/header.jpg) no-repeat;
margin:auto;
position:relative;
width: 778px;
min-height: 750px;
height: 750px;
}
h1 {
padding: 25px 0 0 30px;
font: 32px "arial black", arial, sans-serif;
color: #151515;
}
h1 em {
color: #ffffff;
font-weight: bold;
font-style: normal;
position: relative;
top: -4px;
}
/* nav */
#nav {
position: absolute;
top: 0px;
left: 335px;
width: 500px;
}
#nav li {
float: left;
background: url(******/nav_left.gif) no-repeat;
list-style: none;
padding-left: 10px;
padding-right: 20px;
padding-top: 45px;
line-height: 1.1;
}
#nav span {
display: block;
font-size: 28px;
}
#nav a {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
/** topcontent **/
#topcon {
background: url(i****s/topcon.jpg) no-repeat;
width: 427px;
position: absolute;
top: 105px;
left: 338px;
color: #fff;
}
#topcon-inner {
margin: 33px 40px 41px 85px;
height: 120px;
overflow: auto;
}
#topcon h2 {
font-size: 14px;
}
/** Body **/
#content {
width: 710px;
position: absolute;
color: #fff;
top: 299px;
left: 33px;
}
#content a {
color: #fff;
}
#content a:hover {
color: #fee;
}
#body {
border: 3px solid white;
background: #901315;
padding: 18px;
}
.box {
float: left;
width: 195px;
background: #730F11;
margin-right: 18px;
}
.box-t { background: top url(*****box_t.gif) repeat-x; }
.box-r { background: right url(*******/box_r.gif) repeat-y; }
.box-b { background: bottom url(********/box_b.gif) repeat-x; }
.box-l { background: left url(********/box_l.gif) repeat-y; }
.box-tr { background: top right url(******/box_tr.gif) no-repeat; }
.box-br { background: bottom right url(*******/box_br.gif) no-repeat; }
.box-bl { background: bottom left url(**********/box_bl.gif) no-repeat; }
.box-tl { background: top left url(********/box_tl.gif) no-repeat; }
.box-tl {
padding: 13px 18px;
}
.box p {
margin: 1em 0;
}
p.more {
margin: 0;
}
#hits {
width: 240px;
}
#hits .box-tl {
padding-bottom: 22px;
}
#hits ul {
margin: 1em 0;
}
#hits li {
list-style: none;
margin: 0.9em 0;
}
#hits ul a {
text-decoration: none;
}
#hits ul a:hover {
text-decoration: underline;
}
#new {
margin-right: 0;
}
#new .box-tl {
padding-bottom: 18px;
}
#new p {
margin-top: 0;
margin-bottom: 3.6em;
}
#body h2 {
font-size: 12px;
text-align: right;
margin-bottom: 1.5em;
}
#body h3 {
font-size: 9px;
color: #FFEA00;
}
#body .more a {
font-weight: bold;
text-decoration: none;
}
#body .more a:hover {
text-decoration: underline;
}
#body .hr-yellow {
border-top: 1px solid #FFEA00;
padding-bottom: 1em;
margin-top: 1em;
}
/** footer **/
#footer {
text-align: center;
}
#footer p, #footer ul {
margin: 0.8em;
}
#footer ul {
margin-top: 1.2em;
}
#footer li {
display: inline;
list-style: none;
}
la unica cosa que note fue que cambiando lo q esta en azul del style podia hacer mas largo el espacio hasta el final pero quedaba mal y quiero saber que le cambio para q la posicion sea relativa al contenido que alla.
posdata: se poco de css y lo que aprendi fue gracias a este foro, porfavor si alguien tiene idea q me ayude