3 horas (REALES) batallando en algo simple y estupido.

cpucpu · #1 (**permalink**) 30/10/2007, 02:15

ASI ES.
mas de 3 horas batallando en algo extramente simple y estupido, que NO TENGO LA MENOR IDEA DE POR QUE NO PUEDO HACERLO. Se trata de un simple texto con dos backgrounds.
NO SE SI NO PUDO HACERLO POR QUE ESTOY CANSADO O POR QUE ES NOCHE, NO PUEDO EXPLICARLO, PERO NO ME HA SALIDO HSTA AHORA.

la idea es...

...hacer un boton, que se redimensione segun sus caracteres, si se fijan en la imagen dice "enlaceMenu"..eso seria el texto del boton.
Su 1er background seria lo negro
su 2do background seria lo naranja

el CSS:

Código:

body {  
    margin:0;
    padding:0; 
    margin:0 auto;
    text-align:center;

    }

.enlaceMenu{
    margin:0px;
    padding:0px;
    border: 4px solid #fff;
    background-color:#000;    
    height:20em;
}

.enlaceMenu .texto{

    color:#444;
    font: 18px tahoma, arial;
    margin:10px;
    padding:10px;
    height:20em;
    }

.enlaceMenu .linea{
    display:block;
    margin:0; padding:0;
    width:100px;
    background-color:#F48511;
    height:10px;
    border-color:#000;
    border:0px none red;
    }

donde .texto=texto, .linea=linea naranja

el problema:
1.-no se por que @#$%^ no puedo evitar que lo naranja herede el "borde"
2.- no se como hacer que lo naranja este al 100% del ancho de background negro (intente con 100%, pero eso me dio el acho de pantalla)

No se alguien pueda ayudarme aqui, creo que es sencillo, sino no preguntaria, saludos.
PD:si yo leyera este mensaje pensaria que quien lo escribio es un idiota, pero despues de crebarme la cabeza, con algo tan simple, mejor pregunto, no seta de mas, gracias.

PatomaS · #2 (**permalink**) 30/10/2007, 07:48

Hola

Bueno, veamos, no me queda muy claro lo que quieres al menos en la parte visual, ¿sería algo así?

-----------------
|#########|
|==texto===|
|#########|
-----------------

donde:
# --> negro
= --> naranja

¿Es así o de otra forma? SI es otra forma, ¿podrías diagramar lo qué quieres o pegar una imagen hecha con un programa de imagen?.

Felicidad

deet · #3 (**permalink**) 30/10/2007, 12:59

aquí le hice un par de cambios a tu hoja de estilos, funciona tanto en i.e como en f.f.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>TITLE_PAGE</title> 
<style type="text/css"> 
#enlace{ 
    margin:0px; 
    padding:0px; 
    border: 4px solid #666; 
    background-color:#000;  
    width:200px; 
} 
#texto{ 
    color:#444; 
    font: 18px tahoma, arial; 
    height:20px; 
    margin:10px; 
} 
#linea{ 
    display:block; 
    margin:0; padding:0; 
    width:100px; 
    background-color:#F48511; 
    height:10px; 
    width:100%; 
} 
</style> 
</head> 
 
<body> 
<div id="enlace"> 
<div id="texto">enlaceTexto</div> 
<div id="linea"></div> 
</div> 
 
</body> 
</html>

cpucpu · #4 (**permalink**) 31/10/2007, 00:29

gracias a ambos por responder.

lo que quiero hacer es similar a esto:

visualmente "igual" a lo que quiero hacer, de hecho esa es la imagen generada por el codigo del companero deet.

solo que ya detecte UN problema:
en el codigo proporcionado por deet, al igual que en alguno de los que yo hice (de los tantos que probe), ...y siguiendo tal linea de codigo(la de deet) por estar mas organizada:

- en #texto, no funciona el margin con display:inline ; (no se por que), display el cual es necesario para que el ancho se adapte al texto +margin y/o padding, sin tener que especificarlo en #enlace.
Digo que no funciona por que el formato se pierde

Basicamente creo que los display's deberian ser todos inline, por que:
A)#texto determinaria el ancho, el suyo y el de su padre #enlace
B)#linea se adaptaria al ancho de su hermano #texto
C)se permitiiria a otros elementos al lado de #enlace, como por ejemplo, otros enlaces en el mismo renglon..

ademas de que creo que se empieza a perder el formato grafico si los display's son inline.

sigo al pendiente, y continuo revisando el codigo, saludos.

cpucpu · #5 (**permalink**) 31/10/2007, 00:39

ya probe declarar a todos con display:inline, da problemas el border, y se pierde por completo la linea naranaja. asi es, el formato grafico se pierde.

Se me ocurre insertar un <p> entre div(display inline) #texto y div(display inline) #linea....para mantenerlos en diferentes renglones.
O posicionar a la linea naranja absolutamente con bottom:0; para que quede hasta bajo sin importar la altura de #enlace.

Creo que van quedando un poco mas claro las caracteristicas.

PatomaS · #6 (**permalink**) 31/10/2007, 02:23

Hola

Puede que me esté faltando algo por leer o por pillar de la idea porque no vi la complicación ni entendí bien tus comentarios sobre el código de Deet.

En cualquier caso, aquí dejo un ejemplillo sencillo de lo que interpreté, posiblemente no sea lo que buscas, pero a partir de ahí puede que nos logremos entender.

Código:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #fff; }
		#Base { width: 100%; height: 100%; background-color: #fff;}
		#capaBoton {background: #000; width: 200px; height: 90px; border: 5px solid #aaa; text-align: center;}
		#boton {position: relative; top: 10px; background: inherit; color: #ccc; cursor: pointer; padding: 0 20%;}
		#franja {position: relative; top: 50px; height: 20px; background: #F48511;}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<div id="capaBoton">
		<button type="submit" id="boton">Texto del botón</button>
		<p id="franja">&nbsp;</p>
	</div>
</div>
</body>
</html>

Coloqué el vínculo como un botón porque cuando lo leí la primera vez pensé que era lo que querías. En cualquier caso, los vínculos también son elementos inline, por lo que comparten la mayoría de las características con button.

La altura de la capa, la franja y el área del botón (enlace), es totalmente controlable.

Las dimensiones del texto también son controlables.

Puse un padding de 20% a los lados para aumentar la zona activa, sin embargo, puede ser de cualquier dimensión que desees mientras no supere el ancho del botón. Probado con frases de 2 a 25 caracteres. Obviamente si esperas más caracteres que esos, basta con reducir el padding.

Bueno, ya nos dirás.

Felicidad

cpucpu · #7 (**permalink**) 31/10/2007, 12:02

me referia a que queria continuar desarrollando el codigo de deet, por que estaba mas organizado que el que yo puse. Y de acuerdo a eso, hise algunos comentarios del codigo que el propuso, y de los problemas que daba.

Cita:

Coloqué el vínculo como un botón porque cuando lo leí la primera vez pensé que era lo que querías. En cualquier caso, los vínculos también son elementos inline, por lo que comparten la mayoría de las características con button.

va a ser anchor, como dices en si no importa, con que sea inline es suficiente.

ya estoy revisando lo que escribiste, saludos.

cpucpu · #8 (**permalink**) 31/10/2007, 12:24

que tal,
bueno, unas de las razones por la que no pude realizar este codigo (y una de las razones por las que pedi ayuda), esra por que no queria sepepecificar el ancho del boton.

Cita:

la idea es...

...hacer un boton, que se redimensione segun sus caracteres,

el texto es quien define el ancho.

Código:

#Base { width: 200px; height: 100%; background-color: #fff;}

imaginemos este escenario:
tengo un texto que tiene un background, sin importar cuanto escriba, este texto se va a mantaner a la misma distancia del background, de acuerdo a su padding (o margin, depende de como se haya maquetado)

eso es similar a lo que intentaba hacer, solo que existiria una franja naranja.
Lo que hise yo fue meter al texto dentro de un span, y luego meter dos span's
el 1ro era el background, los hijos eran: el texto y la linea.
El problema no se cual fue, solo que no me funciono.

Y QUEDE CERCA:

solo que .linea hereda border, y no respeta el BORDER:0; ...BORDER:NONE;
y no funciona su display:inline; ....ademas de que le especifico el ancho, por que siendo block widht:100%; es igual al ancho de pantalla

cpucpu · #9 (**permalink**) 01/11/2007, 01:08

creo que PatomaS tenia razon,
al parecer no se puede especificar al acnho de un elemento inline, por ende la linea naranja no podria estar al 100% de su span padre por que no se podria especificar

, ademas de que su span padre tambie deberia serde bloque para limitar el 100% (a determinado numero de pixeles por ejempo, y noi al ancho de pantalla por defecto)

Tal vez lo que me proponia no era "simple y estupido", sino mas bien imposible a modo diseño css puro., por ejemplo, para solucionar esto, la linea naranja sera parte del background del texto (uma imagen con repeat-x)

Si estoy en lo correcto cofirmar, si existe algun comentario extra, adelante.