Alineación de imagen
2 seguidores
Buenos dias!
Seguro que es fácil, pero llevo un día intentando alinear una imagen en la parte inferior izquierda de la pantalla, independiente de la resolución de la pantalla del cliente que siempre esté alineado de esa forma. Y es posible que esa imagen tenga borde 0, me refiero a que este totalmente pegado al lado izquierdo.
Muchas gracias! estuve buscado en el foro antes pero no veo nada igual.
t.a.a.r.q.
jajaj, de nada hombre, de nada!! xD xD xD
robert
Muchas gracias!
Lo tengo solucionado. Muchas gracias por las molestias. pero muchas muchas
t.a.a.r.q.
un detalle, te he puesto un DTD xhtml1.1, así que mejor que lo cambies por el transitional, ya que no creo que uses el 1.1
sustituye esta linea
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></code>
por esta
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code>
Pero no quites la primera linea (la del xml) porque si no te dejará de funcionar en Internet Explorer 6, aun así en Internet Explorer 6 y 7 te deja un pequeño margen debajo de la imagen, no se por qué aparece, pero tampoco es mucho,así que da igual. En Opera y Firefox va estupendo, no lo he probado en más navegadores.
Saludos...
t.a.a.r.q.
Bueno, puedes partir del ejemplo que te he puesto, la estructura del documento te quedaría así:
<code>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>prueba de la imagen fija</title>
<style type="text/css">
body {
margin:0;
padding:0;
background-image:none;}
* html body {overflow:auto;}
#Fija {
position:absolute;
bottom:0;
left:0;}
html>body #Fija {position:fixed;}
#Todo {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;}
html>body #Todo {
position:static;
top:auto;
left:auto;
width:auto;
height:auto;
overflow:visible;}
</style>
</head>
<body>
<div id="Todo">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis erat dolor, laoreet nec, consectetuer at, iaculis et, tortor. Mauris fermentum neque sit amet odio. Maecenas id nisi. Ut viverra blandit dui. Mauris ut ligula. Etiam cursus elit ac metus. Etiam neque tellus, lobortis sed, dictum non, mattis vitae, ipsum. Vivamus lorem sem, vulputate nec, convallis vitae, luctus quis, ipsum. Vivamus eget quam. Curabitur quis lectus fermentum ipsum lacinia blandit. Sed metus lorem, pretium ac, placerat in, aliquet a, neque. Nunc vitae risus sit amet purus vehicula pharetra.
</p>
<p>
Aliquam interdum ipsum non diam porttitor volutpat. Quisque lectus. Curabitur et risus ut quam fermentum nonummy. Integer hendrerit ornare nulla. Curabitur dictum mauris vel sapien. Sed vel ligula. Vivamus tristique nulla in urna. Sed tristique. Praesent vitae tortor. Phasellus est felis, accumsan molestie, dapibus quis, interdum vitae, sapien. Duis posuere.
</p>
<p>
Nunc tristique viverra arcu. Donec ultrices. Duis nec erat et nulla viverra egestas. Vestibulum et velit eu augue adipiscing dapibus. Sed orci. Pellentesque viverra augue aliquet est. Nunc accumsan congue enim. Curabitur semper justo eget nisi. Sed enim ipsum, imperdiet vitae, elementum et, accumsan nec, nisl. Proin dignissim augue ut nunc. Vestibulum sodales nisi eget lectus.
</p>
<p>
Sed convallis urna. Proin mauris ligula, vulputate id, venenatis a, imperdiet quis, sem. Aliquam velit tellus, tempor ac, porttitor vitae, lobortis in, diam. Nullam lacinia. Donec fringilla. Aenean quis mauris a quam fermentum condimentum. Quisque id ligula eget odio ultricies congue. Morbi neque tortor, rutrum at, faucibus sed, gravida sed, urna. Suspendisse potenti. Sed sapien odio, laoreet in, pharetra nec, fringilla eget, sapien. Sed pellentesque dignissim est. Quisque non eros. In vitae lorem nec ligula sodales molestie. Proin vulputate, enim non tincidunt pellentesque, sem leo egestas turpis, id sodales lectus risus id sem.
</p>
<p>
Nam dapibus. Mauris vitae nibh vitae nisi eleifend auctor. Phasellus quis justo eget nulla pretium consectetuer. Vivamus semper neque vel arcu. Quisque eget nisl. Donec lobortis justo et lorem. Vestibulum a dolor. Praesent libero sem, blandit a, sagittis quis, pretium nec, enim. Praesent tincidunt justo sit amet augue. Suspendisse elit diam, sagittis blandit, ullamcorper a, pharetra sed, neque. Phasellus leo. Duis vitae pede. Integer sagittis ipsum elementum ante. Curabitur blandit consectetuer sem. Morbi lobortis diam. Duis placerat, ante ut feugiat hendrerit, felis quam faucibus urna, at rhoncus ante orci sit amet sem. Nulla ultrices bibendum diam. Sed nec metus.
</p>
<p>
Fusce lobortis. Integer dictum lectus mollis magna. Donec nibh. Donec rhoncus. Proin lacinia. Quisque sollicitudin, tortor quis rutrum euismod, nisi nisi varius massa, eu rutrum magna est quis tellus. Nam ut orci eu massa porta facilisis. Ut a lectus. Praesent sapien tellus, auctor sed, pulvinar quis, porttitor ut, turpis. Morbi mollis dapibus felis. Aenean vitae velit et sapien vehicula placerat. Integer in nisl.
</p>
<p>
Cras convallis, lectus sollicitudin cursus lacinia, nulla turpis sodales nisl, ac gravida velit sapien imperdiet lorem. Nam convallis sollicitudin nunc. Pellentesque justo nunc, scelerisque eget, eleifend ac, semper at, sem. Aenean iaculis convallis nulla. Nulla fringilla blandit nisi. Duis ante dolor, nonummy iaculis, consectetuer at, aliquam vitae, augue. Nam vitae pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pulvinar commodo tellus. Sed pretium. Fusce sodales pede id lacus eleifend mattis. Sed suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec arcu. Vestibulum luctus pede sit amet arcu. Nulla non tortor.
</p>
<p>
Morbi cursus fringilla lacus. Donec accumsan posuere velit. Vivamus consectetuer, eros sit amet lobortis volutpat, ante lacus congue augue, nec eleifend tellus ligula et lacus. Etiam laoreet mattis nisl. Nulla vitae nunc. Curabitur a velit. Praesent id nibh. In sed turpis in tellus auctor facilisis. Curabitur nonummy metus non est. Quisque lorem. Duis gravida. Nulla viverra adipiscing purus. Vivamus sed neque. Quisque pulvinar sodales sem. Aliquam venenatis. Ut et eros. Nunc quis elit. Etiam metus. Integer aliquam vestibulum dolor.
</p>
<p>
Vivamus vel orci. Ut congue neque vitae justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin in risus quis erat aliquet nonummy. Nunc semper, neque vitae venenatis ornare, magna sapien aliquet eros, at pretium elit enim sit amet sem. Vivamus a augue in nisi gravida semper. Phasellus dignissim, metus vel scelerisque ultricies, purus nisl aliquam odio, at eleifend sem eros vitae mauris. Donec felis odio, commodo quis, porta sed, auctor in, erat. Nullam volutpat risus in nunc vestibulum pretium. Phasellus nunc nibh, hendrerit et, hendrerit eu, pharetra a, tellus. Cras lobortis velit ac urna. Nam ligula ante, sagittis sed, mattis vitae, ultrices at, turpis. Aenean sed risus et urna lacinia porttitor. Duis interdum hendrerit orci. Cras pellentesque egestas dolor. Etiam in purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus quam augue, volutpat vitae, elementum ac, lacinia non, odio.
</p>
<p>
Vestibulum ligula libero, dictum quis, fermentum in, aliquam eget, lorem. Duis ullamcorper, diam quis placerat pharetra, purus nisl rhoncus odio, vel porta nisl ligula sed erat. Duis euismod nunc non massa ultricies semper. Vestibulum nisl pede, bibendum eget, commodo eu, rutrum et, erat. Duis faucibus imperdiet eros. Curabitur est mi, mollis sed, tincidunt fringilla, feugiat vel, eros. In hac habitasse platea dictumst. Donec elementum orci ac erat. Fusce euismod. Suspendisse lacus lacus, lacinia non, placerat vel, auctor sit amet, felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor dolor, auctor in, eleifend id, pharetra id, neque. Sed leo sapien, accumsan eu, fringilla eu, iaculis id, urna.
</p>
<p>
Sed congue tellus pellentesque magna. Praesent fringilla. Duis cursus vulputate odio. Proin posuere eros ut est. Nulla pulvinar, nisi id porta porta, felis dolor luctus neque, sit amet hendrerit justo orci at mi. Cras viverra tristique sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel ipsum ut risus mattis congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisl. Pellentesque at libero. Ut dolor ante, imperdiet non, scelerisque eget, sodales a, elit. Etiam massa augue, pharetra lobortis, fringilla a, consequat non, tellus.
</p>
<p>
Sed luctus ullamcorper sem. Vivamus dictum dolor quis erat. Cras nec nibh a velit vestibulum ultricies. Quisque metus purus, accumsan vitae, consequat vitae, blandit nec, erat. Nullam egestas ipsum sed lacus. Morbi at neque a elit semper adipiscing. Donec egestas placerat nibh. Mauris ligula ipsum, molestie eget, fermentum vel, elementum eget, lorem. Morbi pretium elit non nunc facilisis dapibus. Maecenas rutrum lacus in nulla. Sed tellus pede, tincidunt id, lacinia a, commodo sed, erat. Quisque placerat, ipsum non tempus fringilla, pede nibh varius sem, eu malesuada odio velit quis orci. Nam vestibulum mattis lectus. In ac nulla sed erat pharetra laoreet. Praesent a lectus ac arcu suscipit dictum. In aliquet, mi sed ultricies rhoncus, leo justo convallis lacus, a lacinia lacus nunc sed dolor. Sed non dui. Maecenas ac enim. Praesent consectetuer volutpat diam. Morbi odio nibh, venenatis quis, malesuada ut, laoreet ac, urna.
</p>
<p>
Morbi gravida, tellus a venenatis ornare, nisi nisi dictum purus, vel vulputate sapien enim quis turpis. Quisque varius mi at dolor. Nunc magna libero, ultricies quis, viverra nec, venenatis in, lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent malesuada consequat tellus. Maecenas at erat non turpis scelerisque condimentum. Mauris suscipit aliquet sem. Integer ipsum. Etiam lorem. Morbi eros enim, pharetra hendrerit, laoreet at, mattis sed, lacus. Nulla urna mauris, porttitor id, congue placerat, eleifend sit amet, nulla. Pellentesque sagittis lorem ac arcu.
</p>
<p>
Phasellus eget leo quis justo sagittis ultricies. Duis sit amet ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis quis lorem a enim blandit malesuada. Nullam eu odio. Etiam et nulla sed lectus feugiat euismod. Morbi at lectus at enim commodo consequat. Praesent nec mauris. Nunc mollis pharetra est. Sed fermentum, eros ac ultrices pellentesque, nisl nibh aliquam neque, in fermentum justo sapien nec leo. Mauris bibendum. Vestibulum non nisl. Nullam magna odio, ornare et, bibendum eget, posuere volutpat, velit. Etiam nibh ligula, cursus eget, imperdiet auctor, molestie nec, velit. Donec id dolor a diam interdum suscipit. Proin lobortis varius libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis lobortis elit vel est. Nullam condimentum fringilla lectus. Sed massa lectus, pharetra eu, malesuada a, faucibus sit amet, lacus.
</p>
<p>
Suspendisse ut pede eget orci dapibus posuere. Mauris sed turpis. Phasellus at pede. Ut at est in odio rutrum consequat. Aenean sem turpis, pharetra eu, egestas vel, imperdiet vel, dui. Nullam eleifend neque vitae nisi. Vivamus at felis. Etiam eu justo. Donec posuere facilisis tortor. Curabitur scelerisque augue sed turpis. Suspendisse potenti.
</p>
<p>
Etiam volutpat cursus nulla. Nunc malesuada consequat lorem. Maecenas auctor pellentesque turpis. Ut sit amet enim ut metus scelerisque sollicitudin. Aenean posuere. Etiam pellentesque. Nulla purus quam, accumsan ac, sollicitudin in, iaculis a, dui. Phasellus ac velit. Morbi posuere est in orci. In laoreet, tellus ut accumsan rutrum, dolor tortor nonummy lorem, eu commodo orci neque at odio. Mauris congue, tellus eget eleifend gravida, velit nibh sollicitudin urna, nec malesuada lorem mi sit amet elit. Pellentesque in mi sed neque dignissim dictum.
</p>
<p>
Vestibulum non urna non tellus facilisis porttitor. Praesent libero enim, consectetuer eget, tristique ut, molestie a, ligula. Phasellus consequat. Ut ultrices tincidunt lectus. Nam mattis, est in imperdiet mattis, tellus nisl condimentum eros, vel pharetra est ante ut enim. Nam nunc pede, tincidunt in, vestibulum nec, nonummy eget, felis. Mauris volutpat. Donec hendrerit scelerisque leo. Phasellus mattis nulla eget tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus nonummy eros id quam. Etiam volutpat. Pellentesque nulla quam, volutpat vitae, aliquet at, blandit ac, quam. Nulla facilisi.
</p>
<p>
Fusce in nibh at neque semper dignissim. In leo. Aliquam erat volutpat. Fusce dictum rhoncus est. Quisque in mi. Nulla facilisi. Vestibulum ut turpis ac elit ultrices placerat. Vestibulum sed velit vitae metus vestibulum accumsan. Quisque et arcu. Aliquam eleifend, sem sit amet placerat sodales, tellus tellus pulvinar sem, a ullamcorper purus lorem at neque. Pellentesque id nibh. Ut porttitor augue at urna. Nullam luctus. Phasellus adipiscing rhoncus justo. Mauris ante leo, mollis nec, pharetra vitae, pellentesque eleifend, quam. Aliquam fringilla gravida justo.
</p>
<p>
Cras ut magna ac nulla malesuada luctus. Nunc sed augue a purus ornare laoreet. Proin leo. Sed dictum nunc id erat interdum ultricies. Praesent scelerisque magna. Sed fermentum. Etiam adipiscing lobortis nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras facilisis diam vitae nunc. Quisque adipiscing nibh a tortor. Fusce massa ligula, malesuada id, tincidunt scelerisque, tincidunt et, ligula.
</p>
<p>
Vestibulum in magna at diam ultricies ultrices. Aliquam ante pede, tincidunt in, convallis quis, sagittis eu, nulla. Nullam volutpat, nunc quis pulvinar porttitor, purus lacus aliquet diam, ac ullamcorper nunc lectus non turpis. In et elit. Nulla facilisi. Cras tincidunt facilisis nulla. Aenean lacus nunc, bibendum eu, volutpat ac, molestie vitae, nisl. Ut leo. Donec mattis metus tincidunt mauris. Sed sodales. Sed congue ullamcorper dolor. Proin sed erat nec libero viverra dictum. In accumsan felis in arcu. Vestibulum mauris lacus, rhoncus consequat, iaculis ullamcorper, rhoncus ac, est. Praesent felis. Donec nibh massa, rutrum sed, accumsan in, mattis vel, nibh.
</p>
<p>
Etiam iaculis dignissim nisl. Nullam sit amet dolor eget orci cursus vestibulum. Aliquam laoreet. Vivamus ut metus. Aenean placerat condimentum velit. Curabitur sit amet eros. Donec quis justo. Praesent dictum elit ut ligula. Morbi dictum malesuada dolor. Etiam bibendum malesuada magna. Curabitur ante. Suspendisse pulvinar turpis nec mauris. Integer auctor pellentesque urna.
</p>
<p>
Sed a erat sit amet metus blandit rhoncus. Nulla sit amet libero. Etiam vulputate consectetuer nisi. Quisque suscipit justo at diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam velit arcu, gravida non, tempus quis, pellentesque et, odio. Cras odio risus, euismod nec, nonummy quis, semper non, dolor. Maecenas molestie diam vitae ante. Suspendisse a metus nec turpis sodales malesuada. Sed tempor, nisi eget sodales consectetuer, ante eros fringilla dui, id scelerisque libero lacus sed dui. Vivamus porta ultricies felis. Mauris commodo tellus eu velit. Mauris vehicula quam eget felis.
</p>
<p>
Morbi ante eros, congue sed, tempor in, porttitor sit amet, urna. Ut id erat. Proin auctor porta turpis. Curabitur ante. Phasellus id tellus nec pede scelerisque faucibus. Duis gravida velit non quam. Vestibulum et quam sed leo bibendum lobortis. Proin blandit pede vitae orci adipiscing varius. Nullam rutrum erat at velit. Cras semper eleifend est.
</p>
<p>
Phasellus pharetra consectetuer pede. Fusce quis odio. Curabitur feugiat justo nec tortor. Praesent eros enim, sagittis id, eleifend quis, pharetra elementum, enim. Quisque vitae mauris a diam aliquam malesuada. Etiam sed tortor. Nunc feugiat urna blandit quam. Vivamus ac arcu in elit sollicitudin cursus. Aliquam rutrum facilisis augue. Proin molestie. Vivamus vel nisi. Duis nisi massa, vehicula vitae, luctus vel, tristique et, lacus. Ut iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Ut egestas venenatis turpis. Vivamus mattis sapien nec lectus. Vivamus dolor odio, venenatis eu, ultricies eget, lacinia eget, quam. Fusce mauris quam, suscipit non, tempor ut, hendrerit non, justo. Nulla facilisi. Integer ac arcu sed augue tempus rutrum. Cras lacus enim, tempor vel, sollicitudin ac, consequat at, nisl. Integer quis sapien ut augue gravida condimentum. Nulla facilisi. Sed a enim. Ut eu ante. Nulla nec nisl. Nullam placerat augue eu odio. Fusce sollicitudin. Donec nec leo.
</p>
</div>
<div id="Fija">
<img src="mooldes.jpg" alt="mooldes" />
</div>
</body>
</html>
</code>
He puesto los párrafos esos a modo de prueba, espero que te sirva...
Te dejo el ejemplo funcionando en mi sitio.
robert
img src="mooldes.jpg" alt="" name="mooldes" width="313" height="342" hspace="0" vspace="0" border="0" align="absbottom" usemap="#MapMap" id="mooldes"
Este seria el código lo siento
robert
Muchas gracias por molestarte.
<body bgcolor="#000000">
<img src="mooldes.jpg" alt="" name="mooldes" width="313" height="342" hspace="0" vspace="0" border="0" align="absbottom" usemap="#MapMap" id="mooldes" />
Quiero poner el código en html, pero necesito que sea alineado a la izquierda y abajo y si es posible con borde 0 para que se pegue lo máximo al borde del navegador.
Gracias
t.a.a.r.q.
No sé si te refieres exactamente a lo que yo pienso, pero eso sería con <code>position:fixed;
bottom:0;
left:0;</code>
El problema es que en IE no rula, pero su la vas a usar en el body, sí que te funciona, en ese caso puedes hacer un
<code>background:#FFFFFF url(imagen.jpg) no-repeat fixed left bottom;</code>
Voy a probarlo y me aseguro...
/*Editado...*/
Efectivamente, lo he probado ya, aquí tienes una explicación para simular la posición fija en IE.
Saludos y suerte.