Sobre posicionamientos

WildFroVII · #1 (**permalink**) 13/01/2009, 04:22

Código:

<!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>
<style type="text/css">
<!--

div#izquierda {
     left: 5px;
     top: 62px;
}

div#medio {
     text-align: center;
     font-size: 25px;
     top: 25px;
}

div#medio-sub {
     text-align: center;
    
}

div#derecha {
     right: 5px;
     top: 62px;
}

-->
</style>
</head>
<body>
<p><div id="medio"><strong>Medio medio medio medio medio</strong></div>
<p><div id="izquierda">Izquierda</div><div id="medio-sub">Frase de debajo</div><div 

id="derecha">Derecha</div></p>

</body>
</html>

No se que problema debería haber en que se mostrase así:

...........................................Medio medio medio medio medio......................................
Izquierda......................................Fra se de debajo.........................................Der echa

(sin los puntos, claro está jejeje)

Sin embargo se muestra así:

En funcionamiento

Saludos.

Aresillo · #2 (**permalink**) 13/01/2009, 04:41

no se porque me sale la caja de hotmail cuando le doy al link...

Ares

WildFroVII · #3 (**permalink**) 13/01/2009, 08:28

Editado el primer post, ya se debería ver.

Nathan_1979 · #4 (**permalink**) 13/01/2009, 08:38

El problema es que los

Código HTML:

div

Son elementos de bloque!

Saludos!

Pd: los elementos de bloque son por los que por naturaleza hacen un salto de linea.

WildFroVII · #5 (**permalink**) 13/01/2009, 10:05

¿Cómo hago entonces? Porque este....

Código:

<html>

<head>

<style type="text/css">
<!--
.izquierda {
	text-align: left;
}
.medio {
	text-align: center;
}
.derecha {
	text-align: right;
}
-->
</style></head>

<body>

<p><span class="izquierda">Izquierda,</span> <span class="medio">medio,</span> <span class="derecha">derecha.</span></p>

</html>

Tampoco sirve.

Un saludo.

WildFroVII · #6 (**permalink**) 13/01/2009, 10:25

Código:

<!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>
<style type="text/css">
<!--

div#izquierda {
     position: absolute;
     left: 5px;
     top: 64px;
}

div#medio {
     text-align: center;
     font-size: 25px;
     top: 25px;
}

div#medio-sub {
     text-align: center;
     font-size: 18px;
    
}

div#derecha {
     position: absolute;
     right: 5px;
     top: 64px;
}

-->
</style>
</head>
<body>
<p><div id="medio"><strong>Web-to-cutre.com</strong></div>
<p><div id="izquierda">Izquierda</div><div id="medio-sub">Que ni es com ni es nada 

pero le pongo esto por algún motivo</div><div id="derecha">Derecha</div></p>

</body>
</html>

¡Conseguido!

¿Alguna solución menos chapucera? Un saludo.

Nathan_1979 · #7 (**permalink**) 13/01/2009, 10:54

Sip, enviado...

Nathan_1979 · #8 (**permalink**) 13/01/2009, 10:57

Hay mil y una forma de hacerlo.
Esta es una ;)

Código HTML:

<div id="cabecera">
	<h1>Web-to-cutre.com</h1>
</div>

<div id="main">
    <div id="izquierda">
        <p>Izquierda</p>
    </div>
    
    <div id="medio">
        <p>Que ni es com ni es nada pero le pongo esto por algún motivo</p>
    </div>
    
    
    <div id="derecha">
        <p>Derecha</p>
    </div>
</div>

Código:

* { margin:0; padding:0;}

#cabecera h1 {
	text-align:center;
}

#main {
	overflow:hidden;
	width:80%;
	margin:0 auto;
}
	#izquierda {
		float:left;
		width:30%;
		border:1px solid #0066FF;
	}
	#medio{	
		float:left;
		width:35%;
		border:1px solid #9933FF;
	}
	#derecha { 
		float:left;
		width:30%;
		text-align:right;
		border:1px solid #99FFCC;
	
	}

PD: Solo un apunte, los parrafos no pueden contener otros elementos de bloque ( como por ejemplo 'div' ), por lo que meter div dentro de etiquetas 'p' es un error grave.

WildFroVII · #9 (**permalink**) 13/01/2009, 13:50

Aun no se mucho de CSS porque empecé hace 2 días pero ese código que has dejado más que hacer lo que digo, lo simula, y peor que el que yo puse.
Tu código

Aparentemente lo consigue pero realmente no pone las izuqierdas y las derechas al borde de la izquierda y la derecha respectivamente.

La verdad es que no entiendo la mitad de lo que has escrito pero ahí te dejo el link para que compruebes que es cierto. ¿Alguna alternativa más?

Nathan_1979 · #10 (**permalink**) 13/01/2009, 14:04

Jaja lo simula....

El código se ve perfectamente y se lo que hace,
ya que lo probé en Firefox y Ie cuando lo hice.

Cierto, se nota que has empezado hace 2 días, empieza mejor por aprender html...
que meter una capa dentro de un parrafo tiene tela.

Saludos.

Nathan_1979 · #11 (**permalink**) 13/01/2009, 14:29

Un chaval con 2 dedos de frente sabria cambiar 2 valores para que:

Cómo fue eso?:
izuqierdas y las derechas al borde de la izquierda y la derecha respectivamente

JAJAJAJA

WildFroVII · #12 (**permalink**) 13/01/2009, 15:05

Cita:

Cierto, se nota que has empezado hace 2 días, empieza mejor por aprender html...
que meter una capa dentro de un parrafo tiene tela.

Código:

<html>
<head>
<body>
<p align="center"><font size="18"><b>Web-to-cutre.com</b></font></p>
<p align="center"><a href="www.w.www">Izquierda</a> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Que ni es com ni es nada pero le 
pongo esto por algún motivo 
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="www.w.www">Derecha</a></p>
</body>
</html>

Ya se html y el problema que expongo es precismaente porque html no me deja hacer lo que pido.
Link

No es por nada pero deberías aprender a deducir mejor antes de nada....x-D, porque porque has dado conmig pero das con otro y con consejos así lo único que puedes conseguir es confuncidrle más todavía x-D. Repito, no es por que me pique, aunque un poco si, pero te lo puedes tomar perfectamente como consejo jeje.

Saludos. Si alguien sabe como hacer lo que pido desde el primer post que lo diga.

Saludos.

poison_mayer · #13 (**permalink**) 13/01/2009, 15:53

Intenta usar esto
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0}
body{}
div#header {text-align:center}
div#wrapper{float:left;width:100%}
div#content{margin:0 150px 0 150px; position:absolute}
div#navigation{float:left; width:150px;background:#B9CAFF}
div#right{float:right;width:150px; background:#FF8539}
</style>
</head>
<body>
<div id="container">
<div id="header"><p>Header</p></div>
<div id="wrapper">
<div id="content">
<p>contenido </p>
</div>
<div id="navigation">
<p>left</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>
</div>
</body>
</html>

WildFroVII · #14 (**permalink**) 13/01/2009, 16:16

Muy currado el código aunque para ser sincero no entiendo casi nada, relamente me queda mucho por aprender todavía de este lenguaje, pues ni las explicaciones las puedo comprender, en cualquier caso, muchas gracias a los dos, en unos días me pasaré por aquí otra vez a leer todo porque lo que no se puede es estar así. Un saludo.

jomaruro · #15 (**permalink**) 13/01/2009, 17:14

WildFroVII:

Seguro que te sirve este enlace.

Si eres novato en CSS, leete este libro para empezar, te lo puedes descargar gratis o leerlo online.

Saludos.

Mikmoro · #16 (**permalink**) 13/01/2009, 17:19

Cita:

Iniciado por Nathan_1979

PD: Solo un apunte, los parrafos no pueden contener otros elementos de bloque ( como por ejemplo 'div' ), por lo que meter div dentro de etiquetas 'p' es un error grave.

¿Error en qué sentido? ¿no es válido? ¿semántico?
Explícate un poco.

WildFroVII · #17 (**permalink**) 13/01/2009, 18:25

Joer, esto tiene más de lo que pensaba, no se si me atreveré con tanto. Yo te dejo uno que debe ser del mismo autor porque la portada y el índice son iguales, sólo que para principiantes, pero para principiantes de verdad, ese que me has pasado debe ser para presos en un refugio nuclear postapocalyptico. x-DDDDDDD

Aquí le tienes - Curso Css - Introdución al Css

Saludos y hasta otra.

Cita:

Iniciado por Mikmoro

¿Error en qué sentido? ¿no es válido? ¿semántico?
Explícate un poco.

Llevaba un rato dándole vueltas, ¿no estaba div precisamente para agrupar varias etiquetas bajo los mismos efectos? De todas formas creo que lo que dice Nathan_1979 no se lo ha inventado del todo, me suena haberlo leido, pero error error no es, es lo que se llama "ilegalización" y, si entendí bien, se refiere a que en cualquier momento nos las quitan de los navegadores sustituidas por el Css, como fue pasando con html 1, 2, 3 y pasará con el 4 en unos años. ¿me equivoco?

La verdad es que aprenderse un lenguaje de estos o lo que sea profundizando hasta el final tiene más tela de la que cualquier mortal puede imaginar, ahí tengo un amiguete que se puso a hacer un curso de Word de una cnatidad de horas que te le decía y podías pensar que se estaba burlando de ti x-D, pero el tío acabó, tuvo la suerte de que le llamaran para dar clases y ahí sigue después de 4 ó 5 años, si no son más. Word x-DDDDD.

Haste luego.

jeybi · #18 (**permalink**) 14/01/2009, 01:16

Lo correcto en este caso es usar <span> en ves de <div>. La diferencia de div y span es que div es un elemento de bloque y span es un elemento en linea. Div suele usarse para agrupar elementos en una pagina, y span funciona como remplazo de etiquetas <b>,<i>, etc, su funcion es de agrupar texto o lineas de texto.

Ademas si usas un <div> dentro de un <p> se genera un salto de linea porque <div> es un elemento de bloque.

Nathan_1979 · #19 (**permalink**) 14/01/2009, 01:57

Cita:

Iniciado por Mikmoro

¿Error en qué sentido? ¿no es válido? ¿semántico?
Explícate un poco.

Lo que dice la W3C:

Cita:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Supongo que será un error semántico, pero vamos que el tipo de error me da lo mismo.

Para más info:
http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Nathan_1979 · #20 (**permalink**) 14/01/2009, 02:04

Cita:

Iniciado por WildFroVII

Joer, esto tiene más de lo que pensaba, no se si me atreveré con tanto.
La verdad es que aprenderse un lenguaje de estos o lo que sea profundizando hasta el final tiene más tela de la que cualquier mortal puede imaginar

Para que luego vengas a criticar un código (que aquí no nos pagan por ayudar a los demás) que no entiendes la mitad y que.... con todo el gusto del múndo intentamos solucionar los posibles problemas que pueda tener los que empiezan con CSS.

Me explico no?

Un saludo.