Foros del Web - Ver Mensaje Individual - acomodar menu link ala izq e imagen a la derecha?

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;
}