Foros del Web » Creando para Internet » CSS »

Como hago para poner dos fondos abajo de mi menu del top

 Estas en el tema de Como hago para poner dos fondos abajo de mi menu del top en el foro de CSS en Foros del Web. Hola, la web es: www.megalbum.com Esto lo estoy haciendo localmente en mi pc: http://oi42.tinypic.com/1juq1f.jpg Una barra totalmente arriba para mostrar mensajes y esas cosas. No ...
  #1 (permalink)  
Antiguo 05/03/2012, 20:36
RGT
Usuario no validado
  
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 15 años, 5 meses
Puntos: 5
Como hago para poner dos fondos abajo de mi menu del top
Hola, la web es:
www.megalbum.com

Esto lo estoy haciendo localmente en mi pc:
http://oi42.tinypic.com/1juq1f.jpg

Una barra totalmente arriba para mostrar mensajes y esas cosas.

No logro hacer que quede arriba del fondo azul.

En css tengo:
Código: 
body {
	background:#fff url("dark/bg.jpg") repeat-x;
}
Y de codigo tengo esto:
Código: 
<body>

<div class="topbar">
<div class="topbar-inner">
	<div class="container2">
		<a class="brand" href="http://orangepeelstudios.com/socialcron-facebook/">Socialcron for Facebook</a>
				<div class="pull-right" style="padding-top:5px;">
			<a href="http://codecanyon.net/item/socialcron-for-facebook-schedule-your-updates/1538699?ref=orangepeeled" target="_blank" class="btn success" title="Buy now from CodeCanyon">Buy now from <b>CodeCanyon</b></a>
			<a href="http://orangepeelstudios.com/socialcron-facebook/signin" class="btn primary" title="Sign in with Facebook">Sign in with <b>Facebook</b></a>

		</div>
			</div>
</div>
</div>

<div class="wrapper" id="top-header">
El id="top-header" muestra el segundo fondo azul que esta en el medio.

Intente poner los fondos azules en otro div para que la barra negra se vea arriba pero no me sale, no logro hacerlo, alguna idea?
  #2 (permalink)  
Antiguo 06/03/2012, 06:05
 
Fecha de Ingreso: octubre-2009
Ubicación: Argentina
Mensajes: 21
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Como hago para poner dos fondos abajo de mi menu del top
Tenes que bajar la imagen de fondo, proba asi:

Código: 
body {
	background:#fff url("dark/bg.jpg") repeat-x 0 32px;
}
  #3 (permalink)  
Antiguo 06/03/2012, 07:56
RGT
Usuario no validado
  
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 15 años, 5 meses
Puntos: 5
Respuesta: Como hago para poner dos fondos abajo de mi menu del top
Hola, te comento que con eso el fondo baja pero, no baja el logo, el buscador ni el menu.
Necesito bajar todo para que la barra quede arriba.

El problema es que tengo el fondo en body en el css y necesito crear div despues de body para poder poner la barra arriba de ese div. No se como hacerlo.
  #4 (permalink)  
Antiguo 06/03/2012, 08:19
 
Fecha de Ingreso: octubre-2009
Ubicación: Argentina
Mensajes: 21
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Como hago para poner dos fondos abajo de mi menu del top
En la captura que mostraste, el logo y buscador estan abajo menos el fondo, con el cambio este el fondo baja, hasta ahi entiendo, mostra otra captura con el nuevo problema que tenes porque con poca info no puedo ayudarte.
  #5 (permalink)  
Antiguo 06/03/2012, 08:54
RGT
Usuario no validado
  
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 15 años, 5 meses
Puntos: 5
Respuesta: Como hago para poner dos fondos abajo de mi menu del top
Ok, explicaré mejor.

Tengo esto:
http://www.megalbum.com/

Localmente estoy diseñando una barra para poder menus en el top de la web.
El problema es que quiero que la barra se muestre primero y luego el fondo azul con el logo y esas cosas.

Otro punto es que, encima del fondo azul, tengo otro fondo azul de diferente tono, aqui te los muestro:
http://www.megalbum.com/wp-content/t...ns/dark/bg.jpg
http://www.megalbum.com/wp-content/t...ark/header.jpg

Ahora bien, localmente estoy haciendo la barra que quiero y hasta ahora tengo esto en header.php:

Código: 
<body>

<div class="topbar">
<div class="topbar-inner">
	<div class="container2">
		<a class="brand" href="#">Socialcron for Facebook</a>
				<div class="pull-right" style="padding-top:5px;">
			<a href="#" target="_blank" class="btn success" title="Buy now from CodeCanyon">Buy now from <b>CodeCanyon</b></a>
			<a href="#" class="btn primary" title="Sign in with Facebook">Sign in with <b>Facebook</b></a>

		</div>
			</div>
</div>
</div>

<div class="wrapper" id="top-header">
Y en el css tengo para el body esto:
Código: 
body {
	background:#fff url("dark/bg.jpg") repeat-x;
}
Hay vamos claro?.

Ya que el codigo de la barra esta despues de <body>, la barra siempre se mostrara encima del fondo azul.

La solución es, creo, poner el fondo azul en otro div, ejemplo algo asi:

Código: 
<body>

<div class="topbar">
<div class="topbar-inner">
	<div class="container2">
		<a class="brand" href="http://orangepeelstudios.com/socialcron-facebook/">Socialcron for Facebook</a>
				<div class="pull-right" style="padding-top:5px;">
			<a href="http://codecanyon.net/item/socialcron-for-facebook-schedule-your-updates/1538699?ref=orangepeeled" target="_blank" class="btn success" title="Buy now from CodeCanyon">Buy now from <b>CodeCanyon</b></a>
			<a href="http://orangepeelstudios.com/socialcron-facebook/signin" class="btn primary" title="Sign in with Facebook">Sign in with <b>Facebook</b></a>

		</div>
			</div>
</div>
</div>

<div id="fondo azul" class="segundo fondo azul">
<div class="wrapper">
Con eso se logra que la barra quede primero que todo.

Ahora mi problema es, pongo esos divs pero el fondo azul no me sale, y tampoco el segundo fondo azul.

Espero que me halla explicado.
  #6 (permalink)  
Antiguo 06/03/2012, 15:20
 
Fecha de Ingreso: octubre-2009
Ubicación: Argentina
Mensajes: 21
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Como hago para poner dos fondos abajo de mi menu del top
habria que ver que estilos tiene la clase "topbar", puedes crear una pagina de prueba con estos cambios asi viendo el codigo te digo como arreglarlo.

saludos
  #7 (permalink)  
Antiguo 06/03/2012, 18:46
RGT
Usuario no validado
  
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 15 años, 5 meses
Puntos: 5
Respuesta: Como hago para poner dos fondos abajo de mi menu del top
Código: 
.container2 {
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  zoom: 1;

}
.topbar {
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  overflow: visible;
}
.topbar a {
  color: #bfbfbf;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.topbar-inner {
  background-color: #222;
  background-color: #222222;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  
}
.topbar .brand:hover {
  background-color: #333;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  text-decoration: none;
}
.topbar .brand {
  float: left;
  display: block;
  padding: 8px 20px 12px;
  margin-left: -20px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 200;
  line-height: 1;
}
.btn {
  cursor: pointer;
  display: inline-block;
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  padding: 5px 14px 6px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #333;
  font-size: 13px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  -ms-transition: 0.1s linear all;
  -o-transition: 0.1s linear all;
  transition: 0.1s linear all;
}
.btn:hover {
  background-position: 0 -15px;
  color: #333;
  text-decoration: none;
}
.btn:focus {
  outline: 1px dotted #666;
}
.btn.primary {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success {
  color: #ffffff;
  background-color: #57a957;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
Ese es el css que tengo hermano.

Etiquetas: abajo, top, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:55.