0
Bonjour, j'essaie d'empêcher les éléments de bouger lorsque le navigateur est redimensionné. Par exemple, lorsque je redimensionne la fenêtre, tout commence à bouger vers la gauche dans une position différente. y compris le texte qui chevauche la barre de menu, puis-je le garder dans la même position même lorsque je redimensionne la fenêtre?HTML, arrêter le déplacement des éléments sur la page lors du redimensionnement du navigateur
C'est le début de mon code 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 />
Ceci est mon code 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
Oui, il est possible. Vous pouvez donner une largeur fixe à 'body' ou à votre page wrapper, mais vous devriez envisager de rendre votre site Web mobile amical. – Alex
Vous devez prendre en compte ** le design web ** Responsive **, pour prendre le contrôle des éléments dans différentes fenêtres. – fadifannoun