Как остановить перемещение DIVS при увеличении или уменьшении страницы?

Question

Как остановить перемещение DIVS при увеличении или уменьшении страницы?

0

Я noob для HTML и CSS. Я создал то, что, по моему мнению, довольно приличная веб-страница. Тем не менее, я сделал всю страницу, используя тот же ноутбук, поэтому, когда я просмотрел его на другом компьютере, весь макет был другим. Когда я увеличиваю или уменьшаю страницу, она меняет положение моих div, поэтому, если зум не совершенен, моя веб-страница выглядит нелепо.

Вот мой HTML:

<html>

<head>
<link rel="stylesheet" href="stylesheet.css"/>

<title> Gordon News </title>

</head>

<header>

<h1 class="top"><a href="index.html"> Gordon News </a> </h1>
<h3>Gordon News </h3>

</header>


<body> 

<div class="wrapper">


<h2 id="bodybuilding">THE TESTOSTERONE FUELLED  BODYBUILDING</h2>


<article class="ben">


<figure>

<img class="lats" src="lat.jpg" alt="front lateral spread pose" 
<img class="bicep" src= "bicep.jpg" alt="bicep" height="150" width="100">
</figure>

<p>Every morning he wakes up, ....

(I wont bore you will the whole article)

</article>

</div>


<nav class="links">

<h4 id="more">More stories</strong></h6>
<ul>
<li><a href="http://news.sky.com/story/1101193/steroids-put... </a></li>
<li><a href="http://www.nytimes.com/2013/03/17/business... </a></li>
</ul>

</nav>


 <Aside class= "sidebar1">

it a <ul> basically

</aside>


<footer>
<p><strong> <a href="index.html">Home </a></strong> </P>
</footer>

</body>

</html>

MY CSS:

body {
background-image: url("glass.jpg");
width:100%;
}

h1 {
position:absolute;
top:4px;
left: 450px;
color: #e41b17;
font-size: 34pt;
font-family: Impact, Arial, helvetica, sans-serif;
width: 580;
z-index: 90;
text-shadow: 1px 2px 2px black;
font-size:50pt;
}

h3 {
position:relative;
top:18px;
left: 490px;
color: black;
font-size: 34pt;
font-family: Impact, Arial, helvetica, sans-serif;
width: 580;
z-index: 70;
font-size:40pt;
text-shadow: 1px 1px 2px red;
}

article.ben {
text-indent: 20px;
text-align:justify;
letter-spacing: 2px;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size:17px;
}

#bodybuilding{
padding: 20px 20px 20px 20px;
background: #3b5998; 
color: white;
font-size: 34pt;
font-family: Impact, Arial, helvetica, sans-serif;
width: 580;
border:groove;
text-shadow: 1px 1px 2px black;
padding-left: 10px;
margin: 0 0 0.6em;
border-radius: 15px;
}

#bodybuilding span {
color:#e41b17;
}

img.lats {
float:left;
border: groove;
border-width: 5px;
padding: 8px;
}

img.bicep {
position:absolute;
top:143px;
right:300px;
float:left;
border: groove;
border-width: 5px;
}

.wrapper {
width:800px;
height:1950px;
padding:5px;
background-color:#EDEFF4;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
margin: 0 auto;
} 


aside.sidebar1 {
position: Absolute;
Top:300px;
Right:70px;
width:180px;
background-color:white;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
text-align:center;
font-size: 16pt;
font-family:Arial, helvetica, sans-serif;
text-transform:capitalize;
}

H4 {
font-size: 22pt;
font-family: Impact, Arial, helvetica, sans-serif;
color: #e41b17
}


.links {
margin:0 auto;
width:150px;
height:200px;
padding:5px;
background-color:#EDEFF4;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
position:absolute;
top:1600px; 
left:90px;
text-align:center;
text-color:black;
}

#more {
font-size:20px;
text-align:center;
color:  #e41b17;
} 

#mm {
text-decoration:none;
color:black;
}

footer {
margin:15px;
width:800px;
padding:5px;
background-color:#EDEFF4;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
text-align:center;
position:absolute;
right:253;
}

Я действительно не понимаю, почему они перемещаются при масштабировании. Кто-то может помочь?

Большое вам спасибо за ваше время. Очень признателен.

user3067445 04 дек. 2013, в 22:20

Источник

Теги:

html

css

html5

zooming

1 ответ

Ещё вопросы

DaniP · Answer 1 · 2013-12-04T18-54-00.000Z

Я вижу, что вы работаете со свойствами вроде:

position:absolute;
top;
left;
right;
float;

И многие элементы с этими свойствами не имеют родительского контейнера или не являются относительными, а его родительский элемент - это весь объект страницы. Когда вы работаете со значениями в позиции, вам нужно быть осторожным с соответствующим объектом, чтобы сделать работу позиции.

Теперь, если у вас есть, например, абсолютная позиция по отношению к телу, например:

left:100px;

Элемент всегда будет иметь значение 100 пикселей тела независимо от экрана разрешения экрана или размера.

Возможно, вам нужно будет подробно просмотреть свой код и установить родственников и иметь в виду реальную фиксированную структуру, чтобы сделать ее прочной.