|
Сайт под разные разрешения экранов
|
|
| Saitei | Дата: Воскресенье, 29 Июля 2012, 13:11 | Сообщение # 1 |
|
старожил
Сейчас нет на сайте
| Как сделать? Слышал про резиновые сайты, мне даже показывали. Не умею. Вот у меня разрешение экрана 1920х1080, а хочу чтобы моя браузерная игра в будущем выглядела нормально и, скажем, при маленьком разрешении 800х480. Что делать? Хотелось бы мне не тупить и сразу же начать нормальную разработку, учитывая разные разрешения экранов... Добавлено (29.07.2012, 13:11)
---------------------------------------------
p.s. и чтобы всё содержимое блоков (текст, картинки) + сами блоки под разрешение подстраивались. Помогите пожалуйста. С меня большой плюсик)
|
|
|
| |
| JumpZ(noob) | Дата: Воскресенье, 29 Июля 2012, 13:49 | Сообщение # 2 |
почетный гость
Сейчас нет на сайте
| ну вот смотри если у тебя задний он с цвета то попробуй вот так
Code background-color: #eee; // здесь любой цвет
а если задний фон хочешь чтоб был с картинкой то вот так
Code background: url(ПУТЬ К КАРТИНКЕ);
margin: 0 auto;
width: 900px;//здесь можешь ставить любой параметр к примеру 100% это будет реальное изображение картинке в реальных размерах
ещё есть такая штука как фиксация изображения вот пример
Code background-image: url('ПУТЬ К КАРТИНКЕ');/* Цвет фона */
left: 0.5%;
top: 1%;
position: fixed;
width: 99%;
height: 80%;
Skype: a-x-i-t-o
|
|
|
| |
| MrAkakuy | Дата: Воскресенье, 29 Июля 2012, 13:53 | Сообщение # 3 |
участник
Сейчас нет на сайте
| Надо где размер вместо кол-во пикселей писать в процентах. Например, левый фрейм 20%, правый тоже 20. Среднее поле 60. Тогда, когда ты будешь открывать на экране с меньшим разрешением, тест просто сожмется. Пример (зеленым цветом обвел):
Сообщение отредактировал MrAkakuy - Воскресенье, 29 Июля 2012, 13:54 |
|
|
| |
| JumpZ(noob) | Дата: Воскресенье, 29 Июля 2012, 14:01 | Сообщение # 4 |
|
почетный гость
Сейчас нет на сайте
| MrAkakuy,
между <body></body> вставляешь где угодно это <div class='text'> например
Code <div class='text'>Рекламные программы Решения для бизнеса Политика конфиденциальности и Условия использования Google+ Всё о Google Google.com <div>
и в файл со стилем вставляешь вот это
Code }.text{
font-size: 12;
color: #FFF; /* text */
padding-top: 10px;
padding-left: 10px;
}
Skype: a-x-i-t-o
Сообщение отредактировал JumpZ(noob) - Воскресенье, 29 Июля 2012, 14:01 |
|
|
| |
|
| GECK | Дата: Воскресенье, 29 Июля 2012, 14:06 | Сообщение # 6 |
заслуженный участник
Сейчас нет на сайте
| Гугли про адаптивную верстку, Люк.
Всё гениальное просто. И хреново работает.
|
|
|
| |
| Saitei | Дата: Среда, 01 Августа 2012, 14:56 | Сообщение # 7 |
|
старожил
Сейчас нет на сайте
| есть аналоги?
Сделал вот такую страницу:
Code <?php session_start(); //Начало сессии include ("engine/mysql_connect.php"); include ("news.php"); include ("autform.php"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Saitei" /> <link href="style.css" type="text/css" rel="stylesheet"> <title>Моя MMORPG</title> </head> <body> <table id="wrapper"> <tr> <td id="left">Левая колонка</td> <td id="center"> <h2 align="center">Главная страница</h2> <p align="center"><img src="logo.png" width="auto" height="auto" alt="[Logo]" /></p> </p></form> <br> <br> </td> <td id='right'> <?php vhod(); ?> </td> </tr> </table> <div align="center" id="niz">Project 31.07.2012 © Saitei</div> </body> </html>
Code
body
{
background-color:#FFEBCD;
}
#reg
{
color:#B22222;
}
#wrapper
{
height:100%;
width:100%;
margin:0;padding:0;
}
#left
{
width:20%;
}
#right
{
width:20%;
}
#center
{
position:absolute;
top:0%;
width:60%;
}
#niz
{
position:absolute;
color:#8B8B83;
top:95%;
left:90%;
}
#login
{
border-width: thick;
border-style: double;
border-color: black;
background-color:#FFE4C4;
}
на 1280х1024 выглядит нормально. У меня 1920х1080... Тоже норм... Но все говорят что что-то не так. Что это плохой тон программирования О_о ?
|
|
|
| |
| JumpZ(noob) | Дата: Среда, 01 Августа 2012, 16:02 | Сообщение # 8 |
|
почетный гость
Сейчас нет на сайте
| Saitei, Попроси пускай тебе скрин сделают и ты поймешь в чем ошибка =)
Skype: a-x-i-t-o
|
|
|
| |
| Saitei | Дата: Среда, 01 Августа 2012, 16:03 | Сообщение # 9 |
|
старожил
Сейчас нет на сайте
| сделайте скрин, а?
да уже делали на 1280х1024, пофиксил. Работает же. Не знаю что не так...
|
|
|
| |
| JumpZ(noob) | Дата: Среда, 01 Августа 2012, 16:04 | Сообщение # 10 |
|
почетный гость
Сейчас нет на сайте
| вот у меня такая же проблема была, я попросил мне заскринили несколько человек и все потом понял в чем причина и исправил
Skype: a-x-i-t-o
|
|
|
| |
| Saitei | Дата: Среда, 01 Августа 2012, 16:05 | Сообщение # 11 |
|
старожил
Сейчас нет на сайте
| JumpZ(noob), ну а с кодом что не так?
|
|
|
| |
| JumpZ(noob) | Дата: Среда, 01 Августа 2012, 16:29 | Сообщение # 12 |
|
почетный гость
Сейчас нет на сайте
| щас гляну, вот у меня тоже прикол у меня менюшка напостой уезжает влево http://floomby.ru/s1/MgDxZ Добавлено (01.08.2012, 16:29)
---------------------------------------------
я не пойму что там не так ?
Skype: a-x-i-t-o
|
|
|
| |
| Saitei | Дата: Среда, 01 Августа 2012, 17:41 | Сообщение # 13 |
|
старожил
Сейчас нет на сайте
| JumpZ(noob), картинку не вижу... Добавлено (01.08.2012, 17:41)
---------------------------------------------
Quote (JumpZ(noob)) щас гляну, вот у меня тоже прикол у меня менюшка напостой уезжает влево
кстати какая менюшка? Я содержимое логина (блока такого) и картинки не давал
|
|
|
| |
| gmmmm | Дата: Среда, 01 Августа 2012, 17:58 | Сообщение # 14 |
почетный гость
Сейчас нет на сайте
| Нагуглил вот-что:
Цитата из той статьи:
Quote Обёртка вокруг всего документа.
Удобно использовать, чтобы контролировать ширину документа. Если «десктопная» ширина макета фиксирована, скажем 1000px, можно это записать так: #wrapper {max-width: 1000px}. И с точки зрения семантики это будет куда более правильным чем width:1000px (действительно, это же максимальная ширина блока)
Еще:
Quote Гибридная верстка включает в себя все лучшее из двух вышеуказанных. Как правило(все зависит от верстальщика), сайт тянется только в определенных границах [А1хБ1; А3хБ2], а за их пределами верстка становиться фиксированной.
И еще:
Code @media screen and (min-width: 400px) and (max-width: 700px) { … }
И еще:
Code <link rel="stylesheet" media="screen and (max-width: 1921px)" href="style6.css" />
пусто!)
|
|
|
| |
| Saitei | Дата: Среда, 01 Августа 2012, 18:41 | Сообщение # 15 |
|
старожил
Сейчас нет на сайте
| gmmmm, запутал ты меня)
|
|
|
| |
| gmmmm | Дата: Среда, 01 Августа 2012, 19:03 | Сообщение # 16 |
|
почетный гость
Сейчас нет на сайте
| Quote (Saitei)
запутал ты меня)
Ну чего не понятно я почитал статьи из поиска, нашел, что есть 3 вида верстки: резиновая, фиксированная, гибридная.
Гибридная сочетает в себе все лучшие качества из первых двух. Нашел вариант: не width:n%, а min-width и max-width.
А вообще почитай лучше статьи, из которых я брал цитаты. Запрос "верстка под разные разрешения экрана" в Яндекс.
Пример из русского мануала
Code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Версия сайта для КПК</title> <style media="handheld"> body { max-width: 320px; /* Максимальная ширина страницы в пикселах */ } </style> </head> <body> <h1>Текст заголовка</h1> <p>Текст примера</p> </body> </html>
Поддерживает css > 2.
Синтаксис: max-width: значение | проценты | none | inherit
пусто!)
|
|
|
| |
| IGRAMEN | Дата: Суббота, 01 Сентября 2012, 17:03 | Сообщение # 17 |
частый гость
Сейчас нет на сайте
| Quote (Saitei) Как сделать? Слышал про резиновые сайты, мне даже показывали. Не умею. Вот у меня разрешение экрана 1920х1080, а хочу чтобы моя браузерная игра в будущем выглядела нормально и, скажем, при маленьком разрешении 800х480. Что делать? Хотелось бы мне не тупить и сразу же начать нормальную разработку, учитывая разные разрешения экранов...
Добавлено (29.07.2012, 13:11)
---------------------------------------------
p.s. и чтобы всё содержимое блоков (текст, картинки) + сами блоки под разрешение подстраивались. Помогите пожалуйста. С меня большой плюсик)
Это называется вёрстка.
вот тебе пару уроков
ТЫК
ТЫК
P.S "Я делал вёрстку через фотошоп"
|
|
|
| |
| arrow25 | Дата: Суббота, 01 Сентября 2012, 17:32 | Сообщение # 18 |
постоянный участник
Сейчас нет на сайте
| IGRAMEN, АДЦКИЙ однако верстальщик)) , тут совсем про другое спрашивали.
для этих целей уже существует не мало различных framework'ов.
|
|
|
| |
| romgerman | Дата: Суббота, 01 Сентября 2012, 17:37 | Сообщение # 19 |
старожил
Сейчас нет на сайте
|
|
|
|
| |
| IGRAMEN | Дата: Суббота, 01 Сентября 2012, 18:30 | Сообщение # 20 |
|
частый гость
Сейчас нет на сайте
| Quote (arrow25) АДЦКИЙ однако верстальщик)) , тут совсем про другое спрашивали.
для этих целей уже существует не мало различных framework'ов.
Да нет.Норма
|
|
|
| |
