Reputation: 15
This is what I'm currently aiming for (minus the red arrows, of course):
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:
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
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
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
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