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" ломается дизайн. Нужно, чтобы при уменьшении окна уменьшалась картинка с машиной и картинка с названием сайта, а область между ними оставалась прежнего размера. Подскажите, как это осуществить?

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6361 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1351 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
10 Aloof 2539 24.3.2024, 21:45
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1925 23.3.2024, 7:41
автор: Room
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
6 stu999 1551 21.3.2024, 20:45
автор: stu999


 



RSS Текстовая версия Сейчас: 28.3.2024, 13:27
Дизайн