Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 15 de Enero 2016, 22:17
-
Código del ejercicio CU01040D del curso CSS desde cero.
Código HTML:
<!DOCTYPE htlm>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos72.css"/>
<title>Ejemplo text-align</title>
</head>
<body>
<div id="caja1"><p id="a">El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p><p>El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas <span>palabras subrayadas</span> y el primer párrafo indentado un 10%.</p></div>
<div id="caja2"><p id="c">El div 2 debe tener alineación del texto a la derecha,
color de texto #008080.
Debe contener un texto suficientemente largo, con algunas <span id="b">palabras subrayadas por encima</span>
y el primer párrafo indentado en 50 píxeles.</p>
<p>El div 2 debe tener alineación del texto a la derecha,
color de texto #008080.
Debe contener un texto suficientemente largo, con algunas <span id="b">palabras subrayadas por encima</span> y el primer párrafo indentado en 50 píxeles.</p></div>
<div id="caja3"><p id="e">El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p><p>El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas <span id="d">palabras tachadas</span>, y el primer párrafo indentado en un 20%.</p></div>
</body>
</html>
Código CSS: "estilos72.css"
div {
display: inline-block;
width: 200px;
height: 400px;
padding: 10px;
border-style: solid;
border-width: 4px;
font-size: 14px;
}
#caja1 {
text-align: center;
color: #FF6347;
}
#a {
text-indent: 10%;
}
span {
text-decoration: underline;
}
#caja2 {
text-align: right;
color: #008080;
white-space: pre-line;
}
#b {
text-decoration: overline;
}
#c {
text-indent: 50%;
}
#caja3 {
text-align: justify;
color: #8B4513;
white-space: pre-wrap;
}
#d {
text-decoration: line-through;
}
#e {
text-indent: 20%;
}
No entiendo por qué las cajas div no están alineadas.
-
Los div con display inline-block no salen alineados verticalmente
Buenas dimiste
El ejercicio pedía que cada div tuviera un margin de 20 px pero no veo que lo hayas establecido
El problema de que los divs no se alineen verticalemnte está relacionado con la propiedad baseline que aplica para cajas que se visualizan inline. Estudiando esta propiedad se puede llegar a entender por qué ocurre eso.
Para resolver este problema basta añadir esta regla: vertical-align:top; dentro de las reglas para los elementos div. De este modo los tres div quedan alineados verticalmente. Esta regla solo la podemos aplicar para elementos inline
Salu2
-
Buenas Ogramar,
tienes razón, se me ha olvidado lo de los 20px de margin. Gracias por explicarme lo de la propiedad vertical-align, me falta y tanta experiencia con las hojas de estilos. Pero bueno, me lo tomo con calma, jeje ;)
Saludos