No se porqué al modificar el alto y el ancho la imagen sigue igual, ¿alguien sabe cómo arreglarlo y/o cuál es el problema?; y también, ¿es necesario usar JavaScript para hacer una web application o puede ser también Java?
Mi código:
body {
background-color: #FFF;
}
li {
color: rgba(255, 255, 255, 0.9);
font-family: sans-serif;
font-size: 40px;
margin: 0px, 13px;
display: inline-block;
}
#logo {
color: #FCA311;
font-family: "Amatic SC", cursive;
font-size: 80px;
padding: 0px 50px;
}
.navigation {
background-color: rgba(255, 255, 255, 0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: center;
width: 100%;
z-index: 10000;
}
li {
color: #14213D;
display: inline-block;
font-family: 'Abel', sans-serif;
font-size: 16px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
#welcome {
font-family: "Indie Flower";
font-size: 32px;
margin-top: 100px;
color: #003333;
weight: 300;
text-align: center;
background-color: dimgrey;
}
#music {
height: 100px;
width: 50%;
max-width: 50%;
max-height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>G.G</title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Indie+Flower" rel="stylesheet">
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</head>
<body>
<div class="navigation">
<ul>
<li>Tracks</li>
<li id="logo">Music</li>
<li>Albums</li>
</ul>
</div>
<h1 id="welcome">gg</h1>
<div id="music">
<img src="C:\Users\Luis Alberto Ramirez\Pictures\music9.jpg"/>
</div>
</body>
</html>