0
私はWeb Developmentを始めたばかりの学生です。私は割り当てのためのWebポートフォリオを作成する必要があります。フローティングディビジョンのサイズ変更に関する問題
divのナビゲーションバーが左に浮いています。そして、コンテンツの一部が段落やリストなどで私のセクションに関する私のセクションである右に浮かんだ。
私はブラウザのサイズを変更すると、私は特定のサイズになると右のコンテンツのdivは以下のドロップ。私はコンテンツのdiv内のテキストをdivに圧縮し続けるのが好きですか？ 注私はHTML/CSSでこれを行う必要があります。
私はすべての個人情報を段落から取り除き、同様の量のテキストを入れました。
謝罪これは愚かな質問であれば、私のコードは私がまだ学んでいるので素人です。
ご協力いただきますようお願い申し上げます。
#container
{
width: 80%;
min-width: 1000px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
margin-left: auto;
margin-right:auto;
border: 2px solid #000000;
background-color:#e6e6e6;
}
body
{
background-image: url(../images/back1.jpeg);
}
#portrait{
float:right;
margin-right:30px;
margin-top:30px;
height:196px;
width:150px;
}
#header
{
height:258px;
width:auto;
color:#ffffff;
font-size:45px;
text-decoration: none;
background-image: url(../images/head2.jpeg);
background-size: cover;
border:.1px outset #000000;
}
#navigation
{
width:19%;
margin-top:0px;
float:left;
width:250px;
height:1400px;
background-color:#6b6b6b;
}
#content
{
max-width:75%;
min-width:40%;
padding:0px 20px 20px 0px;
float:right;
margin:0px;
display:inline;
border:2px solid #000000;
}
#footer
{
clear:left;
background:#e6e6e6;
height:60px;
color:#ffffff;
background-color:#000000;
}
#navbar
{
height:80%;
}
#navmenu
{
padding:0px;
margin-left:0px;
}
#navmenu li
{
margin-right:20px;
margin-left:20px;
display:block;
padding-top:100px;
float:left;
}
a.navbutton
{
border:3px outset #606060;
display:block;
background-image:url(../images/buttons/button_normal.jpg);
text-decoration:none;
color:#ededed;
font-family:Tahoma, verdana, arial, sans-serif;
font-weight:bold;
font-size:15px;
width:200px;
height:34px;
padding-top:6px;
text-align:center;
color:black;
}
a.navbutton2
{
border:3px outset #606060;
display:block;
background-image:url(../images/buttons/button_current.jpg);
text-decoration:none;
color:#000000;
font-family:Tahoma, verdana, arial, sans-serif;
font-weight:bold;
font-size:20px;
width:200px;
height:34px;
padding-top:6px;
text-align:center;
color:black;
}
a.navbutton:hover, a.navbutton2:hover
{
border: 3px outset #2090d0;
background-image:url(../images/buttons/button_hover.jpg);
color:#444444;
}
a.navbutton:active, a.navbutton2:active
{
border: 3px inset #eecc44;
background-image:url(../images/buttons/button_current.jpg);
color:#444444;
}
.email
{
margin:20px;
float:left;
}
.copyright
{
margin:20px;
float:right;
}<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/new.css" />
<style type="text/css">
.green {color: #008000;}
h2 {color: blue;font-style: italic;}
.bold {font-weight: bold;}
</style>
<title>Tim CA2</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="portrait">
</div>
<div id="header">
<h1>Header</h1>
</div>
<div id="content-container">
<div id="navigation">
<div id="navbar">
<ul id="navmenu">
<li><a class="navbutton2" href="index.html">Home</a></li>
<li><a class="navbutton" href="about.html">About Me</a></li>
<li><a class="navbutton" href="resume.html">Resume</a></li>
<li><a class="navbutton" href="webdev.html">Web Skills</a></li>
<li><a class="navbutton" href="pcbuild.html">PC Build</a></li>
<li><a class="navbutton" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText<p>
<ul>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
</ul>
<p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText<p>
<ul>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
</ul>
</div>
</div>
<div id="footer">
<p class="copyright">Copyright ©<p>
</div>
</div>
</body>
</html>
https://jsfiddle.net/05a3g2pw/ –