Luis Yupari Chaccha
Luis Yupari Chaccha

Reputation: 15

How can I avoid a box in HTML being too far off one side?

This is what I'm currently aiming for (minus the red arrows, of course):

enter image description here

I have a slight inconvenient in CSS that I've not been able to decipher by myself. When I enter my page this is what shows up:

enter image description here

This is the code for the page itself:

body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}
#cabecera{
    background-image: url(http://content.escuelaninja.com/images/infosil.png);
    min-height:100px;
}
#cabecera span{
    float:right;
    color:#fff;
    margin-top:20px;
    margin-right:20px;
}
#barra{
    padding:10px;
    background-color:#0e1a46;
    color:white;
}
#barra a {
    color: white;
}
#barra span{
    float:right;
}
#pie {
    text-align:center;
    color: #fff;
    background-color:#666;
    padding:10px;
    clear:both;
}
#barra-lateral{
    float:left;
    min-height:200px;
    width:25%;
}
#principal{
    margin-left:25%;
}
#barra-lateral nav { 
    border: 1px solid #c5c5c5;
    border-radius:6px;
    background-color:#f0f0f0;
    margin:15px;

}
#barra-lateral nav section{
    margin:6px;
}
#barra-lateral nav section header{
    padding:8px;
    font-weight:bold;
    color: #fff;
    background-color:#225ea2;
}
#barra-lateral ul{
    background-color:#fff;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#barra-lateral ul li{
    padding:4px;
    padding-left:15px;
}
#mis-cursos{
    color:#0e1a46;
    text-align:center;
}
#lol{
    border:1px solid black;
    margin-left:27%;
    margin-right:10%;
    margin-top:0;
    clear:right;
    background-color:#12306b;
    color:white;
    padding:10px;
}
#bloque{
       border:1px solid gray;
    margin-left:27%;
    margin-right:10%;
    margin-top:0%;
    background-color:#eaeaeb;
}
#bloque li{
    border:1px solid gray;
    padding:7px;
    list-style-type:none;
    margin-left:25.9%;

}
#carreras ul {
    margin-left:10px;
    list-style-type:none;
}
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
    </head>
    <body>
        <section id="contenedor">
            <header id="cabecera">
                <span>Gianmarti Meza Machaca</span>
            </header>
                <div id="barra">
                    <a href="" >inicio</a>
                    <a href="">Cerrar sesión</a>
                    <span>Viernes 26 de agosto de 2016</span>
                </div>
                <aside id="barra-lateral">
                    <nav>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registrar notas</li>
                                <li>>Mensajes</li>
                                <li>>Publicar materiales</li>
                            </ul>
                        </section>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registro docente</li>
                                <li>>Mis capacitaciones</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="mis-cursos">Mis cursos</h1>
                <section id="carreras">
                            <header id="lol">USIL - CARRERAS UNIVERSITARIAS : Periodo - 2016-02 </header>
                            <ul id="bloque">
                                <li>TALLER DE SOFTWARE II (FC-INF TALLSFW2) - Bloque: FC-PREINF02C1M</li>
                                <li>ANÁLISIS Y DISEÑO DE DATOS (FC-INF ANADISDA) - Bloque: FC-PREINF02P1T</li>
                            </ul>
                        </section>
                <section id="principal"></section>
                <footer id="pie">UNIVERSIDAD SAN IGNACIO DE LOYOLA / Av. La Fontana 550, La Molina Lima - Perú Central Telefónica (511) 317 - 1000</footer>
        </section>
    </body>
</html>

I know there is something wrong in the bloque li and carreras ul part of the CSS, and I would appreciate it very much if someone could help me out.

Thanks in advance

Upvotes: 1

Views: 88

Answers (3)

Tom
Tom

Reputation: 1

It seems solved ~

^.^

body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}
#cabecera{
    background-image: url(http://content.escuelaninja.com/images/infosil.png);
    min-height:100px;
}
#cabecera span{
    float:right;
    color:#fff;
    margin-top:20px;
    margin-right:20px;
}
#barra{
    padding:10px;
    background-color:#0e1a46;
    color:white;
}
#barra a {
    color: white;
}
#barra span{
    float:right;
}
#pie {
    text-align:center;
    color: #fff;
    background-color:#666;
    padding:10px;
    clear:both;
}
#barra-lateral{
    float:left;
    min-height:200px;
    width:25%;
}
#principal{
    margin-left:25%;
}
#barra-lateral nav { 
    border: 1px solid #c5c5c5;
    border-radius:6px;
    background-color:#f0f0f0;
    margin:15px;

}
#barra-lateral nav section{
    margin:6px;
}
#barra-lateral nav section header{
    padding:8px;
    font-weight:bold;
    color: #fff;
    background-color:#225ea2;
}
#barra-lateral ul{
    background-color:#fff;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#barra-lateral ul li{
    padding:4px;
    padding-left:15px;
}
#mis-cursos{
    color:#0e1a46;
    text-align:center;
}
#lol{
    border:1px solid black;
    margin-right:10%;
    margin-top:0;
    clear:right;
    background-color:#12306b;
    color:white;
    padding:10px;
}
#bloque{
       border:1px solid gray;
    margin-right:10%;
    margin-top:0%;
    background-color:#eaeaeb;
}
#bloque li{
    border:1px solid gray;
    padding:7px;
    list-style-type:none;

}
#carreras {
	margin-left: 260px;
}
#carreras ul {
    list-style-type:none;
    padding: 0;
}
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <section id="contenedor">
            <header id="cabecera">
                <span>Gianmarti Meza Machaca</span>
            </header>
                <div id="barra">
                    <a href="" >inicio</a>
                    <a href="">Cerrar sesión</a>
                    <span>Viernes 26 de agosto de 2016</span>
                </div>
                <aside id="barra-lateral">
                    <nav>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registrar notas</li>
                                <li>>Mensajes</li>
                                <li>>Publicar materiales</li>
                            </ul>
                        </section>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registro docente</li>
                                <li>>Mis capacitaciones</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="mis-cursos">Mis cursos</h1>
                <section id="carreras">
                            <header id="lol">USIL - CARRERAS UNIVERSITARIAS : Periodo - 2016-02 </header>
                            <ul id="bloque">
                                <li>TALLER DE SOFTWARE II (FC-INF TALLSFW2) - Bloque: FC-PREINF02C1M</li>
                                <li>ANÁLISIS Y DISEÑO DE DATOS (FC-INF ANADISDA) - Bloque: FC-PREINF02P1T</li>
                            </ul>
                        </section>
                <section id="principal"></section>
                <footer id="pie">UNIVERSIDAD SAN IGNACIO DE LOYOLA / Av. La Fontana 550, La Molina Lima - Perú Central Telefónica (511) 317 - 1000</footer>
        </section>
    </body>
</html>

Upvotes: 0

Shivani
Shivani

Reputation: 347

body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}
#cabecera{
    background-image: url(http://content.escuelaninja.com/images/infosil.png);
    min-height:100px;
}
#cabecera span{
    float:right;
    color:#fff;
    margin-top:20px;
    margin-right:20px;
}
#barra{
    padding:10px;
    background-color:#0e1a46;
    color:white;
}
#barra a {
    color: white;
}
#barra span{
    float:right;
}
#pie {
    text-align:center;
    color: #fff;
    background-color:#666;
    padding:10px;
    clear:both;
}
#barra-lateral{
    float:left;
    min-height:200px;
    width:25%;
}
#principal{
    margin-left:25%;
}
#barra-lateral nav { 
    border: 1px solid #c5c5c5;
    border-radius:6px;
    background-color:#f0f0f0;
    margin:15px;

}
#barra-lateral nav section{
    margin:6px;
}
#barra-lateral nav section header{
    padding:8px;
    font-weight:bold;
    color: #fff;
    background-color:#225ea2;
}
#barra-lateral ul{
    background-color:#fff;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#barra-lateral ul li{
    padding:4px;
    padding-left:15px;
}
#mis-cursos{
    color:#0e1a46;
    text-align:center;
}
#lol{
    border:1px solid black;
    margin-right:10%;
    margin-top:0;
    clear:right;
    background-color:#12306b;
    color:white;
    padding:10px;
}
#bloque{
       border:1px solid gray;
    margin-right:10%;
    margin-top:0%;
    background-color:#eaeaeb;
}
#bloque li{
    border:1px solid gray;
    padding:7px;
    list-style-type:none;

}
#carreras {
	margin-left: 260px;
}
#carreras ul {
    list-style-type:none;
    padding: 0;
}
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <section id="contenedor">
            <header id="cabecera">
                <span>Gianmarti Meza Machaca</span>
            </header>
                <div id="barra">
                    <a href="" >inicio</a>
                    <a href="">Cerrar sesión</a>
                    <span>Viernes 26 de agosto de 2016</span>
                </div>
                <aside id="barra-lateral">
                    <nav>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registrar notas</li>
                                <li>>Mensajes</li>
                                <li>>Publicar materiales</li>
                            </ul>
                        </section>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registro docente</li>
                                <li>>Mis capacitaciones</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="mis-cursos">Mis cursos</h1>
                <section id="carreras">
                            <header id="lol">USIL - CARRERAS UNIVERSITARIAS : Periodo - 2016-02 </header>
                            <ul id="bloque">
                                <li>TALLER DE SOFTWARE II (FC-INF TALLSFW2) - Bloque: FC-PREINF02C1M</li>
                                <li>ANÁLISIS Y DISEÑO DE DATOS (FC-INF ANADISDA) - Bloque: FC-PREINF02P1T</li>
                            </ul>
                        </section>
                <section id="principal"></section>
                <footer id="pie">UNIVERSIDAD SAN IGNACIO DE LOYOLA / Av. La Fontana 550, La Molina Lima - Perú Central Telefónica (511) 317 - 1000</footer>
        </section>
    </body>
</html>

Upvotes: 0

cjmling
cjmling

Reputation: 7278

You should try using grid library. ( A popular css library with grid is http://getbootstrap.com/css/ )

Anyway this a quick fix https://jsfiddle.net/rdrchdtw/1/

#bloque li{
   border:1px solid gray;
   padding:7px;
   list-style-type:none;
   //margin-left:25.9%;  //Remove this
}

#carreras ul {
    margin-left:10px;
    list-style-type:none;
    margin-left:27%;     //Add this
    padding-left:0px;    //Add this
}

Upvotes: 2

Related Questions