Foros del Web » Creando para Internet » CSS »

Problema para ajustar tamaño ene ste CSS

 Estas en el tema de Problema para ajustar tamaño ene ste CSS en el foro de CSS en Foros del Web. Buenos dias, mirad mi problema es que quiero tener la web centrada y que me ocupe el 70% de la pantalla en problema es que ...
  #1 (permalink)  
Antiguo 08/05/2009, 10:55
 
Fecha de Ingreso: mayo-2009
Mensajes: 2
Antigüedad: 14 años, 11 meses
Puntos: 0
Problema para ajustar tamaño ene ste CSS
Buenos dias, mirad mi problema es que quiero tener la web centrada y que me ocupe el 70% de la pantalla en problema es que no me sale, a ver si alguien mirando el codigo lo puede sacar. Graciasss
/* CSS Document */
body{
background:url(images/bg.gif) repeat-x 0 0 #2A2A2A; color:#828282;
font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin:0; padding:0;}
div, h1, h2, h3, h4, h5, h6, form, label, input, span, ul, li, p, a{
margin:0; padding:0;}
ul{
list-style:none;}
.spacer{
font-size:0; line-height:0; clear:both;}


/* -- header start -- */
#header{
width:700px;
height:388px;
margin:0 auto;
position:relative;
color:#828282;
background-color: #2A2A2A;
background-image: url(images/header_bg.jpg);
background-repeat: no-repeat;
}
#header img.logo{
margin:10px 0 0 32px; padding:0; border:none;}
#header h1{
background:url(images/punch_line.jpg) no-repeat 0 0 #161616; color:#FFFFFF;
text-indent:-2000px; height:11px; width:161px; line-height:0; font-size:0;
margin:0 0 0 216px;}
#header div.whatText{
width:214px; height:132px; padding:33px 37px 35px 24px;
position:absolute; left:20px; top:166px;
background:url(images/what_text_bg.jpg) no-repeat 0 0 #6A800C; color:#3B4400;}
#header div.whatText h2{
background-color:#DEE483; color:#000000; height:22px; padding:0 7px; margin:0 0 8px 0;
font:bold 12px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#header div.whatText p{
color:#3B4400; font:bold 12px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#header div.whatText a{
background:url(images/more_btn1.jpg) no-repeat 0 0 #C8CF55; color:#000000;
width:84px; height:14px; line-height:0; font-size:0; display:block;
text-decoration:none; text-indent:-2000px; float:right; margin:8px 0 0 0;}
#header div.whatText a:hover{
background:url(images/more_btn1_h.jpg) no-repeat 0 0 #C8CF55; color:#000000;}
/* -- header end -- */

/* -- top navigation pannel start -- */
#topNav{
width:788px; height:50px; margin:0 auto;}
#topNav ul{
width:531px; margin:0 auto;}
#topNav ul li{
float:left; text-transform:uppercase; padding:0 2px 0 0;
background:url(images/top_btn_divider.gif) no-repeat right center; color:#FFFFFF;
font:bold 11px/50px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#topNav ul li.noDivider{
background-image:none; color:#FFFFFF;}
#topNav ul li a{
text-transform:uppercase; text-decoration:none; padding:0 16px; display:block;
background:url(images/top_btn_bg.gif) repeat-x 0 1px; color:#FFFFFF;
font:bold 11px/50px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#topNav ul li a:hover{
background:url(images/top_btn_bg_h.gif) repeat-x 0 0 #2A2A2A; color:#FFFFFF;}
#topNav ul li a.hover{
text-transform:uppercase; text-decoration:none; padding:0 16px; display:block;
background:url(images/top_btn_bg.gif)repeat-x 0 0 #2A2A2A; color:#FFFFFF;
font:bold 11px/50px "Trebuchet MS", Arial, Helvetica, sans-serif;}
/* -- top navigation pannel end -- */

/* -- body start -- */
#body{
width:722px; margin:0 auto; padding:15px 28px 40px;}
#body div.left{
width:484px; padding:0 28px 0 0; float:left;}
#body div.left h2{
font:bold 28px/44px Georgia, "Times New Roman", Times, serif;
background-color:#2A2A2A; color:#D1DD0D;}
#body div.left h2 span{
background-color:#2A2A2A; color:#FFFFFF;}
#body div.left p{
font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#2A2A2A; color:#828282;}
#body div.left p span{
font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#000000; color:#FF3BA0;}
#body div.left a.more{
background:url(images/more_btn2.gif) no-repeat 0 0 #2A2A2A; color:#FFFFFF;
width:84px; height:14px; line-height:0; font-size:0; margin:0 0 22px 0;
text-decoration:none; text-indent:-2000px;
float:right; display:block;}
#body div.left a.more:hover{
background:url(images/more_btn2_h.gif) no-repeat 0 0 #2A2A2A; color:#FFFFFF;}


/* -- body end -- */

/* footer start -- */
#footer{
background-color:#121212; color:#FFFFFF;}
.footer{
width:490px; height:100px; margin:0 auto; padding:18px 0 0 0;}
.footer ul{
width:410px; margin:0 auto;}
.footer ul li{
font:bold 11px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FAFAFA; background-color:#121212; float:left;}
.footer ul li a{
font:bold 11px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none;
color:#919191; background-color:#121212; padding:0 8px;}
.footer ul li a:hover{
font:bold 11px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none;
color:#919191; background-color:#1D1D1D; padding:0 8px;}
.footer p{
margin:0 auto; width:170px; color:#D1DD0D; background-color:#121212;
font:normal 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
.footer p.valid{
margin:0 auto; width:135px;}
.footer p.valid a.xhtml{
background:url(images/xhtml_btn.gif) no-repeat 0 0 #121212; color:#FFFFFF; margin:5px 0 4px 0px;
text-decoration:none; text-indent:-2000px; width:65px; height:12px; display:block; float:left;}
.footer p.valid a.xhtml:hover{
background:url(images/xhtml_btn_h.gif) no-repeat 0 0 #121212; color:#FFFFFF;}
.footer p.valid a.css{
background:url(images/css_btn.gif) no-repeat 0 0 #121212; color:#FFFFFF; margin:5px 0 8px 4px;
text-decoration:none; text-indent:-2000px; width:65px; height:12px; display:block; float:left;}
.footer p.valid a.css:hover{
background:url(images/css_btn_h.gif) no-repeat 0 0 #121212; color:#FFFFFF;}
.footer p.tworld{
margin:0 auto; width:170px; height:17px; padding:0 3px;
font:bold 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFFFFF;
background-color:#8C0048; text-align:center;}
.footer p.tworld a{
font:bold 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFFFFF;
background-color:#8C0048; text-align:center; text-decoration:none;}
.footer p.tworld a:hover{
color:#FFC9E5; background-color:#8C0048;}
/* footer end -- */
  #2 (permalink)  
Antiguo 08/05/2009, 11:41
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 6 meses
Puntos: 40
Respuesta: Problema para ajustar tamaño ene ste CSS
veamos, quieres hacer una web que ocupe el 70% de la pantalla, pero..., no veo ninguna medida en porcentajes, entonces como lo quieres lograr si no hay % en ninguna parte?. Si no te haz dado cuenta de esto pienso que no sabes mucho de css(sin ánimo de ofender claro está), mira este tutorial que hizo Mikmoro.

De todas maneras te dejo un ejemplo de como sería mas o menos la figura:

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css"> 
  7. #contenedor{width:70%; height:auto; overflow:auto; margin:0 auto;}
  8. #cabecera{width:100%; height:150px; background-color:#666;}
  9. #contenido{ width:100%; height:auto; overflow:auto;}
  10. #left{width:150px; min-height:200px; height:auto!important; height:200px; overflow:auto; float:left; background-color:#999}
  11. #right{overflow:hidden; position:relative;min-height:200px; height:auto!important; height:200px; overflow:auto;background-color:#999}
  12. #footer{width:100%; height:100px; background-color:#CCC; clear:both;}
  13. </style> 
  14. </head>
  15.  
  16. <body>
  17. <div id="contenedor">
  18.     <div id="cabecera"></div>
  19.     <div id="contenido">
  20.         <div id="left">Aqui va texto</div>
  21.         <div id="right">Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto Aqui va texto </div>
  22.     </div>
  23.     <div id="footer"></div>
  24. </div>
  25. </body>
  26. </html>
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 08/05/2009, 11:50
 
Fecha de Ingreso: mayo-2009
Mensajes: 2
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Problema para ajustar tamaño ene ste CSS
No, si ya le puse lo de los % el problema que me salia mal, era por ver si habia otro metodo, porque con html si me salen bien las cosas lo que no entiendo como en este caso con Css no se me adapta bien el tamaño.Gracias de todas formas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:08.