1
私のコードに問題があります。私は固定しているはずのメニューバーを持っていますが、ウィンドウのサイズを変更するとサイズが変更されません。ウィンドウのサイズを変更すると、水平方向にスクロールせず、一部のボタンが切り取られるため、サイズを変更する必要があります。これをどうすれば解決できますか？ウィンドウのサイズが変更されたときに、メニューバーのサイズが変更されない
はまた、不要なコードに おかげ
body {
\t margin: 0px;
\t padding: 0px;
\t background: url(images/gradient.jpg) no-repeat;
\t background-size: cover;
\t background-attachment: fixed;
\t background-position: center;
}
section {
\t margin: 0 auto;
\t border: 1px solid #000000;
\t border-radius: 8px;
\t background:#E5E7E9;
\t width: 958px;
\t height: 800px;
}
.bpic {
\t width: 200px;
\t height: 350px;
\t margin: 0px;
}
.biopic {
\t border: 2px solid #ddd;
\t border-radius: 8px;
\t padding: 5px;
\t width: 200px;
\t height: 350px;
\t margin: 40px 40px 40px 375px;
}
.bio {
\t margin: 40px;
\t font-family: verdana;
\t text-align: center;
}
#biography {
\t font-family: arial black;
\t font-size: 120%;
\t text-align: center;
\t border: 2px solid #ddd;
\t border-radius: 8px;
\t padding: 10px;
}
#assignments {
\t font-family: arial black;
\t font-size: 120%;
\t text-align: center;
\t border: 2px solid #ddd;
\t border-radius: 8px;
\t padding: 10px;
}
#projects {
\t font-family: arial black;
\t font-size: 120%;
\t text-align: center;
\t border: 2px solid #ddd;
\t border-radius: 8px;
\t padding: 10px;
}
#contact {
\t font-family: arial black;
\t font-size: 100%;
\t text-align: center;
\t border: 2px solid #ddd;
\t border-radius: 8px;
\t padding: 10px;
}
.email {
\t border: 1px solid #ddd;
\t border-radius: 8px;
\t padding: 5px;
\t width: 150px;
\t height: 96px;
\t margin: 3px 40px 3px 400px;
}
.banner {
\t width: 960px;
\t height: 143px;
\t margin: 0 auto;
\t padding: 0px;
\t background: url(images/banner.png) no-repeat;
}
.banner h2 {
\t font-family: vollkorn;
\t font-size: 350%;
\t color: white;
\t text-transform: uppercase;
\t margin: 0;
\t position: relative;
\t top: -40%;
\t left: 83%;
\t transform: translate(-50%, -50%);
}
.menu {
\t list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
\t z-index: 1;
\t display: inline-block;
}
.menu ul {
\t float: left;
\t margin: 0px;
\t padding: 0 0 0 30%;
\t list-style: none;
}
.menu ul li {
\t padding: 0px;
\t display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
\t position: relative;
\t color: #ffffff;
\t background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span \t {
\t position: absolute;
\t display: inline-block;
\t width: 15px;
\t height: 42px;
\t top: 0;
\t left: 0;
\t background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
\t border: 1px solid #ddd;
\t border-radius: 8px;
\t padding: 5px;
\t width: 200px;
\t height: 195px;
\t margin: 40px;
}
.jprop:hover {
\t box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}<!DOCTYPE html>
<html>
\t <head>
\t \t <!-- Homepage
\t \t \t My Biography Page
\t \t \t Author:
\t \t \t Date: 01/29/2017
\t \t -->
\t \t <meta charset="UTF-8" />
\t \t <title>Homepage</title>
\t \t <script src="modernizr-1.5.js"></script>
\t \t <link href="homestyles.css" rel="stylesheet" type="text/css" />
\t </head>
\t
\t <body>
\t \t <div class="menu">
\t \t \t <img src="images/menu.jpg" alt="menu" />
\t \t \t <ul>
\t \t \t \t <li><a href="#biography"><span></span>Biography</a></li>
\t \t \t \t <li><a href="#assignments"><span></span>Assignments</a></li>
\t \t \t \t <li><a href="#projects"><span></span>Projects</a></li>
\t \t \t \t <li><a href="#contact"><span></span>Contact</a></li>
\t \t \t </ul>
\t \t </div>
\t \t
\t \t <div class="banner">
\t \t \t <img src="images/banner.png" alt="banner" />
\t \t \t <h2>K V</h2>
\t \t </div>
\t
\t \t <section>
\t \t \t <div id="biography">
\t \t \t <a name="biography"><h1>Biography</h1>
\t \t \t </div>
\t \t \t
\t \t \t <div class="biopic">
\t \t \t <img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
\t \t \t </div>
\t \t \t
\t \t \t <article>
\t \t \t \t <div class="bio">
\t \t \t \t <p>Hello, my name is &&&&&&. --
\t \t \t \t </p>
\t \t \t \t <p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
\t \t \t \t working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
\t \t \t \t continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
\t \t \t \t technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
\t \t \t \t </p>
\t \t \t \t </div>
\t \t \t </article>
\t \t </section>
\t \t <br>
\t \t <section>
\t \t \t <div id="assignments">
\t \t \t <a name="assignments"><h1>Assignments</h1>
\t \t \t </div>
\t \t \t <div class="jprop">
\t \t \t <a href="Jprop/basic.html">
\t \t \t \t <img src="images/jprop.JPG" alt="jprops">
\t \t \t </a>
\t \t \t </div>
\t \t </section>
\t \t <br>
\t \t <section>
\t \t \t <div id="projects">
\t \t \t <a name="projects"><h1>Projects</h1>
\t \t \t </div>
\t \t </section>
\t \t <br>
\t \t <section style="max-height: 210px;">
\t \t \t <div id="contact">
\t \t \t <a name="contact"><h1>Contact</h1>
\t \t \t </div>
\t \t \t <div class="email">
\t \t \t <a href="mailto:REDACTED">
\t \t \t \t <img src="images/email.png" alt="emails">
\t \t \t </a>
\t \t \t </div>
\t \t </section>
\t \t <br>
\t </body>
\t
</html>
これを削除すると、ウィンドウのサイズが変更されると、すべてのボタンがメニューバーの下に移動する問題が発生します。 – deliriumtr1gger