FIJAR DIV abajo y a la derecha de la Pantalla

datcom · #1 (**permalink**) 30/11/2012, 13:09

hola gente
Mi cuestione es la siguiente; Mas o menos tengo distribuidos un par de divs pero hay uno que no se como fijarlo y es el de abajo donde dice "facebook, twitter, etc"
mi idea es que quede fijo ahi y nose si colocarlo dentro de el contenedor o fuera.
Tiene que estar pegado a la derecha casi abajo de todo. Mi duda es como hacer para que por mas que la pantalla se reduzca o agrande proporcionalmente siempre quede alineado al contenedor principal, sobretodo los items. que BLOG quede alineado con CONTACTO de el menu top.

Alguna idea? Gracias abajo la imagen.

Saludos!

pzin · #2 (**permalink**) 30/11/2012, 13:23

Aquí, al contrarío de lo que dice el refrán, dice más una línea de código que mil imágenes.

datcom · #3 (**permalink**) 30/11/2012, 13:24

haber esto:

Código HTML:

Ver original<body>
    <div class="codrops-top">
                <div id="banner">
                <div id="logo"><a href="#" target="_blank"></a></div>
                <ul id="menu-nav">
                    <li><a href="#" target="_blank">link</a></li>
                    <li><a href="#" target="_blank">link</a></li>
                    <li><a href="#" target="_blank">link</a></li>   
                    <li><a href="#" target="_blank">link</a></li>   
                    <li><a href="#" target="_blank">link</a></li>                       
                </ul>
                <div class="clr"></div>
                </div>
    </div>
    <div id="contenedor">
    <div id="middle"></div>
    <div class="clr"></div>
    <div id="social"><ul id="social-nav">
                    <li><a href="#" target="_blank">Facebook</a></li>
                    <li><a href="#" target="_blank">Twitter</a></li>
                    <li><a href="#" target="_blank">Vimeo</a></li>  
                    <li><a href="#" target="_blank">Blog</a></li>   
                    </ul>
                </div>
                </div>
</body>

pzin · #4 (**permalink**) 30/11/2012, 13:28

¿Y la parte del CSS?

Entiendo que lo pudieras hacer al revés, poner el CSS y obviar el HTML ya que el foro donde estás es de CSS. Pero a ver cómo se te va a brindar ayuda de CSS sin poner código de CSS.

datcom · #5 (**permalink**) 30/11/2012, 13:33

Perdon ahji va

Código HTML:

Ver original<body>
    <div class="codrops-top"><!--/ Codrops top bar -->
                <div id="banner">
                    <div class="clr"></div>
                </div>
    </div><!--/ Codrops top bar -->
    <div id="contenedor">
    <div id="middle"></div>
    <div class="clr"></div>
    <div id="social"></div>
                </div>
</body>

Código CSS:

Ver originalhtml,body {
    margin:0px;
    padding:0px;
}
body {
    font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #000;
    height:100%;
    text-align: center;
    
}
 
.clr {clear:both;}
 
#contenedor {
width: 1000px;
margin:0 auto;
 
}
 
 
.codrops-top #menu-nav {
float: right;
list-style: none;
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
margin-top:20px;
}
 
 
#banner {
width: 1000px;
margin: 0px auto;
padding: 0 70px;
text-align: left;
}
 
.codrops-top{
width: 100%;
height:100px;
margin: 0;
background-image: url('bgtop.png');
background-repeat:repeat-x;
text-align: center;
 
    
}
 
#middle {
 margin-top:100px;
 color:#fff;
 width:400px;
 height:200px;
 float:right;
 text-align:right;
 
}
 
 
#social { 
margin-top: 300px;
color: white;
float: right;
background-color: black;
width: 700px;
height:50px;
margin-bottom: 30px;
margin-right: -450px;
position:absolute;
  
}

datcom · #6 (**permalink**) 30/11/2012, 13:44

Abajo coloco el codigo entero

pzin · #7 (**permalink**) 30/11/2012, 13:44

Si pones #social al mismo ancho que #contenedor, 1000px, y flotas ul#social-nav li a la derecha debería de quedarte alineado con el lateral derecho de #contenedor. ¿Eso era?

datcom · #8 (**permalink**) 30/11/2012, 13:47

Alguna otra idea?

C2am · #9 (**permalink**) 30/11/2012, 15:05

Dice tu imagen: "DIV en el Body FIJO a la Derecha"
Digo, por qué no te haces caso y lo posicionas en forma "fija".

Saludos

datcom · #10 (**permalink**) 30/11/2012, 15:08

Cita:

Iniciado por C2am

Dice tu imagen: "DIV en el Body FIJO a la Derecha"
Digo, por qué no te haces caso y lo posicionas en forma "fija".

Saludos

Lo intento pero automáticamente al darle esa propiedad fixed el DIV flota a la Izquierda.

C2am · #11 (**permalink**) 30/11/2012, 15:15

Bueno, en realidad no se si con fixed logras esa alineación que pretendes, lo siento opine antes de leer completo tu primer post.

fixed no es una propiedad sino que es un valor de la propiedad position, y no flota, se posiciona. Y se posicionará de acuerdo a las propiedades left, top, etc.
Si queda a la izquierda es porque no tiene definida esas propiedades.

Ahora, volviendo a lo que planteas, la respuesta de Bonez no me parece una mala alternativa.

También puedes usar position:absolute, sin flotar nada, ajustando la posición con right y bottom.

Saludos

memoadian · #12 (**permalink**) 30/11/2012, 15:27

#div{
position:fixed;
bottom:0;
right:0
}

datcom · #13 (**permalink**) 30/11/2012, 15:33

Cita:

Iniciado por C2am

Bueno, en realidad no se si con fixed logras esa alineación que pretendes, lo siento opine antes de leer completo tu primer post.

fixed no es una propiedad sino que es un valor de la propiedad position, y no flota, se posiciona. Y se posicionará de acuerdo a las propiedades left, top, etc.
Si queda a la izquierda es porque no tiene definida esas propiedades.

Ahora, volviendo a lo que planteas, la respuesta de Bonez no me parece una mala alternativa.

También puedes usar position:absolute, sin flotar nada, ajustando la posición con right y bottom.

Saludos

si esa va a ser una posible solucion. Pasa que al achicar la pantalla se mueve obvio con respecto a los demass elementos.

pzin · #14 (**permalink**) 30/11/2012, 15:43

Otra es crear un contenedor con fixed o absolute, que ocupe el 100%, y luego un elemento hijo que ocupe lo que ocupa #contenedor y ahí alinear a la derecha lo que sea y ya se te queda alineado con el lateral derecho de #contenedor.

datcom · #15 (**permalink**) 30/11/2012, 15:49

Cita:

Iniciado por Bonez

Otra es crear un contenedor con fixed o absolute, que ocupe el 100%, y luego un elemento hijo que ocupe lo que ocupa #contenedor y ahí alinear a la derecha lo que sea y ya se te queda alineado con el lateral derecho de #contenedor.

No bueno claro eso es barbaro lo que necesito pero como prolongo el background negro de ese div flotante a la derecha para que toque la pared de la pantalla.

pzin · #16 (**permalink**) 30/11/2012, 15:55

¿Qué div?

No sé, si miro la imagen que has puesto parece que lo que quieres hacer es lo que te han dicho C2am y memoadian, pero según lo que dices quieres otra cosa y luego otra distinta, cual mujer apunto de pisar la calle nocturna.

datcom · #17 (**permalink**) 30/11/2012, 16:17

Es que me explique mal.
Ese div fijo necesito que:

No se mueva.
La lista <ul> quede alineada al #contenedor
y el background que es negro se prolonge hacia la derecha yendose al corte con la pantalla.

Esto ahora nose si hacerlo dentro o fuera de que divs y en que posiciones.
como se muestra en la imagen.

Gracias a todos igual y sepan disculpar.

PD: Si no hay solucion alguna me conformo con lo de C2am y memoadian

pzin · #18 (**permalink**) 30/11/2012, 16:34

Entonces será lo de #14. El fondo negro que le quieres poner y que llegue hasta el final, tampoco hay problema porque se lo aplicas a ese contenedor que te decía que está al 100%.

datcom · #19 (**permalink**) 30/11/2012, 16:45

Cita:

Iniciado por Bonez

Entonces será lo de #14. El fondo negro que le quieres poner y que llegue hasta el final, tampoco hay problema porque se lo aplicas a ese contenedor que te decía que está al 100%.

no no entiendo. que quedaria asi?

Código HTML:

Ver original<div id="bannerTop">Logo+Links</div>
<div id="contenedor"><div class="contenido">contenido</div></div>
<div id="contenedorPadre" style="width:100%;position:absolute;right:30px">
<div id="social" style="width:1000px;margin:0 auto;">
<ul> bla bla bla </ul>
 
</div>
 
</div>

pzin · #20 (**permalink**) 30/11/2012, 16:55

Si algo así. ¿No?

datcom · #21 (**permalink**) 30/11/2012, 17:06

De esta forma es todo el div negro. Si queda alineado y se va al corte pero el fondo negro necesito que empiece en Facebook y de ahi a la derecha , no que sea todo de punta a punta. se entiende?

pzin · #22 (**permalink**) 01/12/2012, 00:58

Pero eso lo puedes hacer, le pones el fondo a UL o metes otro elemento vaya.

jmdearpe · #23 (**permalink**) 02/12/2012, 16:28

Hola,

Si creas como contenedor de la capa de pie una capa que ocupe un width 100% de negro position fixed bottom 0 para que este al pie.

Dentro de esa capa otra con un ancho especifico en px(yo he puesto 980 como en la capa de arriba) con el fondo blanco

Dentro de esta a su vez el menu con fondo negro y floantando a la izquierda de la de 980px

Yo lo tendrías casí, lo único que luego te quedaría tb a la izquierda el fondo negro.

Pero si creas una capa blanca con clear both, width de 50% alineada a la izquierda y con posición relativa, pero digamos que la 'subes' con top para tapar el espacio negro que te quedaba del fondo de la capa principal tendrías algo parecido.

te paso el código, pero eso si, he puesto los estilos a pelo te toca indagar un poco el tema.

Es una solución un poco fea pero funcionar debe de funcionar por qué no.

Eso sí dependiendo del ancho de tu menu el ancho de la capa que sirve para 'tapar el negro' lo mismo lo tienes que reducir.

No sé si te gustará la idea y reconozco que es un poco fea, pero en fin te la dejo.

Código HTML:

<!DOCTYPE html>
<html>
<head>


<meta charset="iso-8859-1" />

<meta name="lang" content="es" />
<meta name="generator" content="editplus"/>
</head>
<body style="margin:0">
	<div style="width:100%;background:black;padding-top:10px;padding-bottom:10px;overflow:auto;">
		<div style="min-width:980px;width:980px;margin:0 auto">
			<div style="float:right;padding-right:20px;color:#ffffff">
				<a style="float:left;margin-left:10px;">menu1</a>
				<a style="float:left;margin-left:10px;">menu2</a>
				<a style="float:left;margin-left:10px;">menu3</a>
				<a style="float:left;margin-left:10px;">menu4</a>
				<a style="float:left;margin-left:10px;">menu5</a> 
			</div>
		</div>
	</div>
	<div style="min-height:300px;height:300px">
	</div>
	<div style="position:fixed;bottom:0px;left:0px;max-height:28px;width:100%;visibility:visible;display:block;z-index:400;background-position:right center;overflow:hidden;background:black;">			
		<div style="position:relative;min-width:980px;width:980px;margin:0 auto;background:white;display:block;overflow:auto;">
			<div style="float:right;padding-right:20px;color:#ffffff;background:black;padding-top:5px;;padding-bottom:5px;">
				<a style="float:left;margin-left:10px;">menu6</a>
				<a style="float:left;margin-left:10px;">menu7</a>
				<a style="float:left;margin-left:10px;">menu8</a>
				<a style="float:left;margin-left:10px;">menu9</a>
			</div>
		</div>
		<div style="position:relative;clear:both;width:50%;margin:0 auto;background:white;float:left;min-height:100px;top:-40px;">
		</div>
	</div>
	</body>
</html>

Salu2 ;)

jmdearpe · #24 (**permalink**) 02/12/2012, 17:13

Tb podrías trabajar con una capa que te haga de margen izquierdo y que tenga un width en %

Código HTML:

<!DOCTYPE html>
<html>
<head>


<meta charset="iso-8859-1" />

<meta name="lang" content="es" />
<meta name="generator" content="editplus"/>
</head>
<body style="margin:0">
	<div style="max-width:100%;width:100%;background:black;padding-top:10px;padding-bottom:10px;overflow:auto;">
		<div style="float:right;min-width:10%;width:10%;;max-width:10%;background:black;display:block;">&nbsp;
		</div>
			<div style="float:right;padding-right:20px;color:#ffffff">
				<a style="float:left;margin-left:10px;">menu1</a>
				<a style="float:left;margin-left:10px;">menu2</a>
				<a style="float:left;margin-left:10px;">menu3</a>
				<a style="float:left;margin-left:10px;">menu4</a>
				<a style="float:left;margin-left:10px;">menu5</a> 
			</div>
	</div>
	<div style="min-height:300px;height:300px">
	</div>
	<div style="position:fixed;bottom:0px;left:0px;max-height:28px;max-width:100%;width:100%;background:white;padding-top:10px;padding-bottom:10px;;">
		<div style="float:right;min-width:10%;width:10%;;max-width:10%;background:black;display:block;padding-top:10px;padding-bottom:10px;">&nbsp;
		</div>
			<div style="float:right;padding-right:20px;color:#ffffff;background:black;padding-top:10px;padding-bottom:10px;">
				<a style="float:left;margin-left:10px;">menu1</a>
				<a style="float:left;margin-left:10px;">menu2</a>
				<a style="float:left;margin-left:10px;">menu3</a>
				<a style="float:left;margin-left:10px;">menu4</a>
				<a style="float:left;margin-left:10px;">menu5</a> 
			</div>
	</div>	
	</body>
</html>

saludos.

jmdearpe · #25 (**permalink**) 02/12/2012, 17:21

Diagmsoq ue la diferencia entre la anterior y esta es que la primera tienes una capa centrada de unos pixeles determinados y el menu aparece a la derecha de esa capa centrada.

Aqui tienes un margen que he puesto en porcentage pero que tb podría ser en pixeles, el protblema de esta última solución, es que en resoluciones altas lo mismo se te va demasiado el menu hacia la derecha

No sé, yo creo que me gusta más la primera solucion, porque conserva el centrado de la capa sobre la que se pone el menu. a 1920 x 1080 por ejemplo en esta segunda opcion se va demasiado a la derecha