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: miguelito en 05 de Abril 2017, 15:17
-
Hola,quiero sobre poner dos cajas y no consigo mas que se en el siguiente codigo.
la idea es sacar el texto del borde de puntos, no es ponerlo encima, si no desplazarlo en el espacio para que parezca que está desplazado por encima. me han dicho que podria hacer dos párrafos con la etiqueta p, una de ellas darle el borde dotted y en la otra usar paddings u otras etiquetas para moverlo por encima. pero solo soy capaz de hacer lo siguiente. gracias a todos.....:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prueba de practica ejercio-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#marco{
border: 15px solid #696969;
width: 890px;
height: auto;
}
.contenedor {
border: 15px solid #DCDCDC;
width: 860px;
height: auto;
border:
}
.cabecera {
padding: 15px;
border: none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
clear: both;
}
.columnaderecha {
padding: auto;
border: 15px;
background-color: #A9A9A9;
margin-right: 15px;
width: 200px;
height: 60px;
float: right;
clear: both;
text-align: center;
}
.bloque1 {
padding: 15px ;
border: 15px;
background-color: #DCDCDC;
margin: 15px;
width:580px;
height: auto;
float: left-top;
}
.bloque2 {
width:540px;border-color:beige; border-style: dotted; border-width: 5px ;
margin: 15px;
}
.parrafo1 {
margin:dotte; padding-right:0% ;border-width: 5px ; border-color:beige; border-style: dotted; width:550px; margin-top: 15px font-size:19px;
}
.parrafo2{
position: relative;margin-left: -10px;margin-top: -33px
}
.pie {
padding: 15px ;
border : none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
}
.rojo {
color: red;
}
.blanco {
color: white;
}
</style>
</head>
<body>
<div id="marco">
<div class="contenedor">
<div class="cabecera">
<h1 class="rojo">CABECERA</h1>
<h3 class="blanco">Subtitulo de la cabecera</h3>
</div>
<div class="columnaderecha">
<h4>Esta es la columna derecha.</h4>
</div>
<div class="bloque1">
<p class="parrafo1" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
<p class="parrafo2" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
<p class="bloque2">Esto es el bloque 2.</p>
</div>
<div class="pie">
<h3 class="blanco">Esto es el pie de pagina.</h3>
</div>
</div>
</div>
</body>
</html>
-
Buenas.
En este tema del curso CSS trata del posicionamiento de los elementos html.
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=736:propiedad-position-css-static-relative-absolute-fixed-top-right-bottom-left-ejemplos-practicos-cu01032d&catid=75&Itemid=203
No entendí muy bien tu duda, he escrito un código que no se si será lo que estás buscando.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prueba de practica ejercio-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: yellow;
}
.parrafo1 {
position: relative;
top: -15px;
left: -25px;
font-size:19px;
width: 120%;
}
.bloque1 {
top: 50px;
left: 50px;
position: absolute;
width:550px;
border-color: white;
border-style: dotted;
border-width: 5px;
}
</style>
</head>
<body>
<div class="bloque1">
<p class="parrafo1">
esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es el bloque 1.
</p>
</div>
</body>
</html>
Saludos. ;D
-
mu chas gracias. lo que quiero es:
--• Página centrada de 800 píxeles de ancho.
• Reinicializa todos los márgenes y rellenos como primera declaración de estilos.
• Cabecera y pie de página que ocupen todo el ancho y cuyas alturas se ajusten al contenido.
• Distancia entre elementos de 15 píxeles.
• Una columna a la derecha de 200 píxeles de ancho.
• El primer bloque de texto simulará texto saliéndose por ambos lados de la caja. Los bloques de texto tendrán un borde de 5 píxeles.
• Respeta los colores de fuentes y fondos.
y yo solo he conseguido lo siguiente, me falta sacar el texto fuera de los puntos
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prueba de practica ejercio-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#marco{
border: 15px solid #696969;
width: 890px;
height: auto;
}
.contenedor {
border: 15px solid #DCDCDC;
width: 860px;
height: auto;
border:
}
.cabecera {
padding: 15px;
border: none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
clear: both;
}
.columnaderecha {
padding: auto;
border: 15px;
background-color: #A9A9A9;
margin-right: 15px;
width: 200px;
height: 60px;
float: right;
clear: both;
text-align: center;
}
.bloque1 {
padding: 15px ;
border: 15px;
background-color: #DCDCDC;
margin: 15px;
width:580px;
height: auto;
float: left-top;
}
.bloque2 {
width:540px;border-color:beige; border-style: dotted; border-width: 5px solid;
margin: 15px;
clear: both;
}
.parrafo1 {
margin:dotte; padding-right:0% ; border-color:beige; border-style: dotted; width:550px; margin-top: 15px font-size:19px;
}
.parrafo2{
position: relative;margin-left: -10px;margin-top: -33px
}
.pie {
padding: 15px ;
border : none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
}
.rojo {
color: red;
}
.blanco {
color: white;
}
</style>
</head>
<body>
<div id="marco">
<div class="contenedor">
<div class="cabecera">
<h1 class="rojo">CABECERA</h1>
<h3 class="blanco">Subtitulo de la cabecera</h3>
</div>
<div class="columnaderecha">
<h4>Esta es la columna derecha.</h4>
</div>
<div class="bloque1">
<p class="parrafo1" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
<p class="bloque2">Esto es el bloque 2.</p>
</div>
<div class="pie">
<h3 class="blanco">Esto es el pie de pagina.</h3>
</div>
</div>
</div>
</body>
</html>
-
Buenas.
De momento, al revisar el código hay varias cosas que corregir:
en .contenedor te dejaste la propiedad border sin completar.
en .columnaderecha usas padding: auto; y auto no es un valor válido para padding.
en .bloque1 usas float: left-top; y left-top no es un valor válido, float acepta los valores none, right, left, initial e inherit.
en .bloque2 usas border-width: 5px solid; y border-width no admite el esitlo del borde como valor, solo se debe indicar el grosor del borde.
en .parrafo1 le das a margin el valor dotte, esto tampoco es correcto.
en .parrafo1 también se te olvido colocar punto y coma despues del valor del margin-top, con la consecuencia que este y lo que viene después no se ejecuta.
Sobre el enunciado y la parte que comentabas, ¿el ejemplo que te puse anteriormente es lo que quieres que pase con el primer bloque de texto?
Saludos. ;D
-
buen dia, muchas gracias ya casi lotengo si puedo acoplar tu solucion genial
-
Te dejo una posible solución.
Espero que te valga.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prueba de practica ejercio-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#marco{
border: 15px solid #696969;
width: 800px;
margin: 0 auto;
}
.contenedor {
border: 15px solid #DCDCDC;
}
.cabecera {
background-color: #696969;
margin: 15px;
}
.columnaderecha {
background-color: #A9A9A9;
margin: 0 15px 15px 0;
width: 200px;
height: 200px;
float: right;
text-align: center;
}
.bloque1 {
background-color: #DCDCDC;
margin: 0 15px 15px 15px;
width: 525px;
float: left;
}
.bloque2 {
border: dotted 5px beige;
margin: 15px;
}
.contparrafo1 {
border: dotted 5px beige;
margin: 15px;
}
.parrafo1 {
font-size:19px;
position: relative;
width: 550px;
left: -15px;
}
.pie {
clear: both;
padding: 15px ;
background-color: #696969;
margin: 15px;
}
.rojo {
color: red;
}
.blanco {
color: white;
}
</style>
</head>
<body>
<div id="marco">
<div class="contenedor">
<div class="cabecera">
<h1 class="rojo">CABECERA</h1>
<h3 class="blanco">Subtitulo de la cabecera</h3>
</div>
<div class="columnaderecha">
<h4>Esta es la columna derecha.</h4>
</div>
<div class="bloque1">
<div class="contparrafo1">
<p class="parrafo1" >esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto es
el bloque 1.</p>
</div>
<p class="bloque2">Esto es el bloque 2.</p>
</div>
<div class="pie">
<h3 class="blanco">Esto es el pie de pagina.</h3>
</div>
</div>
</div>
</body>
</html>
Saludos. ;D
-
muchas gracias, eso es lo que buscaba maaa o menos. un saludo y buen dia.
-
hola,he provado tu codigo y es lo necesario, pero si le doy los800px que tiene que tener la cabecera se me vuelve a quedar dentro por la derecha, y con el padding del texto estoy intentando que salga pero se queda estancado y no va hacia la derecha.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prueba de practica ejercio-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#marco {
border: 15px solid #696969;
width: 890px;
margin: 0 auto;
}
.contenedor {
border: 15px solid #DCDCDC;
width: 860px;
height: auto;
}
.cabecera {
padding: 15px;
border: none;
background-color: #696969;
margin: 15px;
width: 800px;
height: auto;
clear: both;
}
.columnaderecha {
background-color: #A9A9A9;
margin: 0 15px 15px 0;
width: 200px;
height: 80px;
float: right;
text-align: center;
}
.bloque1 {
background-color: #DCDCDC;
margin: 0 15px 15px 15px;
width: 610px;
float: left;
padding-right: -15;
}
.bloque2 {
border: dotted 5px beige;
margin: 15px;
font-size: 19px;
}
.contparrafo1 {
border: dotted 5px beige;
margin: 15px;
}
.parrafo1 {
font-size: 19px;
position: relative;
width: 540px;
left: -15px;
}
.pie {
clear: both;
padding: 15px;
background-color: #696969;
margin: 15px;
}
.rojo {
color: red;
}
.blanco {
color: white;
}
</style>
</head>
<body>
<div id="marco">
<div class="contenedor">
<div class="cabecera">
<h1 class="rojo">CABECERA</h1>
<h3 class="blanco">Subtitulo de la cabecera</h3>
</div>
<div class="columnaderecha">
<h4>Esta es la columna derecha.</h4>
</div>
<div class="bloque1">
<div class="contparrafo1">
<p class="parrafo1">esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque 1.Esto es el bloque1.Esto
es el bloque 1esto es el bloque 1.</p>
</div>
<p class="bloque2">Esto es el bloque 2.</p>
</div>
<div class="pie">
<h3 class="blanco">Esto es el pie de pagina.</h3>
</div>
</div>
</div>
</body>
</html>
-
Según el enunciado que pusiste lo que tiene que tener 800px es la página.
--• Página centrada de 800 píxeles de ancho.
Y cuando introduzcas código, pulsa primero el icono "#" y después pega el código entre las etiquetas que apareceran.
[code] aquí tu código [/code]
-
tienes razon, perdona y muchas gracias por aclararme lo del como escribir