Hola, estoy aprendiendo CSS y mientras creaba una pagina me di con un problema. Y es que al colocar el texto este se sale de los contenedores en los que los coloco. ¿Alguien me da una mano? Gracias por adelantado por la ayuda.
HTML:
Código HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo5part3.css">
</head>
<body>
<div id="outer">
<div id="izquierda"></div>
<div id="centro">
<div id="cabecera"><h1><span class="verde">ejercicios</span> & <span class="rojo">css</span></h1></div>
<div id="menu">
<ul>
<li class="first"><a href="#">homepage</a></li>
<li><a href="#">my journal</a></li>
<li><a href="#">my pictures</a></li>
<li><a href="#">my favorites</a></li>
<li><a href="#">contact me</a></li>
</ul>
</div>
<div id="contenido">
<div id="contenido1">Veroeros Etiam
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Duis eget ipsum eget nisi semper</li>
<li>Duis blandit dignissim velit</li>
<li>Aenean sit amet massa et eros</li>
<li>Phasellus malesuada feugiat velit</li>
<li>Ut ut sem id ipsum pharetra porttitor</li>
<li>Aenean facilisis risus sit amet purus</li>
<li>Sed porta neque sed nulla</li>
<li>Nunc volutpat quam a ante</li>
<li>Aliquam dignissim dui quis arcu</li>
<li>Praesent vel velit eu ligula viverra</li>
<li>Cras ultricies metus eu elit</li>
<li>In non augue eu enim lacinia tempus</li>
<li>Donec blandit eros eleifend pede</li>
<li>Integer sollicitudin nisi eget lorem</li>
<li>Fusce quis sapien sed neque sodales</li>
<li>Suspendisse condimentum fringilla</li>
<li>Quisque id elit id odio venenatis</li>
<li>Integer auctor facilisis mi</li>
<li>Donec ultricies ultrices diam</li>
<li>Praesent at urna et magna vehicula</li>
</ul>
</div>
<div id="contenido2">2</div>
<div id="contenido3">3</div>
</div>
<div id="copyright">Copyright (c) 2006 Sitename.com</div>
<div id="pie"></div>
</div>
<div id="derecha"></div>
</div>
</body>
</html>
CSS:
Código HTML:
body{
width:100%;
height:100%;
overflow:hidden;
margin:0;
padding:0;
font-family:"trebuchet ms",sans-serif;
color:silver;
}
#izquierda,#centro,#derecha {
position: absolute;
float: left;
height:100%;
}
#izquierda{
background-color:#94ad35;
width:10%;
border-width:1px;
border-style:solid;
border-color:#9aae37;
}
#centro{
left:10%;
background-color:#f2f0f1;
width:80%;
}
#derecha{
left:90%;
background-color:#94ad35;
width:10%;
border-width:1px;
border-style:solid;
border-color:#94ab38;
}
#cabecera{
height:10%;
background-color:#f2f2e6;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:5px;
}
#cabecera h1{
text-transform:uppercase;
font-family:"times new roman";
font-size: 2.5em;
}
.verde{
color: #94ad35;
}
.rojo{
color: #c53430;
}
#menu{
height:5%;
background-color:#94ad35;
background-image:url("images/img2.gif");
background-repeat:repeat-y;
background-position:bottom left;
}
#menu ul{
list-style:none;
text-align:center;
}
#menu li{
display:inline;
text-transform:capitalize;
text-align:center;
text-align:center;
vertical-align:middle;
font-size:100%;
}
a:link,a:visited,a:active{
text-decoration:none;
color:white;
}
a:hover{
background-image:url("images/img3.gif");
}
#contenido{
height:69%;
background-color:#f2f2e6;
}
#contenido1,#contenido2,#contenido3{
background-color:#f2f2e6;
float:left;
}
#contenido1{
height:100%;
width:30%;
float:left;
}
#contenido2{
height:30%;
width:70%;
float:left;
}
#contenido3{
height:70%;
width:70%;
}
#copyright{
height:4%;
background-color:#94ad35;
text-align:center;
color:white;
}
#pie{
height:4%;
background-color:#f2f2e6;
}