Recuadro css

josevc93 · #1 (**permalink**) 05/12/2014, 03:46

Buenas, en un div de mi web quiero ponerle bordes. Y no solo eso, quiero que el titulo aparezca justo en el borde, tal como muestro en la siguiente foto:

http://subefotos.com/ver/?c2695ed08b397fc141db3f0ad83b9b87o.png#codigos

¿Alguien sabría como se hace algo así? (aplicado a un div cualquiera no a un formulario)

Muchas gracias !!!

PHPeros · #2 (**permalink**) 05/12/2014, 06:08

En el ejemplo que pones está hecho con las etiquetas <fieldset> y <legend>. Pero eso, en este caso no sirve... tampoco creo que sea muy difícil superponer un texto por encima de un div con borde

ruizinho · #3 (**permalink**) 09/12/2014, 12:03

Hola, aquí tienes un ejemplo simple, supongo que con esto tendrás suficiente para hacerlo:

Archivo HTML:

Código HTML:

<!DOCTYPE HTML>

<html lang="es">
<head>
     <title>Prueba</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />

<link href="style.css" rel="stylesheet" type="text/css" />

  
</head>
<body>

	<div id="container">
		<div id="titulo"><span>Este es el titulo</span></div>
		<div id="recuadro">
			<span>Este es el recuadro con tus bordes</span>
		</div>
	</div>

</body>

Archivo CSS:

Código:

body{
	width: 100%;

}

#container{
	width: 100%;

}

#titulo{
	float: left;
	width: 75%;


}

#titulo span{
	float: right;
}

#recuadro{
	float: left;
	width: 75%;
	height: 300px;

	border: 2px solid #000;
	
}

Te adjunto una foto para que lo veas:

Bueno, aver si te sirve...

moginn · #4 (**permalink**) 22/12/2014, 00:31

Código HTML:

<!DOCTYPE HTML>

<html lang="es">
<head>
<style>
.fieldset {
    border: 2px groove threedface;
    border-top: none;
    padding: 0.5em;
    margin: 1em 2px;
}
.fieldset > h1 {
    font: 1em normal;
    margin: -1em -0.5em 0;
}   
.fieldset > h1 > span {
    float: left;
}
    .fieldset > h1:before {
        border-top: 2px groove threedface;
        content: ' ';
        float: left;
        margin: 0.5em 2px 0 -1px;
        width: 0.75em;
    }
    .fieldset > h1:after {
        border-top: 2px groove threedface;
        content: ' ';
        display: block;
        height: 1.5em;
        left: 2px;
        margin: 0 1px 0 0;
        overflow: hidden;
        position: relative;
        top: 0.5em;
    }
</style>
  
</head>
<body>
<div class="fieldset"><h1><span>Legend</span></h1> Fieldset</div>

</body>