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é.