0

Estoy realizando una página web, donde tengo una serie de problemas que no consigo resolver después de varios días.

No consigo que mi página no tenga scroll, por más cambio de código y ajustes que realizo, fallo, he estado repasando HTML y CSS durante horas, además de buscar tutoriales en Internet y no consigo obtener los resultados que necesito. A parte de scroll, no puedo tener horizontal ni vertical. (La página en la que necesito realizar esto, es una página main, la cual nos llevará a otras páginas mediante un menú)

Aquí adjunto el código HTML y CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina web</title>
    <link rel="stylesheet" href="menu.css">
</head>

<!--Comienza el código de la página-->
<body>
<div id="general">
<!-- Botón de busqueda-->
<p class="buscador" align="right" style="font-weight: bold;">Buscar <input type="search"></p>

<!-- Imagen del logo-->
    <img class="logo" src="img/logo.png" alt="logo">

<!-- Menú-->
    <header>
        <div>
            <nav>
                <ul>
                    <li> <a  class="link:hover" href="#" style="color: #FFF;">Inicio</a></li>
                    <li> <a class="link:hover" href="#" style="color: #FFF;">Tablas</a></li>
                    <li> <a class="link:hover" href="#" style="color: #FFF;">Formularios</a></li>
                    <li> <a class="link:hover" href="#" style="color: #FFF;">Página Personal</a></li>
                </ul>
            </nav>

        </div>
       
    </header>


<!-- Espacios entre el menú y el título del cuerpo-->
<br>
<br>

<!-- Título del cuerpo-->
    <h1 class="titulo">Tarea de HTML5 y CSS</h1>

<!-- Imagen del cuerpo-->
    <div class="marca-de-agua"> 
        <img alt="fondo" src="img/html5-css3.png">
    </div>

<!-- Comienza el texto del cuerpo-->
    <div class="cuerpo">
        
        <p>La aplicación web consta de las siguientes páginas:</p>
        <br>
      
        <ol>
            <li>Inicio donde se explican las tareas a realizar</li>
            <li>Tablas tabla con imágenes y efectos</li>
            <li>Formulario controles y etiquetas alineadas</li>
            <li>Mi página personal con mis datos</li>
        </ol>
        <br>
        <p>Cada una de estas páginas lleva asociada una serie de documentos</p>

    </div>
    
<!-- Pie de página [INICIO]-->
    <div class="pie-inicio">
        <p>Inicio</p>
        <ul class="pie-inicio2">
            <li>menu.html</li>
            <li>menu.css</li>
            <li>inicio.css</li>
        </ul>
    </div>
<!-- Pie de página [TABLAS]-->
    <div class="pie-tablas">
        <p>Tablas</p>
        <ul class="pie-tablas2">
            <li>tablas.html</li>
            <li>menu.css</li>
            <li>tablas.css</li>
        </ul>
    </div>

<!-- Pie de página [FORMULARIOS]-->
    <div class="pie-formularios">
        <p>Formularios</p>
        <ul class="pie-formularios2">
            <li>formularios.html</li>
            <li>menu.css</li>
            <li>formularios.css</li>
        </ul>
    </div>

<!-- Pie de página [PERSONAL]-->
    <div class="pie-personal">
        <p>Mi página personal</p>
        <ul class="pie-personal2">
            <li>mipagina.html</li>
            <li>menu.css</li>
            <li>mipagina.css</li>
        </ul>
    </div>

</div>
</body>
</html>

Aquí adjunto el código CSS

*{
    margin: 0;
    padding: 0;
}

/* Div principal */

div#general {
    margin-bottom: 100px;
    margin-left: 100px;
    width: 1600px;
    height: 800px;
   
}

/* Imagen y letras del menú */
header {
    background-image: url(img/fondo_menu2.gif);   
    font-family: 'Arial';
    font-size: 1em;
}

/* Enlace pulsado */
.link:hover {
    font-weight: bold;
    font-style: italic;
    text-transform: capitalize;
}

/* Menú CSS */
nav ul {
    list-style: none;
    overflow: hidden;
}

nav ul li {
    float: left;
    font-family: Arial;
    font-size: 1em;
}

nav ul li a {
    font-weight: bold;
    display: block;
    padding: 10px;
    text-decoration: none;
}



/* Logo */
.logo {
    height: 60px;
    width: 150px;
}

/* Buscador */
.buscador {
    font-family: 'Arial';
    font-size: 1em;
    
}

/* Título del cuerpo */
.titulo {
    font-size: 2em;
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
    text-align: center;
    font-family: 'Comic Sans Ms';


}

/* Estilo del cuerpo */
.cuerpo {
    font-size: 1.2em;
    font-family: 'Comic Sans Ms';
    position: absolute;
    top: 10cm;
    left: 110px;

}

/* Imagen del cuerpo */
.marca-de-agua {
    background-image: url(img/html5-css3.png);
    background-repeat: no-repeat;
    background-position: center;    
    background-size:100% 100%;   
    opacity: 0.5;
    
}


.marca-de-agua img{
    padding: 0;
    width: 100%;
    height: auto;
    opacity: 0.7;
} 


/* Pie de página INICIO */
.pie-inicio {
    font-family: 'Comic Sans MS';
    font-size: 1.2em;
    position: absolute;
    top: 17cm;
    left: 100px; 
    
}

.pie-inicio2 {
    color: blue;
}

/* Pie de página TABLAS */
.pie-tablas {
    font-family: 'Comic Sans Ms';
    font-size: 1.2em;
    position: absolute;
    top: 17cm;
    left:10cm;
    
   
    
}

.pie-tablas2 {
    color: blue;
}

/* Pie de página FORMULARIOS */

.pie-formularios {
    font-family: 'Comic Sans Ms';
    font-size: 1.2em;
    position: absolute;
    top: 17cm;
    left:17cm;
    
    
}

.pie-formularios2 {
    color: blue;
}

/* Pie de página PERSONAL */

.pie-personal {
    font-family: 'Comic Sans Ms';
    font-size: 1.2em;
    position: absolute;
    top: 17cm;
    left:25cm;
    
    
}

.pie-personal2 {
    color: blue;
}

Seguiré realizando cambios y comprobando, si doy con la solución lo comunicaré.

2 respuestas 2

0

La solución es muy simple. Sólo cambia las medidas absolutas en pixeles:

 div#general {
    margin-bottom: 100px;
    margin-left: 100px;
    width: 1600px;
    height: 800px;

}

por medidas relativas a la ventana donde se muestra:

  div#general {
    margin-bottom: 0;
    margin-left: 0;
    width: 100%;
    height: 100vh;

}
1
  • 1
    Gracias, me ha ayudado a resolver mi problema!
    – user311569
    Commented el 21 nov. 2022 a las 0:26
0

Creo que el div general tiene un width más grande que la pantalla. Lo otro es que podrías meter los elementos de "pie", "pie-formularios", etc. en un elemento div o footery usar display: flex para que se pongan uno al lado del otro. Por como están posicionados con position: absolute, no deja que sean de una medida flexible y por eso no caben en la pantalla.

todo lo que he aprendido de CSS lo aprendí del canal de AlexCGdesign en youtube, lo recomiendo.

1
  • Gracias por tu aportación y por tú recomendación, un saludo!
    – user311569
    Commented el 21 nov. 2022 a las 0:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.