0
こんにちは私は、クロムウィンドウを小さくするとブラウザがサイズ変更されたときに要素が移動しないようにしようとしています。メニューバーに重なるテキストも含めて、ウィンドウのサイズを変更しても同じ位置に保持できますか？ブラウザがサイズ変更されたときにページ上の要素が停止する
これは私のHTMLコードの先頭である：
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/alternativeCSS2.css"
title="bigsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS2.css" title="mediumsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS3.css" title="smallsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS4.css" title="specialsheet"/>
<script type="text/javascript" src="script/CTEC1800-Stylesheets(4).js" >
</script>
<title>Historical Pioneers</title>
</head>
<body onload="chooseStyleBySize()">
<div id="layout">
<div id="swapping">
<p>
<select onchange="setActiveStyle(this.value)">
<option value="bigsheet">For big pages</option>
<option value="mediumsheet">For medium-sized pages</option>
<option value="smallsheet">For small pages</option>
<option value="specialsheet">For special pages</option>
</select>
</p>
</div>
<div id="header">
<h1 id="logo"><img src="img/logo.png" width="200px" height="70px"
alt="logo" /></h1>
</div>
</div>
<div id="nav" class="box">
<ul class="nav">
<li id="active"><a href="home.html">Home</a></li>
<li><a href="Hitlers Biography.html">Adolf Hitler's Biography</a>
</li>
<li><a href="Winston Churchill.html">Winston Churchill's
Biography</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="Contact Us.html">Contact</a></li>
</ul>
</div>
<div id="container" class="box">
<div id="intro">
<div id="intro-in">
<h1>60 million men fought in 'The War to End All Wars', It ended
nothing..</h1>
<p class="intro">
"Putting history in it's place". For many years we have been
collecting, researching and interpreting historical information from the
World War 2, How the key figures including Adolf Hitler and Franklin D.
Roosevelt influenced this great war between 1939 to 1945.
Some information that was not yet looked into properly that
was very well important and how it all began in the first place.
</p>
</div>
<div id="hr">
<hr />
これは私のCSSコードです：
/*--------------------- Main Body --------------------- */
* {
margin: 0;
padding: 0;
}
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset,
legend, dl, dt, dd, blockquote, applet, object {
border: 0;
}
p {
margin: 15px 0;
}
body {
padding: 0;
background-color: #ededed;
background: #fff url("../img/bg1.jpg") repeat-y;
font: 0.8em/1.5 "arial", sans-serif;
color: #354146;
text-align: center;
width: 100%;
}
#layout {
}
#header{
text-align: left;
margin-left: 30px;
}
#swapping{
text-align: left;
margin-left: 45px;
}
#container{
margin-left: 40%;
clear: both;
width: 100%;
}
/*--------------------- Horizontal Navigation Menu --------------------- */
#nav {
margin: 0;
height: 100%;
margin-top: 20px;
}
#nav ul {
list-style-type: none;
width: 14%;
min-width:265px;
height: 100%;
clear: both;
text overflowing to the menu bar
はい、それは可能です。 'body'またはあなたのページラッパーに固定幅を与えることができますが、あなたのウェブサイトをモバイルフレンドリーにすることを考慮する必要があります。 – Alex
異なるビューポートの要素を制御するには、** Responsive ** web designを考慮する必要があります。 – fadifannoun