Comunidad de diseño web y desarrollo en internet online

Problema con Fondo

Citar            
MensajeEscrito el 06 May 2009 02:51 pm
Hola estoy en un proyecto y lo que estoy intentando de hacer es un fondo donde una parte afecte a la cabecera, otro al contenido y como ultimo al pie de pagina, el problema ocurre cuando el contenido es mas grande y me estira el div y como consecuencia el fondo me queda defasado.
Lo que intente fue crear 3 div de lo que recien mencione y que cada uno ocupe de width el 100%, funciona perfectamente pero el problema es que no me ocupa todo el ancho sino que me quedan unos 10 px de los costados, arriba y abajo.
les dejo un pantallaso para que lo vean si no entendieron bien lo que quise decir :wink:

Por 22

79 de clabLevel



 

Uruguay

chrome
Citar            
MensajeEscrito el 06 May 2009 04:58 pm
Sería más útil si pones un enlace al sitio (si es que esta hospedado en algún lado) para poder analizar mejor el código y no basarnos solo en una imagen :)

Por [Ray]

Claber

1901 de clabLevel

20 tutoriales

Genero:Masculino  

Matamoros, Tam.

firefox
Citar            
MensajeEscrito el 06 May 2009 09:53 pm
no apenas la estoy comenzando a crear y viendo ideas.
mira te dejo el codigo

Código :

@charset "utf-8";
/* CSS Document */
#cabecera{
   background-image:url(IMG/fondo_banner.png);
   background-repeat:repeat-x;
   margin:0 0 0 0;
   width:100%;
   height:200px;
}
#contenido{
   background-image:url(IMG/fondo_contenido.png);
   background-repeat:repeat-x;
   background-position:top;
   width:100%;
   height:400px;
   text-align:center;
}
#contenido #contenedorCont{
   margin:0 auto 0 auto;
   width:900px;
   height:400px;
}
#contenido #contenedorCont #columnaIzq{
   width:650px;
   height:400px;
   float:left;
}
#contenido #contenedorCont #columnaDer{
   background-image:url(IMG/columna_der.png);
   background-repeat:repeat-y;
   width:250px;
   height:400px;
   float:left;
}
#pie{
   background-color:#999;
   margin:0 0 0 0;
   width:100%;
   height:200px;
}


una pregunta quizas muy tonta, al usar css se usa un solo archivo para todo el sitio es decir para todas las secciones o es uno para cada una, el sentido seria uno solo para toda la web y ser mas agil a la hora de actualizar no ?


Código :

<?php

class Pagina {
   var $contenido;
   var $titulo = "Aca ponemos el titulo de la web";
   var $botones = array("inicio"=>"home.php",
                   "trabajos"=>"trabajos.php",
                   "acerca de mi"=>"informacion.php",
                   "contacto"=>"contacto.php");
   //Ahora vamos a crear la funcion que cree la estructura del sitio
   function Mostrar(){
      $this->TipoDocumento();
      echo "<html>\n<head>\n";
      $this->MostrarTitulo();
      $this->MostrarPalabrasClaves();
      $this->MostrarEstilo();
      echo "</head>\n<body>\n";
      echo "<div id=\"cabecera\">\n";
      $this->MostrarCabecera();
      echo "</div>\n<div id=\"contenido\">";
      /*$this->MostrarBotonera($this->botones);*/
      $this->Contenido($this->contenido);
      echo "</div>\n<div id=\"pie\">\n";
      $this->PieDePagina();
      echo "</div>\n";
      echo "</body>\n</html>\n";
   }
   function get_contenido() { 
      return $this->contenido;
   }   
   function set_contenido($contenido_nuevo) {
      $this->contenido = $contenido_nuevo;
   }
//Ahora tenemos que crear todas las funciones que llamamos arriba para la creacion de la estructura del sitio
//------------------------------------------------------------------------------------------------------------------------   
   function TipoDocumento(){
     ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
      <?php 
   }
   function MostrarTitulo(){
      echo "<title>$this->titulo</title>\n";
   }
//------------------------------------------------------------------------------------------------------------------------   
   function MostrarPalabrasClaves(){
      ?>
<meta name="Description" content="Titulo del Sitio" />
<meta name="Keywords" content="Palabras, Claves" />
      <?php
   }
//------------------------------------------------------------------------------------------------------------------------
   function MostrarEstilo(){
      ?>
<link rel="stylesheet" type="text/css" href="estilo.css" />
      <?php
   }
//------------------------------------------------------------------------------------------------------------------------   
   function MostrarCabecera(){
      ?>
      <div id="cabecera"></div>
      <?php
   }
//------------------------------------------------------------------------------------------------------------------------   
   function MostrarBotonera($menu){
      echo "<div id='fondomenu'><div id='menu'>\n<ul>\n";
      $width = 700/count($menu);//para que todos los botones queden del mismo tamaño
      while($boton = each($menu)){
         echo "<li><a href=".$boton["value"].">".$boton["key"]."</a></li>\n";
      }
      echo "</ul>\n</div>\n</div>\n";
   }
//------------------------------------------------------------------------------------------------------------------------   
   function Contenido($estructura){
      echo $estructura;
   }
   
   function PieDePagina(){
      echo "<div id=\"pieDePagina\"></div>";
   }

}

?>


y ahora te dejo el codigo de una seccion


Código :

<?php
require("clase_base.php");

$clase = new Pagina();
$clase->set_contenido("<div id=\"contenedorCont\"><div id=\"columnaIzq\">IZQUIERDA</div><div id=\"columnaDer\">DERECHA</div></div>");
$clase->Mostrar();

?>


tambien estoy empezando con lo de php asi que no se fijen mucho que deben haber muchas cosas que arreglar :P

Por 22

79 de clabLevel



 

Uruguay

chrome
Citar            
MensajeEscrito el 07 May 2009 05:42 pm
Es preferible usar un solo CSS, ya que así evitas estar cargando varios archivos por sección.
Espero pronto analiazar el código, porque por ahora estoy algo ocupado :(

Por [Ray]

Claber

1901 de clabLevel

20 tutoriales

Genero:Masculino  

Matamoros, Tam.

firefox
Citar            
MensajeEscrito el 07 May 2009 08:18 pm
ray no hay apuro, muchas gracias igualmenta
Saludos

Por 22

79 de clabLevel



 

Uruguay

chrome
Citar            
MensajeEscrito el 08 May 2009 04:22 pm
Prueba añadiendo a tu CSS (al principio) este código:

Código :

*{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
}

Por [Ray]

Claber

1901 de clabLevel

20 tutoriales

Genero:Masculino  

Matamoros, Tam.

firefox
Citar            
MensajeEscrito el 09 May 2009 08:07 pm
excelente ray :D muchas gracias ahora si quedo perfecto.
eso lo que haria seria el * lo aplica a todo no
y le saca los margenes y padding ?
yo les cambie por px poque nose que son pt y quedo perfecto igual :D

Por 22

79 de clabLevel



 

Uruguay

chrome
Citar            
MensajeEscrito el 10 May 2009 04:25 pm
Efectivamente, si tu haces una regla css para el * lo estarás aplicando a todos los selectores.
El problema que tenías simplemente es que la mayoría de los browsers ponen un border y/o padding al body por default, así que otra solución sería así:

Código :

body {
   margin:0;
   padding:0;
}

Otros tips:
En cualquier regla css, si el valor es 0 no es necesario indicar unidades (ya que 0 siempre es igual a 0 jeje).
Todos los elementos de bloque se extienden al 100% de ancho, a menos que le indiques otra cosa, por lo que el width:100% no lo necesitas.

Por roccons

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 May 2009 12:49 am
gracias roccons
siempre se aprenden cosas nuevas :D

Por 22

79 de clabLevel



 

Uruguay

chrome
Citar            
MensajeEscrito el 12 May 2009 02:16 am
no hay de qué, saludos!

Por roccons

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 May 2009 02:39 am
roccons te voy a molestar un poco mas, tengo el problema que cuando agrego a un div padding en opera firefox y esos navegadores me afecta el tamaño total del div y me lo agranda en cambio en internet explorer no me lo modifica y no veo solucion para que quede bien en los 2.
estoy hace rato tratando y no puedo :(

Por 22

79 de clabLevel



 

Uruguay

chrome
Citar            
MensajeEscrito el 12 May 2009 03:16 pm
Hola 22

¿Estás probando con explorer 6 verdad? ¿o no tienes un doctype?
Esto es porque la especificación de la w3c es que margin+border+padding+width todo se debe sumar. Sin embargo, IE6 o IE7 en modo "quirks" consideran el padding y el border dentro del width. La implementación del modelo de cajas de MS quizás sea más lógica y práctica desde un punto de vista de diseño pero la bronca es que al estar en contra de los estándares no hicieron mas que meter desorden.
Busca en google sobre "box model" o "quirks mode" si quieres ahondar un poco más sobre esto.
Hay varias maneras de solucionar el problema de la compatibilidad, una de ellas es no definir ningún bloque donde tengas especificado simultáneamente un width y un padding, también hay varios hacks que se pueden hacer en la hoja de estilos para mandar valores distintos a IE6 y el resto de los navegadores.
Echale una buscada y experimenta un poco y si tienes alguna otra duda me avisas. vale?

Por roccons

4 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 May 2009 02:00 am
gracias roccons voy a averiguar mas sobre esos hacks para que se ejecuten ciertos codigos segun el navegador me gusto :D
Saludos

Por 22

79 de clabLevel



 

Uruguay

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.