Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
se añadieron 2567 caracteres en el cuerpo
Origen Enlace
JuanVan12
  • 137
  • 1
  • 2
  • 11
.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;
}

   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;
}

.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;
}

   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;
}

Origen Enlace
JuanVan12
  • 137
  • 1
  • 2
  • 11

Style no es igual en todas las paginas

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>
.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;
}