0

Esta es mi primera página web, por lo tanto habrá fallos en la estructura del código. He creado un button, le he aplicado CSS en una stylesheet para la posición, pero en ninguna página es la posición del botón igual. Cómo puedo solucionar esto?

Aquí os dejo el CSS y HTML (lo que falla es el dropdown-button, la posición es distinta en estas dos páginas, pero el CSS es el mismo):

<!DOCTYPE html>
<html>

<head>
<title>HomePage</title>
<link rel="stylesheet" type="text/css" href="Opmaak.css">
<link rel="shortcut icon" href="logo.ico">
</head>

<body>

<h1>WELKOM OP MIJN SITE!</h1>

<div class="nav">
<div class="body">
<hr>
<div class="warning">
	<img src="warning_icon.png" alt="warning icon" style="width:40px;height:40px;border:0px;">
</div>

<i>Deze website is een test voor informatica.</i>

<p style="text-align:left;margin-left:14%;margin-right:5%;">Hey, welkom op mijn site. Dit is een test site, dus het is niet definitief. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
	Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
	sit amet commodo magna eros quis urna.
	
    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
	Proin pharetra nonummy pede. Mauris et orci.
</p> 
</div>

<hr>

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="aboutme"><a href="aboutme.html">About</a></li>
  <li><a class="games" href="games.html">Games</a></li>
</ul>




<div class="dropdown">
  <button class="dropbtn">Multimedia</button>
  <div class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
</div>
  
</div>



</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="shortcut icon" href="logo.ico">
<link rel="stylesheet" type="text/css" href="Opmaak.css">
</head>
<body>

<h1>CONTACT</h1>
<div class="nav">

<hr>

<div class="body">
    <p>Hieronder zie je een aantal mogelijkheden van hoe u mij kan bereiken: </p>
    <p>Email : [email protected]</p>
    <p>Mobiele nummer : +31689675394</p> 
    <p>Twitter : @RandomName</p>
</div>

<hr>

<div class="dancingman">
 <img src="dancingman.gif-c200" alt="dancingman" style="width:200px;height:200px;border:0px;">
</div>

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a class="active" href="contact.html">Contact</a></li>
  <li class="aboutme"><a href="aboutme.html">About</a></li>
  <li><a class="games" href="games.html">Games</a></li>
</ul>


<div class="dropdown">
  <button class="dropbtn">Multimedia</button>
  <div class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
</div>
</div>



</body>
</html>

   h1 {text-align:center;background:linear-gradient(to right, gray, black);color:white;position:fixed;top:0px;width:100%;height:7.4%;z-index:1000; margin:0; font-family:font_h1;font-size:33px; }
body {text-align:center;background-color:#fffff;font-size:20px; margin:0;}
a {font-size:30px;}
@font-face {
font-family: font_h1;
src: url(lifestyle.ttf);
}

.warning {position:relative;top:34px;right:200px;}
.nav{margin-left:10%;margin-top:5%;padding:1px 16px;height:1000px;}
.pikachu{position:relative;right:25px;bottom:38px;}
.dancingman{position:relative;right:27px;bottom:29px;}
.icon_home{font-size:30px;position:relative;bottom:1001px;left:3px;}
.icon_contact{font-size:30px;position:relative;bottom:51px;left:3px;}
.mario {position:relative;bottom:10px;height:400px;width:300px;}
.manmetjas{position:relative;top:10px;height:400px;width:400px;}
.textbody {margin-left:10%;margin-right:4%;text-align:left;}
.textbody2 {margin-left:10%;margin-right:4%;text-align:left;}
.textbodygif {margin-left:18%;margin-right:4%;text-align:left;}
.teamfoto {position:relative;top:50px;}
.games {position:fixed;top:203px;width:13.2%;}
.aboutme {position:fixed;top:250px;width:15.6%;}
.pingpong {position:relative;height:170px;width:200px;right:206px;top: 60px;}
.mariobros {position:relative;height:170px;width:200px;right:196px;top: 100px;}
iframe {
position:relative;
top:40px;
padding-bottom:50px;

}
a.game:link {color:blue; background-color:transparent; text-decoration:none;font-size:25px;}
a.game:visited{color:blue; background-color:transparent; text-decoration:none;font-size:25px;}
a.game:hover{color:red; background-color:transparent; text-decoration:underline;font-size:25px;}
p.pingpong2{position:relative;bottom:100px;left:415px;text-align:left; width:500px; margin-top:20px; }
p.mario2{position:relative;bottom:60px;left:423px;text-align:left; width:500px; margin-top:20px;}
span.titlegame1 {position:relative; bottom:88px; right: 187px;font-size: 25px;}
span.titlegame2 {position:relative; bottom:48px; right: 170px;font-size: 25px;}
hr {opacity:0.6; margin-left:5.3%;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15.6%;
background-color: #e0e0e0;
position: fixed;
height: 600px;
overflow: auto;
right:1129px;
top:47px;
border:1px solid #939496;
left:0px;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-size:30px;

}


button:hover{
 background-color: #4dd6e2;
color: white;
}


li a.active {
background-color: #309ba5;
color: white;
}

li a:hover:not(.active) {
background-color: #4dd6e2;
color: white;
}


.dropbtn {
background: #e0e0e0 url('dropdown_icon.png') no-repeat 0;
background-size: 25px 25px;
background-position:96% 65%;
color: black;
padding: 16px 25px;
font-size: 30px;
border: none;
outline: none;
cursor: pointer;
font-family: Times New Roman;
position:fixed;
left: 1px;
top:148px;
width: 210px;
height: 55px;
z-index:0;
}


.dropdown {
position: relative;
display: inline-block;
}


.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 90px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
bottom:20px;
right:439px;
}


.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}


.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #4dd6e2;
}

1 respuesta 1

2

En ambas páginas, si le aplicas el CSS, el resultado es el mismo. El botón se muestra en la misma posición. Puedes comprobarlo aquí:

Ejemplo 1.

Ejemplo 2.

Por lo tanto, estoy prácticamente seguro de que tu problema reside en que no estás enlazando bien el CSS con tus páginas. Al estar usando rutas relativas, tienes que estar seguro de que las estás indicando correctamente.

Por ejemplo, al indicar href="Opmaak.css", tu página de CSS tiene que estar en la misma carpeta en la que se encuentra el html. En caso de que estuviera en otra ruta distinta, tendrías que poner esta ruta en relación a tu archivo CSS.

Por ejemplo, tomando como referencia la siguiente estructura:

|
|---vistas
|      |
|      |--- vista1.html
|      |--- vista2.html
|
|---CSS
|      |
|      |--- Opmaak.css

Tu ruta tendría que ser ../CSS/Opmaak.css.

8
  • lo siento, se me olvido decir que era problema del dropdrown-content, el dropdown-button si que funciona. Aqui el ejemplo: gyazo.com/795014e8f01343594798d085c18f84cd
    – JuanVan12
    Commented el 14 nov. 2016 a las 13:54
  • @JuanVan12 ¿Puedes añadir el código para ese dropdown-content? Como puedes ver en los links que te he indicado la página no se ve igual. Commented el 14 nov. 2016 a las 15:03
  • Tendria que funcionar, ese es todo el código para el dropdown
    – JuanVan12
    Commented el 15 nov. 2016 a las 8:14
  • @JuanVan12 Es que en el video que has proporcionado en el comentario no se ve igual tu menú como en los enlaces que has proporcionado. ¿Estás usando alguna librería externa? Commented el 15 nov. 2016 a las 12:14
  • Lo he editado, he metido todo el CSS.
    – JuanVan12
    Commented el 15 nov. 2016 a las 12:39

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.