Comunidad de diseño web y desarrollo en internet online

[css] problemas con maquetado en css2

Citar            
MensajeEscrito el 21 Mar 2006 12:13 am
Buenas y Santas... estoy teniendo muchos problemas cuando maqueto una pagina con estilos... sinceramente se me complica cuando no encuentro variantes para q funcione en mozilla y en IExplorer...
En este caso particular, estaba trabajando solo en mozilla (por lo gral chequeo el resultado en ambos) al no tener buenos resultados decidi ver q tan mal estaba en IE. Vi, con asombre, que se veia como yo lo habia pensado...
A todo esto, deduzco ( :shock: ) que estoy haciendo las cosas mal...
Para que vean a lo que me refiero, les paso lo que tengo hecho:

link ejemplo

Si lo comparan entre estos browser veran q si se ve bien en IE, pero el resultado no es el buscado en Mozilla (que no es particularmente lo que me interesa).
En lineas grales no puedo solucionar dos problemas puntuales:

    - La botonera sin espaciados (pading: 10px;)
    - El "main" de la web (el recuadro amarillento debajo de la img primcipal) se pasa de largo del cuerpo gral de la estructura


Bueno, ese es mi problema... alguien me puede dar una mano?

muchas gracias...

Dario!

Por Dario!

28 de clabLevel



Genero:Masculino  

Capital Federal - BsAs - Argentina

firefox
Citar            
MensajeEscrito el 21 Mar 2006 03:27 am
bien, vamos por partes

que se salga el recuadro de la estructura es porque asignas un height, si dejas que la altura la asigne el navegador mismo quedará mucho mejor
el padding del menu ha de ir por la misma corriente; si asignas un width, los paddings se ven recortados

para esto, aquí van unos consejos
utiliza este código, para "estandarizar" la manera en la que se ve tanto en ie como en un navegador decente

Código :

*{
margin:0;
padding:0;
}

no asignes alturas a menos que sea absolutamente necesario (por ejemplo el header), si asignas una altura a un bloque de texto y el contenido es mayor, se va a ver mal.
y esto no tiene nada que ver con el diseño, pero al ver el código veo que utilizas puras clases (.clase) mientras que, para elementos únicos (el header, por ejemplo) deberías utilizar id's (#header). checa el tutorial de css, te servirá bastante

un saludo, vas por buen camino

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 21 Mar 2006 03:54 am
fael: muchas gracias por los consejos... ahora vienen unas preguntitas...

- sino le pongo ancho ni alto a la botonera, como controlo graficamente esos elementos. Es decir, mi botonera esta estrcuturada con <ul><li>... como hago para que respete mis "lineamientos" susar atributos de ancho o alto??
- respecto de lo que me decis de margin y padding 0, lo estoy usando, lo que sucede es q yo uso margin:10px para q mantengadistancia un div de otro... en IE me lo respeta, en FF, no siempre (dudo que sea al azar ^^ ) como deberia manejar esto? Por ej, todos los div's dentro del contenedor gral tienen margin:10px para q, entre ellos, hayan 20px de distancia.

Por otro lado, entiendo bien lo de los id para manipular los elementos unicos... asi q sera solo cuestion de corregirlo...

muchas gracias por todo...

Dario!

Por Dario!

28 de clabLevel



Genero:Masculino  

Capital Federal - BsAs - Argentina

firefox
Citar            
MensajeEscrito el 21 Mar 2006 04:57 am

Dario! escribió:

- sino le pongo ancho ni alto a la botonera, como controlo graficamente esos elementos. Es decir, mi botonera esta estrcuturada con <ul><li>... como hago para que respete mis "lineamientos" susar atributos de ancho o alto??


El ancho si asignaselo tu, pero el alto no, ese dejalo para como vaya creciendo tu pagina, o el elemento en cuestion.

Por Reymond

Claber

1111 de clabLevel

5 tutoriales
1 articulo

Genero:Masculino  

Mobile developer

firefox
Citar            
MensajeEscrito el 21 Mar 2006 03:29 pm
podes poner el codigo css y el html para q te podamos ayudar mejor...

salu2

Por 3w

145 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 21 Mar 2006 04:31 pm
aca va el codigo html:

Código :

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>Darío!</title>
</head>
<body>
<center>
  <div class="contenedor">
    <div class="head"></div>
    <div class="headImg"></div>
    <div class="contenido">
      <div class="main"></div>
      <div class="botonera">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</center>
</body>
</html>


y aca el css

Código :

body{
   padding:20px;
   margin:0px;
   background-color:#c7c2b0;
}
.contenedor{
   margin:0px;
   padding-top:20px;
   width:800px;
   height:1000px;
   background-color:#FFFFFF;   
}
.contenedor div{
   margin:20px;
}
.head{
   padding:0px;
   width:760px;
   height:100px;
   background-color:#c7c2b0;
   background-image:url(../img/logo.jpg);
   background-position:right;
   background-repeat:no-repeat;
}
.contenido{
   padding:0px;
   width:760px;
   text-align:left;
}
.contenido div{
   margin:0px;
}
.headImg{
   padding:0px;
   width:760px;
   height:350px;
   background-image:url(../img/headImg.jpg);
   background-position:left;
   background-repeat:no-repeat;
}
.main{
   margin-right:20px;
   padding:10px;
   background-color:#fbf4e2;
   width:490px;
   height:500px;
   float:left;
}
.botonera{
   margin-right:20px;
   padding:0px;
   width:250px;
   text-align:left;
   float:right;
}
.botonera ul{
   margin:0px;
   padding:0px;
}
.botonera ul li{
   margin-bottom:10px;
   padding:0px;
   width:250px;
   height:30px;
   list-style:none;
   background-color:#c2b292;
}

Por Dario!

28 de clabLevel



Genero:Masculino  

Capital Federal - BsAs - Argentina

firefox
Citar            
MensajeEscrito el 21 Mar 2006 08:14 pm
hemmm no se si lo que yo diga en este momento ayude mucho pero bueno segun yo tienes algunos errores al usar el css, estas utilizando todo omo si fueran clases (class) funciona lo se pero creo que es mejor si asignas tus identificadores (id) como por ejemplo en el head puedes cambiarlo por #head que es el identificador y en la botonera lo mismo.. no es muy util esto que he dicho con respecto a tu problema pero aver quien mas te puede ayudar.

Por jaimoco

299 de clabLevel



Genero:Masculino  

choya bay , mexico

firefox

 

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