|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
30.12.2011, 11:48 | #1 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
Верстка.
Верстка. Заверстать блок. Изображения могут быть любыми. Обратить внимание на прозрачный фон.
как сделать чтоб нижняя часть была прозрачной? и на нём можно было выбрать другой фон? заранее спасибо. вот пока что получается, но этого мало: Код HTML:
<html> <head> <title>7 задание </title> </head> <div align="center"> <br> <font color="fffffff"> Добро пожаловать! :)</font> </div> <p align="justify"> <p><img style="width: 100%;height: 100%;border: 0;position: absolute;left: 0;top: 0;z-index: -1;" src="зима.jpg" alt="фон" /></p> </p> </body> </html> Последний раз редактировалось Ast; 30.12.2011 в 11:51. |
30.12.2011, 17:20 | #2 | |
Заблокирован
Форумчанин
Регистрация: 30.12.2009
Сообщений: 544
|
Про z-index почитай. + Писать вот так:
Цитата:
Темы для WordPress. Русские WordPress шаблоны
|
|
31.12.2011, 07:31 | #3 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
спасибо помогло
вот код но он ещё не окончательный. только как сделать чтоб он не повторялся? Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Растягиваемый фон</title> <style type="text/css"> #layer1 { z-index: 1; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение от левого края окна */ top: 0; /* Положение от верхнего края */ } #layer2 { position: absolute; /* Абсолютное позиционирование */ z-index: 2; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 5px; /* Положение от левого края окна */ top: 650px; /* Положение от верхнего края */ opacity: 0.2; /* Прозрачность фона (только не все браузеры понимают)*/ } #layer3 { position: absolute; /* Абсолютное позиционирование */ z-index: 3; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 15px; /* Положение от левого края окна */ top: 660px; /* Положение от верхнего края */ } </style> </head> <body> <div id="layer1"> <BODY background="зима.jpg" width="100%"> </div> <div id="layer2"> <img src="зима.jpg" width="20%" height: 100% alt=""> </div> <div id="layer3"> <img src="зима.jpg" width="10%" height: 100% alt=""> </div> </body> </html> Последний раз редактировалось Ast; 31.12.2011 в 09:00. |
31.12.2011, 10:57 | #4 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
в общем. получилось 2 файла. тока с фоном траблы, чтоб не двоился как сделать?
1: Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Растягиваемый фон</title> <style type="text/css"> #layer1 { z-index: 1; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение от левого края окна */ top: 0; /* Положение от верхнего края */ } #layer2 { position: absolute; /* Абсолютное позиционирование */ z-index: 2; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 26px; /* Положение от левого края окна */ top: 610px; /* Положение от верхнего края */ opacity: 0.6; } #layer3 { position: absolute; /* Абсолютное позиционирование */ z-index: 3; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 5px; /* Положение от левого края окна */ top: 620px; /* Положение от верхнего края */ } </style> </head> <body> <div id="layer1"> <body background="зима.jpg"> </div> <div id="layer2"> <img src="чёрный.jpg" width="100%"> </div> <div id="layer3"> <a href="7.2.html"><img src="закат.jpg" width="25%" alt="закат" border="5" align="left" HSPACE=30 > <br> <br><br><br><br> <big><b>ЗАКАТ</b></big> </body> </html> Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Растягиваемый фон</title> <style type="text/css"> #layer1 { z-index: 1; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение от левого края окна */ top: 0; /* Положение от верхнего края */ } #layer2 { position: absolute; /* Абсолютное позиционирование */ z-index: 2; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 28px; /* Положение от левого края окна */ top: 610px; /* Положение от верхнего края */ opacity: 0.6; } #layer3 { position: absolute; /* Абсолютное позиционирование */ z-index: 3; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 5рх; /* Положение от левого края окна */ top: 620px; /* Положение от верхнего края */ } </style> </head> <body> <div id="layer1"> <body background="закат.jpg"> </div> <div id="layer2"> <img src="чёрный.jpg" width="100%"> </div> <div id="layer3"> <a href="7.1.html"><img src="зима.jpg" width="25%" alt="зима" border="5" align="left" HSPACE=30 > <br> <br><br><br><br><big><b>ЗИМА</big></b> </div> </body> </html> |
04.01.2012, 03:35 | #5 |
Заблокирован
Форумчанин
Регистрация: 30.12.2009
Сообщений: 544
|
CSS лучше вынеси в отдельные файлы, отдельно от HTML-разметки.
И Google Chrome с его прекрасным отладчиком тебе в помощь.
Темы для WordPress. Русские WordPress шаблоны
|
04.01.2012, 06:49 | #6 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
спасибо, доработал получилось 3 файла
1: Код HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Растягиваемый фон</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="layer1"> <body background="зима.jpg"> </div> <div id="layer2"> <img src="чёрный.jpg" width="100%"> </div> <div id="layer3"> <a href="7.2.html"><img src="закат.jpg" width="25%" alt="закат" border="5" align="left" HSPACE=30 > <br> <br><br><br><br> <big><b>ЗАКАТ</b></big> </body> </html> Код HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Растягиваемый фон</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="layer1"> <body background="закат.jpg"> </div> <div id="layer2"> <img src="чёрный.jpg" width="100%"> </div> <div id="layer3"> <a href="7.1.html"><img src="зима.jpg" width="25%" alt="зима" border="5" align="left" HSPACE=30 > <br> <br><br><br><br><big><b>ЗИМА</big></b> </div> </body> </html> style.css: Код HTML:
#layer1 { z-index: 1; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение от левого края окна */ top: 0; /* Положение от верхнего края */ } #layer2 { position: absolute; /* Абсолютное позиционирование */ z-index: 2; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 26px; /* Положение от левого края окна */ top: 610px; /* Положение от верхнего края */ opacity: 0.6; } #layer3 { position: absolute; /* Абсолютное позиционирование */ z-index: 3; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 5px; /* Положение от левого края окна */ top: 620px; /* Положение от верхнего края */ } Последний раз редактировалось Ast; 04.01.2012 в 11:09. |
04.01.2012, 11:10 | #7 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
чтоб изображение фона было резиновым:
Код HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Растягиваемый фон</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="fon"> <img src="зима.jpg" width="100%"/> </div> <div class="content"> </div> <div id="layer2"> <img src="чёрный.jpg" width="100%"> </div> <div id="layer3"> <a href="7.2.html"><img src="закат.jpg" width="25%" alt="закат" border="5" align="left" HSPACE=30 > <br> <br><br><br><br><big><b>ЗИМА</big></b> </div> </body> </html> Код HTML:
#layer2 { position: absolute; /* Абсолютное позиционирование */ z-index: 3; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 26px; /* Положение от левого края окна */ top: 610px; /* Положение от верхнего края */ opacity: 0.6; } #layer3 { position: absolute; /* Абсолютное позиционирование */ z-index: 4; /* Порядок слоев */ width: 100%; /* Ширина слоя с фоном */ height: 100%; /* Высота слоя с фоном */ left: 5px; /* Положение от левого края окна */ top: 620px; /* Положение от верхнего края */ } #fon { position:absolute; position:fixed; z-index:1; margin: 0; padding:0; width:100%; height:100%; overflow:hidden; } #content { position:absolute; z-index:2; margin: 0; padding:0; width:100%; height:100%; } |
06.01.2012, 21:17 | #8 |
Пользователь
Регистрация: 05.01.2012
Сообщений: 28
|
Если хочеш чтобы футер был полупрозрачным то просто сделай его полупрозрачным в фотошопе и сохрани в формате png тогда при вставке прозрачность сохранится
|
06.01.2012, 21:19 | #9 |
Пользователь
Регистрация: 05.01.2012
Сообщений: 28
|
А резиновость зачем? Если пользователь просматривает сайт с широко форматного монитора то не очень приятно сайт расползется
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Верстка в DIV | Suamo | HTML и CSS | 5 | 10.11.2010 18:28 |
верстка | NecRoMat | HTML и CSS | 5 | 02.10.2008 01:03 |
Верстка сайтов | Ромыч | Помощь студентам | 1 | 07.05.2008 16:31 |