Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje05-11-2011, 04:49 (UTC)    
Título del mensaje: [Resuelto] Ayuda con el codigo css de mi pagina

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>


Este el por debajo de la pagina

Cita:
</div></div></div></div>
</div></div></div></div>
</div>
<div class="clear"> </div>
</div>
<div id="footer">
<ul>
<li><a href="http://www.freewebsitetemplates.com">PICTURE</a> | </li>
<li><a href="http://www.freewebsitetemplates.com">GALLERY</a> | </li>
<li><a href="http://www.freewebsitetemplates.com">FREE MUSIC</a> | </li>
<li><a href="http://www.freewebsitetemplates.com">FEATURES</a> | </li>
<li><a href="http://www.freewebsitetemplates.com">CONTACTS</a> | </li>
</ul>
<p>&copy; Business Co <a href="http://www.freewebsitetemplates.com">Privacy Policy</a> | <a href="http://www.freewebsitetemplates.com">Terms of Use</a>.</p>
</div>
</div>
</div>

</div>

</body>
</html>


y este el style

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


Ultima edición por ruizdiazstudios el Dom Nov 06, 2011 9:23 am; editado 1 vez
Mensaje05-11-2011, 15:56 (UTC)    
Título del mensaje: Re: Ayuda con el codigo css de mi pagina

Te faltan las imagenes en el Css.

Coloca este css :

Código:
#pre_header {display: none;}
#post_header {display: none;}
body{text-alignt:center;}
table[height="102"]{margin-left:auto;margin-right:auto;width:728px;}
#header_container {display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#title {display: none;}
#nav_container {display:none;}

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;
}
Mensaje05-11-2011, 18:37 (UTC)    
Título del mensaje:

las imagenes las saque yo, no las puse en el codigo por que pense que seria inecesario para el problema que tengo y probe ese codigo css pero sigue igual no cambio nada del problema
Mensaje05-11-2011, 20:54 (UTC)    
Título del mensaje:

ruizdiazstudios escribió:
las imagenes las saque yo, no las puse en el codigo por que pense que seria inecesario para el problema que tengo y probe ese codigo css pero sigue igual no cambio nada del problema



entra en esta seccion del foro encontraras ayuda de gente con experencia en css que te podran ayudar a tu problema

http://www.paginawebgratis.es/forum/viewforum.php?f=19


saludos
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje06-11-2011, 12:00 (UTC)    
Título del mensaje:

buen, gracias por el intento pero esto no me permite avanzar asi que cambiare de platilla nomas y eliminare esta

saludos
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group