Foros del Web » Creando para Internet » CSS »

Centrar objeto inline

Estas en el tema de Centrar objeto inline en el foro de CSS en Foros del Web. Hola, paso a comentarles mi situacion: tengo el siguiente codigo para crear un menu y un texto. Código: <div id="tabnavigation"> <ul id="tabs"> <li class="actual"><a href="#">Enlace ...
  #1 (permalink)  
Antiguo 29/03/2006, 16:13
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Centrar objeto inline

Hola, paso a comentarles mi situacion:

tengo el siguiente codigo para crear un menu y un texto.

Código:
<div id="tabnavigation">
	<ul id="tabs">
		<li class="actual"><a href="#">Enlace 1</a></li>
		<li><a href="#">Enlace 2</a></li>
		<li><a href="#">Enlace 3</a></li>
		<li><a href="#">Enlace 3</a></li>
	</ul>
	<p>texto de ejemplo</p>
</div>
Y lo que quiero lograr mediante CSS es que el menu sea horizontal y quede centrado horizontalmente y que el texto se ubique a la derecha del menu.
Tengo hecho basicamente todo, pero el problema es que para poder centrar el menu tiene que estar como objeto de bloque. Y si esta como objeto de bloque el texto se ubica abajo del menu.
En cambio si el menu esta como display: inline el texto se ubica perfectamente, pero el menu queda ubicado a la izquierda.

¿como puedo mantener la propiedad inline del menu y centrarlo al mismo tiempo?

este es el codigo CSS que tengo hasta el momento.

Código:
div#tabnavigation {
	display: block;
	height: 34px;
}

ul#tabs {
	display: block;
	height: 34px;
	width: 420px;
	padding: 0;
	margin: 0 auto;
	list-style: none;
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
}

ul#tabs li {
	float:left;
	width:84px;
	height: 34px;
	text-align: center;
}

div#tabnavigation p {
	height: 24px;
	padding: 5px 35px;
	margin: 0;
	font-size: 9px;
	font-weight:normal;
	color: #999;
	text-align: right;
}
__________________
oohh... quisiera ser godines!!!
  #2 (permalink)  
Antiguo 29/03/2006, 20:01
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 13 años
Puntos: 2
Que tal... te paso un link con un tutorial para hacer lo que necesitas.

El sitio es: http://css.maxdesign.com.au/floatutorial/

El link directo es: http://css.maxdesign.com.au/floatuto...torial0601.htm

Espero te sirva, saludos.
  #3 (permalink)  
Antiguo 03/04/2006, 10:11
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Muchas gracias por el enlace Computer Xtress, pero no encontre la solucion a mi problema ya que el tutorial explica como hacer el menu horizontal flotante pero no dice nada sobre centrarlo y colocarle algun elemento al costado que es lo que no puedo realizar.
¿Algun otra idea?
__________________
oohh... quisiera ser godines!!!
  #4 (permalink)  
Antiguo 03/04/2006, 11:49
 
Fecha de Ingreso: abril-2003
Ubicación: Córdoba
Mensajes: 160
Antigüedad: 14 años, 7 meses
Puntos: 0
No se si entra en las posibles soluciones para tu caso, pero y si a
div#tabnavigation le quitas el display:block; y le pones un ancho y lo centras, supongamos asi;

div#tabnavigation {
margin:0px auto;
width:600px;
height: 34px;

}

y a ul#tabs le aplicas float:left; creo estarias logrando el resultado.
__________________
-----------------
_
__|_|__
º(-_-)º
  #5 (permalink)  
Antiguo 03/04/2006, 14:29
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
burgi querido (ta bien que no me conecto tanto como antes, pero que me respondas por el foro ya es medio raro)... el tema es que las div son por defecto display:block ... entonces me tira el <p> abajo de todas formas y si le pongo display:inline estoy en la misma que antes... me queda el texto al lado pero todo alineado a la izquierda.
__________________
oohh... quisiera ser godines!!!
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 08:02.