Tengo un problema con mi pagina

Shing · #1 (**permalink**) 30/06/2008, 04:27

Hola a todos! soy nuevo en esta comunidad, y me parece muy interesante este foro, les cuento q hace poco entre en el mundo del diseño web y estoy haciendo una pagina en dreamweaver 8. El punto es q tengo un problemita aca se los detallo en las fotos miren:

ht tp://img206.imageshack.us/my.php?image=normalhm7.jpg

y despues:

ht tp://img206.imageshack.us/my.php?image=problemaij2.jpg

aca les dejo el codigo de la pagina index.html:

Código:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
<link href="general.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
.Estilo2 {color: #FFFFFF} 
#Layer1 { 
   position:absolute; 
   left:506px; 
   top:1px; 
   width:209px; 
   height:247px; 
   z-index:1; 
} 
--> 
</style> 
</head> 
<body> 
<div id="cabecera"> 
<ul> 
         <li class="inicio">Inicio</li> 
         <li><a href="#">Introducccion</a></li> 
         <li><a href="#">Guia para registrarse</a></li> 
         <li><a href="#">Direcciones PTC</a></li> 
         <li><a href="#">Lista negra</a></li> 
  </ul> 
        <h1 align="center" class="Estilo2">&iexcl;Gana dinero sin inversion alguna!</h1> 
</div> 
<p>&nbsp;</p> 
<div id="cuerpo"> 
   <div id="panel-izq"> 
     <h1 align="center" class="Estilo2">&iexcl;Gana dinero con tan  solo un clic!</h1> 
     <p>En la actualidad hay diversas maneras de ganar dinero por  Internet, pero muchas de estas requieren una gran inversi&oacute;n inicial o la compra  de alg&uacute;n producto que te explica una manera de ganar plata por Internet.</p> 
       <p>Aqu&iacute; les voy a explicar una forma diferente, y totalmente  gratuita, de ganar plata por Internet con solo hacer clic. Estamos hablando de  los PTC (paid to clic, o en espa&ntilde;ol, pago por clic).</p> 
    </div> 
    <div id="panelderecho"> 
      <p>&nbsp;</p> 
    </div> 
</div> 
</body> 
</html>

y aca va el codigo de la hoja de estilos .css:

Código:

body { 
   width: 778px; 
   height: auto; 
   padding: 0px; 
   margin: 18px 0 0; 
   background:#590000; 
   color:#CD7A7A; 
   font: "Comic Sans MS"; 
   } 
div, p, ul, h2, h3, h4, h5, form, img { 
   padding:0px; 
   margin:0px; 
   } 
ul { 
   list-style-type: none; 
} 
#cabecera { 
   background-image: url(Imagenes/fondo-cabecera.jpg); 
   background-repeat: repeat x; 
   position: relative; 
   width: 778px; 
   height: 125px; 
   margin: 0 auto; 
} 
#panel-arriba-logo { 
   width:209px; 
   height:95px; 
   position: absolute; 
   top: 0px; 
   right: 0px; 
   } 
#cabecera ul { 
   width:565px; 
   height: 30px; 
   position: absolute; 
   top: 86px; 
   left: 112px; 
   } 
#cabecera ul li { 
   width: auto; 
   height: 30px; 
   float: left; 
   margin: 7px; 
   } 
#cabecera ul li.inicio { 
   width: auto; 
   height: 30px; 
   display: block; 
   background:#590000; 
   background-color: #fff; 
   font-weight: bold; 
   text-align: center; 
   font-family: "Comic Sans MS"; 
   font-size: 16px; 
} 
#cabecera ul li a { 
   width: auto; 
   height: 30px; 
   display: block; 
   background:url(imagenes/fondo-menu.gif) 0 0 repeat-x #2F0000; 
   color: #fff; 
   font-weight: normal; 
   text-align: center; 
   text-decoration: none; 
   font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; 
   font-size: 16px; 
   } 
#cabecera ul li a:hover { 
   background:#590000; 
   color: #fff; 
   text-decoration: none; 
   font-size: 16px; 
   } 
#cabecera ul li.home { 
   width: auto; 
   height:15px; 
   display:block; 
   background:#590000; 
   color:#fff; 
   font-weight: normal; 
   text-align: center; 
   text-decoration: none; 
   font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; 
   font-size: 16px; 
   } 
#cuerpo { 
   width:715px; 
   position:relative; 
   margin:0 auto; 
   } 
#panel-izq { 
   width:470px; 
   height:auto; 
   float:left; 
   padding:18px 26px 0 0; 
   border-left:#FFFFFF solid 1px; 
   } 
#panel-izq p { 
   padding:14px 0 0; 
   } 
#panel-izq h2 { 
   background:#590000; 
   color:#fff; 
   font:26px/26px Georgia, "Times New Roman", Times, serif; 
   } 
#panel-izq h2 span { 
   background:#590000; 
   color:#F10000; 
   } 
#panelderecho { 
   width: 218px; 
   position: relative; 
   } 
#panelderecho h3 { 
   width:188px; 
   height:33px; 
   background:#3C0101; 
   color:#fff; 
   font:20px Georgia, "Times New Roman", Times, serif; 
   padding:18px 0 0 21px; 
   margin:13px 0 0; 
   } 
#panelderecho a { 
   width:141px; 
   height:18px; 
   color:#fff; 
   font-size:12px; 
   text-decoration:none; 
   line-height:18px; 
   padding:0 0 0 15px; 
   } 
#panelderecho a:hover { 
   width:141px; 
   height:18px; 
   color:#FFD6D6; 
   text-decoration:none; 
   }

nedrek · #2 (**permalink**) 30/06/2008, 04:38

Es un problema de overflow.

Dale a traves de CSS al objeto un overflow hidden:

#panelderecho { overflow:hidden }

Y si quieres trastear más, busca informacion sobre wordbreak.

Un Saludo!

Shing · #3 (**permalink**) 30/06/2008, 09:14

acabo de probarlo y efectivamente ya no se estira, sino q ahora cuando llego al final, no se estira, pero sigue para el costado :S

ht tp://img128.imageshack.us/img128/6130/problemayr3.jpg