HTML, stoppe die Bewegung von Elementen auf der Seite, wenn die Größe des Browsers geändert wird

Hallo, ich versuche, Elemente daran zu hindern, sich zu bewegen, wenn der Browser verkleinert wird. Wenn ich zum Beispiel das Chromfenster verkleinere, bewegt sich alles nach links in einer anderen Position. einschließlich des Textes, der die Menüleiste überlappt, kann ich ihn in der gleichen Position behalten, selbst wenn ich die Größe des Fensters verändere?HTML, stoppe die Bewegung von Elementen auf der Seite, wenn die Größe des Browsers geändert wird

Dies ist der Beginn meiner HTML-Code ist:

<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 />

Das ist mein CSS-Code:

/*--------------------- 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

Quelle

2017-04-09 DrExpresso

Ja, es ist möglich. Sie können Körper oder Ihren Seitenwrapper eine feste Breite zuweisen, aber Sie sollten überlegen, ob Ihre Website für Mobilgeräte geeignet ist. – Alex

Sie müssen ** Responsive ** Webdesign berücksichtigen, um die Kontrolle über Elemente in verschiedenen Ansichtsfenstern zu übernehmen. – fadifannoun

Sie tun können, die durch Breite Ihrer html Körperbefestigungs, aber das macht keinen Sinn, da Sie RESPONSIVE Webseiten erstellen wollen, nicht feste, die nur auf bestimmten Auflösungen funktionieren!

Geben Sie einfach diese in Ihrem CSS:

body{ 
    width: [pixel_size]px; 
}

Quelle

2017-04-09 21:00:42

HTML, stoppe die Bewegung von Elementen auf der Seite, wenn die Größe des Browsers geändert wird

Antwort

Verwandte Themen