Eliminar espacio entre 2 tablas HTML CSS e imagen elimina imagen de fondo

Question

Eliminar espacio entre 2 tablas HTML CSS e imagen elimina imagen de fondo

3 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css image or haz tu propia pregunta.

user2343350 · Answer 1

Nuevo aquí, estoy creando un sitio web y parece haber un problema con una tabla que hice para contener una imagen y una tabla que hice para contener contenido. Contenido a la izquierda imagen a la derecha. Cuando hago flotar la tabla Imagen hacia la derecha, la tabla de contenido se mueve completamente debajo de ella. Cuando floto hacia la izquierda, hay demasiado espacio entre los 2. El código en cuestión es la tabla y la tabla 3. Quiero que muestre el bloque de imagen al lado de los botones de enlace y el bloque de contexto debajo de los botones pero al lado de la imagen. bloquear.

El segundo problema es el encabezado de mi logotipo, que es una imagen, está eliminando la imagen de fondo.

Código HTML

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="Articlepage.CSS" rel="stylesheet" type="text/css">
    <title>BEADLES BEADING</title>
</head>
<body id="wrap">
    <h1><img src="logo.jpg" alt="logo"></h1>
    <a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
    <a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
    <a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
    <a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
    <a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
    <table3>AD SPACE(Image)</table3>
    <table>
        <tr>
            <td>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b><br>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <br><br><br><br><br><br><br><br><br><br><br>
            </td>
        </tr>
    </table>
    <table2>
        <tr>
            <td>
                FOOTER
            </td>
        <tr>
    </table2>
</body>
</html>

Código CSS

    div{ texto-alinear:izquierda; posición: relativa; tamaño de fuente: 2.5 em; fuente-peso:negrita; } div1{ texto-alinear:izquierda; posición: relativa; tamaño de fuente: 1.5 em; sombra de texto: 2px 2px negro; familia de fuentes: Georgia, Times, serif; sombra de texto: -1px -1px negro, 1px 1px; } h1{ texto-alinear: izquierda; familia de fuentes: Arial, Helvetica, sans-serif; sombra de texto: 0.1em 0.1em 0.2em negro; tamaño de fuente: 2.0 em; estilo de fuente: cursiva; flotante: en línea; borde: 3px negro sólido; ancho: 800px; altura: 196px; relleno: 0; } h2{ texto-alinear:izquierda; posición: relativa; tamaño de fuente: 1.5 em; familia de fuentes: Verdana, Helvetica, sans-serif; sombra de texto: -1px -1px negro, 1px 1px; } p{ posición: relativa; alineación de texto: izquierda; tamaño de fuente: 1em; familia de fuentes: Georgia, Times, serif; sombra de texto: -1px -1px negro, 1px 1px; } li { posición: relativa; tamaño de fuente: 1em; } un{ relleno:0; flotador izquierdo; } b{borde:3px negro sólido; ancho: 180px; altura: 10.5 em; relleno: 10px; flotador izquierdo; } b1{borde:3px negro sólido; posición:absoluta; ancho: 40px; altura: 23em; relleno: 10px; flotar derecho; posición: relativa; } b2{ borde:3px negro sólido; posición:absoluta; ancho: 40px; altura: 23em; relleno: 10px; posición: relativa; } cuerpo{ imagen-de-fondo:url('fondo.jpg'); tamaño de fondo: 100%; margen: 20px; ancho: 800px; relleno: 30px; posición: relativa; } .Imagencentrada { text-align:center; margen superior: 0px; margen inferior: 0px; } tabla{ pantalla: bloque en línea; ancho: 640px; margen izquierdo: automático; margen derecho: automático; estilo de borde: sólido; ancho de borde: 5px; alineación de texto: centro; altura: 400px; relleno: 0; } table2{ pantalla: bloque en línea; ancho: 625px; margen izquierdo: automático; margen derecho: automático; estilo de borde: sólido; ancho de borde: 5px; alineación de texto: centro; altura: 50px; } td{ text-shadow: 0.1em 0.1em 0.2em negro; familia de fuentes: "Times New Roman", Times, serif; } table3{ flotar:derecha; ancho: 150px; estilo de borde: sólido; ancho de borde: 5px; alineación de texto: derecha; altura: 490px; relleno: 0; } p2{borde:10px negro sólido; flotante:derechos; } seleccione{ ancho: 200px } #wrap{ ancho: 900px; margen: 0 automático; }

Enlace de imágen. Mire, estoy seguro de que entiende exactamente cómo debería verse. Además, el fondo blanco debería tener una imagen lila que coloqué en el cuerpo como fondo.

Un consejo, no use tablas para el diseño. Use tablas para datos tabulares. - j08691
Las tablas se usan mejor para cosas como menús de restaurantes o marketing por correo electrónico. Sugeriría usar la etiqueta divisional o diablos incluso usando listas para organizar datos en un orden líquido. - Cam
¿Puedes publicar un enlace a un ejemplo en vivo? @ j08691, lamentablemente hoy en día los maestros y algunas instituciones les enseñan a sus estudiantes a usar una tabla sin bordes para hacer diseños, especialmente. en hacer formularios - Willy Pt
También no es una etiqueta correcta a menos que esté usando XML, no puede crear etiquetas personalizadas. - Cam
Tiene algunos otros problemas en su código. no solo es no es una etiqueta válida, no puede usar una etiqueta de tabla sin filas o columnas. - BSMP

BSMP · Answer 2

Creo que los dos problemas principales son:

Está utilizando etiquetas que no existen y
No está considerando el ancho de los bordes al configurar sus tamaños

Establece el ancho del cuerpo en 800 px, la primera tabla en 640 px y esa table3 en 150 px. Pero los bordes de ambos tienen 5px de ancho. 640 + 10 (borde izquierdo y derecho de la primera tabla) +10 (borde izquierdo y derecho de la segunda tabla) + 150 = 810. Incluso si las etiquetas fueran correctas, son demasiado anchas para ir una al lado de la otra.

Cambiar

<table3>Ad Space</table3>

y

<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>

A

<div id="adCol">Ad Space</div>

y

<div id="#imgDiv">
  <img />
  <img />
  <img /><br />
  <img />
  <img />
  <img />
</div>

En su CSS, cambie "b" a "#imgDiv img", "table" a "#imgDiv" y "table3" a "#adCol". Luego reduzca el ancho de los bordes o haga uno de ellos al menos 10px más pequeño en ancho.

No olvide eliminar también la etiqueta table2 y cambiar lo que haya llamado b1 y b2 para usar etiquetas HTML reales y cambiar b1 y b2 en su CSS a nombres de clase o id.

Además, considere no establecer el ancho del cuerpo. Probablemente no necesites eso.

Jtuck · Answer 3

En este caso, veo lo que estás tratando de lograr, pero realmente deberías usar divs, lo haría más fácil.

Pero, ¿por qué no creas una (1) tabla con un diseño como el que se muestra a continuación y la colocas en tu contenido? En lugar de crear varias tablas. Todavía puede usar CSS para agregar sus efectos.

<div id="apDiv3">
  <table width="100%" height="335" border="1">
    <tr>
      <td width="87%" height="207">CONTENT</td>
      <td width="13%" rowspan="2"><span class="style5">AD SPACE(Image)</span></td>
    </tr>
    <tr>
      <td height="50">Footer</td>
    </tr>
  </table>
</div>

Respondido 08 Abr '15, 18:04

Jtuck

Behrad Moosavi · Answer 4

no tenemos etiqueta <table2>. Deberías usar <table>.
Si desea acercar dos elementos, debe crear un div y configurar la pantalla para que se flexione y traiga 2 o más elementos. Debe establecer el ancho de los elementos al 50% si desea traer 2 elementos. Si desea más, debe dividir 100 a la cantidad de elementos. Por ejemplo, si desea 5 elementos uno al lado del otro, debe establecer el ancho de los elementos en 20%.

Respondido 11 Feb 21, 23:02

Behrad Moosavi