Как растянуть сайт до экрана разрешения

Im работает на сайте (от psd. До HTML/CSS).Как растянуть сайт до экрана разрешения

Как я могу автоответтировать сайт разрешению людей, которые смотрят мой сайт?

PSD шаблон имеет ширину 1600 пикселей и я устанавливаю эту же ширину для HTML.

Мое личное разрешение экрана 1920 x 1080 px, поэтому сайт для меня не отображается в корне. (Браузер оленья кожа стрейч сайт моей резолюции)

Мой HTML-код:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html"; charset=UTF-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>Szablon HTML5</title> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="header"> 
     <div id="logo"></div> 
    </div> 

    <div id="slider"> 
     <div id="stripe">pasek</div> 
     <div id="mainpic">obrazek 
      <div id="podpis">podpis obrazka</div> 
     </div> 
    </div> 

    <div id="content"> 
     <div id="boxes"> 
      <div class="box"> 
       <h2>Perfect Logic</h2> 
       <h3>All you want your website to do.</h3> 
       <img src="pictures/minibox.png" class="boxPicture"> 
       <p>Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe</p> 
       <img src="pictures/przycisk.png" class="przycisk"> 
      </div> 
      <div class="box">b</div> 
      <div id="box_c">c</div> 
     </div> 
    </div> 
    <div id="przerywnik"></div> 
    <footer></footer> 


</div> 

</body> 

</html>

Мой CSS файл:

* { 
    margin: 0; 
    padding: 0; 
    background: #ffffff; 
    width: 1600px; 
    height: auto; 
} 

#wrapper{ 
width: 1600px; 
height: auto; 
} 

#header{ 
height: 137px; 
width: 1600px; 
background-image:url('pictures/headerbg.png'); 
background-repeat:repeat-x; 
} 

#logo{ 
background-image:url('pictures/logo.png'); 
width: 320px; 
height: 137px; 
margin-left: 330px; 
} 

#slider{ 
height: 426px; 
z-index: 2; 
} 

#stripe{ 
height: 335px; 
background: grey; 
z-index: 1; 
position: absolute; 
background-image:url('pictures/stripe.png'); 
background-repeat:repeat-x; 
} 

#mainpic{ 
position: absolute; 
z-index: 3; 
width: 940px; 
height: 343px; 
margin-top:22px; 
margin-left: 330px; 
background-image:url('pictures/slider.jpg'); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
} 

#podpis{ 
margin-top: 338px; 
margin-left: 104px; 
font-size: 36px; 
width: 700px; 
position: absolute; 
} 

/* Część z boxami */ 

#boxes{ 
height: 469px; 
width: 940px; 
margin-left: 330px; 
background: #234f31; 
} 

.box{ 
float: left; 
height: 469px; 
width: 320px; 
background: #ffffff; 
} 

.box h2{ 
font-size: 18px; 
margin-top: 21px; 
font-family: Georgia; 
color: #11719e; 
float:left; 
} 

.box h3{ 
font-size: 12px; 
margin-top: 2px; 
font-family: Helvetica; 
color: #8c8c8c; 
float:left; 
} 

.box p{ 
margin-top: 12px; 
margin-left: 2px; 
font-size: 13px; 
color: #3e3e3e; 
width: 299px; 
float: left; 

} 

.przycisk{ 
margin-top: 20px; 
margin-left: 2px; 
float: left; 
width: 163px; 
height: 35px; 
} 

.boxPicture{ 
margin-top: 15px; 
float: left; 
height: 198px; 
width: 299px; 
} 

#box_c{ 
float: left; 
height: 469px; 
width: 300px; 
background: yellow; 
} 

/* Footer */ 
#przerywnik{ 
height: 10px; 
width: 1600px; 
background: #4c4c4c; 
} 

footer{ 
height: 173px; 
width: 1600px; 
background: #333333; 

}

Как я могу это исправить?

источник

2013-07-05 Lethysek

Использование ширина: 100%; – Seazoux

Вы задаете довольно эпический вопрос - вы должны настроить «отзывчивый веб-дизайн» Google. – Djave

Редактировать это на код:

* { 
    margin: 0; 
    padding: 0; 
    background: #ffffff; 
    width: 1600px; 
    height: auto; 
} 

    #wrapper{ 
    width: 1600px; 
    height: auto; 
    }

По:

* { 
    margin: 0; 
    padding: 0; 
    background: #ffffff; 
    width: 100%; 
    height: auto; 
} 

#wrapper{ 
    width: 100%; 
    height: auto; 
    }

EDIT:

Вот код:

* { 
    margin: 0; 
    padding: 0; 
    background: #ffffff; 
    width: 100%; 
    height: auto; 
} 

#wrapper{ 
width: 100%; 
height: auto; 
} 

#header{ 
height: 137px; 
width: 100%; 
background-image:url('pictures/headerbg.png'); 
background-repeat:repeat-x; 
} 

#logo{ 
background-image:url('pictures/logo.png'); 
width: 320px; 
height: 137px; 
margin-left: 330px; 
} 

#slider{ 
height: 426px; 
z-index: 2; 
} 

#stripe{ 
height: 335px; 
background: grey; 
z-index: 1; 
position: absolute; 
background-image:url('pictures/stripe.png'); 
background-repeat:repeat-x; 
} 

#mainpic{ 
position: absolute; 
z-index: 3; 
width: 60%; 
    min-width:940px; 
height: 343px; 
margin-top:22px; 
    margin-left:-30%; 
    left:50%; 
background-image:url('pictures/slider.jpg'); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
} 

#podpis{ 
margin-top: 338px; 
margin-left: 104px; 
font-size: 36px; 
width: 700px; 
position: absolute; 
} 

/* Część z boxami */ 

#boxes{ 
height: 469px; 
width: 940px; 
margin-left: 330px; 
background: #234f31; 
} 

.box{ 
float: left; 
height: 469px; 
width: 320px; 
background: #ffffff; 
} 

.box h2{ 
font-size: 18px; 
margin-top: 21px; 
font-family: Georgia; 
color: #11719e; 
float:left; 
} 

.box h3{ 
font-size: 12px; 
margin-top: 2px; 
font-family: Helvetica; 
color: #8c8c8c; 
float:left; 
} 

.box p{ 
margin-top: 12px; 
margin-left: 2px; 
font-size: 13px; 
color: #3e3e3e; 
width: 299px; 
float: left; 

} 

.przycisk{ 
margin-top: 20px; 
margin-left: 2px; 
float: left; 
width: 163px; 
height: 35px; 
} 

.boxPicture{ 
margin-top: 15px; 
float: left; 
height: 198px; 
width: 299px; 
} 

#box_c{ 
float: left; 
height: 469px; 
width: 300px; 
background: yellow; 
} 

/* Footer */ 
#przerywnik{ 
height: 10px; 
width: 100%; 
background: #4c4c4c; 
} 

footer{ 
height: 173px; 
width: 100%; 
background: #333333; 

}

источник

2013-07-05 15:30:02 Seazoux

Итак, я поддержал, чтобы изменить все значения на%? Есть еще много разделов, которые отображаются неправильно. Что такое значения высоты и отдых (размер шрифта и т. Д.)? – Lethysek

Скажите, какие divs отображаются неправильно? – Seazoux

Например: #logo, #slider, #mainpic, footer Он не переместил содержимое веб-сайта в центр, не увеличил содержание, чтобы хорошо выглядеть. Ссылка на скриншот: http://s11.postimg.org/48e6hglg3/screen3.png – Lethysek

Редактировать все

width:1600px;

в коде CSS для

width:100%;

источник

2013-07-05 16:12:59 MaxK

По-прежнему не смотрите lilke, это должно быть: http://s13.postimg.org/t9kbwobiv/screen4.png – Lethysek

Это другое направление решения, но, возможно, дает вам желаемый эффект: держать всю ширину: 1600 пикселей; в вашем дизайне без изменений и добавьте margin: 0px auto; к вашему #wrapper в css – MaxK

Я думаю, что было бы лучше подходит для ответа здесь с данным объяснением ваших проблем: How to fit your website for all or at lest most screen resolutions?

источник

2013-09-27 15:40:53 m33bo

Как растянуть сайт до экрана разрешения

ответ

Смежные вопросы