CSS Position
Gente, me estoy metiendo de a poco en el tema de CSS (soy una acostumbrado a las tablas) me gustaria una mano de uds para resolver algunas duditas
Si yo tengo todo un contenido en una etiqueta div, y lo posiciono utilizando relative, lo que se considera la posicion normal, es la que ya tiene actualmente en el codigo html, osea donde ya esta actualmente posicionado sin usar la propiedad position???
Otra pregunta comofunciona bien la medida de posicion, "em" , se que es una posicion relativa o ajustable pero no se bien que significa...
Ultima pregunta, si lo que quiero hacer es que mis objetos en la pagina web mantengan la posicion a pesar de cambiar la resolucion y el tamaño de ventana del navegador , deberia usar fixed no??
El problema con fixed que tengo es el siguiente
La primera imagen muestra que se va ubicando con respecto a la ventana del navegador
El problema aparece cuando la ventana es menor que el tamaño de los objetos, en lugar de aparecer las scrollbar amontona todos los objetos, como puedo solucionarlo?
Cita:
|
Iniciado por W3C
ValueDescription
StaticDefault. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) RelativeAn element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position AbsoluteAn element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties FixedAn element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode) |
Otra pregunta comofunciona bien la medida de posicion, "em" , se que es una posicion relativa o ajustable pero no se bien que significa...
Ultima pregunta, si lo que quiero hacer es que mis objetos en la pagina web mantengan la posicion a pesar de cambiar la resolucion y el tamaño de ventana del navegador , deberia usar fixed no??
El problema con fixed que tengo es el siguiente
La primera imagen muestra que se va ubicando con respecto a la ventana del navegador
El problema aparece cuando la ventana es menor que el tamaño de los objetos, en lugar de aparecer las scrollbar amontona todos los objetos, como puedo solucionarlo?
Super Moderador
Fecha de Ingreso: dic-03
Edad: 24
Mensajes: 5,910
Gracias dadas: 0
Agradecido 3 veces en 3 Mensajes
Re: CSS Position
si... la relative es la que se pone por defecto... y donde soltas el control... eso te genera un position X,Y que por ser estandar no te lo muestra... recien cuando lo modificas en el diseñador se muestran los valores....
proba con un iframe... y le das el tamaño del objeto que te hace falta en otra capa asi no te amontona los controles
proba con eso... y suerte :P
proba con un iframe... y le das el tamaño del objeto que te hace falta en otra capa asi no te amontona los controles
proba con eso... y suerte :P
Usuario Novato
Fecha de Ingreso: feb-09
Edad: 30
Mensajes: 157
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: CSS Position
Cita:
|
Iniciado por nikitocba
proba con un iframe... y le das el tamaño del objeto que te hace falta en otra capa asi no te amontona los controles
|
Super Moderador
Fecha de Ingreso: dic-03
Edad: 24
Mensajes: 5,910
Gracias dadas: 0
Agradecido 3 veces en 3 Mensajes
Re: CSS Position
a ver.. no se si esta bien, pero yo lo arme asi y se ve ok en ff e ie7
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
text-align: center;
}
.div01 {
margin-right: auto;
margin-left: auto;
margin-top: 100px;
width: 700px;
}
.div02 {
height: 20px;
width: 200px;
background-color: #996600;
margin-top: 200px;
margin-left: 30px;
float: left;
}
.div03 {
height: 200px;
width: 200px;
background-color: #996600;
margin-top: 50px;
margin-left: 30px;
float: left;
}
.div04 {
height: 20px;
width: 400px;
background-color: #996600;
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div class="div01">
<div class="div04">hola esto esta centrado</div>
<div>
<div class="div03">imagen</div><div class="div02">buscar</div>
</div>
</div>
</body>
</html>
__________________
-)
-)
Usuario Avanzado
Fecha de Ingreso: may-07
Mensajes: 2,029
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: CSS Position
si konzerte, pero usaste posiciones absolutas, como seria con fixed?
EDIT: como se podria hacer algo que no sea tan absoluto?
EDIT: como se podria hacer algo que no sea tan absoluto?
Super Moderador
Fecha de Ingreso: dic-03
Edad: 24
Mensajes: 5,910
Gracias dadas: 0
Agradecido 3 veces en 3 Mensajes
Re: CSS Position
Cita:
|
Iniciado por p4bl1t0
si konzerte, pero usaste posiciones absolutas, como seria con fixed?
EDIT: como se podria hacer algo que no sea tan absoluto? |
antes no use posicion aboluta, asi lo haria yo usando posiciones absolutas:
esta todo dentro de un div con un margen izquierdo de 50%, con eso queda centrado
y el resto de los divs esta ubicado con respecto a ese div contenedor
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
text-align: center;
}
.div01 {
left: 50%;
position: absolute;
}
.div02 {
height: 20px;
width: 200px;
background-color: #996600;
float: left;
position: absolute;
left: 27px;
top: 211px;
}
.div03 {
height: 200px;
width: 200px;
background-color: #996600;
float: left;
position: absolute;
left: -211px;
top: 142px;
}
.div04 {
height: 20px;
width: 400px;
background-color: #996600;
margin-left: auto;
margin-right: auto;
position: absolute;
left: -201px;
top: 86px;
}
-->
</style>
</head>
<body>
<div class="div01">
<div class="div04">hola esto esta centrado</div>
<div class="div03">imagen</div><div class="div02">buscar</div>
</div>
</body>
</html>
y asi lo haria con fixed (posicion relativa a la ventana del navegador), las posiciones no cambian con el scroll vertical
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
text-align: center;
}
.div02 {
height: 20px;
width: 200px;
background-color: #996600;
position: fixed;
top: 200px;
left: 450px;
}
.div03 {
height: 200px;
width: 200px;
background-color: #996600;
position: fixed;
top: 200px;
left: 200px;
}
.div04 {
height: 20px;
width: 400px;
background-color: #996600;
position: fixed;
top: 100px;
left: 250px;
}
-->
</style>
</head>
<body>
<div class="div04">hola esto esta centrado</div>
<div class="div03">imagen</div>
<div class="div02">buscar</div>
</body>
</html>
fijate esto http://www.webintenta.com/fijar-posi...-explorer.html
por eso siempre lo hago de la forma anterior (con el contenedor con margen izq 50%), es la mas simple para mi, que tambien estoy empezando.
Si alguien puede explicarnos un poco, sera bienvenido
k
__________________
-)
-)
Usuario Avanzado
Fecha de Ingreso: may-07
Mensajes: 2,029
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: CSS Position
Yo tengo esto:
Si no es eso, entonces no entiendo lo que necesitas xD y te pediría que te expliques un poquito mejor ;D
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="luxiano" /> <title>pruebas</title> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 1em; color: #353535; } #wrap { width: 100%; } #content { width: 760px; margin: 0 auto; } #header { height: 200px; } .titulo { text-align: center; } </style> </head> <body> <div id="wrap"> <div id="header">A ver si se arreglan los problemas</div> <div id="content"> <p class="titulo">hola esto esta centrado</p> <img src="jirafa.png" alt="jirafa" /> <input type="text" value="Ingrese nombre" size="50" /> <select></select> <input type="button" value="Buscar" /> </div> </div> </body> </html>
Usuario Registrado
Fecha de Ingreso: abr-09
Edad: 23
Mensajes: 11
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: CSS Position
luxiano, te hago una pregunta
por que pones todo el contenido dentro de un div que ocupe el 100%?? me refiero a wrap
por que pones todo el contenido dentro de un div que ocupe el 100%?? me refiero a wrap
__________________
-)
-)
Usuario Avanzado
Fecha de Ingreso: may-07
Mensajes: 2,029
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
Re: CSS Position
Para que ocupe todo el ancho de la pantalla... pero podría haberle puesto 900px por ejemplo.
Pero siguiendo con lo que hice: pongo el wrap al 100% para que ocupe todo el ancho de la pantalla; header toma esa misma medida, por estar dentro de wrap (por lo que si le pones un fondo con repeat-x se repetirá por todo el ancho, sin importar si la pantalla está a 1024, 800, o lo que sea); no así content, que tiene una medida fija (760px) y el div está centrado (margin: 0 auto)... entonces tenes una especie de T, que en muchos diseños se ve muy bien ;D
Aparte, me gusta definir todo, para que después no haya problemas y yo soy de usar un css para resetear los estilos por defecto de los navegadores.
Pero siguiendo con lo que hice: pongo el wrap al 100% para que ocupe todo el ancho de la pantalla; header toma esa misma medida, por estar dentro de wrap (por lo que si le pones un fondo con repeat-x se repetirá por todo el ancho, sin importar si la pantalla está a 1024, 800, o lo que sea); no así content, que tiene una medida fija (760px) y el div está centrado (margin: 0 auto)... entonces tenes una especie de T, que en muchos diseños se ve muy bien ;D
Aparte, me gusta definir todo, para que después no haya problemas y yo soy de usar un css para resetear los estilos por defecto de los navegadores.
Usuario Registrado
Fecha de Ingreso: abr-09
Edad: 23
Mensajes: 11
Gracias dadas: 0
Agradecido 0 veces en 0 Mensajes
«
elserver
|
Dudas de Joomla!
»
| Herramientas | Buscar en Tema |
| Desplegado | |
Mode Lineal
|
La franja horaria es GMT -3. Ahora son las 05:42.
