Comunidad de diseño web y desarrollo en internet online

Problema posicionamiento Div

Citar            
MensajeEscrito el 19 Ago 2011 02:17 pm
Hola gente como andan?
Tengo un problemita y es que yo puse en el index de mi web el logo grande en el centro, y le quiero agregar al costado derecho un div chiquito que estén los iconos de Facebook y Twitter.

La verdad que no encuentro la solucion porque se me pone abajo del div del logo.
Lo floté a la derecha pero me queda tambien abajo y al costado del logo, yo quiero que quede a la misma altura del logo.
Subo una imágen de como quiero que sea.




Saludos y gracias!

Por Kombul

35 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Ago 2011 03:17 pm
Sin ver el código fuente relevante al problema, es imposible ayudarte.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 19 Ago 2011 04:20 pm
El código es el sig:

<body>
<header>
<a href="index.html">
<div id="logo">DISEÑO MULTIMEDIA</div></a>
</header>

<div id="social"> Facebook Twitter </div>

<nav><div id="botonera">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="sobremi.html">SOBRE MI</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div> </nav>





<footer> Web diseñada por GUIF ~ Todos los derechos reservados ~ 2011</footer>
</body>


Y el CSS que probé es este:

#social
{
float:right;
text-indent:-9999px;
width:54px;
height:120px;
}

LOGO:

#logo
{
background-image:url(logo2.png);
background-repeat: no-repeat;
background-position: center center;
width:710px;
height:650px;
margin-left: auto;
margin-right:auto;
display:block;
text-indent:-9999px;

}


SALUDOS!

Por Kombul

35 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Ago 2011 10:04 pm
Ok, hay varios errores en tu codigo, intenta el siguiente:


<div id="header">
<div id="logo"><a href=/>DISEÑO MULTIMEDIA</a></div>
<div id="social"> Facebook Twitter </div>

<div id="menu" class="limenu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="sobremi.html">SOBRE MI</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>


</div>



CSS:

#header {
margin-left:auto;
margin-right:auto;
width:1000px;
height:160px;
}
#logo {
width:900px;
float:left;
background:url(logo2.png) nono-repeat 50% 50%;
height: 120px;
}
#social {
float:left;
width:100px;
height:120px;
}
#menu {
float: left;
font-size: 14px;
margin-bottom: 5px;
width: 1000px;
height:40px;
background-color:#06C;
font-family:Arial, Helvetica, sans-serif;
}

#menu ul {
display: inline;
float: left;
margin-left: 0px;

}
#menu li {
margin-left: 0px;
padding-top: 12px;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
}
#menu a {
color: #fff;
margin: 0;
text-decoration: none;
}
#menu a:hover {
color: #333333;
text-decoration: underline;
}

div.limenu ul {
list-style: none outside none;
margin: 0;
padding: 0;
width: 1000px;
height:40px;
}
div.limenu li {
float: left;
list-style-type: none;
padding: 0;
width: auto;
}


Saludos!

Por samSSL

19 de clabLevel



 

Seguridad Web

firefox
Citar            
MensajeEscrito el 22 Ago 2011 12:33 am
Con este código se me vería todo igual pero la barra "Social" donde estarían los iconos de facebook y twitter se me van a ver a la derecha de la pantalla?

Saludos y gracias!

Por Kombul

35 de clabLevel



 

chrome
Citar            
MensajeEscrito el 22 Ago 2011 10:16 pm
porque lo hacen tan complicado? Si quieres centrar el div del logo y quieres el div de twitter y facebook a la misma altura pero a la derecha simplemente hazlo siguente:

Tu logo por ejemplo tiene un tamaño de 500x500px, entonces trata lo siguente

Código HTML :


#logo {
position:absolute;
left:50%;
top:50%;
/* el margin debe ser la mitad del tamaño del imagen de tu logo */
margin:-250px 0 0 -250px;
height:500px;
width:500px;
background:logo.jpg top left no-repeat;
}

#social {
position:absolute;
/* para que sea al lado derecha */
right:0;
/* para que sea en la mitad del logo */
top:50%;
/* si cada uno de tus iconos tiene por ejemplo un tamaño de 50x50px el div tendria un height de 100px y pones la mitad del margin */
margin:-50px 0 0 0;
height:100px;
width:50px;
}


Espero que entiendes como, pero asi tendrias en cualquier resolucion siempre el logo en el centro y los botones en la lado derecha en la misma altura como el logo

Si nececitas mas ayuda escribeme un mensaje :)

Por disenowebmexico

5 de clabLevel



 

Diseño de paginas web

firefox
Citar            
MensajeEscrito el 23 Ago 2011 12:06 am
Buenisimo "diseñowebmexico".
Cuaqluier cosa te pregunto!

saludos.

Por Kombul

35 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.