[SOLUCIONADO] acomodar menu link ala izq e imagen a la derecha?

lordbeliar2010 · #1 (**permalink**) 02/01/2014, 23:05

hola amigos necesito su ayuda con este menu. lo que qiero acer es colocar las imagenes al lado derecho del menu y ya los link los tengo ubicado al lado izq solo me ace falta las imagenes aqui les mestro una foto y tambien el codigo

index

Código:

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width"/>
<link href="/a/sty.css"  rel="stylesheet" />
<script type="text/javascript" src="/b/js/jquery.min.js"></script>
<script type="text/javascript" src="/b/js/jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
  $('#container').panelGallery();
});
</script>
<title>Documento sin título</title>
</head>
 
<body>
<!-- --><!-- INICIO MENU 1 -->
  <nav id="menu1"> 
    <ul >
      <li>
        <a href="#">Inicio</a>
      </li>
      <li>
        <a href="#">Quienes Somos</a>
      </li>
      <li>
        <a href="#">Contactenos</a>
      </li>
      <li>
        <a href="#"></a> 
      </li>
      <li>
        <a href="#"></a>
      </li>
  </ul>

  <div class="redsoial">
   <a href=""><img src="/a/images/facebook_color.png"  width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/twitter_color.png" width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/yahoo_color.png"/></a>
  </ul>
  </nav>
<!-- FIN MENU 1 -->

<!-- INICION WRAPPER -->
<section id="wrapper">



<!-- INICIO BANNER -->
<section id="banner">
  
</SECtion>
<!-- FIN BANNER -->

<!-- INICIO MENU -->
<section id="menu">
  
</section>
<!-- FIN MENU -->


</section> <!--FIN SECTION WRAPPER-->
</body>
</html>

css donde dice MAQUETACION WRAPPER DESDE AHI ESTA EL CODIGO DEL MENU

Código:

*{margin:0; padding:0; border:0;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: ;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a
{
	color: #FFFFFF;
	font-family:BebasNeue;
	 font-size: 22px;
    height: 51px;
  /*  text-shadow: 1px 2px black;*/
	text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

@font-face
{
	font-family:BebasNeue;
	font-style:normal;
	font-height:normal;
	src: url(/a/images/BebasNeue.otf);
}


/***************************************************/
/*---  ---*/

/*--- MAQUETACION WRAPPER ---*/
#wrapper
{
	background: #FCFCFC;
	box-shadow:  0px 0px 5px #575757;
	margin: 0 auto;
	overflow: hidden;
	padding: 20px;
	width:960px;
}
/*--- FIN WRAPPER  ---*/

/*--- MENU 1 ---*/
#menu1
{
	background: #06AFE4;
	margin:0 auto;
	max-width: 1000px;
	padding: 5px 0;
}

#menu1 ul li
{
	display: inline-block;
	padding: 10px;
	margin: 0 5px;
}
/*--- FIN MENU 1 ---*/


.postt1{
	background: #B30F2A;
}

.postt2{
 	background: #1C4583;
}

C2am · #2 (**permalink**) 02/01/2014, 23:50

una forma rápida es:

Código CSS:

Ver original.redsoial{
float:right;
}

Seguramente has querido escribir redsocial y no "redsoial", así que fijate como lo escribes en el html, para que no tengas problemas.
Saludos

lordbeliar2010 · #3 (**permalink**) 03/01/2014, 10:23

gracias x tu respuesta

pero no funciona, fue lo primero q ise,

Contac · #4 (**permalink**) 03/01/2014, 10:49

Hola colocar las imagenes al lado derecho del menu tienes que rectificar un par de cosas prueva este código:

Código HTML:

Ver original<body>
<!-- --><!-- INICIO MENU 1 -->
<div class="redsoial">
  <nav id="menu1"> 
    <ul >
      <li>
        <a href="#">Inicio</a>
      </li>
      <li>
        <a href="#">Quienes Somos</a>
      </li>
      <li>
        <a href="#">Contactenos</a>
      </li>
      <li>
        <a href="#"></a> 
      </li>
      <li>
        <a href="#"></a>
      </li>
    
   <a href=""><img src="/a/images/facebook_color.png"  width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/twitter_color.png" width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/yahoo_color.png"/></a>
  </ul>
  </nav>
<!-- FIN MENU 1 -->

lordbeliar2010 · #5 (**permalink**) 03/01/2014, 11:57

gracias CONTAT POR TU RESPUESTA

lordbeliar2010 · #6 (**permalink**) 03/01/2014, 11:58

aqui les dejo el codigo de como lo solucione

Código:

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width"/>
<link href="/a/sty.css"  rel="stylesheet" />
<script type="text/javascript" src="/b/js/jquery.min.js"></script>
<script type="text/javascript" src="/b/js/jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
  $('#container').panelGallery();
});
</script>
<title>Documento sin título</title>
</head>
 
<body>
<!-- --><!-- INICIO MENU 1 -->
  <nav id="menu1"> 
    <ul>
      <li>
        <a href="#">Inicio</a>
      </li>
      <li>
        <a href="#">Quienes Somos</a>
      </li>
      <li>
        <a href="#">Contactenos</a>
      </li>
  </ul>
    <div class="redsocial">
   <a href=""><img src="/a/images/facebook_color.png"  width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/twitter_color.png" width="40" hieght="40"/></a>
   <a href="#"><img src="/a/images/yahoo_color.png"/></a>
  </div>

  </nav>
<!-- FIN MENU 1 -->

<!-- INICION WRAPPER -->
<section id="wrapper">



<!-- INICIO BANNER -->
<section id="banner">
  
</SECtion>
<!-- FIN BANNER -->

<!-- INICIO MENU -->
<section id="menu">
  
</section>
<!-- FIN MENU -->


</section> <!--FIN SECTION WRAPPER-->
</body>
</html>

Código:

*{margin:0; padding:0; border:0;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: ;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a
{
	color: #FFFFFF;
	font-family:BebasNeue;
	 font-size: 22px;
    height: 51px;
    text-shadow: 1px 2px black;
	text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

@font-face
{
	font-family:BebasNeue;
	font-style:normal;
	font-height:normal;
	src: url(/a/images/BebasNeue.otf);
}


/***************************************************/
/*---  ---*/

/*--- MAQUETACION WRAPPER ---*/
#wrapper
{
	background: #FCFCFC;
	box-shadow:  0px 0px 5px #575757;
	margin: 0 auto;
	overflow: hidden;
	padding: 20px;
	width:960px;
}
/*--- FIN WRAPPER  ---*/

/*--- MENU 1 ---*/
#menu1
{
	background: #06AFE4;
	margin:0 auto;
	max-width: 1000px;
overflow: hidden;
	padding: 5px 0;
}
#menu1 ul li
{
	float:left;
	/*display: inline-block;*/
	margin: 0 5px;
	padding: 10px;
}

.redsocial
{
	float: right;
	margin: 0 25px;
}

.redsocial img
{
	padding: 0 10px;	
}

/*--- FIN MENU 1 ---*/


#banner
{
	background: #3399FF ;
	height:300px;
	width:100%;

}


.postt1{
	background: #B30F2A;
}

.postt2{
 	background: #1C4583;
}