No me sale alinear imagenes...

fedefrankk · #1 (**permalink**) 30/01/2012, 11:49

Hola a todos, quiero hace un encabezado, lo hago con position absolute, pero me dicen que eso no sirve porque no se adapta a cualquier resolucion de monitor, entonces lo hago con float::left, ó position relative...

Ya he probado de todo, si alguien me da una mano. porfa..

mi semi proyecto quedó asi:

http://www.revistaunimevonline.com/

mi codigo css:

Código CSS:

Ver originalhtml, body{
    margin:0px;
    padding:0px;
}
 
body {
    background:#CCC url(../img/cab/back2_r1_c1.jpg) repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #474848;
}
 
.pagina{
    width:1000px;
    height:auto;
    margin-right:auto;
    margin-left:auto;
    margin-top:0px;
    padding:0px;
}
 
.st1 {float:left;position: relative;
background-image:url(../img/cab/back2_r1_c2.jpg); background-repeat:no-repeat;
left:17px; top:0px;
width:75px; height:56px;
}
.st2 {float:left;position: relative;
left:92px; top:0px;
         background-image:url(../img/cab/back2_r1_c3.jpg); background-repeat:no-repeat;
width:75px; height:56px;
}
.st3 { float:left;position: relative;
         background-image:url(../img/cab/back2_r1_c4.jpg); background-repeat:no-repeat;
width:75px; height:56px; left:167px;
}
.st4{ float:left;position: relative;
         background-image:url(../img/cab/back2_r1_c5.jpg); background-repeat:no-repeat;
width:75px; height:56px; left:242px;
}
.st5{float:left;position: relative;
         background-image:url(../img/cab/back2_r1_c6.jpg); background-repeat:no-repeat;
width:75px; height:56px; left:317px;
}
.st6{ float:left;position: relative;
         background-image:url(../img/cab/back2_r1_c8.jpg); background-repeat:no-repeat;
width:75px; height:56px; left:467px;
}
 
 
.form1{float:left;position: relative;
         background-image:url(../img/cab/back2_r1_c12.jpg);background-repeat:no-repeat;
width:75px; height:56px; width:267px; height:150px; left:433px;
}

Igual lo pueden ver en link que deje arriba..

Ya no se como hacerlo, he probado de tantas maneras que enserio estoy hagotado, hace mas de una semana que estoy con el encabezado, si pongo algo, lo otro se corre, en fin
espero alguna mano por favor
Saludos y gracais a todos
Fede

C2am · #2 (**permalink**) 30/01/2012, 12:12

Hola
¿cada div stx es parte de un menú?
Que es lo que quieres lograr exactamente.
La estructura general podrías ser:

Código HTML:

Ver original<body>
<div id="contenedor">
<div id="encabezado">ENCABEZADO + MENU </div>
<div id="contenido">TODO EL CONTENIDO PRINCIPAL</div>
<div id="pie">PIE DE PÁGINA</div>
</div>
</body>

Una vez que tienes la estructura general puedes enfocarte en cada sección en particular, en este caso en el encabezado.

Saludos

fedefrankk · #3 (**permalink**) 30/01/2012, 12:25

Hola Muchas gracias por contestar, siempre lo hice cortando pedazos de imagens y ponerle la posicion absoluta ancho alto, left, top, pero me dijieron que no es asi como se usa CSS, y aparte los navegadores con monitor chico no lo va a visualizar bien.. te muestro como lo hago.:

Son 13 pedazos de imagens que uso y cada uno lo inserto en un div y a este le doy la posicion, altura ancho, etc... y el resultado fina seria este, no hay menu... solo el ingreso..

En fin... eso es todo, si se puede simplificar seria buenismo, el tema de hacer imagenes chicas es para que cargue mas rapido la web y no hace solo una

en el codigo que me mostras
como acomodas cada imagen?

Gracias por tu tiempo
Saludos
Fede

C2am · #4 (**permalink**) 30/01/2012, 12:33

Crea una imagen que diga: Revista Unimev Online pero con fondo transparente.

Edito: el fondo ya lo tienes solo tienes que agregar la imagen con el nombre, en un div o directamente utilizando <img src.../>

El problema con las imagenes es cuando son de gran tamaño, que no es este el caso.

Edito 2: Las imagenes que son parte del contenido, como ser el nombre de la empresa-web, o logo de la web se deben publicar mediante la etiqueta de imagen.
Las imágenes que son puramente decorativas, en lo preferible, se deben poner como fondo de los elementos que la contienen.

fedefrankk · #5 (**permalink**) 30/01/2012, 12:55

Hola de nuevo, y el tema de darle posicion?, que es lo que se usa, ya que tambien tengo que poner el formulario azul,

Cita:

publicar mediante la etiqueta de imagen.

eso como se hace?..

Cita:

se deben poner como fondo de los elementos que la contienen.

tambien eso como se hace?...

Dsiculpame tantas preguntas,
Y gracias por tu tiempo.
Saaludos
fede

C2am · #6 (**permalink**) 30/01/2012, 13:17

Código HTML:

Ver original<body>
<div class="pagina">
 
<div id="cabecera">
 
<div id="logo">
 
      <img src="rutaalaimagen.jpgopngogif" />
 
</div><!-- cierro logo-->
 
<div class="form1" id="fr1">
  
 </div><!--cierro caja formulario-->
 
</div><!-- cierro cabecera -->
 
</div>

Aquí tienes un ejemplo

fedefrankk · #7 (**permalink**) 30/01/2012, 13:30

Increible muchas gracias.!!!
Saludos
Fede