Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.77/26: Рейтинг темы: голосов - 26, средняя оценка - 4.77
ivan111
0 / 0 / 0
Регистрация: 20.03.2013
Сообщений: 15
1

Резиновый макет

09.07.2013, 17:54. Просмотров 4798. Ответов 10
Метки нет (Все метки)

Может кто обьъснить,как делаются резиновые макеты,и размещение ссылок на резиновом меню. за ранние спасибо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.07.2013, 17:54
Ответы с готовыми решениями:

Резиновый макет!!!
Доброе время суток всем. Есть один впросс!! Подскажите где можно скачать...

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

резиновый макет с bootstrap
НЕ получается доверстать макет с бутстрапом (первый раз с ним работаю). Как...

Двухколоночный резиновый макет
Здравствуйте, коллеги. Как сделать такой макет: две колонки, ширина одной...

Самый оптимальный резиновый макет?
Всем доброго времени суток, я совсем не давно начал углубляться в html/css....

10
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
09.07.2013, 19:13 2
резиновый макет - его главный момент что все размеры описываются в основном в процентах % . Ширина , высота, паддинги ,маржины и тд .

вот почитай http://htmlbook.ru/samlayout/tipovye...onochnyi-maket

вот еще немного о плюсах и минусах http://webew.ru/articles/411.webew

если после прочтения не понятно что либо задавай вопросы. Потому как просто обяснять что такое резиновый макет очень долго . Нужно вначале ознакомиться и прояснять то что не понятно по ходу .

Добавлено через 4 минуты
вот интересный сайт - прочитав его увидешь образцы сайтов с резиновым макетом
http://dnzl.ru/view_post.php?id=220

Добавлено через 36 секунд
благодаря твоему вопросу и сам просвещаюсь читаю сейчас .
1
ivan111
0 / 0 / 0
Регистрация: 20.03.2013
Сообщений: 15
09.07.2013, 20:35  [ТС] 3
Спасибо большое.У меня одна проблема была,я не умею делать меню,то есть что бы ссылки норм стояли,а не плавали при уменьшении окна браузера
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
09.07.2013, 20:52 4
лучше всего обвертывать в див само меню и диву задавать параметры ширины и высоты .
А вы как верстаете меню в таблицах или дивах?
этому не сложно научиться .
Если у вас есть сверстанный вариант который так сказать плавает выкладывайте здесь посмотрим поправим , подскажем - как правильно сделать.
1
ivan111
0 / 0 / 0
Регистрация: 20.03.2013
Сообщений: 15
09.07.2013, 20:54  [ТС] 5
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE HTML PUBLCI "-//DTD HTML 4.01//EN"
"http://w3.org//TR/html4/strict.dtd">
<html xmlns="http://w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html"; charset="windows-1251">
  <title>ццц</title>
  <style type="text/css">
 
   body,ul {
    margin:0;
    padding:0;
   }
   body {
    background: url(bg.jpg) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
    margin:0;
    padding:0;
   }
   .menu {
    background-image: url("http://www.cyberforum.ru/images/head.png");
    padding:1%;
    min-width:700px;
   }
   .menu > ul {
    list-style: none;
    font-size: 0;
    text-align: center;
   }
   .menu > ul li {
    display: inline-block;
    width: 10%;
   }
   .menu > ul li a {
    display:block;
    color:gray;
    font-size:15px;
   }
   .menu ul li a:hover {
    color:white;
   }
   
   #vxod {
    width:700px;
    margin:0 auto;
    background-color:#e2e2e2;
    border:1px Solid #b1afaf;
    border-radius:1px;
    height:600px;
   }
  </style
 </head>
 <body>
  <div id="container">
   <div class="menu">
    <ul>
     <li>
      <a href="#" class="logo">KewLine.com</a>
     </li>
     <li>
       <a href="#" class="help">Помощь</a>
      </li>
     <li>
      <a href="#" class="language">Language</a>
      </li>
      <li>
      <a href="#" class="rules">Правило</a>
     </li>
     <li>
      <a href="#" class="support">Тех.поддержка</a>
     </li>
    </ul>
  </div>
  </div>
  <div id="vxod"></div>
  </div>
 </body>
</html>
 Комментарий модератора 
Нарушение правил форума пункт 4.6, 4.13

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

Не стоит просить или предлагать выслать ответ в icq, e-mail и другие средства общения. Эта просьба все равно не будет выполнена, а сообщение будет отредактировано модератором.

0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
09.07.2013, 21:26 6
вот на этих сайтах можешь сделать шаблоны нужные и скачать файлы и посмотреть как верстается шаблоны и нужно практиковать еще и еще пока не отложиться в голове если что не понятно задавать много вопросов и прояснять каждый непонятный пустяк и плюс читать блоги где описываются разные способы верстки .
вот даю тебе первый сайт ( сам им пользуюсь - там все понятно )
http://wdevblog.net.ru/css-layouter/
а вот еще один где можно создать шаблоны как резиновой, так и фиксированной верстки , когда скачаешь файлы просмотри их в редакторе тестовом например Notepad++ (его можно скачать в инете он бесплатный ) , чтобы понять структуру верстки как например верстается меню, контент , хидер , футор .
http://csstemplater.com/

еще поищи в гугле книги по верстке для начинающих или видеокурсы . И вперед

Добавлено через 16 минут
вам нужно править css файл - потому как навскидку есть ошибки в коде .
0
ivan111
0 / 0 / 0
Регистрация: 20.03.2013
Сообщений: 15
09.07.2013, 21:30  [ТС] 7
Это то всё легко,вот как сделать меню с ссылками,типа одноклассники или твиттер.
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
09.07.2013, 21:41 8
открой сайт одноклассники или твиттер - затем находясь на странице сайта щелкни правой кнопкой мыши и выбери пункт "проинспектировать элемент " и когда внизу появиться код сайта - щелкни в районе меню и увидишь код и все ( но в одноклассниках довольно сложный код в нем разобраться новичку не просто - выбери попроще сайт или поищи есть демо меню файлы для которых можно скачать и установить на сайт) . Для Мозилы ( это браузер ) можно использовать специальный плагин ( Firebug) . Начинать всегда трудно - но есть пословица тяжело в учении легко в бою .
1
ivan111
0 / 0 / 0
Регистрация: 20.03.2013
Сообщений: 15
09.07.2013, 21:43  [ТС] 9
Думаю начну нормально учить html,а то учил его так,на примерах учился,думаю учебник знаний больше принесёт,вот только бы найти хороший учебник,если есть дай ссылочку пожалуйста,и спасибо тебе за то что откликнулся на мою тему.
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
09.07.2013, 22:14 10
вот несколько ссылок для начинающих :
http://ab-w.net/HTML/HTML.php
http://www.postroika.ru/html/content2.html

здесь все основы вебстроения :
http://htmlbook.ru/

Добавлено через 26 минут
Думаю это хорошая мысль учить основы и плюс практикуйте продолжайте и через несколько месяцев станете мастером верстки - только не сдавайтесь.
1
Taatshi
10.07.2013, 14:41     Резиновый макет
  #11
 Комментарий модератора 
ivan111, не нужно цитировать каждое предыдущее сообщение. Внизу темы есть кнопка "Ответить" если у Вас не запущена форма быстрого ответа
1
10.07.2013, 14:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.07.2013, 14:41
Привет! Вот еще темы с ответами:

резиновый макет и масштабируемое img
Добрый день, собираюсь из psd сверстать резиновый макет, столкнулся пока что с...

Блочная верстка (резиновый сайт), подскажите как сделать такой макет (см. рисунок)?
я думаю что по цветам можно легко распознать что является контейнером, а что...

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru