Многоразовая оболочка xhtml, которая хорошо работает на всех устройствах - PullRequest
Новая
       15

Многоразовая оболочка xhtml, которая хорошо работает на всех устройствах

0 голосов
/ 30 декабря 2011

Я независимый веб-дизайнер.Хотя я хорошо разбираюсь в XHTML и делю, некоторые сайты, которые я создаю, плохо отображаются на мобильных устройствах в вертикальном положении.Последний сайт, который я заполнил, потребовал, чтобы я охватил весь сайт.Я достиг этого, используя ширину 100%, но моя навигационная панель в верхней части страницы переместилась, когда браузер был уменьшен.

В двух словах, я отправляю эту работу, чтобы снабдить ее кодом XHTML, который предоставит мнемногоразовый контейнер, который будет хорошо изменяться на ПК, мобильном телефоне или планшете:

См. примеры веб-сайтов ниже.Это те размеры, внешний вид, которые я пытаюсь достичь.

Вот некоторые из CSS, которые я использовал в своем последнем проекте. 

#backgrdwrapper
{
width: 100%;
background-color: #000000;
margin: 0 auto;
}

#wrapper
{
width: 100%px;
margin: 0 auto;
}

#header
{
width: 100%px;
height: 150px;
background-color: #000000;
margin: 0 auto;
}

#spaceheader

{

height:15px;

}


#navigation
{
width: 1000px;
height: 65px;
background-color: #000000;
padding-top:1px;
padding-bottom:1px;
margin: 0 auto;
}

#content
{
width: 980px;

padding: 10px 10px;
background-color: #000000;
margin: 0px auto;
}

Пожалуйста, посмотрите примеры веб-сайтов ниже.Вот размеры, внешний вид и ощущения, которых я пытаюсь достичь.

www.wemakewebsites.com

www.seamonster.com

www.double-eye.com

Спасибо

Уэйн

1 Ответ

0 голосов
/ 30 декабря 2011

Я сам являюсь веб-разработчиком-фрилансером и провел месяцы подряд, пытаясь понять, как правильно расположить все мои сайты, чтобы они работали на моем ноутбуке, iPhone и iPad. Через некоторое время я понял, как это сделать.

Полагаю, я вижу вашу проблему: для вашей ширины навигации вы используете 1000 пикселей, а ширина вашего контента - 980 пикселей. Он никогда не должен превышать 960 пикселей. Так как это в основном магическое число, чтобы все было в порядке. Поэтому все, что вам нужно сделать, это изменить ширину навигации и ширину контента на 960 пикселей, и у вас все будет хорошо.

Я вижу, что вы пытались компенсировать область содержимого. Хотя это сработало, это не совсем «правильно». Таким образом, вы можете оставить свою область содержимого как есть, но если вы измените ее ширину на 960, убедитесь, что вы избавились от своих отступов.

Итак, вот что вы хотите изменить #navigation и #content: 

#navigations {
 position: relative;
 width: 960px;
 margin: 0px auto 0;
 padding-top: 1px;
 padding-bottom: 1px;
}

#content {
 position: relative;
 width: 960px;
 margin 0px auto 0;
}

Это должно сработать для вас.

Ура!

...