Organizar elementos en CSS según el tamaño de la pantalla

Me preguntaba cómo organizaría la posición de mis elementos en mi CSS como superior, izquierda, alineación, etc., etc. echa un vistazo a mi código

<!DOCTYPE html>

<html>

    <head>
        <title>Avril Lavigne</title>
        <link rel = "stylesheet" type = "text/css" href="style/style.css"

    </head>

    <body>

        <div id = "container">

        <div id="banner"><img src = "images/banner.jpg"/></div>

        <div id = "content">

        <div id = "about">
        <h1>About Avril Lavigne</h1>

        <p>
        Avril Ramona Lavigne is a Canadian singer-songwriter. 
        She was born in Belleville, Ontario, but spent most of her youth in the small 
        town of Napanee. By the age of 15, she had appeared on stage with Shania Twain; by 16, 
        she had signed a two-album recording contract with Arista Records worth more than $2 million.
        In 2002, when she was 17 years old, Lavigne broke onto the music scene with her debut album Let Go.
        </p>
        </div>  

                <div id ="tourdates">
                <h2> Tour dates</h2>
                </div>

        </div>  
        </div>

    </body>

<html>

mi CSS

body{
    background-color:#292929;
    font-size:small;
}

#container{
    padding: 420px;
    margin:120px;
    border: 5px dotted pink;
}


#banner{
top: 150px;
left: 450px;
right:450px;
position:absolute;
}

#about{
font-size: 100%;
font-family: tahoma;
color: #8B3A62;
position:absolute;
top:320px;
left: 440px;
padding: 20px;
width:320px;
length: 120px;
margin:10px;
border: dashed 2px white;
}

#tourdates{
color: #8B3A62;
padding: 20px;
top:320px;
right: 540px;
position:absolute;
border: dotted 2px white
}

Se supone que la pancarta está en el centro del medio, y aproximadamente debe ser 1/4 o la parte superior izquierda (arriba a la izquierda debajo de la pancarta). ¿Cómo establecería los tamaños de la parte superior, izquierda y lateral en función de la pantalla del usuario?

Mi problema aquí fue cuando estaba en mi espacio de trabajo (mi otra casa), estaban bien alineados, pero cuando fui a mi computadora portátil para continuar mi trabajo, su alineación cambió (mi computadora portátil tiene una pantalla más pequeña)

preguntado el 01 de febrero de 12 a las 13:02

2 Respuestas

Puede usar la pantalla @media y luego simplemente cambiar css si el tamaño de la pantalla es diferente Aquí hay un ejemplo (un par de cosas en css cambiaron si la pantalla tiene menos de 700px):

@media screen and (max-width: 700px)
 {
  /*.figure
    {
        margin-right: 3.317535545023696682%;   
        width: 41.902053712480252764%; 

    }*/
    #mail
    {
        padding-left:0px;
    }
    body
    {
        font-size:0.8em;
    }
    h5
    {
        font-size:0.9em;
    }
        #my_profile_image
    {
        height:160px;
        width:160px;
    }
}

Respondido 01 Feb 12, 18:02

Y la respuesta que les di allí es un poco más avanzada, la usé cuando cambié el aspecto de mi página, dependiendo de si está abierta en el navegador o en el teléfono móvil, ipad, etc. iblazevic

Has intentado agregar

position: relative;

a su declaración de #container? Esto colocará todos los elementos secundarios en posición absoluta dentro de la etiqueta #container.

2da carrera:

body{
    background-color:#292929;
    font-size:small;
}

#container{
    border: 5px dotted pink;

    position: absolute;
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    min-height: 615px;
    min-width: 900px;
}


#banner{
    position: absolute;
    top: 150px;
    left: 30px;
    right: 30px;
}

#about{
    position:absolute;
    top: 320px;
    right: 32%;
    left: 30px;

    font-size: 100%;
    font-family: Tahoma;
    color: #8B3A62;
    padding: 20px;
    border: dashed 2px white;
}

#tourdates{
    position: absolute;
    top: 320px;
    left: 70%;
    right: 30px;

    color: #8B3A62;
    padding: 20px;
    border: dotted 2px white
}

Respondido 01 Feb 12, 18:02

¿Qué hace la posición relativa? ¿Debo editar el ancho de la etiqueta de mi contenedor? - user962206

Edité algunos css en mi respuesta. esto cambiará el diseño dependiendo del tamaño de la pantalla. tenga en cuenta las declaraciones de ancho mínimo y alto mínimo. ¿Cómo debería verse el diseño? - Matthias Brock

El que me diste es casi correcto, la pancarta necesita estar centrada y eso es todo, y puedo preguntar. ¿cómo lo hiciste / cómo lo hiciste? que no importa cuán grande o pequeño sea el tamaño de la pantalla del usuario, sigue teniendo el mismo formato que antes? Me estoy volviendo un poco lento al captar esto - user962206

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.