Básico

MARIAjava · #1 (**permalink**) 30/12/2012, 11:29

Hola,

tengo una pregunta muy sencilla...
Estoy haciendo una web pero dependiendo monitor se cambia la posición de todos...como lo tengo que hacer para que esto no me pase??posiciona todo con float y con pixeles, también he probado con % pero no me funciona tampoco.

Gracias de antemano!!

Saludos

dmomentor · #2 (**permalink**) 30/12/2012, 12:37

¿qué es todos? trata de explicar mejor

MARIAjava · #3 (**permalink**) 30/12/2012, 12:53

los div, las imagenes...nose... todo lo que tengo posicionado en la página!!

pzin · #4 (**permalink**) 30/12/2012, 14:00

Pon algo de código o un enlace de lo que estás haciendo porque si saber absolutamente nada del problema es de una imposibilidad igualmente absoluta el poder ayudarte.

jomaruro · #5 (**permalink**) 02/01/2013, 04:15

Hola:

La forma más cómoda de hacerlo es darle un ancho fijo a la página, en los monitores de menos resolución se verá bien y en los de mayor resolución se verá centrada pero con "todos" en su sitio.

Saludos.

MARIAjava · #6 (**permalink**) 02/01/2013, 09:54

un ancho en el body??tampoco me funciona...
Mirar por ejemplo he hecho un menu horizontal...y al minimizar la ventana se descoloca...

Este sería el css:
.body{width:900px;}
.contenedor{width:100%;}
.cabecera{position:absolute;width:100%;height:13%; }}
.menu{width:100%;display: block;overflow: hidden;width:100%;height:10%;}
#fondoRojoMenu{display:block;overflow:hidden;margi n:100px 0px 0px 0px;background:#E4062C;}
#menuHorizontal {float:right;padding: 0px 180px 0px 0px;}
#menuHorizontal li {display: inline;padding-bottom:30px;}
#menuHorizontal li a {font-family: Arial;font-size:20px;text-decoration: none;float:left;padding: 10px;background-color: #E4062C;color: #fff;}
#menuHorizontal li a:hover {background-color: black;margin-top:-2px;padding-bottom:12px;}
.contenido{position:absolute;top:25%;width:100%;he ight:100%;}

y este el body del html:

<body width="900px">
<div class="contenedor">
<div class="cabecera"></div>
<div class="menu">
<div id="fondoRojoMenu"><div>
<ul id="menuHorizontal">
<li class="home"><a href="inicio.html" >Home</a></li>
<li><a href="busquedaCodigo.html">Codigo</a></li>
<li><a href="blanca.html">Blanco</a></li>
<li><a href="marron.html">Marrones</a></li>
<li><a href="rosas.html">Rosas</a></li>
<li><a href="codigo3.html">Codigo 333</a></li>
<li><a href="blanco3.html">Blanco 333</a></li>
<li><a href="marrones3.html">Marrones 333</a></li>
<li><a href="rosas3.html">Rosas 333</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>

jomaruro · #7 (**permalink**) 03/01/2013, 03:59

Hola:

He repasado tu código y aparte de quitar el width del body del html porque no es necesario si usas css, he modificado un poquito tu hoja de estilos y ahora debes compararlos. Lógicamente, debes adaptarlo a tu gusto.

Este es el modificado:

Código CSS:

Ver original* {
    margin:0 auto;
    padding:0;
}
 
body{
    width:909px;
}
.contenedor{
    width:100%;
    border:1px solid #0000ff;
}
 
.cabecera{
    position:absolute;
    width:100%;
    height:13%;
}
.menu{
    width:100%;
    display: block;
    overflow: hidden;
    width:100%;
    height:10%;
}
 
#fondoRojoMenu{
    display:block;
    overflow:hidden;
    margin:100px 0px 0px 0px;
    background:#E4062C;
}
 
#menuHorizontal {
    float:right;
    padding: 0px 0px 0px 0px;
}
 
#menuHorizontal li {
    display: inline;
    padding-bottom:30px;
}
#menuHorizontal li a {
    font-family: Arial;
    font-size:20px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background-color: #E4062C;
    color: #fff;
}
 
#menuHorizontal li a:hover {
    background-color: black;
    margin-top:-2px;
    padding-bottom:12px;
}
 
.contenido{
    position:absolute;
    top:25%;
    width:100%;
    height:100%;
}

Unos pequeños apuntes:

1.- El body es una etiqueta html no una clase ni un id y en tu hoja css lo tienes definido con un punto no es necesario ponerle el punto.
2.- Para entender la primera etiqueta que he puesto en el css (el *) busca información sobre reset css, es muy útil utilizarlo.
3.- He aumentado a 909px el ancho de la página, sinó el menú no cabe en su contenedor y se descoloca, otra opción sería dejarlo en 900 y reducir un poco el tamaño de las fuentes del menú.
4.- En #menuHorizontal tienes un padding de 180px, cómo no sé que función tiene lo he puesto a cero. Tu verás si te vale así.

Saludos.

MARIAjava · #8 (**permalink**) 03/01/2013, 05:27

Muuuuuuuuuuchisimas gracias....queda perfecto!!!

Pero sigo teniendo dudas...ya que al poner una imagen en la cabecera y unos iconos para acceder al facebook, twitter,ect...pero se me vuelve a mover al minimizar la ventana, nosé si es que no he entendido bien el concepto!!

Te vuelvo a enviar este código y si me puedes seguri ayudando te lo agradecería un motoooon!!!

<div class="cabecera">
<a href="inicio.html">
<img id="imagenCabecera" src="imagenes/imagen.gif" title="Logo" alt="Logo " class="logo" style="border-width: 0"/></a>
<ul id="logos">
<li><a href="https://twitter.com">
<img id="logo"src="imagenes/logo/icoTwitter.png" title="Logo Twitter" alt="Logo Twitter"/></a></li>
<li><a href="https://es-es.facebook.com">
<img src="imagenes/logo/icoFace.png" title="Logo facebook" alt="Logo facebook"/></a></li>
<li><a href="http://www.google.com">
<img src="imagenes/logo/icoGoogle.png" title="Logo Google" alt="Logo Twitter"/></a></li>
</ul>
</div>

y esto va en el css:

.cabecera{
position:absolute;
width:100%;
height:13%;
}
#imagenCabecera{
float:left;
width:20%;
height:100%;
margin:0px 600px 0px 0px;
}
#logos ul{
float:right;
}
#logos li {
display: inline;
overflow: hidden;
}
#logos li a {
text-decoration: none;
float:left;
color: #fff;
}
#logos li a img{
width:38px;
height:38px;
margin:0px 3px 0px 0px;
border-width: 0px;
}
#logos li a:hover {
margin-top:2px;
padding-bottom:5px;
}

miiiil gracias y saludos.¡!!!

jomaruro · #9 (**permalink**) 03/01/2013, 14:09

Hola:

El problema lo tienes, posiblemente, en utilizar position:absolute, suprímelos y prueba que pasa.

Te aconsejo que le eches un vistazo a estos dos aportes del foro de CSS:

Guía de Migración A XHTML Y CSS
Guía de Migración A XHTML Y CSS II

Te serán útiles.

Saludos.

MARIAjava · #10 (**permalink**) 04/01/2013, 03:11

SIIIIIIIII....era eso!!los absolute.....

MUCHISIMAS GRACIIIIIIIIIIIIIIIIIIIAS!!!!

:)