Без промяна независимо от резолюцията.

S

Space_Cakes_Rlz

Registered
Имам един въпрос. Как да направя така, че сайт, които аз правя да остава непроменен независимо с каква резолюция разглеждаш сайта.
В смисъл, почнах да правя един сайт, но го правя на widescreen монитор и съм го нагласял според него.
Сега ми се наложи да прехвърля сайта да го довършвам на обикновен монитор и всичко е някакво разместено. В смисъл, на widescreen монитора всичко го бях центрирал, а сега на този се е разбъркало...
Надявам се схванахте какво имам впредвит.
Благодаря предварително на отзовалите се!
 
ами като за начало може да дадеш кода да видим, че то може да има хиляди модела на това което си направил ;)
 
Код: 
<html>
<head>
<meta http-eqiv="content-type" content="text/html"; charset="windows-1251" />
<link type="text/css" rel="stylesheet" href="index.css" />
<title></title>
</head>
<body>

<div class=header><a href="index.html"><img border="0" src="header2.png" /></a></div>
<div class=m1><img border="0" src="menu2.png" /></div>
<div class=b1><a href="1.html">1</a></div>
<div class=b2><a href="2.html">2</a></div>
<div class=b3><a href="http://google.bg">3</a></div>
<div class=b4><a href="http://google.bg">4</a></div>

<div class=bg><img border="0" src="design/bg2.png" /></div>

<h1><u>..</u></h1>
<div class=p1>...</div>
<div class=p2>...</div>
<div class=p3>...</div>
<div class=p4>...</div>
<div class=p5>...</div>

<div class=br><img border="0" src="br.png /></div>
 
Код: 
body {background-color: #000000;}
.header {position: absolute; top: 10px; left: 210px;}
.m1 {position: absolute; top: 170px; left: 210px;}
.b1 {font-family: verdana; font-weight: bold; font-size: 20px; color: #fff; position: absolute; top: 185px; left: 280px;}
.b2 {font-family: verdana; font-weight: bold; font-size: 20px; color: #fff; position: absolute; top: 185px; left: 500px;}
.b3 {font-family: verdana; font-weight: bold; font-size: 20px; color: #fff; position: absolute; top: 185px; left: 690px;}
.b4 {font-family: verdana; font-weight: bold; font-size: 20px; color: #fff; position: absolute; top: 185px; left: 895px;}
a:visited {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline overline;}
.bg {position: absolute; top: 223px; left: 210px;}
h1 {color: #fff; font-family: arial; font-weight: bold; font-size: 30px; position: absolute; top: 225px; left: 520px;}
.p1 {color: #fff; font-family: arial; font-size: 14px; position: absolute; top: 320px; left: 260px;}
.p2 {color: #fff; font-family: arial; font-size: 14px; position: absolute; top: 340px; left: 335px;}
.p3 {color: #fff; font-family: arial; font-size: 14px; position: absolute; top: 360px; left: 370px;}
.p4 {color: #fff; font-family: arial; font-size: 14px; position: absolute; top: 380px; left: 290px;}
.p5 {color: #fff; font-family: arial; font-size: 16px; position: absolute; top: 400px; left: 305px;}
.br {position: absolute; top: 450px; left: 240px;}
 
ами виж какво, направи го не с position:absolute; а с float Когато ползваш абсолют казваш на елемента къде точно да се намира. Ти си го правил на една резолюция нагласил си къде точно да са елементитиа, но когато смениш резолюцията вече прозореца е друг и съответно елементите ти си остават на същите стойности и се получава разместване.

Някой може да кажат направи го в един див и в него намествай всичко, но ще кажа че е по-добре с float

пример:

Код: 
#center{
  margin:0 auto;
  width:1000px;
  border: solid 1px red;
}

<div id="center">това е центриран див и се вижда под всякакви резолюции винаги в средата</div>
 
ами не точно. Тоя код , който ти дадох се прави за да центрира взичко друго, да е винаги в средата, но width си го променяш според твоя сайт. После нареждаш елементите, но не използвай position както си го ползвал.
 
Ползвах кода ти за оправяне на картинките и стана.
А за текста да ми препоръчаш нещо?
Дали ще стане, ако тръгна да го правя по същия начин?
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе