Войти
  1. ВКонтакте
  2. Facebook
  1. » » » Решение проблем с CSS
Новые публикации Скрыть панель справаПоказать панель справа

Решение проблем с CSS

2008-07-09T16:24:02+04:00 2018-01-23T14:41:21+03:00
Доцент
  1. Офлайн
  2. Администраторы
  3. 89 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 16:24, 09.07.2008
Уважаемые посетители! Если у Вас возникли проблемы (вопросы) по работе с CSS, пишите их в эиу тему.
Мы приложем все усилия, чтобы помочь (ответить) Вам.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 3 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 2 отправлено 16:39, 11.07.2008
php code:
  1. #html_text
  2. {
  3.     position: absolute;
  4.     z-index: 5;
  5.     width: 100%;
  6.     left: 0px;
  7.     top: 0px;
  8.     margin-bottom: 120px;
  9.     overflow: auto;
  10. }
  11. div#innertext
  12. {
  13.      float:left;
  14.      width: auto;
  15.      margin-top: 229px;
  16.      margin-right: 280px;
  17.      margin-left: 20px;
  18. }

Мне надо первый блок сделать по всей высоте рабочей области, НО на 120 пикселей меньше!!!
При этом оставить позиционирование и z-index

Последний раз редактировал Al.B. 16:40, 11.07.2008
Доцент
  1. Офлайн
  2. Администраторы
  3. 89 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 3 отправлено 20:29, 11.07.2008
Очень не плохо бы увидеть html.
Но, допустим у Вас есть блок (несколько блоков) на height: 100%; и его (их) надо отодвинуть на 120 пикселей.
Вы не пробовали сделать так?
php code:
  1. html, body {
  2.      padding:120px;
  3. }


Чтобы у 2-го блока был отступ снизу относительно 1-го, сделайте так:
Заключите 2-й блок в див и задайте этому диву такой стиль:
php code:
  1. .class {
  2.      padding-bottom:120px;
  3. }

Последний раз редактировал GZ Design 23:58, 11.07.2008
Абитуриент
  1. Офлайн
  2. Посетители
  3. 3 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 4 отправлено 12:04, 14.07.2008
В принцыпе получилось, НО есть трабла одна: появилась полоса прокрутки, и снизу 120 пикселей под рабочей областью появилось пустых :(

вот код:
HTML
php code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Internet Technology Company</title>
  6. <link href="common/css/all.css" rel="stylesheet" type="text/css">
  7. <link href="common/css/html.css" rel="stylesheet" type="text/css">
  8. <link href="common/css/menu.css" rel="stylesheet" type="text/css">
  9. <script src="common/js/getid.js" type="text/javascript"></script>
  10. <script src="common/js/popup_rus.js" type="text/javascript"></script>
  11. <script src="common/js/imgopacity.js" type="text/javascript"></script>
  12. </head>
  13.  
  14. <body>
  15.  
  16. <div id="html_text">
  17.     <div id="innertext">
  18.         <strong>Internet services</strong> <br>
  19.         <br>
  20.         Компания ***** &#8211; ведущий поставщик интернет-решений, включая  разработку и проведение рекламных кампаний в сети Интернет, креативные  концепции, создание веб сайтов, проведение PR-акций как для предприятий  малого, среднего и крупного бизнеса и общественных организаций,  нацеленных на инновации в конкурентной высокотехнологичной  действительности XXI века. <br>
  21.        <br>
  22.         Сегодня компания имеет собственные наработки и программные механизмы  для построения функциональных, интерактивных и надежных сайтов,  обладающих всеми современными возможностями. <br>
  23.         <br>
  24.         <strong>Кадры решают всё!</strong> <br>
  25.         <br>
  26.         У нас работают одни из самых  лучших специалистов и очень необычные люди, для которых главное -  качество работы и непререкаемая репутация нашей компании. Креативный  подход, оригинальные идеи позволяют нам оставаться лидерами  производства видео-рекламы и Интернет-решений. <br>
  27.         <br>
  28.         <strong>Цели и задачи</strong> <br>
  29.         <br>
  30.         Мы не останавливаемся на  достигнутом. Компания успешно развивается, продолжая укреплять свои  позиции на рекламном рынке. Наша ближайшая цель - объединить в себе  лучших специалистов в области CGI и Интернет технологий, а также стать  лидирующим производителем в области видео, мультимедиа, цифровой  рекламы и трехмерной графики.
  31.         <strong>Internet services</strong> <br>
  32.         <br>
  33.         Компания ***** &#8211; ведущий поставщик интернет-решений, включая  разработку и проведение рекламных кампаний в сети Интернет, креативные  концепции, создание веб сайтов, проведение PR-акций как для предприятий  малого, среднего и крупного бизнеса и общественных организаций,  нацеленных на инновации в конкурентной высокотехнологичной  действительности XXI века. <br>
  34.        <br>
  35.         Сегодня компания имеет собственные наработки и программные механизмы  для построения функциональных, интерактивных и надежных сайтов,  обладающих всеми современными возможностями. <br>
  36.         <br>
  37.         <strong>Кадры решают всё!</strong> <br>
  38.         <br>
  39.         У нас работают одни из самых  лучших специалистов и очень необычные люди, для которых главное -  качество работы и непререкаемая репутация нашей компании. Креативный  подход, оригинальные идеи позволяют нам оставаться лидерами  производства видео-рекламы и Интернет-решений. <br>
  40.         <br>
  41.         <strong>Цели и задачи</strong> <br>
  42.         <br>
  43.         Мы не останавливаемся на  достигнутом. Компания успешно развивается, продолжая укреплять свои  позиции на рекламном рынке. Наша ближайшая цель - объединить в себе  лучших специалистов в области CGI и Интернет технологий, а также стать  лидирующим производителем в области видео, мультимедиа, цифровой  рекламы и трехмерной графики.
  44.     </div>
  45. </div>
  46.  
  47. <div id="loading">
  48.     <img src="images/popup.png" alt=""><img src="images/link1.png" alt=""><img src="images/link2.png" alt=""><img src="images/link3.png" alt="">
  49.     <img src="images/link4.png" alt=""><img src="images/link5.png" alt=""><img src="images/link6.png" alt=""><img src="images/link7.png" alt="">
  50. </div>
  51.  
  52. <div id="html_body"></div><div id="html_header_bg"></div><div id="html_header"></div><div id="popup" onMouseMove="popup(77)" onMouseOut="popup(0)"></div>
  53. <div id="link1"></div><div id="link2"></div><div id="link3"></div><div id="link4"></div><div id="link5"></div><div id="link6"></div><div id="link7"></div>
  54.  
  55. <div id="html_title">
  56.     <h1>O компании WebLeader ITC</h1>
  57.     <a href="#">Главная</a>   »   <a href="#">О компании</a>
  58. </div>
  59.  
  60. <div id="glass">
  61.     <div id="glass_h">Последняя работа</div>
  62.     <div id="glass_lastwork"><a href="#"><img src="images/portfolio/work1_1.jpg" alt="" onmouseover="high(this)" onmouseout="low(this)"></a></div>
  63.     <div id="glass_lastworktext"><a href="#">Международный Информационно-образовательный портал</a></div>
  64. </div>
  65.  
  66. <div id="html_footer">
  67.     <a href="#" id="link1_text" onMouseMove="popup(1)" onMouseOut="popup(0)">Создание сайтов</a>
  68.     <a href="#" id="link2_text" onMouseMove="popup(2)" onMouseOut="popup(0)">Раскрутка в Интернете</a>
  69.     <a href="#" id="link3_text" onMouseMove="popup(3)" onMouseOut="popup(0)">Другие услуги</a>
  70.     <a href="#" id="link4_text" onMouseMove="popup(4)" onMouseOut="popup(0)">Портфолио</a>
  71.     <a href="#" id="link5_text" onMouseMove="popup(5)" onMouseOut="popup(0)">Рекламные площадки</a>
  72.     <a href="#" id="link6_text" onMouseMove="popup(6)" onMouseOut="popup(0)">Наши проекты</a>
  73.     <a href="#" id="link7_text" onMouseMove="popup(7)" onMouseOut="popup(0)">Контакты</a>
  74. </div>
  75.  
  76. <div id="bgline1"></div><div id="bgline2"></div>
  77.  
  78. </body>
  79. </html>


CSS
php code:
  1. body {    background-color: #9ed92e;}
  2.  
  3. /* =========================== html version ============================================== */
  4. h1
  5. {
  6.     color: #000000;
  7.    font-size: 16px;
  8.     font-weight: bold;
  9. }
  10. #html_body
  11. {
  12.     position: absolute;
  13.     z-index: 1;
  14.     left: 0px;
  15.     bottom: 0px;
  16.     width: 100%;
  17.     height: 525px;
  18.     background-image: url(../../images/fon.jpg);
  19.     background-repeat: repeat-x;
  20.     background-position: bottom;
  21. }
  22. #html_header_bg
  23. {
  24.     position: absolute;
  25.     z-index: 3;
  26.     left: 0px;
  27.     top: 0px;
  28.     width: 100%;
  29.     height: 136px;
  30.     background-image: url(../../images/header_bg.png);
  31.     background-position: left top;
  32.     background-repeat: repeat-x;
  33. }
  34. #html_header
  35. {
  36.     position: absolute;
  37.     z-index: 4;
  38.     left: 0px;
  39.     top: 0px;
  40.     width: 1000px;
  41.     height: 234px;
  42.     background-image: url(../../images/header.png);
  43.     background-position: left top;
  44.     background-repeat: no-repeat;
  45. }
  46. #html_title
  47. {
  48.     position: absolute;
  49.     z-index: 5;
  50.     width: 312px;
  51.     height: 70px;
  52.     left: 20px;
  53.     top: 147px;
  54.     color: #000000;
  55. }
  56. #html_title a
  57. {
  58.     font-size: 14px;
  59.     color: #000000;
  60.    text-decoration: underline;
  61. }
  62. #html_title a:hover
  63. {
  64.     font-size: 14px;
  65.     color: #ffffff;
  66.    text-decoration: none;
  67. }
  68. #html_text
  69. {
  70.     position: absolute;
  71.     z-index: 5;
  72.     width: 100%;
  73.     height: 100%;
  74.     left: 0px;
  75.     top: 0px;
  76.     padding-bottom: 120px;
  77. }
  78. div#innertext
  79. {
  80.      float:left;
  81.      overflow: auto;
  82.      width: 70%;
  83.      height: 55%;
  84.      margin-top: 229px;
  85.      margin-right: 270px;
  86.      margin-left: 20px;
  87.      padding-right: 20px;
  88. }
Доцент
  1. Офлайн
  2. Администраторы
  3. 89 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 5 отправлено 12:24, 14.07.2008
Эти 120 пикселей снизу убрать не сложно... Удалите атрибут padding-bottom: 120px; из id #html_text. Так уберём основную полосу прокрутки.
Если надо убрать полосу и из внутреннего блока, тогдаи измените его ширину и/или высоту в блоке div#innertext.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 3 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 6 отправлено 13:55, 15.07.2008
просмотрите почту, там файлы, и вы поймёте, почему там я не могу задать ширину и высоту... там резиновый дизайн
Доцент
  1. Офлайн
  2. Администраторы
  3. 89 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 7 отправлено 14:06, 15.07.2008
На сколько я понял, Вы хотите убрать вертикальную полосу прокрутки внутреннего блока. Она возникла из-за того, что у Вас заданы ширина и высота. Хоть и относительными величинами, но заданы. Вам адо изменить/удалить эти величины.

Последний раз редактировал GZ Design 14:06, 15.07.2008
Студент
  1. Офлайн
  2. Посетители
  3. 13 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 8 отправлено 10:23, 23.07.2008
Как сделать, чтобы у меню был в качестве фона растягиваемый кусочек градиента, и чтоб его "видел" IE?
Использую для бэкграунда рисунок повторяемый background:url(nav_bg.jpg)repeat-x, и Мозилла показывает отлично, а IE показывает только кусочек, а повтора не дает. Есть ли способ "побороть"его?

Последний раз редактировал Ilylevi 10:24, 23.07.2008
Доцент
  1. Офлайн
  2. Администраторы
  3. 89 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 9 отправлено 13:05, 23.07.2008
Ilylevi, А не пробовали написать просто background:url('nav_bg.jpg');
Абитуриент
  1. Офлайн
  2. Посетители
  3. 4 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 10 отправлено 16:19, 24.07.2008
если не ошибаюсь в ie нужно размеры указывать width и height.

вопрос: почти такая же проблема :)
как можно залить блок, при чем ширина задана, а высота изменятся?
Студент
  1. Офлайн
  2. Модераторы
  3. 19 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 11 отправлено 01:52, 25.07.2008
Lestat,
в стилях будет padding для высоты и width для ширины.
Напимер:
php code:
  1. .class {
  2.    width:150px;
  3.    padding5px 0;
  4.    display:block;
  5. }
Студент
  1. Офлайн
  2. Посетители
  3. 13 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 12 отправлено 14:01, 28.07.2008
Помогите, пожалуйста, найти ошибку. Вот такая получается неправильная рамка с закруглением для блока

Код такой:



Упражнения в создании сайта





Мой первый сайт





Здесь я напишу самое главное, что надо знать посетителям: куда они попали, что здесь можно найти


Здесь будут ссылки на другие материалы этого сайта, где и что можно найти по интересам каждого





Кто живет с вами под одной крышей?



























  • Здесь предложение стать участником...

  • Зачем нужна регистрация и как ее пройти






Найденыш



Откуда взялся на дороге маленький котенок я не знаю. Хочется верить, что он просто сидел и ждал нас. Это было не обычное кошачье «мяу», его просто почти не было слышно. Я всегда стараюсь жить по принципу - мы в ответе за тех, кого приручаем.

У нас в семье никогда не было животных. Не потому что я или Света их не любим, просто так сложилось. Я постоянно на работе, Света ухаживает за больной мамой, да и вообще, как и у всех своих проблем хватает. По этому проходя мимо, я подумал «беги малыш, здесь тебе не светит».



Неторопливо текла беседа, и когда через несколько метров котенок оказался опять перед нами, я уже не удивился. Мы прошли уже сотню метров, а котенок все время забегал впереди нас и очень тихо говорил «мяя».


Света тоже обратила внимание на этот шустрый комочек, но она просто никак себе не могла представить, что еще через семьдесят метров я наклонюсь и возьму его на руки.










Код СSS:

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
display:block;
background:#FFFFFF;
margin-left: 200px;
margin-right: 200px;
padding: 1em;
border:#FFFF00 3px solid;
border-width: 0 3px;
max-width: 32em;
}
#content p {
text-align:justify;
}
hr{
margin: 10px 0;
border:0;
width:90%;
background-color: #FF0000;
color:#FF0000;
height:1px;
clear:both;
text-align:center;
}
.floatright {
float: right;
margin: 0 0 10px 10px;
border:2px solid #FF8CD4;
}
.floatleft {
float: left;
width:124px;
margin: 0 10px 10px 0px;
border:2px solid #FF8CD4;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }


.b1, .b2, .b3, .b4, .b5, .b6, .b7 {
display:block;
overflow:hidden;
font-size:0;
}
.b1, .b2, .b3, .b4, .b5, .b6 {height:1px;}

.b4, .b5, .b6, .b7 {
border-left:1px solid #ffff08;
border-right:1px solid #ffff08;
}
.b1 {margin:0 8px; background:#ffff08;}
.b2 {margin:0 6px; background:#ffff08;}
.b3 {margin:0 4px; background:#ffff08;}

.b4 {margin:0 3px; background:#ffffff; border-width:0 5px;}
.b5 {margin:0 2px; background:#ffffff; border-width:0 4px;}
.b6 {margin:0 2px; background:ffffff; border-width:0 3px;}
.b7 {margin:0 1px; background:ffffff; border-width:0 3px; height:2px;}

/* hack for IE5.5 */
* html .all em {width:24px; height:12px; w\idth:0; hei\ght:0;}
* html .all span {width:20px; height:10px; w\idth:0; hei\ght:0;}

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

Последний раз редактировал Ilylevi 14:05, 28.07.2008
Доцент
  1. Офлайн
  2. Администраторы
  3. 89 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 13 отправлено 15:16, 28.07.2008
Ошибка в следующем: закругленные углы должны находится вне дива "content"
Должна быть такая структура:
php code:
  1. <div id="all">
  2. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b><b class="b6"></b><b class="b7"></b>
  3. <div id="content">
  4. <h2>Найденыш</h2>
  5. <p><img class="floatright"src="3_9804-web.gif" alt="" width="120" height="120" />
  6. <p>Откуда взялся на дороге маленький котенок я не знаю. Хочется верить, что он просто сидел и ждал нас. Это было не обычное кошачье «мяу», его просто почти не было слышно. Я всегда стараюсь жить по принципу - мы в ответе за тех, кого приручаем.</p> <p>У нас в семье никогда не было животных. Не потому что я или Света их не любим, просто так сложилось. Я постоянно на работе, Света ухаживает за больной мамой, да и вообще, как и у всех своих проблем хватает. По этому проходя мимо, я подумал «беги малыш, здесь тебе не светит».</p>
  7. <p><img class="floatleft" src="17f51af5459c-web.gif" alt="" width="120" height="120" /></p>
  8. <p>Неторопливо текла беседа, и когда через несколько метров котенок оказался опять перед нами, я уже не удивился. Мы прошли уже сотню метров, а котенок все время забегал впереди нас и очень тихо говорил «мяя».</p>
  9. <p>Света тоже обратила внимание на этот шустрый комочек, но она просто никак себе не могла представить, что еще через семьдесят метров я наклонюсь и возьму его на руки. </p>
  10. </div>
  11. <b class="b7"></b><b class="b6"></b><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
  12. </div>

Стили для all:
php code:
  1. #all {
  2.  margin:0 200px;}

Соответственно убираем margin из стилей content

P.S. Заключайте код в тег "code" (картинка с листом и знаком процента)
Студент
  1. Офлайн
  2. Посетители
  3. 13 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 14 отправлено 11:36, 29.07.2008
Спасибо! Получилось!
Не понятен последний пункт

Цитата: Заключайте код в тег "code" (картинка с листом и знаком процента)

Если можно, объясните, зачем.
Абитуриент
  1. Офлайн
  2. Модераторы
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 15 отправлено 12:21, 29.07.2008
чтобы было его легче читать.
быстрее прочитаем - быстрее поможем
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011