Foros del Web » Creando para Internet » CSS »

Alinear una imágen en una barra de navegación

Estas en el tema de Alinear una imágen en una barra de navegación en el foro de CSS en Foros del Web. Hola: estoy intentando alinear la imagen que se puede ver en la barra de navegación de la derecha para encajarla entre los 2 bordes. El ...
  #1 (permalink)  
Antiguo 16/12/2005, 15:30
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Alinear una imágen en una barra de navegación

Hola: estoy intentando alinear la imagen que se puede ver en la barra de navegación de la derecha para encajarla entre los 2 bordes. El problema es que pruebe lo que pruebe no soy capaz de mover la imagen para la izquierda ni 1 pixel. No se que pueda ser lo que me impide correrla. Les pego como la tengo puesta (aunque he probado miles de cosas):

Código:
.separador {
left:0;
width: 214px;
height: 30px;
background: url("sec.png") no-repeat;
}
#separador {

margin-right: 10px;

}
He probado con position absolute y relative, margin 0 auto, float y demás pero no encuentro la manera (solo con decirles que estube TODA ésta tarde probado cosas...)

En el php lo tengo así:

Código PHP:
<div id="separador"><div class="separador"></div></div
Desde luego muchas gracias por su tiempo!!!! Espero que alguien tenga alguna idea :)
  #2 (permalink)  
Antiguo 16/12/2005, 15:39
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
¿y porque tienes que anidar 2 div? ¿no te bastaria con 1?
de todas maneras de repente se me ocurre que el padding del #separador es el que causa lo que no te gusta
  #3 (permalink)  
Antiguo 16/12/2005, 15:55
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Hola RoQ, lo de los 2 divs fué otra de las pruebas que hice. En un principio era 1 div, pero me puse a probar con 2 aver si me funcionaba.

Sobre lo del padding, si te refieres al margin-right,ya probe a quitarlo, a cambiar el valor, margin 0 auto, dios yo diría "QUE NO PROBE?" XD

un saludo y gracias ;)
  #4 (permalink)  
Antiguo 16/12/2005, 16:44
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
usa el padding para colocar esa imagen... creo que es la mejor solución.
  #5 (permalink)  
Antiguo 16/12/2005, 17:22
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Estube probando con el padding, pero me pasa siempre lo mismo. Solo consigo que se mueva para la derecha, pero para la izquierda no hay manera :(

gracias por las respuestas!!!!
  #6 (permalink)  
Antiguo 16/12/2005, 17:39
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
facil..

te explico, si pones padding a secas ese pading se aplica a todo el ".separador"
es decir por todas las partes (arriba, abajo, izquierda, derecha)

si a ti se te desplaza para la derecha y quieres que se desplace unicamente para la izquierda debes debes de segregar el padding, que consiste en esto:

pondrias asi el padding:
padding-right:10px; (asi aplicas solo pading en el lado derecho y asi lo desplazas a la izquierda)

tambien puedes ajustar el padding de las demas partes simplemente asi:
padding-left: 10px; (izquierda)
padding-bottom: 10px; (abajo)
padding-top: 10px; (arriba)

saludos
  #7 (permalink)  
Antiguo 16/12/2005, 17:40
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
joder...

para que pones eso de:
#separador {

margin-right: 10px;

}

eso es una completa estupidez... eliminalo y ponlo en el .separador

saludos
  #8 (permalink)  
Antiguo 16/12/2005, 18:16
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Sólo estaba probando, he probado lo del padding, y la imágen no se mueve nunca para la izquierda. Ahora mismo tiene 40px y no se mueve. Si le pongo 200px para exagerarlo (incluso con 40 también) se empieza a mover un poco la imágen de fondo... realmente no se que pasa :(

Saludos y gracias :D
  #9 (permalink)  
Antiguo 16/12/2005, 18:27
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
vamos por partes y bien ordenados por que si no no me entero:

puedo ver eso online???
puedes escribir denuevo el codigo al completo para verlo??

lo mirare y hare un par de pruebas seguro que lo arreglamos rápido.
  #10 (permalink)  
Antiguo 16/12/2005, 18:35
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Muchas gracias :), como digas!, por partes:

Puedes verlo online en http://213.60.209.225/test/

A raíz de lo que me habéis comentado, lo he puesto todo en 1 solo div como antes, el cófigo CSS es éste:

Código:
.separador {
padding-right:40px;
width: 214px;
height: 30px;
background: url("sec.png") no-repeat top;
}
El código php COMPLETO es éste:

Código PHP:
<div id="sidebar">

<?php bloginfo('description'); ?>

<?php if (function_exists('WeatherIcon')) : ?>

<div class="weather">

<?php WeatherIcon('LEVX'); ?>Ourense, Spain

</div>

<?php endif; ?>





  <h2 class="sidebar-title">Más</h2>

<div class="separador"></div>
                    <h2><?php wp_list_cats(''); ?></h2>

<br></br>
  <h2 class="sidebar-title">Comentarios</h2>
<div class="separador"></div>
                    <h2><?php get_recent_comments(); ?></h2>


<br></br>
  <h2 class="sidebar-title">Archivos</h2>

<div class="separador"></div>

                     <h2><?php wp_get_archives('type=monthly'); ?></h2>
             

  <br></br>

<h2 class="sidebar-title">Buscar</h2>
<div class="separador"></div>

<div class="searchfield">

<form style="padding: 0px; margin-top: 0px; margin-bottom: 0px;" id="searchform" method="get" action="<?php bloginfo('url'); ?>">

<p style="padding: 0px; margin-top: 0px; margin-bottom: 0px;"><input type="text" class="input" name="s" id="search" alt="Search" size="15" />

<input name="submit" type="submit" tabindex="5" value="<?php _e('Buscar'); ?>" /></p>

</form></div>

<br></br>



<br></br>
<h2 class="sidebar-title">CP</h2>
<div class="separador"></div>
                <h2>
                    <li><?php // wp_register(); ?></li>
                    <li><?php wp_loginout(); ?></li>
                    <li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
                    <li><a href="#content" title="back to top">Back to top</a></li>
                    <?php wp_meta(); ?>
                </h2>
<img src="http://213.60.209.225/test/wp-content/themes/MinimaPlus/ff_logo.gif")/>
<a href="http://www.bitacoras.com"><img src="http://www.bitacoras.com/gra/g03.gif" border="0" alt=" Bitacoras.com "></a>

</div></div>
Y por si necesitas verlo, el CSS completo


Gracias nuevamente
  #11 (permalink)  
Antiguo 16/12/2005, 19:04
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
prueba esto a ver:

Código HTML:
.separador {
padding:0px;
margin: 0px;
width: 194px;
height: 30px;
background: url("sec.png") no-repeat top;
text-align: center; (sirve para centrar en i.e)
float: left;
}
prueba esto y avisame para ver el resultado en la web de test que tienes, ok??

saludos
  #12 (permalink)  
Antiguo 16/12/2005, 19:24
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Ya lo he puesto lo que me has dicho. La imagen sale cortada lógicamente porque mide 214 de ancho, pero igualmente yo lo he puesto como me has dicho
gracias por tu tiempo
  #13 (permalink)  
Antiguo 16/12/2005, 19:34
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
mm tienes que adaptar el ancho de la imagen a las propiedades del #sidebar

ahora la imagen sale centrada... pero tienes un error en el codigo html

esta aki:
Código HTML:
 <h2 class="sidebar-title">Más</h2>
<div class="separador"></div>
					<h2> <li><a href="http://213.60.209.225/test/?cat=1" title="View all posts filed under Guías">Guías</a>
</li>
	<li><a href="http://213.60.209.225/test/?cat=5" title="View all posts filed under Noticias">Noticias</a>
</li>
	<li><a href="http://213.60.209.225/test/?cat=7" title="View all posts filed under Overclocking">Overclocking</a>

</li>
	<li><a href="http://213.60.209.225/test/?cat=12" title="View all posts filed under Videos">Videos</a>
</li> etc etc...........
borra el <h2> que te has olvidado justo antes de comenzar la lista... eso hay no pinta nada.
  #14 (permalink)  
Antiguo 16/12/2005, 19:42
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Arreglado lo del h2. La imagen sale centrada pero yo veo desacomodados algunos enlaces

Entonces, no hay forma de poder hacer mas grande la imagen que la que está definida en las propiedades de la #sidebar?

saludos y gracias
  #15 (permalink)  
Antiguo 16/12/2005, 19:47
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
Cita:
Iniciado por DDrDark
Arreglado. La imagen sale centrada pero yo veo desacomodados algunos enlaces

Entonces, no hay forma de poder hacer mas grande la imagen que la que está definida en las propiedades de la #sidebar?

saludos y gracias
lo de los enlaces desacomodados ya que lo he puesto... elimina el <h2> que te sobra justo antes de comenzar la lista de enlaces fijate bien en tu codigo html.

respecto a la anchura de la imagen, pon esto y se ajustara al 100% de el tamaño de #sidebar
Código HTML:
.separador {
padding:0px;
margin: 0px;
width: 100%; /* fijate aki he puesto el 100% */
height: 30px;
background: url("sec.png") no-repeat top;
text-align: center; (sirve para centrar en i.e)
float: left;
}
y en caso de que aun asi no quede como deseas pues deber modificar la anchura del sidebar... pero yo creo que asi te bastará.

saludos
  #16 (permalink)  
Antiguo 16/12/2005, 20:03
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Hola de nuevo ejejej!, veamos la imágen como debía ir desde el borde al borde de la side bar, pues agrandé la sidebar a 214 y pude alinear bien la imagen jugndo con el padding-left. Lo que sigue sin corregirse es lo que se desacomoda. Los h2 los había borrado cuando melo habías dicho, y seguía (y sigue) viendose mal

GRACIAS!!!! vamos mejorando :P
  #17 (permalink)  
Antiguo 16/12/2005, 20:30
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
mmmm bien ahora debemos tocar las listas <li>
mmmm bueno vamos por partes (como siempre digo) jeje

veamos,

cambia el float y ponlo al lado contrario. es decir float: right;

asi seguro que los enlaces se bajan de linea.. vamos a probar y avisame para verlo.

Otra cosa, de lo de las imagenes me alegro pero yo creo que aun puedes mejorar todo para que coincida bien sin tener que hacer peripecias... pero debo investigarlo más... dame tiempo que yo en breve me voy para el sobre que toy cansao.

por cierto veo que eres de ourense, yo soy de león.

saludos
  #18 (permalink)  
Antiguo 16/12/2005, 20:38
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Por favor no te quedes despierto pormi!!!, cuando puedas seguimos mirando el tema, y gracias ;)

Con lo del float:right las lineas se acomodaron, pero se me desacomodó la imagen. Voy a ver si la arreglo con los paddings

De Leon? :O, somos vecinos :D
  #19 (permalink)  
Antiguo 16/12/2005, 20:44
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
ahora reduce el ancho del sidebar al tamaño de antes y luego ajusta pixel a pixel y dejando el pading a 0 el ancho del .separador

creo que asi lo conseguiras.

bueno tronco voy para la cama, mañana veo lo que has hecho, tu vete posteando lo qeu te va saliendo y asi mañana lo leo y me entero.

ciao
  #20 (permalink)  
Antiguo 16/12/2005, 21:26
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Veamos (vamos por partes :P):

Luego de poner el float:right como dije en el otro post, la imágen se me movio. Creo que hay algo que no me entiendes bien porque soy bastante cutre explicando las cosas. La imágen como ya sabes mide 214, que es de borde a borde de la sidebar. Si ésta mide menos de 214 nunca podría "entrar" la imágen no? (se cortaría)

Ahora te comento lo que pasa con las diferentes cosas que he probado:
La sidebar tiene el tamaño original de 194px

1)
Código:
.separador {
padding:0px;
margin: 0px;
width: 100%;
height: 30px;
background: url("sec.png") no-repeat top;
text-align: center;
float: right;
}
Así la imágen se ve cortada por ambas puntas, osea solo se muestran esos 194px, se ve centrada



2)
Código:
.separador {
padding:0px;
padding-left: 10px;
margin: 0px;
width: 100%;
height: 30px;
background: url("sec.png") no-repeat top;
text-align: center;
float: right;
}
Así la imagen se ve bien a la izquierda, pero a laderecha se sigue viendo cortada



3)
Código:
.separador {
padding:0px;
margin: 0px;
width: 110%;
height: 30px;
background: url("sec.png") no-repeat top;
text-align: center;
float: right;
}
Así y también agregando padding-left:10px; por la izquierda sobresalía y por la derecha se cortaba ( o no salía centrada)


Vamos que en todas pasa lo mismo, ahora no me pasa de la derecha (como antes me pasaba, pero de la izquierda). Por ahora la única manera de poderla poner bien fue poniendo el tamaño de la sidebar igual que el de la imagen y el float:left;

Supuse que si funcionaba para float:left; debería funcionar para float:right, solo que en vez de tocar el padding-left, tocaba el padding-right. Pero NO ES ASÍ :/. Por si no me explique te pongo el ejemplo:


Código:
.separador {
padding:0px;
margin: 0px;
min-width: 214px;
padding-right:22px;
width: 100%;
height: 30px;
background: url("sec.png") no-repeat top;
text-align: center;
float: right;
}
Y también cambiando padding-right por padding-left NO VA, la imagen sobresale por la izquierda y se corta por la derecha



En cambio si pongo:
Código:
.separador {
padding:0px;
margin: 0px;
min-width: 214px;
padding-right:22px;
width: 100%;
height: 30px;
background: url("sec.png") no-repeat top;
text-align: center;
float: left;
}
Entonces funciona, con padding-right y con padding-left. Increíble? xD

un saludo!!! y gracias ;), digo... no sería mejor que hablaramos por email o msn para no flodear tanto el foro? xD
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:14.