Problema para dar espacio entre divs

kraxxis · #1 (**permalink**) 21/01/2013, 20:33

Saludos.

Estoy haciendo una "web" para ir practicando las cosas que voy aprendiendo y me he encontrado un problema.

Mi idea es tener un div contenedor que tenga un tamaño de 960x1024 por ejemplo y con fondo transparente, y dentro de este ir solapando el resto de divs que tienen una anchura de 940 por lo que se queda el borde transparente del div contenedor.

El problema es que el 1º div se me queda pegado al div contenedor y no hay manera de hacerle bajar xD

Os pongo foto, código html y css.

Cita:

<body>

<div id="container">

<div id="menubarrasup" >

<div id="headerlogo">
<img src="D:\Proyectos Páginas Web\Web proyecto\Proyecto logo.png" </img>
</div>

<div>
<table cellpadding="10px" align="center" frame="void" bordercolordark="#FF9900" bordercolor="#FFFFFF" bordercolorlight="#FF0000">

<tr>
<td><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">Inicio</a></td>
<td><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">|     ¿Quienes somos?</a></td>
<td><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">|     Nuestros productos</a></td>
<td><a class="linkweb" href="D:/Proyectos%20P%E1ginas%20Web/Web%20proyecto/Web.html">|     Contact</a></td>
</tr>
</table>
</div> <br>

</div>

</div>

</body>

Cita:

@charset "utf-8";
/* CSS Document */

body{background:#08080F url(FondoCabecera3.jpg) center top no-repeat;color:#EEEEEE;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;margin-top:20px;padding:0px;}

#container {background: rgba(255,255,255,0.2); margin-left:auto; margin-right:auto; width:960px; height:1024px; margin-top:290px; }

#menubarrasup { background:#333333; width:930px; height:218px; margin-left:auto; margin-right:auto;}

#headerlogo { text-align:center;}

.linkweb:link {color:#FF8000; text-decoration:none}
.linkweb:visited {color:#FF8000;}
.linkweb:hover {color:#FA0C12;}
.linkweb:active {color:Silver;}

Pongo el código como "Quote" para que tenga más anchura y sea más facil leerlo.

Como veis está el div contenedor, y luego hay un div que contiene dos divs más, este si respeta el espacio a los lados, pero no consigo que deje espacio en la parte superior.

La idea es hacer esto: http://hispasolutions.com/index.php?route=common/home

Si os fijais el bloque superior tiene un espacio del div contenedor por los cuatros lados.

Espero haberme explicado bien xD

pzin · #2 (**permalink**) 22/01/2013, 04:17

Sería más fácil, todo, si en vez de hacer lo que haces, pones un borde de 10 pixeles a div#container de color transparente usando rgba().

Así te ahorras centrar cada cosa y el borde siempre va a aparecer.

Código CSS:

Ver originaldiv#container {
  width: 940px;
  border: 10px solid rgba(255,255,255,.3);
}

El ancho serían 940 porque luego sumas 10 a cada lado del borde.

Si lo quieres hacer como lo haces, bastaría con que añadieras un padding al contenedor.

Código CSS:

Ver originaldiv#container {
  padding-top: 10px;
}

Poner el código con code o preferiblemente highlight es más útil que hacerlo en bloques de cita.

willycarp · #3 (**permalink**) 22/01/2013, 06:23

Hola Kraxxis!
Primero que nada te contesto tu pregunta... te conviene darle un padding como te menciona Bonez!

Ahora te queria dar un consejo... veo que tu menu lo haces mediante una tabla! eso no es para nada recomendado! menos si sabes utilizar divs y css!

Ese menu, tal cual lo hiciste, lo podes armar con una lista desordenada y dandole el aspecto con css...

<ul>

<li>inicio</li>
<li class="separador"> | </li>
<li>¿quienes somos</li>
<li class="separador"> | </li>
<li>nuestros productos</li>
<li class="separador"> | </li>
<li>contacto</li>

</ul>

Despues lo que tenes que hacer es en css crear una clase .separador y darle x ej un padding left y right de 12px (para que separe las | de las palabras), tmb le podes dar el color que queres, etc...
Y tmb en css le das los estilos a los links (yo en el codigo, que te armé rapido xq estoy en el laburo, no te pongo los links, sino que te puse directamente la etiqueta li y la palabra del boton como por ej Inicio), vos tendrias que agregarle el <a href> etc...

Espero no haberte mareado... si no te queda claro avisame y cuando llego a casa te armo bien el codigo y te lo paso!! pero de verdad, no te recomiendo para nada hacer ese menu en una tabla!!!!

Saludos!!!

pzin · #4 (**permalink**) 22/01/2013, 07:04

Cita:

Iniciado por willycarp

Código HTML:

Ver original<ul>
<li>inicio</li>
<li class="separador"> | </li>
<li>¿quienes somos</li>
<li class="separador"> | </li>
<li>nuestros productos</li>
<li class="separador"> | </li>
<li>contacto</li>
</ul>

Código con code o highlight. No es tan difícil.

Aunque no tenga nada que ver con la pregunta tu respuesta, te responderé a tu respuesta con otra respuesta que nada tiene que ver con la pregunta.

Eso de meter nuevos elementos para hacer de separadores, ya lo hemos superado. Pero ya que lo haces, no debería de ser un elemento de la lista. No es semántico. Y lo no semántico también se superó hace aún más tiempo. En caso de hacerlo así, casi que mejor usar un span dentro de li.

Pero ya digo, superamos el añadir elementos supérfluos, entonces nada mejor que usar pseudoelementos como ::before y ::after y pseudoclases del tipo :last-child.

Con lo que con un HTML así:

Código HTML:

Ver original<ul>
  <li></li>
  <li></li>
</ul>

Y un css así:

Código CSS:

Ver originalli::after{
  content: "|";
}
 
li:last-child::after {
  content: none;
}

Obtenemos la misma cosa, semánticamente correcta y mucho más limpia y simplificada.

kraxxis · #5 (**permalink**) 22/01/2013, 08:32

Ok, todo resuelto, efectivamente era el padding lo que me faltaba, fallo mio porque yo lo que intentaba era poner el paddíng en el div que va dentro del conetenedor xD

Y en cuanto a lo otro, me lo miro tranquilamente porque a priori no lo entiendo xD

Bonez he probado lo que has puesto, pero la lista lo que hace es ordenar en lista:

Inicio
Quienes somos
Productos
Contacta

Mientras yo lo quiero en horizontal todo como se ve en la magen que puse, por eso lo hice con tabla.

willycarp · #6 (**permalink**) 22/01/2013, 09:26

Bonez... la verdad q lo aprendi con un videotutorial y no conocia eso q pusiste! segun veo si es mucho mas simple... lo voy a probar a ver que tal! desde ya muchas gracias

Kraxxis para eso o podes poner q flote a la izquierda o sino le pones display inline y ahi te va a poner uno al lado del otro!!

willycarp · #7 (**permalink**) 22/01/2013, 14:35

Bonez, lo acabo de probar! la verdad q me funcionó de 10 y realmente es muy simple! te agradezco mucho... todos los dias se aprende algo nuevo!