CSS - Problema CSS

   
Vista:

Problema CSS

Publicado por Carlos Antonio ffclmauricio@gmail.com (3 intervenciones) el 27/08/2017 08:51:40
Saludos amigos. Tengo un problemita, verán recientemente he estado aprendiendo sobre CSS y HTML, como ejercicio me plante resolver lo siguiente:
Estructura-Semantica-HTML5
Quedando el HTML (index.html) asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="En este ejercicio aprenderemos la estructura semántica de HTML5">
    <title>Estructura Semántica de HTML5</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <h1 class="titulo">Estructura Semántica HTML5</h1>
    <header class="azul fila">
        &lt;header&gt;
    </header>
    <nav class="azul fila">
        &lt;nav&gt;
    </nav>
    <section class="contenedor fila">
        <section class="principal azul">
            &lt;section&gt;
            <article class="articulo">
                &lt;article&gt;
            </article>
        </section>
        <aside class="asaid azul">
            &lt;aside&gt;
        </aside>
    </section>
    <footer class="azul fila">
        &lt;footer&gt;
    </footer>
</body>
</html>
Y mi CSS (estilos.css) de esta manera:

(normalize.css) creo que todos ya lo conocen aqui.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
@import url("normalize.css");
 
body, html {
    background: black;
    color: white;
    font-family: sans-serif;
    font-size: 32px;
    text-align: center;
}
 
.articulo {
    background: #011E30;
    margin: .5em;
    min-height: 120px;
}
 
.asaid, .principal {
    display: inline-block;
    min-height: 200px;
    vertical-align: top;
    width: 59%;
}
 
.asaid {
    width: 40%;
}
 
.azul {
    background: #1E6381;
}
 
.contenedor {
    padding-top: 0 !important;
    padding-right: auto !important;
    padding-bottom: 0 !important;
    padding-left: auto !important;
    width: 81% !important;
}
 
.fila {
    margin: .25em auto;
    padding: .25em;
    width: 80%;
}
 
.titulo {
    color: orange;
    margin: .25em auto;
    width: 90%;
}
El "problemita" es que al variar el tamaño del navegador los elementos del html se "descolocan":
Ej1
Ahora al achicar un poco el navegador va quedando asi:
Ej2
Al achicar mas aqui se "descolocan" y eso es lo que no quiero que pase:
Ej3

Por lo que quisiera saber que puedo hacer para evitar que pase esto, sin tocar temas mas avanzados como flexbox y cosas similares.
Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

Problema CSS

Publicado por Alejandro (1 intervención) el 28/08/2017 15:00:12
Estimado,

Lo mejor es usar tamaños en porcentaje,
al mismo tiempo usar las mediaqueries en css

https://www.w3schools.com/css/css3_mediaqueries.asp

Ejemplo:

1
2
3
4
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

Una vez que domines CSS, te recomiendo usar algún framework como es caso de Bootstrap.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema CSS

Publicado por Carlos Antonio (3 intervenciones) el 28/08/2017 20:51:22
Gracias por responder, conforme vaya dominando CSS empezare con bootstrap. Solo que de momento quería saber si se podía realizar mi petición con CSS básico.
Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique

Problema CSS

Publicado por Enrique (43 intervenciones) el 28/08/2017 19:12:35
Por lo que veo tienes una unas clases css que pueden entrar en conflicto al momento del render
primero tienes
1
2
3
4
5
6
7
8
9
10
.asaid, .principal {
    display: inline-block;
    min-height: 200px;
    vertical-align: top;
    width: 59%;
}
// y despues tienes:
.asaid {
    width: 40%;
}
Por orden de gerarquias aunque pongas en el primer .asaid un ancho por proporciones, tomará la instrucción del segundo .asaid; o sea de 40%
esto puede llegar a confundirte por quisieras hacer un inspect pero el problema es este:

Tienes varias dimenciones en diferentes clases, y el tema es que el navegador va a renderizar la ùltima instrucción que encuentre
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema CSS

Publicado por Carlos Antonio (3 intervenciones) el 28/08/2017 20:53:27
Claro es por cascada que luego de: .asaid, .principal le agregue otro .asaid para que tome el ancho de 40%.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad