Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 24.11.2013
Сообщений: 43

как сверстать макет

24.11.2013, 18:54. Показов 1071. Ответов 9
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Ребята помогите сверстать макет без использования блочной верстки. Или хотя бы план действий. Спасибо

Почему квадратики в эксплоере, совсем не квадратики, и в разных браузерах на разном расстоянии от верха?
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

<html>
<head>
<title>Зеленый макет</title>
<style type="text/css">
body {
background-color: #2E8B57;
}
 
</style>
</head>
<body>
<table border="0" cellspacing="5" style="float:left; margin:30px 200px;">
<tr>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">S</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">T</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">Y</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">L</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">E</td>
</tr>
</table>
 
<div style="float:left; margin-top: 85px; margin-right: 5px">изменение цвета &raquo;</div>
<div style="float:left; background-color: #2E8B57; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #FFFACD; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #FF8C00; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #8B636C; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #FF6EB4; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #9ACD32; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
</body>
</html>
Миниатюры
как сверстать макет  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 24.11.2013, 18:54
Ответы с готовыми решениями:

Как сверстать этот макет?
Всем привет. Подскажите как сверстать этот макет. А именно как реализовать эти квадраты? Через таблицу это смешно, а делать кучу дивов...

Как сверстать такой макет?
Здравствуйте, подскажите, как лучше сверстать такой макет. Главные проблемы: 1. плавный переход в фон на краях 2. анимированый фон...

Как лучше сверстать предложенный макет?
Всем алоха. Как посоветуете сверстать данный макет? Состоит из нескольких картинок, причем колесо отличается от остальных по высоте....

9
0 / 0 / 0
Регистрация: 24.11.2013
Сообщений: 43
25.11.2013, 23:11  [ТС]
В этом макете не получается сделать квадратики, которые находятся в правом верхнем углу. В эксплоере они совсем не квадратики, в остальных норм.
0
 Аватар для Nonesa
0 / 0 / 0
Регистрация: 25.11.2013
Сообщений: 49
25.11.2013, 23:49
Может поможет
http://www.youtube.com/watch?v... uNRsfaDF1o
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
26.11.2013, 00:30
Да вроде все нормально отображается, в ie и firefox
1
0 / 0 / 0
Регистрация: 24.11.2013
Сообщений: 43
26.11.2013, 10:41  [ТС]
Цитата Сообщение от esculap_ra Посмотреть сообщение
Да вроде все нормально отображается, в ie и firefox
Хм, странно, у меня нет))) Спасибо)
0
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
26.11.2013, 12:41
albina111484, приложите скрин Вашего эксплорера и его версию озвучьте
0
0 / 0 / 0
Регистрация: 24.11.2013
Сообщений: 43
26.11.2013, 13:20  [ТС]
Цитата Сообщение от Taatshi Посмотреть сообщение
albina111484, приложите скрин Вашего эксплорера и его версию озвучьте
Версия эксплоера 8
Миниатюры
как сверстать макет  
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
26.11.2013, 16:30
Цитата Сообщение от albina111484 Посмотреть сообщение
Версия эксплоера 8
У меня. оказывается, уже 10 версия. Сам автоматом обновился.
0
0 / 0 / 0
Регистрация: 24.11.2013
Сообщений: 43
28.11.2013, 16:17  [ТС]
С квадратиками норм, теперь не получается убрать расстояние между вкладками и текстом, и убрать нижнюю границу во вкладке css, бордером не получается, почему-то. Все каряво, учусь, первые лабораторки)))
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
81
82
83
84
85

<!DOCTYPE HTML>
<html>
<head>
<title>Зеленый макет</title>
<style type="text/css">
body {
background-color: #2E8B57;
font-family: calibri;
}
 
</style>
</head>
<body>
<table border="0" cellspacing="5" style="float:left; margin:30px 200px; font-family: times new roman;">
<tr>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">S</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">T</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">Y</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">L</td>
<td style="font-size: 50px; background-color: #FFFFFF; width: 40; border: 3px solid #000000; text-align: center;">E</td>
</tr>
</table>
 
<div style="float:left; margin-top: 85px; margin-right: 5px">изменение цвета &raquo;</div>
<div style="float:left; background-color: #2E8B57; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #FFFACD; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #FF8C00; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #8B636C; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #FF6EB4; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
<div style="float:left; background-color: #9ACD32; border: 2px solid #000000; width: 12px; height: 12px; margin-top: 83px; margin-right: 4px;"></div>
 
<table style="clear: both; width: 130px; float:left; position:absolute; margin-top: 100px; margin-left: 50px">
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">страница новостей</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">общее применение CSS2</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">блоки-теория и практика, изготовление меню</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">несколько скриптов</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">динамика, озвучивание</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F;">всякие мысли по разному поводу</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F;">форум сайта</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">обмен ссылками</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">о сайте</td>
</tr>
<tr>
<td style="border: 2px solid #000000; background-color: #8FBC8F">CSS2 на русском</td>
</tr>
</table>
<table style="width: 680px; float:left; position:absolute; margin-top: 105px; margin-left: 205px;">
<tr>
<td align="center" style="border: 2px solid #000000; background-color: #FFFFFF;">CSS</td>
<td align="center" style="border: 2px solid #000000; background-color: #8FBC8F;">графика</td>
<td align="center" style="border: 2px solid #000000; background-color: #8FBC8F">динамика</td>
<td align="center" style="border: 2px solid #000000; background-color: #8FBC8F">программы</td>
<td align="center" style="border: 2px solid #000000; background-color: #8FBC8F">юзабилити</td> 
<td align="center" style="border: 2px solid #000000; background-color: #8FBC8F">полезности</td>
</tr>
<tr>
<td colspan="6" style="border: 2px solid #000000; background-color: #FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a href="www.w3.org">www.w3.org</a><br> Aliquam hendrerit, orci eu consectetur blandit, diam nunc tristique nibh, eu aliquam.<p>&nbsp;<div style="border-top: 1px dashed #000000;"></div><p>Fusce quis libero neque. In elementum magna quis magna placerat nec egestas massa sagittis.<div style="border: 2px solid #000000; background-color: #2E8B57; width: 350px;">Приемущества блочного построения страниц</div><p>Fusce quis libero neque. In elementum magna quis magna placerat nec egestas massa sagittis.<p>Fusce quis libero neque. In elementum magna quis magna placerat nec egestas massa sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in felis nec metus malesuada ultricies. Aenean molestie consequat tellus, non rhoncus magna suscipit in. Vivamus vitae scelerisque purus. Ut vitae nisi mauris, eu varius odio:<br>
</td>
</tr>
</table>
</body>
</html>
0
28.11.2013, 17:32
 Комментарий модератора 
albina111484, одна тема - один вопрос. Создайте новую.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 28.11.2013, 17:32
Помогаю со студенческими работами здесь

как сверстать этот макет в ie8
удалите тему, ссылка на картинку макета нельзя добавить нормально 1) темы по требованию пользователей не удаляются 2) картинки нужно...

Как правильно сверстать psd макет
Как правильно сделать блок на картинке block.png из двух других картинок? Заранее благодарен

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

Не могу сверстать макет
Не судите строго мне 53 года учусь самостоятельно, хочу создать сайт по погибшим друзьям в Чечне. Макет из 3-х колонок. Reset не мой -...

Не получается сделать вот такой макет. Не могу сверстать. Всё внутри!
Вот, есть такой макет: цифры 1 и 2 показывают два разных фона. Можно сделать белый фон. А там где должно начинаться серое можно вставить...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru