Верстка. - HTML и CSS

Ast · 30.12.2011, 11:48

Верстка. Заверстать блок. Изображения могут быть любыми. Обратить внимание на прозрачный фон.
как сделать чтоб нижняя часть была прозрачной? и на нём можно было выбрать другой фон? заранее спасибо.

вот пока что получается, но этого мало:

Код 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>

Alexei91 · 30.12.2011, 17:20

Про z-index почитай. + Писать вот так:

Цитата:

<p><img style="width: 100%;

Нехорошо. Стили от разметки отделяй.

Ast · 31.12.2011, 07:31

спасибо помогло

вот код но он ещё не окончательный. только как сделать чтоб он не повторялся?

Код 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, 10:57

в общем. получилось 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>

2:

Код 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>

Alexei91 · 04.01.2012, 03:35

CSS лучше вынеси в отдельные файлы, отдельно от HTML-разметки.
И Google Chrome с его прекрасным отладчиком тебе в помощь.

Ast · 04.01.2012, 06:49

спасибо, доработал получилось 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>

2:

Код 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>

и .css он для обоих файлов один.
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:10

чтоб изображение фона было резиновым:

Код 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>

css:

Код 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%;
}

mad_ded · 06.01.2012, 21:17

Если хочеш чтобы футер был полупрозрачным то просто сделай его полупрозрачным в фотошопе и сохрани в формате png тогда при вставке прозрачность сохранится

mad_ded · 06.01.2012, 21:19

А резиновость зачем? Если пользователь просматривает сайт с широко форматного монитора то не очень приятно сайт расползется

04.01.2012, 03:35	#5
Alexei91 Заблокирован Форумчанин Регистрация: 30.12.2009 Сообщений: 544	CSS лучше вынеси в отдельные файлы, отдельно от HTML-разметки. И Google Chrome с его прекрасным отладчиком тебе в помощь. Темы для WordPress. Русские WordPress шаблоны

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Верстка в 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

06.01.2012, 21:17	#8
mad_ded Пользователь Регистрация: 05.01.2012 Сообщений: 28	Если хочеш чтобы футер был полупрозрачным то просто сделай его полупрозрачным в фотошопе и сохрани в формате png тогда при вставке прозрачность сохранится

06.01.2012, 21:19	#9
mad_ded Пользователь Регистрация: 05.01.2012 Сообщений: 28	А резиновость зачем? Если пользователь просматривает сайт с широко форматного монитора то не очень приятно сайт расползется