боковины

Lautes · May 18, 2007

Хочу попросить совета. Я хочу сделать у себя графичиские боковинки для сайта (узоры). Я слышал, что footer страницы прикрепляют с помощью JavaScript или CSS. Нужно ли, что-то подобное для боковинок?

Yarik Voronov · May 18, 2007

скорее да, чем нет. используя background у BODY (http://htmlbook.ru/css/background.html) и наложив с другой стороны div position:absolute c background.

Lautes · May 19, 2007

Yarik Voronov спасибо.

Lautes · May 25, 2007

Кстати напримере показано, что текст прокручивается, а фон как бы оста?тся на сво?м месте. Можно ли сделать так чтобы и текст и фон (боковинка) прокручивались?

Lautes · May 27, 2007

Просто у меня ид?т боковинка с двух сторон, а низ страницы отдел?н линией, боковинка заканчивается возле этой линии, а дальше ид?т один узор уже вдоль этой линии. Мне надо, чтобы боковинка с обеих строн и узор вдоль линии были ч?тка привязаны.

Lautes · May 30, 2007

Так кто нибудь поможет?

Дядя Саша · May 30, 2007

http://htmlbook.ru/css/background-attachment.html

http://htmlbook.ru/css/background-position.html

Lautes · June 2, 2007

Вот я установил для слоя следующие параметру css:

#leftimage{

margin: 0;

padding: 0px 0px 0px 0px;

width: 10%;

background-image: url('images/left_image.jpeg');

background-position: left bottom;

background-repeat: no-repeat;

}

Но вс? равно фонового изображения не видно.

П.С. делаю на локальном компьютере.

Emm · June 2, 2007

идентификатор куда вписываете ?

Маша, а где твой мяч?

Lautes · June 2, 2007

Индетификатор вписан как у Вас.

WEB_bobby · June 2, 2007

background-image: url('images/left_image.jpeg');

Что то мне подсказывает что именно из-за неправильного названия файла или пути у вас и невидно фона.. Т. к.

1. Если неправильно заданы параметры фона - то он хоть как нибудь в принципе должен все равно отобразиться.

2. left_image.jpeg - может у вас там jpg формат а не jpeg? Проверьте.

____________________________________________________________________________________________________

Учитесь писать кратко:

padding: 0px 0px 0px 0px;

- там где ноль px писать не обязательно, например

padding: 30px 0 50px 0;

С маргинами дело обстоит также.

А если хотите сделать все паддинги нулевыми то достаточно написать

padding:0;

Кстати маргины то, все обнулили так же

 margin:0;

Lautes · June 2, 2007

WEB_bobby проверил именно jpeg... Вс? остальное также исправил. Но попрежнему нечего не видно. Вставлял самые разные пути до графичиского файла, вс? равно не видно...

WEB_bobby · June 2, 2007

Вот пожалуйста! У меня все работает. Файл gigi.jpeg загружается фоновой картинкой!

Попробуйте мой код.. - поставьте туда название своей картинки. Ну если уж опять не сработает, то смело выкладывайте весь код. Наверняка там где-то что-то влияет на этот слой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Untitled</title>
 <style type ="text/css">
 #leftimage{
 border: 1px solid black;
 margin: 0;
 padding: 0;
 width: 10%;
 background-image: url('gigi.jpeg');
 background-position: left bottom;
 background-repeat: no-repeat;
 }

 </style> 
</head>

<body>

<div id ="leftimage">

</div>

</body>
</html>

Xenium · June 2, 2007

Lautes, возможно такое происходит из-за отсутствия контента. К тому же высота не указана, слой получается "тонкий", поэтому может быть не видно. Попробуй указать высоту или какой-нибудь текст вписать.

WEB_bobby · June 3, 2007

и ставь всегда когда тестишь свои слои или таблицы border'Ы чтоб ты наглядно видел что и как!

Lautes · June 3, 2007

<? include 'news/head.php';?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="verify-v1" content="xmxS3Dd7MfZWxlCNkhtshUzMQX8YKUnY4dYOryLOidA=" />
<LINK rel="icon" href="images/favicon.ico" type="image/x-icon"> 
<LINK rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
a:link {
 color: #0099FF;
 text-decoration: none;
}
a:visited {
 color: #0099FF;
 text-decoration: none;
}
-->
</style>
<title>CSS Test</title>
<style>
 a.text1:link { color:#ff0033; text-decoration: none } 
 a.text1:active { color:#FF0033 }
 a.text1:visited { color:#ff0033 }
 a.text1:hover { color:#FF0033; text-decoration: underline; } 

 a.text2:link { color:#0066ff; text-decoration: none }
 a.text2:active { color:#0066ff }
 a.text2:visited { color:#0066ff }
 a.text2:hover { color:#0066ff; text-decoration: underline; }
a:hover {
 text-decoration: none;
}
a:active {
 text-decoration: none;
 color: #0066FF;
}
.style11 {
 color: #0099FF;
 font-weight: bold;
 font-size: 150%;
}
.style12 {
 color: #0099FF;
 font-weight: bold;
}
.style14 {color: #0099FF}
html, body {
 height: 100%;
 margin: 0;
 padding: 0;
}

#cap{
 float: left;
 margin: 0;
 padding: 0;
 width: 100%;
}
#bar{
 margin: 0;
 padding: 0;
 width: 100%;
}
#description{
 border-top: 1px solid #ccccff;
 border-left: 1px solid #ccccff;
 border-right: 1px solid #ccccff;
 border-bottom: 1px solid #ccccff;
 margin: 0;
 padding: 0px 0px 0px 0px;
 width: 100%;
}
#leftimage{
 border: 1px solid black;
 margin: 0;
 padding: 0;
 width: 10%;
 background-image: url('left_image.jpeg');
 background-position: left bottom;
 background-repeat: no-repeat;
 }
#poll{
 margin: 0;
 padding: 0px 0px 0px 0px;
 width: 20%;
}
#news{
 float:right;
 margin: 0;
 padding: 0px 0px 1000px 0px;
 width: 66%;
}
#footer{
 margin: 0;
 padding: 0px 0px;
 border-top: 1px solid #ccccff;
 width: 100%;
}
.style16 {font-size: 100%}
.style17 {color: #0066FF; font-style: italic; font-size: 100%; }
.style21 {color: #0033CC}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<table width="100%" height="100%" border="0">
 <tr>
 <td colspan="3"><div id="cap">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="120">
 <param name="movie" value="flash/menu.swf">
 <param name="quality" value="high">
 <embed src="flash/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 

width="100%" height="120"></embed>
 </object>
 </div> 
 <div align="left">
 <div id="bar">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="20">
 <param name="movie" value="flash/waymain.swf">
 <param name=quality value=high>
 <embed src="flash/waymain.swf" quality=high 

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" 

width="100%" height="20"></embed>
 </object>
 </div>
 </div>
 </td>
 </tr>
 <tr>
 <td width="125" height="141"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="125" height="205">
 <param name="movie" value="flash/navigation.swf">
 <param name="quality" value="high">
 <embed src="flash/navigation.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 

width="125" height="205"></embed>
 </object></td>
 <td width="720"><div id="description">
 <p align="center" class="style11">	  Добро пожаловать!</p>
 <p align="center" class="style16"> Тут написан всякий текст. </p>
 <p align="right"><span class="style17">От администрации!</span></p>
 </div>
 </td>
 <td width="133"> 
 </td>
 </tr>
 <tr bordercolor ="1">
 <td height="87" colspan="3">
 <div id="leftimage">

 </div>

 <div align="center"> 
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="15%" height="60" class="style12">
 <param name="movie" value="flash/new.swf">
 <param name="quality" value="high">
 <embed src="flash/new.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="15%" 

height="60"></embed>
 </object>
 </div> 
 </td>
 </tr>
 <tr>
 <td height="1067" colspan="3">
 <div id="news">
 Скрипт новостей....
 </div> 
 <div align="left">
 <div id="poll" style="position:relative; bottom: 1017px"> Ещ? один скрипт тут...
 </div>
 </tr>
 <tr>
 <td height="25" colspan="3">
 <div id="footer">
 <p align="left"><strong><span class="style16"><a href="reklama.htm" class="text1"><b>Разместить рекламу</b></a></span></strong><span 

class="style16"> | <a href="vakansii.htm" class="text2">Вакансии</a> </span></p>
 <p align="left" class="style16">Конец страницы... И тут тоже написана всякая фигня...</p>
 </div> 
 </td>
 </tr>
 <tr>
 <td height="25" colspan="3"><div align="center">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="55%" height="26">
 <param name="movie" value="flash/niza.swf">
 <param name="quality" value="high">
 <embed src="flash/niza.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="55%" 

height="26"></embed>
 </object>
 </div>
 </td>
 </tr>
</table>
</body>
</html>

WEB_bobby · June 3, 2007

Код слишком большой -трудно смореть- поубирай все лишнее! Кстать когда будешь убирать тоже можно понять что мешает твоему слою нормально жить. Убрал кусочек кода - запустил ага хоп появился бэкграунд? Значит думай что там такого в том что ты счас вырезал или на крайняка сюда давай. Вырезал часть кода - но слой нормально жить не начал? Вырезай дальше значит.. Кстать вместо loose.dtd лучше strict.dtd

Lautes · June 10, 2007

Блин вс? равно некак не получается. Загрузил уже этот фон на сервер и просто использовал ссылку с него в css параметрах. Вс? равно не видно фон... Делал разную высот слою фон вс? равно не видно. Я взял новый фаил html и вставил туда в него только этот слой и css параметры. Вс? равно фон не видно. Значит нечего не мешает фону отобразится... Что то неправильно в css или где то ещ?...

yopopt · June 10, 2007

Правильны ли пути к изображению? Покажите.

Lautes · June 10, 2007

Путь выглядит следующим образом: http://www.********.com.ua/left_image.jpg

yopopt · June 10, 2007

В коде left_image.jpeg, а сама картинка называется left_image.jpg.

Lautes · June 10, 2007

yopopt собственно это нечего не поменяло...

yopopt · June 10, 2007

Задайте height элементу с id leftimage и проверяйте пути к картинке.

Вс? работает.

Lautes · June 11, 2007

Сейчас это выглядит у меня так:

#leftimage{

position: absolute;

margin: 0;

padding: 0;

width: 150px;

height: 50px;

left: 4px;

top: 371px;

background-image: url ('http://www.*******.com.ua/left_image.jpeg');

background-position: left bottom;

background-repeat: no-repeat;

}

yopopt · June 11, 2007

Единственная мысль: проверить пути, имя файла и регистр символов в имени файла и коде.

Lautes · June 11, 2007

yopopt так я уже просто тупо копировал адрес из строки браузера...

Sign In

боковины

Question

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information