X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Масштабирование сайта при уменьшении/растягивании окна браузера...
AddM
AddM
Topic Starter сообщение 8.2.2011, 16:23; Ответить: AddM
Сообщение #1


В этом деле я 3-й день и меня интересует вопрос: "Как можно сделать при помощи div страничку так что бы при уменьшении ситраницы смещался текст и картинка и уменьшались?"
Или скажите что я не то и не тем делаю...[attachment=37461:Begin4.rar]

Исходники приложил! Не пугайтесь цветам и словам что там есть, если кто проссмотрит...
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LifeUP
LifeUP
сообщение 8.2.2011, 16:45; Ответить: LifeUP
Сообщение #2


http://csstemplater.com/
Для создания каркасов
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 8.2.2011, 16:54; Ответить: vasvas7775
Сообщение #3


Вот посмотри я сделал набросок Шаблона, он подгоняется по разной ширине экрана, или если сжать окно, А контент прописан в таблице, это даст растягивать этот блок под разную длину текста:

[CSS]<style>
body { margin: 0px auto;}
#block { position:absolute; left:50%; margin-left:-42.5%; width:85%; height:140px; background-color:;}
#head { float:left; width:88%; height:70px; background-color:; text-align:center;}
#header { float:left; width:100%; height:70px; background-color:#0000FF;}
#kartinka { float:right; width:100px; height:70px;}
#left_menu { float:left; width:20%; height:70px; background-color:#663300; text-align:center;}
#table { float:left; width:60%;}
#content { width:60%; height:70px; background-color:#66FF66; text-align:center;}
#right_menu { float:left; width:20%; height:70px; background-color:#66FFFF; text-align:center;}
</style>

<body>
<div id="block">
<div id="header">
<div id="head">Шапка</div>
<img id="kartinka" src="#" /></div>
<div id="left_menu">Левое меню</div>
<table cellspacing="0" id="table">
<tr>
<td id="content" valign="top">текст</td>
</tr>
</table>
<div id="right_menu">Преавое меню</div>
</div>
</body>[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AddM
AddM
Topic Starter сообщение 8.2.2011, 18:39; Ответить: AddM
Сообщение #4


(LifeUP @ 8.2.2011, 18:45) *
http://csstemplater.com/
Для создания каркасов


Спасибо за ссылку, но статические формы умею делать...)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AddM
AddM
Topic Starter сообщение 8.2.2011, 18:42; Ответить: AddM
Сообщение #5


Да, vasvas7775, работает норм, но если мы будем сильно сжимать окно то увидим как блок в который вставленна картинка разбивает всю структуру и смещает ниже левую и правую часть и таблицу, а сама картинка по прежнему не меняется?
Такое вообще возможно сделать? ЧТо бы вместе с уменьшением текста и уменьшалась картинка? Или картинка является чем-то статическим и неизменяемым при уменьшении окна браузера?)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 8.2.2011, 18:56; Ответить: vasvas7775
Сообщение #6


Вот посмотри вот так:

[CSS]<style>
body { margin: 0px auto;}
#block { position:absolute; left:50%; margin-left:-42.5%; width:85%; height:140px; background-color:;}
#header { float:left; width:100%; height:70px; background-color:#0000FF;}
#head { width:90%; height:70px; background-color:#333300; text-align:center;}
#head2 { width:10%; height:70px; background-color:red; text-align:center;}
#kartinka { width:100px; height:70px;}
#left_menu { float:left; width:20%; height:70px; background-color:#663300; text-align:center;}
#table2 { float:left; width:60%;}
#content { width:60%; height:70px; background-color:#66FF66; text-align:center;}
#right_menu { float:left; width:20%; height:70px; background-color:#66FFFF; text-align:center;}
</style>

<body>
<div id="block">
<div id="header">
<table cellspacing="0" width="100%">
<tr>
<td id="head" valign="top">Шапка</td>
<td id="head2" valign="top"><img id="kartinka" src="#" /></td>
</tr>
</table></div>
<div id="left_menu">Левое меню</div>
<table cellspacing="0" id="table2">
<tr>
<td id="content" valign="top">текст</td>
</tr>
</table>
<div id="right_menu">Преавое меню</div>
</div>
</body>[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AddM
AddM
Topic Starter сообщение 8.2.2011, 19:46; Ответить: AddM
Сообщение #7


(vasvas7775 @ 8.2.2011, 20:56) *
Вот посмотри вот так:


Хорошо! Под Opera и Mozila работает приемлимо, под 6ИЕ, неа, можно как-нить адапптировать?)
А можно ещё узнать что означает 3 в строке:
"<img id="kartinka" src="cam2.jpg"3 />"?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 8.2.2011, 19:49; Ответить: vasvas7775
Сообщение #8


Извини, это Опечатка.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AddM
AddM
Topic Starter сообщение 8.2.2011, 20:15; Ответить: AddM
Сообщение #9


(vasvas7775 @ 8.2.2011, 21:49) *
Извини, это Опечатка.

Благодарю за код, сижу изучаю, теги и их свойства из твоего кода. которые не знаю.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Евгения_hb
Евгения_hb
сообщение 18.8.2012, 10:28; Ответить: Евгения_hb
Сообщение #10


Здравствуйте всем. Я новичок в сфере дизайна. Мне нужно подкорректировать дизайн сайта http://autograd-orsk.ru/. Проблема в том, что при уменьшении окна браузера (или разрешения экрана) в область "head" ломается дизайн. Нужно, чтобы при уменьшении окна уменьшалась картинка с машиной и картинка с названием сайта, а область между ними оставалась прежнего размера. Подскажите, как это осуществить?

З.Ы. Извиняюсь за тупые вопросы, но я ужасный новичок в этой области(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
3 чел. читают эту тему (гостей: 3, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продаю недорогие и качественные статьи для Вашего сайта.
Подбор качественного контента из Вебархива.
4 kuz999 1095 Сегодня, 3:42
автор: kuz999
Открытая тема (нет новых ответов) Ищу пару софтин , Авто-переводчик сайта , синонимайзер .
4 lamer2018g 177 Сегодня, 2:47
автор: jartalk
Открытая тема (нет новых ответов) Видео в Wordpress, загружается при открытии странички.
7 PavlivGroup 250 Сегодня, 2:41
автор: jartalk
Горячая тема (нет новых ответов) Технический аудит сайта-бесплатно
52 anykey13 8684 Вчера, 18:29
автор: XANTAN
Открытая тема (нет новых ответов) Платежный шлюз для сайта адалт тематики.
11 PavlivGroup 393 Вчера, 18:26
автор: TABAK


 



RSS Текстовая версия Сейчас: 5.3.2021, 20:46
Дизайн