-1
自分でウェブサイトを作成していますが、ナビゲーションバーに問題があります。 ウェブサイトがフルスクリーンである場合には、それは次のようになります（画像投稿するのに十分な担当者持っていない：P）を https://gyazo.com/62a6d5f0869620bfc5cb1e210afaee2a が、私はそれはようにめちゃくちゃになってしまうのウィンドウスケールとき： https://gyazo.com/e1efb1e9a9b9795bc1a57876c8bd0bc7ナビゲーションバーが画面サイズでスケーリングされない
を私は持っていますできるだけ多くの割合を使用しますが、私はそれを修正するかどうかはわかりません定義された領域は、任意のヘルプは、おそらく、ナビゲーションバーをレイアウトするためのフレキシボックスモデルを実装したいたいと思う
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Jake Learman </title>
<link rel="stylesheet" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display" rel="stylesheet">
</head>
<body>
<div class="navBar" id="navBar">
<ul>
<li><a href="#CV">CV</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#morestuff">Stuff</a></li>
</ul>
</div>
<div class="title" id="title">
<br>
<img src="/images/profile.jpg" alt="Profile Picture">
<br>
<br>
<h2> Jake Learman </h2>
<h3> Computer Science Student/Guitarist </h3>
<h4> <a href="#todo"> Contact</a> <a href="/JakeLearmanCV.pdf" download> Download CV </a></h4>
</div>
</body>
</html>
And the CSS:
html, body{
height: 100%;
margin:0;
padding:0;
}
h2{
font-size: 45px;
font-family: 'Sedgwick Ave Display', cursive;
text-align: center;
}
h3{
font-size: 35px;
font-family: 'Sedgwick Ave Display', cursive;
}
h4{
font-size: 25px;
font-family: 'Sedgwick Ave Display', cursive;
text-align: center;
}
.navBar{
background-color: #18121E;
color: #DDDDDD;
font-size: 30px;
font-family: 'Sedgwick Ave Display', cursive;
width: 100%;
margin:auto;
height:auto;
text-align: center;
}
.title{
background-color: #18121E;
color: #DDDDDD;
font-family: 'Sedgwick Ave Display', cursive;
width: 100%;
height: 100%;
padding: 10px;
text-align: center;
}
img{
border-radius: 50%;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding-left: 40%;
padding-right: 40%;
overflow: hidden;
background-color: #233237;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a{
color: #ff3333
}
ボディに最小幅を追加すると、必要に応じて水平スクロールバーが表示されます。 'body {min-width：500px}'では、px、em、または好きなもので定義できます。 – LinkinTED
リンクを1行に残したいのですか、または画面サイズが縮小したときに折り返しますか？ –
@ G.Hunt私は1つの行にそれを維持しようとしています –