Foros del Web » Creando para Internet » CSS »

liazo con las divs

Estas en el tema de liazo con las divs en el foro de CSS en Foros del Web. Hola estaba intentando hacer una web y tengo un lio tremendo con las divs lo que quiero es posicionar una imagen a la izquierda (seria ...
  #1 (permalink)  
Antiguo 17/09/2009, 10:09
 
Fecha de Ingreso: abril-2008
Mensajes: 143
Antigüedad: 9 años, 8 meses
Puntos: 0
liazo con las divs

Hola estaba intentando hacer una web y tengo un lio tremendo con las divs

lo que quiero es posicionar una imagen a la izquierda (seria el logo) y en la misma linea mas a la derecha un menu con 3 imagens (galeria un separador y contacto).... pensaba que poniendo el tamaño de la div la de abajo saltaba arriba si habia espacio.. o ¿¿tengo que hacerlo con float??


Código HTML:
<div id="wrapper">
	   <div id="cabecera">    
		    <h1>Miguel</h1>
         </div>    
         <div id="menu">
            <div id="galeria"><a href="#galeria.html">Galeria</a></div>
            <div id="palito"></div>
            <div id="contacto"><a href="#contacto.html">Imagen</a></div>
         </div>
</div> 
Código HTML:
#wrapper{
	margin: 0 auto;
	padding:0;
	width: 800px;
	background-color:#ffffff;
	}
	
#cabecera h1{
	height:95px;
	width: 348px;
	background:url(imagenes/titulo.jpg) top left no-repeat;
	padding: 0;
	margin: 0;
	text-indent:-9999px;
	}
	
#galeria {
	width:36px;
	}
	
#galeria a{
	height:16px;
	display:block;
	outline:none;
	text-indent:-9999px;
	background:url(imagenes/galeria.jpg) top left no-repeat;	
	background-position: 0 0;
	float:right;
	}

#galeria a:hover{
	background-position: 0 -16px;
	}
	
#palito {
	width:4px;
	height:16px;
	display:block;
	outline:none;
	text-indent:-9999px;
	background:url(imagenes/palito.jpg) top left no-repeat;	
	}

#contacto {
	width:48px;
	}
	
#contacto a{
	height:16px;
	display:block;
	outline:none;
	text-indent:-9999px;
	background:url(imagenes/contacto.jpg) top left no-repeat;	
	background-position: 0 0;
	}

#contacto a:hover{
	background-position: 0 -16px;
	}
para ser exactos me gustaria que quedara asi:



haber si alguien me ayuda un saludo y gracias!!!
__________________
www.davidhs.es diseño Grafico y Web

Última edición por Dustito; 17/09/2009 a las 10:24
  #2 (permalink)  
Antiguo 17/09/2009, 14:22
Avatar de marce_str  
Fecha de Ingreso: septiembre-2006
Ubicación: La Plata, Argentina
Mensajes: 203
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: liazo con las divs

Hola!
sí, efectivamente, deberías usar float: left; en el logo y float:right; en el #menu, pero debes corregir los botones, no puedes usar divs para cada botón.
Los menues deben estar organizados en listas

Código HTML:
<div id="menu">
<ul>
<li><a class="bt_galeria" href="#galeria.html">Galeria</a></li>
<li><a class="bt_imagen" href="#contacto.html">Imagen</a></li>
</ul>
</div> 
y después declaras las propiedades
Código:
#menu {}
#menu ul {}
#menu ul li{}
#menu ul li a{}
#menu ul li a:hover{}
a.bt_galeria {}
a.bt_imagen {}
Y el "palito" lo haces con un border-right en .bt_galeria{}
Otra cosa.. ese menu está hecho con imágenes... te parece necesario? no es una arial o algo muy parecido?
Trata de simplificar y saldrás beneficiado.

Saludos!
  #3 (permalink)  
Antiguo 18/09/2009, 05:30
 
Fecha de Ingreso: abril-2008
Mensajes: 143
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: liazo con las divs

Muchas gracias colega, pensaba que al ser el menu tan pequeño no hacia falta hacer una lista...

Las letras del menu son una helvetica neue, bueno si podia habermelo ahorrado con alguna parecida..., bueno ya que lo tengo pues nada la proxima vez intentare buscarla.

Un saludo y muchas gracias por ayudarme a comprender algunas cosas.
__________________
www.davidhs.es diseño Grafico y Web
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 03:56.