[SOLUCIONADO] Problema con cajas flotantes

[Triby2]

Wenas a todos!

Esto es lo que tengo:


Mi objetivo es poner todo el menú en línea y la palabra "Presupuesto" sobre el Fondo semitransparente rojo.

Aquí está el código HTML:

Código HTML:

<div id="crystal" class="shadow">
   <div id="head_wrap">
       <div id="logo"></div>
       <div id="titulo">Titulo<p>Slogan</p></div>
       <div id="menu">
           <div id="boton"><a href="#">Inicio</a></div>
           <div id="boton"><a href="#">La Empresa</a></div>
           <div id="boton"><a href="#">Servicios</a></div>
           <div id="boton"><a href="#">Contacto</a></div>
              <div class="cotizar tamano">Presupuesto</div>
              <div class="fondo tamano trans"></div>
      </div>
   </div>
</div>
 

Y el css responsable de todo eso:

Código CSS:

#head_wrap {
    position: relative;
    top: 7px;
    left: 7px;
}
 
#crystal { 
    position: relative;
    background: url(../images/crystal3.png);
    border-top-left-radius: 45px 27%;
    border-bottom-right-radius: 45px 27%; 
    height: 117px;
    width: 100%;
}
 
.shadow {
    box-shadow: #333 0px 1px 1px 1px;
    -webkit-box-shadow: #333 0px 1px 1px 1px;
    -moz-webkit-box-shadow: #333 0px 1px 1px 1px;
    -o-webkit-box-shadow: #333 0px 1px 1px 1px; 
}
 
#logo {
    background: url(../images/logo_trans_p.png) no-repeat;
    float: left;
    height: 103px;
    width: 70px;
}
 
#titulo {
    color: white;
    font-size: 35px;
    float: left;
    padding: 0px 10px;
    height: 70px;
    width: 88%;
}
    #titulo p {
        margin: 0;
        padding: 0px 120px;
        font-size: 20px;
    }
 
#menu {
    background: rgba(77,76,77,1);
    background: -moz-linear-gradient(left, rgba(77,76,77,1) 0%, rgba(245,245,245,0.1) 70%, rgba(245,245,245,0) 78%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(77,76,77,1)), color-stop(70%, rgba(245,245,245,0.1)), color-stop(78%, rgba(245,245,245,0)));
    background: -webkit-linear-gradient(left, rgba(77,76,77,1) 0%, rgba(245,245,245,0.1) 70%, rgba(245,245,245,0) 78%);
    background: -o-linear-gradient(left, rgba(77,76,77,1) 0%, rgba(245,245,245,0.1) 70%, rgba(245,245,245,0) 78%);
    background: -ms-linear-gradient(left, rgba(77,76,77,1) 0%, rgba(245,245,245,0.1) 70%, rgba(245,245,245,0) 78%);
    background: linear-gradient(to right, rgba(77,76,77,1) 0%, rgba(245,245,245,0.1) 70%, rgba(245,245,245,0) 78%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4c4d', endColorstr='#f5f5f5', GradientType=1 );
    position: relative;
    float: left;
    margin-left: 5px;
    height: 30px;
    width: 88.5%;
}
 
#menu a { color: white; text-decoration: none; }
 
#boton {
    float: left;
    text-align: center;
    padding: 5px;   
    width: 15%; 
    transition-duration: 0.2s;
}
 
#boton_r {
    position: absolute;
    bottom: 0px;
    text-align: center;
    padding: 5px;   
    width: 15%; 
}
 
.cotizar {
    background-color: transparent;
    color: #FFF;
    float: right;
    text-align: center; 
    z-index: 1;
}
 
.fondo {
    background-color: red;
    border-bottom-right-radius: 100px 80px;
    margin: 0;
    float: right;
}
 
.tamano { height: 100%; width: 200px; }
.trans { opacity: 0.5; }
 

Me es imposible dar con el código correcto para dejarlo como yo quiero...

[Triby2]

No entiendo por qué no se ve la imagen.. el link no está roto con lo cual si clicais con el botón derecho y poneis que la abra en una nueva ventana, vereis la imagen.

Perdonad!!

[C2am]

No entiendo porque flotas el fondo, y no lo posiciona en forma absoluta.

Código CSS:

.fondo {
    background-color: red;
    border-bottom-right-radius: 100px 80px;
    position:absolute;
    right:0;  
}
 

http://jsfiddle.net/c2am/9aKv4/4/embedded/result/

[Triby2]

Iniciado por C2am

No entiendo porque flotas el fondo, y no lo posiciona en forma absoluta.

Código CSS:

.fondo {
    background-color: red;
    border-bottom-right-radius: 100px 80px;
    position:absolute;
    right:0;  
}
 

[url]http://jsfiddle.net/c2am/9aKv4/4/embedded/result/[/url]

Pues pq si lo hago de forma absoluta le tengo que especificar la posición en que la quiero (left, top) y no me interesa pq quiero que se mantenga su posición si se hace un redimensionamiento de pantalla o bien una resolución mas chica...

Me equivoco?

AÑADIDO: lo acabo de probar y se me pone al principio de la barra de menú, tiene que aparecer al final, por eso le puse que flotara a la derecha.

[C2am]

Entiendo, ¿y si pones ese fondo directamente en el div contenedor de la palabra Presupuesto?
¿por qué lo separas?

[Triby2]

Iniciado por C2am

Entiendo, ¿y si pones ese fondo directamente en el div contenedor de la palabra Presupuesto?
¿por qué lo separas?

Lo separo para que la propiedad de opacidad de la clase "trans" no afecte al texto. Si lo hago como tu dices, el texto hereda la opacidad, de esta forma mantiene la opacidad el texto sobre fondo transparente.

Eso mismo lo tengo hecho en otra web, pero aquí no consigo que funcione al haber tantas etiqutas dentro de la etiqueta "menu".

[Triby2]

Lo que jsfiddle muestra:


Ok, no había visto que le habías añadido la posición 0 a right. Me queda bien, ya conseguí poner la palabra donde quería, el problema ahora que no entiendo por que hereda la opacidad si la etiqueta que la tiene asignada es diferente.

Como aquí: http://rctorr.wordpress.com/2011/12/29/texto-opaco-sobre-fondo-semi-transparente-con-css/

[pzin]

Bienvenido al foro.

Iniciado por Triby2

Lo separo para que la propiedad de opacidad de la clase "trans" no afecte al texto. Si lo hago como tu dices, el texto hereda la opacidad, de esta forma mantiene la opacidad el texto sobre fondo transparente.

Si es para un color de fondo puedes obviar el uso de opacity en favor de rgba() o hsla(). Ambas funciones tienen un canal de transparencia.

Código CSS:

div.cotizar.tamano {
  background-color: rgba(255,0,0,0.5);
}
 

Así simplemente tienes un elemento con un color de fondo transparente.

Ya no tiene que ver con tu problema, pero no estaría mal que no usaras identificadores de forma repetitiva, ya que sólo debería de haber un único identificador. Si necesitas usarlo varias veces entonces debes de usar clases. Y por cuestión de semántica, usar una lista ul para el menú, ya que es una lista de enlaces lo que tienes ahí.

[Triby2]

Iniciado por pzin

Así simplemente tienes un elemento con un color de fondo transparente.

Wow!!! como se complica la peña por ahi para hacer eso mismo (que es como lo estaba haciendo yo) me he ahorrado unas cuantas lineas de código en html y css.

Iniciado por pzin

Ya no tiene que ver con tu problema, pero no estaría mal que no usaras identificadores de forma repetitiva, ya que sólo debería de haber un único identificador. Si necesitas usarlo varias veces entonces debes de usar clases. Y por cuestión de semántica, usar una lista ul para el menú, ya que es una lista de enlaces lo que tienes ahí.

Disculpame pero me he perdido!! ¿usar identificadores de forma repetitiva? Aún no sé usar clases en css... Bueno.. ahora que caigo.. ¿por clases te refieres al parámetro class=""? Que diferencia hay entre ponerlos en id o en class?

[pzin]

Iniciado por Triby2

Que diferencia hay entre ponerlos en id o en class?

Un identificador es un elemento único y no puede repetirse en el HTML. Una clase en cambio si. Por lo que tus id="boton" deberían de ser class="boton".

[Triby2]

Iniciado por pzin

Un identificador es un elemento único y no puede repetirse en el HTML. Una clase en cambio si. Por lo que tus id="boton" deberían de ser class="boton".

Ok...

Ahora supongamos que cada botón tiene un color de fondo distinto.

Como lo harías tú? ya que si no me lo dices yo haría

Código HTML:

<div id="boton" class="blanco"></div>
<div id="boton" class="rojo"></div>
<div id="boton" class="azul"></div>
<div id="boton" class="amarillo"></div>
<div id="boton" class="violeta"></div>
 

Cuando aprendí a utilizar CSS es como entendí que se debían de utilizar pero obviamente si es incorrecto quisiera saber cómo hacerlo de manera correcta ya que para mi el identificado es, llamemoslo objeto, con el que trabajo con lo cual tiene unas características para tal fin y después hay variantes en este caso en color de fondo y utilizaría las clases pues para diferenciar cada uno. Eso es como lo planteo yo cuando diseño pero desearía saber como lo planteas tú.

[Zeromm]

Iniciado por pzin

Un identificador es un elemento único y no puede repetirse en el HTML. Una clase en cambio si. Por lo que tus id="boton" deberían de ser class="boton".

Bueno, es casi cierto, pero no del todo.

Un ID si que puede repetirse en el HTML. Y por "si que puede" me refiero a que puedes meter cinco ids con el mismo nombre y aplicarles estilo como si fueran una clase, que su funcionamiento va a seguir siendo funcional en una web sencilla y va a actuar igual que una clase, y no por repetirse no va a cojer los estilos que se le apliquen... otra cosa distinta es que se deba usar de esa forma, que no se debe, ya que para eso están las clases

[pzin]

Iniciado por Triby2

Ahora supongamos que cada botón tiene un color de fondo distinto.

Puedes poner tantas clases a un elemento como necesites:

Código HTML:

<div class="boton blanco"></div>
<div class="boton rojo"></div>
<div class="boton azul"></div>
<div class="boton amarillo"></div>
<div class="boton violeta"></div>
 

[Triby2]

Ok, perfecto! Así lo haré! Mi gran duda es la siguiente:

¿Para qué sirve entonces ponerle un "id" a los elementos?

[pzin]

Iniciado por Triby2

¿Para qué sirve entonces ponerle un "id" a los elementos

Para IDentificarlos.

http://librosweb.es/css/capitulo_13/...sobre_css.html

[Triby2]

Ok, lo estudiaré y lo implementaré a mis diseños. Grácias por el aporte.