CSS - Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 12/03/2019 19:12:27

¡Hola!

Bueno, antes de nada, soy totalmente novata en estos temas.

Estoy intentando hacer una tabla muy simple, pero no consigo que me quede como yo quiero.

Lo que he conseguido:

VvHEdPh

Lo que quiero conseguir:

2P7QWt2

Básicamente que la línea inferior quede:
-dentro de la tabla, abajo
-con la mitad de grosor

Este es el código:

<center><link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

<div id="cuadro1">

<div id="titulo">TITULO</div>

<img src="https://i.imgur.com/5u7xurk.png" width="450">

<div id="texto">Lore ipsum etc etc</div></div>

<div id="creditos"><a href="URL">

<font color="#000000">NOMBRE CREDITO</font></a><center></div></div><style type="text/css">#cuadro1 {width: 450px; background-color: #000000; padding: 20px; border: 3px double #700000;} #titulo {width: 420px; background-color: #700000; padding:15px; color:#fef8f8; text-align:center; text-transform:uppercase; font-family: Inconsolata; letter-spacing:5px; font-size:20px; margin-bottom: 6px;} #texto {width: 430px; height: auto; font-size: 14px; color: # fef8f8; text-align: justify; font-family: Inconsolata; line-height: 100%; margin-top: 10px; margin-bottom: 2px;} #creditos {height: 20px; background: #700000; font-size: 12px; text-align: center; padding: 10px; color: #000; font-family: times new roman; letter-spacing: 5px; text-transform: uppercase; line-height: 100%; font-weight: bold; width: 420px;}</style>

¿Alguien podría ayudarme?

Gracias de antemano.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 4

Val: 560

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Xavi (33 intervenciones) el 12/03/2019 22:40:41

Hola Maria, simplemente colocando el <div> dentro del cuadro te funcionaria, no?

algo así:

<div id="cuadro1">

    <div id="titulo">TITULO</div>

    <div><img src="https://i.imgur.com/5u7xurk.png" width="450"></div>

    <div id="texto">Lore ipsum etc etc</div>

    <div id="creditos">

        <a href="URL">

            <font color="#000000">NOMBRE CREDITO</font>

        </a>

    </div>

</div>

Cuidado, que en tu código cierras divs y center que no existen

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 12/03/2019 23:05:19

Hola Xavi.

Si lo pongo como tú me lo has dejado se me desconfigura totalmente. No aparecen los márgenes, ni el texto donde yo quiero, ni los colores... yo necesito exactamente la imagen tal como la tengo, pero con la barra roja de abajo dentro del margen de la tabla.

Además, mi código ya tiene <div id="cuadro1"> al inicio... ?

Ahora he pasado de esto:

VvHEdPh

A esto:

Igualmente, revisaré lo de los divs y center que no existen.

¿Alguien me puede ayudar con este código, por favor? Necesito que quede así (hecho con photshop):
-línea roja de abajo puesta dentro de la tabla
-con la mitad de grosor que tiene ahora

2P7QWt2

¡Gracias!

Valora esta respuesta

Comentar

Pos: 4

Val: 560

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Xavi (33 intervenciones) el 13/03/2019 08:02:59

Hola Maria, no se como lo pusiste, pero seria algo así:

Faltara que pongas el color rojo exacto!!!

<style>

#cuadro1 {

    background-color:black;

    display:inline-block;

#cuadro1>div {

    border:1px solid red;

    margin:10px;

#cuadro1>div>div {

    margin:10px;

#titulo {

    background-color:red;

    text-align:center;

    color:white;

    padding:10px;

    margin:40px 0 20px 0;

#texto {

    color:white;

    margin:5px;

#creditos {

    background-color:red;

    margin:20px 0;

    text-align:center;

#creditos a {

    color:black;

    text-decoration:none;

</style>

<div id="cuadro1">

    <div>

        <div>

            <div id="titulo">TITULO</div>

            <div>

                <img src="https://i.imgur.com/5u7xurk.png" width="450">

            </div>

            <div id="texto">Lore ipsum etc etc</div>

            <div id="creditos">

                <a href="URL">NOMBRE CREDITO</a>

            </div>

        </div>

    </div>

</div>

Valora esta respuesta

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 13/03/2019 11:04:53

Hola de nuevo Xavi. Muchas gracias por tu interés, pero sigue sin salirme como yo quiero. He puesto los colores y el “center” porque si no la tabla no me queda centrada.

qVcbqQJ

Ha desaparecido el borde rojo exterior, el relleno del título y el relleno del crédito. Y ahora los elementos interiores no están centrados.

Código ahora:

<center>

<div id="cuadro1">

   <div>

       <div>

           <div id="titulo">TITULO</div>

           <div>

               <img src="https://i.imgur.com/5u7xurk.png" width="450">

           </div>

           <div id="texto">Lore ipsum etc etc</div>

           <div id="creditos">

               <a href="URL">NOMBRE CREDITO</a>

           </div>

       </div>

   </div>

</div>

<style>

#cuadro1 {

   background-color:#000000;

   display:inline-block;

#cuadro1>div {

   border:1px #700000;

   margin:10px;

#cuadro1>div>div {

   margin:10px;

#titulo {

   background-color:#700000;

   text-align:center;

   color:#000000;

   padding:10px;

   margin:40px 0 20px 0;

#texto {

   color:#fef8f8;

   margin:5px;

#creditos {

   background-color:#700000;

   margin:20px 0;

   text-align:center;

#creditos a {

   color:#000000;

   text-decoration:none;

</style>

Repito que soy muy muy novata en esto, pero esto no forma parte del diseño de una web, esto es para una tabla de respuesta de post, ideada para que pueda usarla en un foro de rol cualquiera, sea mío o no.

Lo digo porque, en mi poco conocimiento, y si me equivoco, rectificadme, por favor, necesito los < center > que has quitado. Uno centra la tabla dentro del post, y el otro el texto…?

Pero sea como sea, la cosa sigue yendo a peor, no a mejor.

Te agradezco mucho tu respuesta y el tiempo que has invertido en ella, pero no me vale.

¿Alguna propuesta más?

Valora esta respuesta

Comentar

Pos: 4

Val: 560

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Xavi (33 intervenciones) el 13/03/2019 15:15:41

La etiqueta <center> ya no esta en html5!!! no se recomienda su uso.

Aqui lo tienes centrado...

<style>

.wrapper {

    text-align:center;

#cuadro1 {

    background-color:black;

    display:inline-block;

#cuadro1>div {

    border:1px solid red;

    margin:10px;

#cuadro1>div>div {

    margin:10px;

#titulo {

    background-color:red;

    color:white;

    padding:10px;

    margin:40px 0 20px 0;

#texto {

    color:white;

    margin:5px;

    text-align:left;

#creditos {

    background-color:red;

    margin:20px 0;

#creditos a {

    color:black;

    text-decoration:none;

</style>

<div class="wrapper">

    <div id="cuadro1">

        <div>

            <div>

                <div id="titulo">TITULO</div>

                <div>

                    <img src="https://i.imgur.com/5u7xurk.png" width="450">

                </div>

                <div id="texto">Lore ipsum etc etc</div>

                <div id="creditos">

                    <a href="URL">NOMBRE CREDITO</a>

                </div>

            </div>

        </div>

    </div>

</div>

Valora esta respuesta

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 13/03/2019 19:53:53

Mira, lo he copiado y pegado tal cual me lo has dado.

usPR0nu

No entiendo porqué no me sale como a tí, que se te ve perfecto... se me queda a un lado, sin colores, etc.

Pero bueno, no pasa nada. No quiero molestar más con esto, porque realmente hay solución aunque yo no pueda usarla... lo haré de alguna otra manera.

¡Gracias Xavi!

Valora esta respuesta

Comentar

Pos: 4

Val: 560

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Xavi (33 intervenciones) el 13/03/2019 20:17:58

No puede ser... seguro que has copiado todo mi código, y unicamente mi código? que no hay nada mas en el archivo .html?

Valora esta respuesta

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 13/03/2019 20:44:50

Jajaja te prometo que lo he copiado igual.

Quito el foro de "en construcción" y te dejo link al post para que lo veas tú mismo.

http://horrorland.foroactivo.com/t89-tabla-de-prueba#112

¡Gracias!

Valora esta respuesta

Comentar

Pos: 4

Val: 560

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Xavi (33 intervenciones) el 14/03/2019 08:06:35

Maria, en tu página no están los estilos!!!! que es lo que le da el formato!!!

donde esta el contenido que te he puesto entre <style> y </style>?

Valora esta respuesta

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 14/03/2019 13:47:44

Que si que están. Lo he vuelto a revisar. Postea tu mismo el código y ponlo ya verás como no miento.(??

nFDm3Ul

Valora esta respuesta

Comentar

Pos: 4

Val: 560

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Xavi (33 intervenciones) el 14/03/2019 14:45:33

maria, ahi no puedes añadir el código!!!
Si miras tu código fuente, lo ha entrado como codigo HTML... con sus saltos de linea...

Esto es lo que tienes en tu código y no es correcto!!! fijate al ver el código fuente de tu pagina, veras algo así, y esto no es lo que yo te puse!!!

<style><br />.wrapper {<br />   text-align:center;<br />}<br />#cuadro1 {<br />   background-color:black;<br />   display:inline-block;<br />}<br />#cuadro1>div {<br />   border:1px solid red;<br />   margin:10px;<br />}<br />#cuadro1>div>div {<br />   margin:10px;<br />}<br />#titulo {<br />   background-color:red;<br />   color:white;<br />   padding:10px;<br />   margin:40px 0 20px 0;<br />}<br />#texto {<br />   color:white;<br />   margin:5px;<br />   text-align:left;<br />}<br />#creditos {<br />   background-color:red;<br />   margin:20px 0;<br />}<br />#creditos a {<br />   color:black;<br />   text-decoration:none;<br />}<br /><br /></style>

No se como tienes realizada tu web, pero lo suyo es que modifiques el código fuente.

Valora esta respuesta

Comentar

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 14/03/2019 14:57:30

No quiero poner esta tabla en mi web. La quiero para usarla como adorno de posts, sea en mi pagina o en otras.

Valora esta respuesta

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 14/03/2019 15:29:48

Siento el doble post... quería comentar que he modificado los permisos y ahora como invitado puedes postear en afiliados.

De verdad te agradecería que postearas el código a modo de prueba como hice yo, y así lo vemos como queda(?

Porque no tiene nada que ver con el código de la página en sí, ya que debo poderlo usar en foros ajenos al mío. Es muy común, la gente decora sus escritos con tablitas div como estas y yo quiero aprender a hacerlas por mí misma.

¡Y gracias de nuevo!

Valora esta respuesta

Comentar

Pos: 105

Val: 6

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Luis Ortega (3 intervenciones) el 14/03/2019 03:29:49

Hola que tal, creo que tu problema es por quizás no tengas tanclaro como tienes ordenados los <DIV>. El haber puesto el <DIV> "creditos" fuera en independiente del <DIV> "Titulo" te produce la confusión. Ahora, lo que te propongo es que ese <DIV> "creditos" lo coloques como hijo de "titulo". Para ejemplificarlo te muestro el siguiente código modificado:

<html>

<head>

<style type="text/css">

	a:link{

		text-decoration: none;

	#cuadro1 {

		width: 450px;

		background-color: #000000;

		padding: 20px;

		border: 3px double #700000;

		margin: 20px;

	#titulo {

		width: 420px;

		background-color: #700000;

		padding:15px;

		color:#fef8f8;

		text-align:center;

		text-transform:uppercase;

		font-family: Inconsolata;

		letter-spacing:5px;

		font-size:20px;

		margin-bottom: 6px;

	#texto {

		width: 450px;

		height: auto;

		font-size: 14px;

		color: #C3C3C3;

		text-align: justify;

		font-family: Inconsolata;

		line-height: 100%;

		margin-top: 10px;

		margin-bottom: 20px;

	#creditos {

		height: 1.5em;

		background: #700000;

		font-size: 12px;

		text-align: center;

		padding-top: 5px;

		color: #000;

		font-family: sans-serif;

		text-decoration:none;

		letter-spacing: 5px;

		text-transform: uppercase;

		line-height: 100%;

		font-weight: bold;

		width: 450px;

</style>

</head>

<body>

	<center>

		<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

	</center>

<div id="cuadro1">

	<div id="titulo">TITULO</div>

		<img src="https://i.imgur.com/5u7xurk.png" width="450">

		<div id="texto">Lore ipsum etc etc</div>

		<div id="creditos">

			<a href="URL"><font color="#000000">NOMBRE CREDITO</font></a>

		</div>

	</div>

</div>

El resultado sería el siguiente:

Screenshot_2019-03-14-Screenshot

Espero te sirva.

Valora esta respuesta

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 14/03/2019 13:50:39

Hola Luis. ¡Gracias por tu respuesta!

Pero se me desconfigura igual.

En las tablas que yo veo por ahí en foros nunca usan el < html > ni < head > directamente lo hacen todo con divs. Por eso yo lo hice así, intentando conseguir parecido resultado. Pero es mas difícil de lo que creía.

Tu tabla me queda así. Sin modificarle nada.

tkFWjRn

EDITO:

Os dejo de muestra otra tabla, que no es mía, pero para que veáis que todo son div y esa si se me ve bien, centrada y con los colores, a modo de ejemplo:

Gp2dNzr

<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'><div style="width:360px;height:auto;margin:auto;border:10px solid #000000;"><div style="width:340px;height:auto;margin:auto;background:#ffffff;border:10px solid #660000;"><table cellspacing="2"><tr><td><div style="width:150px; height:301px;"><img src="https://i.imgur.com/Xz6Rsvh.png" style="width:150px;height:247px;" /><div style="width:150px;height:13px;background:#000000;border-bottom:1px solid #ffffff;text-align:center;font-size:10px;font-family:calibri;color:#ffffff;">DATO</div><div style="width:150px;height:13px;background:#000000;border-bottom:1px solid #ffffff;text-align:center;font-size:10px;font-family:calibri;color:#ffffff;">DATO</div><div style="width:150px;height:13px;background:#000000;border-bottom:1px solid #ffffff;text-align:center;font-size:10px;font-family:calibri;color:#ffffff;">DATO</div><div style="width:150px;height:13px;background:#000000;border-bottom:1px solid #ffffff;text-align:center;font-size:10px;font-family:calibri;color:#ffffff;">DATO</div></div></td><td><div style="width:183px; height:300px;"><div style="margin-bottom:3px;text-align:center;font-size:20px;font-family:Pathway Gothic One;color:#000000;">Titulo de la Busqueda</div><div style="width:178px;height:270px;margin:auto;padding:2px;border-top:1px dotted #000000;border-bottom:1px dotted #000000;text-align:justify;font-size:10px;font-family:calibri;color:#000000;line-height: 1.2;overflow:auto;">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.</div></div></td></tr></table></div></div><style type="text/css">div::-webkit-scrollbar { height: 32px; width: 5px; background: #000000; } div::-webkit-scrollbar-thumb { background: #660000; } div::-webkit-scrollbar-track  div::-webkit-scrollbar-button  </style><div style="margin-top:1px;text-align:center;font-size:9px;font-family:calibri;color:#000000;"><a href="http://savage-themes.tumblr.com/"> By Miss Atomic Bomb</a></div>

[color=#990000]→ Imágenes: Una imagen de 150x250.[/color]

Valora esta respuesta

Comentar

Pos: 105

Val: 6

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Luis (3 intervenciones) el 14/03/2019 15:02:03

Hola María, si sólo copiaste y pegaste el código que te propuse, te recomiendo revisar si está bien cerradas las etiquetas </body> y </HTML>.

En cuanto a tu duda con el uso de <HTML> y <head>, pues es la costumbre, asumo que todo código HTML va en una página web por lo cual hago uso ellos, además que la convención es que las etiquetas <style> van dentro de <head>. Pero si solo usas los <div> pues no pasa nada, te funcionará igual, sólo que si usas HTML , head y/o body, recuerda siempre cerrarlas con sus respectivas etiquetas de cierre.

Lo último, la etiqueta <Center> ya no se recomienda por qué ya no está dentro del estándar HTML5. Si quieres centrar un elemento dentro de body, usa la propiedad CSS "margin" con valor "0 auto" y si quieres centrar dentro de otro body, lo recomendable es poder hacer uso de la propiedad "position" con valor "absolute".

Valora esta respuesta

Comentar

Pos: 37

Val: 17

Parte inferior tabla div se sale por debajo de la tabla y es muy gruesa

Publicado por Maria (10 intervenciones) el 14/03/2019 15:34:46

Te pido lo mismo, Luis. SI eres tan amable, entra en el post que puse con tu tabla y míralo como queda. Puedes postear tú mismo como invitado para comprobar el resultado. No he tocado nada de tu código, tal cual me lo diste lo puse...

http://horrorland.foroactivo.com/t90-tabla-de-prueba-2#113

Y muchas gracias otra vez.

Valora esta respuesta

Comentar

Dudas sobre el uso y la complejidad del lenguaje de programación de este espacio osea el CSS

¿Cómo optimizar lightbox de imagen?