Posicionar elemento fijo y otro pequeño problemita

[reynierpm]

Buenos días,
Estoy maquetando una página usando Twitter Bootstrap con algún que otro ajuste que he tenido q hacerle yo para que luzca tal cual me lo dió el diseñador. La página en cuestión es esta: http://soporte.maxcenter.com.ve/ticket/open y lo que necesito posicionar/alinear son los elementos SELECT con el resto del formulario. Alguien me da una idea? Pase toda la noche probando más no lo logre.

Por otro lado en el "footer" hay una DIV posicionado de forma relativa pero necesito que ese DIV se quede alineado al cartel que esta en el header y que dice "Síguenos en" pero me esta pasando q si redimensiono el navegador entonces se me rompe el maquetado. alguna idea?

Saludos y desde ya muchas gracias

[pablolombardo]

Hola reynierpm,

¿ya solucionaste los select? yo los veo alineados... ¿y con fijo querés decir absoluto no?

Para que el div quede alineado a la derecha y si necesitás que si o si sea relativo tendrías que:

Si lo que contiene es un elemento inline, como me parece que es tu caso (si es una imagen) le tenés que dar al div un text-align:right

Si lo que contiene es un bloque, le podés dar a ese elemento un display: inline-block y luego al div padre el text-align: right

Para que al redimensionar no te rompa la estructura tendrías que asignarle un width o un min-width.

Entendí bien lo que necesitabas?
Saludos.

[reynierpm]

Hola pablolombardo, si ya los tengo alineados pero me aparece un espacio entre ellos que no se que es lo que lo esta originando y sobre la imagen de abajo del footer me perdi un poco, me dejas un pequeño ejemplo aca?

Saludos

[pablolombardo]

Si el html es asi:

<div id="div-del-footer"><img src="" alt="" /></div>

Entonces el css deveria ser asi:

#div-del-footer {

position-relative;
text-align:rigth;

}

Si dentro del div no tenés una imagen entonces además de hacer lo anterior también a lo que sea que tengas dale asi:

#loquesea {

display: inline-block;

}

Creo que se entiende y sino podría ser mucho más exacto si supiese que es lo que contiene el div que querés alinear y más detalles.

[reynierpm]

Ok, fijate al bottom de la pagina hay este codigo HTML:

Código:

<div class="screen-logo">
        <img src="http://soporte.maxcenter.com.ve/assets/img/screen-logo.png">
</div>

Que tiene este CSS asociado:

Código:

.screen-logo {
    bottom: 15px;
    height: 20px;
    position: relative;
    right: 0;
}

Si redimensionas la pantalal veras como la imagen se mueve de lugar. La idea es que dicha imagen este alineada horizontalmente con el texto que esta arriba en el header que dice "Síguenos en:" y que si cambias de tamaño la ventana la imagen no se cambie de lugar.

[pablolombardo]

¿Probaste esto?

Código:

.screen-logo {
    text-align: right;
    height: 20px;
    position: relative;
}

[reynierpm]

Si y pasa justo lo que te comentaba que se lanza a la izquierda y no es la idea, velo por ti mismo en la pagina

[pablolombardo]

aaa

Lo que sucede es que todo el footer esta fuera del contenedor principal....

Si te fijás arriba de donde empieza la etiqueta footer tenés esto:

Código:

</div> <!-- /container -->

Bueno, eso debería estar abajo del footer, para así tener todo dentro del contenedor...

Tal vez esto te provoque otras cosas que acomodar pero lo tenés que hacer si o si para que esté bien la estructura...

[reynierpm]

Hmmm es que no puedo ponerlo dentro porque necesito que el background se extienda a todo lo largo del navegador y si lo pongo dentro del "container" solo me ocuparía el espacio del container o sea 940px. Alguna idea de como solucionar este dilema?

[pablolombardo]

Y en vez de correr el otro contenedor, crea otro div con clase contenedor dentro del footer y listo ....
El footer te queda afuera y todo lo de adentro del footer te va a quedar adentro del contenedor...

Código:

<footer>
   <div class="container">
         ...todo el footer
   </div><!-- /container -->
</footer>

[reynierpm]

Gracias, no se me habia ocurrido esa idea, funciona perfectamente, un saludo

[pablolombardo]

Genial!
Saludoss.