Toi sesperao ;) css
Yo ya lo tenia to bonito y preparaeetteeeee y ahora quiero añadir una cozita pezqueñita pezqueñita pezqueñita ... pues eso toa la mañana :(
Si lanzais este html ... ... haber si me podeis dar una luz ... ;)
<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>abrakadabra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
border: 1px solid Black;
margin: 4px;
padding: 4px;
width: 100px;
height: 100Px;
}
/* #conArr {
border: none;
width: 600px;
height: 108px;
} */
label {
display: inline;
border: 1px solid Black;
padding: 4px;
width: 180px;
height: 20Px;
clear: right;
}
.d1 {
float: right;
}
#d1a {
height: 20Px;
}
.d3 {
display: inline;
width: 150px;
height: 20Px;
/* float: right; */
margin: 0Px;
}
#d4 {
margin-top: 0px;
width: 600px;
height: 400Px;
}
#contenedor{
width: 610px;
height: 500Px;
}
</style>
</head>
<body>
<div id="contenedor">
<!-- <div id="conArr"> // Como clear rigth del label es insalvabel pruebo meter un div contenedor de la parte de arriba. Pero Tampoco -->
<div class="d1">bloke I</div>
<div class="d1">bloke II</div>
<div class="d1">bloke III</div>
<div id="d1a" class="d1" > bloke IV</div>
<!-- </div> -->
<label class="d2">label V. Elemento inline</label>
<div class="d3">bloke VI(Como inline)</div>
<div id="d4">bloke VII</div>
</div>
</body>
</html>
</code>
Lo que quiero conseguir es que "V" este a la izquierda (como está ahora) y "VI" se posicione desde la derecha.
El problema que me encuentro es que al float VI, V sale de su linea ya que tiene un clear para evitar a los elementos superiores.
También he intentado meter en un contenedor a los elementos de arriba (como vereis en el codigo desactivado), de ese modo he probado no usar clerar en el V, pero entonces no se porque se me comporta como elemento de bloque (aunque sea inline y aunque se lo especifique). Le he dao mil vueltas y toy taskao ya ... seguro que es una chorrada... :?
gracias :D
lute3d
pues no me ha dado mucho tiempo a revisarlo, pero te puedo
decir un par posibles cosillas a cambiar...
lo más tonto este:
<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> </code>
lo más 'crítical' este:
no puedes poner como nombre elemento, pseudoelemento, class etc, un número. Opera y Firebox destrozan el layout...
espero que puedan ir por ahí los tiros!!
un saludo!
editado:
que se me ha olvidado decirte, he probado con distintos navegadores,
solo se ve como tu quieres en el ie 5.0 de hay para arriba y en otros hay
distintos grados de 'degradación', hasta llegar a firebox que descuangeringa todo...
iigeminisii
Hombre gracias ... pero no ... no es eso ... :D lo que ocurre es que he creado un html-ejemplo para esquematizar y resumir lo que me ocurre al foro. Es cierto que deberia haber desestimado lo de los números. Pero no es ese el problema ... ahora lo cambio por si alguien lo ve con otro navegador ... :D gracias de nuevo
txuma Plus
Es viernes, lo sé.... pero no he entendido muy bien tu explicación. ¿podrías poner un ejemplo de lo que quieres, aunque sea en plan imagencilla de photoshop?
Salu2
iigeminisii
Más ejemplo que el codigo que he puesto. :D
Copialo y pastealo en el "notePad" o en el "DW" o donde gustes y veras el ejemplo ... si lo quieres en potosop si quieres te hago una captura de patalla pero mejor que el codikiki no hay na ... ;)
orange
Si te digo la verdad no he buceado "en las profundidades" del código ... pero tienes un error gordo, al menos para navegadores que respeten los estandares ...
NO se puede definir el valor "width" para elementos declarados "inline", ya que contradice la propia naturaleza del elemento (que es mostrarse en linea, es decir a continuación de lo que haya)
Por eso el Firefox te lo joroba más que los demás (ya que IE6 se come la propiedad)
Yo estoy con txuma, pon un esquema (gráfico) de qué es exactamente lo que quieres conseguir y pensamos entre todos la mejor forma de hacerlo
txuma Plus
No, si eso ya lo he hecho, pero creo que lo que se ve no es lo que se quieres conseguir, y con la explicación que has puesto no he entendido a dónde quieres llegar. Pero se ve que hoy estoy un poco atorrijado....
A ver si es esto algo parecido a lo que necesitas:
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>abrakadabra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
border: 1px solid Black;
margin: 4px;
padding: 4px;
width: 100px;
height: 100Px;
}
/* #conArr {
border: none;
width: 600px;
height: 108px;
} */
label {
display: inline;
border: 1px solid Black;
padding: 4px;
width: 180px;
height: 20Px;
float: left;
}
.d1 {
float: right;
}
#d1a {
height: 20Px;
}
.d3 {
width: 150px;
height: 20Px;
float: right;
margin: 0Px;
}
#d4 {
margin-top: 0px;
width: 600px;
height: 400Px;
}
#contenedor{
width: 610px;
height: 500Px;
}
.clear {
clear: both;
width:610px;
}
</style>
</head>
<body>
<div id="contenedor">
<!-- <div id="conArr"> // Como clear rigth del label es insalvabel pruebo meter un div contenedor de la parte de arriba. Pero Tampoco -->
<div class="d1">bloke I</div>
<div class="d1">bloke II</div>
<div class="d1">bloke III</div>
<div id="d1a" class="d1" > bloke IV</div>
<!-- </div> -->
<div class="clear">
<label class="d2">label V. Elemento inline</label>
<div class="d3">bloke VI(Como inline)</div>
</div>
<div id="d4">bloke VII</div>
</div>
</body>
</html>
</code>
txuma Plus
Por lo que he entendido lo que necesitabas es que los dos elemento (V y VI) estuviesen en la misma 'linea' pero una a la derecha y otro a la izquierda. Si es eso yo lo que he hecho es meterlos a los dos dentro de un bloque y 'flotar' el primero a la izquierda y el segundo a la derecha, nada más...
Y ojo con lo que te dice orange, que son cosas importantes.
Saludos
iigeminisii
Gracias ... por vuestra atención. ... :D
Según lo que me decís hay un concepto que entendia erroneamente. Yo creia que los elementos inLine podian contenerse dentro de otros elementos inLine y en elementos a nivel de bloque y que su característica es que se situan uno detras de otro sin la existencia de un "Retorno de carro". Pero la asignación de un width no creia que fuese conceptualmente incorrecta, ya que esta propiedad no contradice a su naturaleza inline, pués un elemento puede ser inline y tener un width, color ... etc. determinados ... :?
Ahora viendo el elemento inline tal y como el amigo Orange y Txuma me recomiendan :) se me presentan nuevas dudas... por ejemplo si trabajamos un elemento como un <div> que es un elemento bloque por naturaleza propia, y posteriormente la necesidad del proyecto lo lleva a convertir a dicho elemento en <em>display:inline</em>, ¿podría representar una falta del standard? debido a todas las propiedades que hay intrinsecas en <div> que infringen InLine ... :?
anyway !!! :D
Respecto al problema que os planteaba, la solución de txuma creo que es una solución correcta. De todos modos pongo el esquema que me pediaís para ver como lo planteariais.
http://www.2d2art.com/ii/test/esquema.gif
No habia contemplado la solución de txuma pq "el cabeza cuadrada de mi" tenia más en cuenta el sentido de lo representado que otra cosa, el elemento <em>azul</em> y el <em>verde</em> son partes de un mismo elemento, mientras que el elemento <em>rojo</em> tiene "relación con", pero no forma parte de el.
Claro que el esquema es una muy simplificación de lo que estoy manejando ... como entiendo que el uso de <div> en vez del uso de <tables> requiera un planteamiento diferente, intento colocar todo en el flujo, usando el flujo como posicionador... me obsesiona no caer en el error de empezar a meter divs y divs más divs para acabar conviertiendo los divs en una gran tabla ... eso mismo en ocasiones hace que quizas me complique la vida intentando evitar anidamientos en exceso ... (con el tiempo u vuestra ayuda supongo que encontraré un punto de equilibrio):D
Bueno que me erroyo mucho ... le veis otro planteamiento ???? ;)
zigotica
necesitaras o bien que el body tenga un ancho (para enrasar tus elementos) o bien meterlo todo en una capa para darle un ancho. a partir de ahi, lo demas es usar floats:
los amarillos, si son elementos del mismo tipo, tema, etc, deberian ser una lista de 3 items, donde le aplicas CSS para que sean inline y floten a la izquierda.
luego en el rojo haces un clear: left (para evitar seguir en la misma linea que los amarillos.
rojo y azul deberian ser block (o eso o los fuerzas). Y le metes un float: left al rojo y un float: right al azul. Dales un width o no te chutara.
verde con clear: both y width del 100%
Con eso mas o menos y a bote pronto deberias tenerlo todo.
suerte
iigeminisii
gracias Meddle :), ese es un uso al flujo tal y como lo planteado inicialmente. Pero he de indicarte que los elementos amarillos flotan a la derecha, rojo hace un clear:derecha para no estar a continuación ... y aqui el conflico al hacer un clerar derecha del rojo el elemento azul se ve afectado y se coloca en una linea diferente.
azul y verde son elementos de un mismo objeto y rojo tiene "relación con" pero no forma parte del mismo objeto.
El agrupar azul y rojo (como aconsejaba txuma) es por ahora la única solución que veo ... (aunque me rompa el sentido del contexto) :?
Gracias ... ;)
zigotica
no no, los amarillos no deben flotar a la derecha. con que le des un right: 0px y un width a su contenedor, listos, y los items los flotas a la izquierda. el resto, como te he dicho deberia funcionar
orange
Yo, sin leer en profundidad lo que habeis puesto, soy mi altrnativa, asi deprisa y corriendo ...
- Contenedor principal o manejas el body (depende de otras cosas)
- Amarillos: flotantes derecha (no pueden ser inline sergi porque hay que darles un width)
- Rojo: flota izquierda
- Azul: flota derecha
(yo creo que asi se te deberia representar bien)
- Otra alternativa: cotnenedor para el rojo y azul, uno flota a la derecha y otro a la izquierda)
- Verde: clear both y listo
zigotica
claro, no pueden ser inline, error mio, las prisas ;)
iigeminisii
zigotica
no no, los amarillos no deben flotar a la derecha. con que le des un right: 0px y un width a su contenedor, listos, y los items los flotas a la izquierda. el resto, como te he dicho deberia funcionar
Pués eso tiene su lógica, pero el rigth=0px a su contenedor no se me posiciona ni siquiera en el código sencillito que puse antes. Aunque ya veo que tampoco seria correto por lo del width.
orange
- Amarillos: flotantes derecha (no pueden ser inline sergi porque hay que darles un width)
- Rojo: flota izquierda
- Azul: flota derecha
(yo creo que asi se te deberia representar bien)
- Otra alternativa: cotnenedor para el rojo y azul, uno flota a la derecha y otro a la izquierda)
- Verde: clear both y listo
- Rojo flota izquierda y clear right, pq sino continuarioa con amarillos. Al flotar right ya no puedo colocar Azul a su derecha. Por lo que la alternativa de un contenedor rojo y azul, confirma la opción de txuma (aunque en la aplicación me quede fuera de contexto)
Muchas gracias ... :D pq he sacado varias conclusiones:
1. width en un inLine está fuera de norma. (voy a revisar el porque con el w3c)
2. Sistema de posicionamiento absoluto alternativo al Float ---> right/left al contenedor ... (aunque no me ha funcionado, veo que se usa)
3. Hablar con vosotros "no tiene precio", para todo lo demás ... ;)
orange
geminis: Rojo flota izquierda y clear right ... es cierto, escribi deprisa
geminis: Al flotar right ya no puedo colocar Azul a su derecha ... es que es float left con clear right, y el azul float right ... no sé, no estoy probando e igual no sale, de todas formas lo del contenedor ya es buena solucion
En fins ... ¿lo has solucionado? ... pues todos contentos