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

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

2008-07-09T16:24:02+04:00 2018-01-23T14:41:21+03:00
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 31 отправлено 22:24, 28.05.2009
а в чём проблема? надо чтобы картинка была на синем фоне? тогда надо картинку сохранять с прозрачными областями в gif или png файл - зависит от того,какая там будет прозрачность.


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Студент
  1. Офлайн
  2. Посетители
  3. 26 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 32 отправлено 11:53, 30.05.2009
Спасибо, медведь.
Так как картинка, которую надо было сделать на синем фоне, всего лишь надпись, то я решил не париться и написать это все вручную. Гемора меньше:)
И все прокатило: написал, нарисовал и все Ok! Проблема вылезла в другом месте, а именно:
я вставляю на сайт одну картинку - все проходит гладко и картинка вставляется как надо. Рядом с этой картинкой я пишу текст, и он отображается очень оригинально: каждое слово на новой строчке.
Для наглядности привожу HTML код:










Наша миссия -
развитие социально-ответственного бизнеса,
предоставляющего услуги высокого качества в области ответственного хранения и организации грузовых перевозок по России



и CSS КОД:

body {background-color: pink}

h1 {background:url("23.jpg")no-repeat;width:252px;height:96px;margin-left:28cm;margin-top:-8px}

.text {color: green; font-size: 14px; margin-left: 24px; margin-top: 10px}

.text2 {color: green; font-size: 14px; margin-left: 90px; margin-top: -17px}

h2 {background:url("logo.jpg") no-repeat; width: 248px; height: 156px; margin-left: -861px; margin-top: 100px}

font {color: Darkslateblue; font-family: arial; font-size: 14px; margin-left: 260px; margin-top: 200px}

.font2 {color: green; font-family: arial; font-size: 15px; margin-left: 260px; margin-right:245px; margin-top:-9px}

.img {background: url("telephon.jpg") no-repeat; width: 31px; height: 31px; margin-left: 775px; margin-top: -136px}


Текст, который отображается странно, расположен в и <.font2>. Ты сталкивался когда-нибудь с таким явлением?

Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 33 отправлено 17:27, 30.05.2009
парень, извини, но в глаза бросилось:
не везде проставлены парные теги! (это очень важно)
div, h1, h2, font - это теги контейнеры! кстати, не понимаю, зачем тебе font.

вроде ничего не ездиет
php code:
  1. <html>
  2. <head>
  3. <LINK href=11.css type=text/css rel=stylesheet>
  4. <style>
  5. body {background-color: pink}
  6.  
  7. h1 {background:url("23.jpg")no-repeat;width:252px;height:96px;margin-left:28cm;margin-top:-8px}
  8.  
  9. .text {color: green; font-size: 14px; margin-left: 24px; margin-top: 10px}
  10.  
  11. .text2 {color: green; font-size: 14px; margin-left: 90px; margin-top: -17px}
  12.  
  13. h2 {background:url("logo.jpg") no-repeat; width: 248px; height: 156px; margin-left: -861px; margin-top: 100px}
  14.  
  15. font {color: Darkslateblue; font-family: arial; font-size: 14px; margin-left: 260px; margin-top: 200px}
  16.  
  17. .font2 {color: green; font-family: arial; font-size: 15px; margin-left: 260px; margin-right:245px; margin-top:-9px}
  18.  
  19. .img {background: url("telephon.jpg") no-repeat; width: 31px; height: 31px; margin-left: 775px; margin-top: -136px}
  20. </style>
  21. </head>
  22. <body>
  23. <h1></h1>
  24. <div class="text"><a href=www.>Русский</a></div>
  25. <div class="text2"><a href=www.>English</a></div>
  26. <h2></h2>
  27. <font>Наша миссия -</font>
  28. <div class="font2">развитие социально-ответственного бизнеса,<br>предоставляющего услуги высокого качества в области ответственного хранения и организации грузовых перевозок по России
  29. </div>
  30. <div class="img"></div>
  31. </body>
  32. </html>


пиши подробнее

Последний раз редактировал Медведь 17:27, 30.05.2009

------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Студент
  1. Офлайн
  2. Посетители
  3. 26 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 34 отправлено 19:19, 30.05.2009
Кажется, я догнал! В CSS лучше не использовать стандартные теги HTML типа

,

,

и т.п.

Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 35 отправлено 19:33, 30.05.2009
эм...что ты догнал? html - содержание страницы, css - оформление, при чём тут использование тэгов в css?


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Студент
  1. Офлайн
  2. Посетители
  3. 26 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 36 отправлено 21:31, 30.05.2009
я имел в виду, что в CSS не стоит писать h1{}... а вместо него правильнее будет придумать новый например .cell
Понимаешь меня?

тока все равно не понятно:) В HTML написал:


в CSS написал:

.cell {background:url("23.jpg") no-repeat; width: 252px; height: 96px; margin-left: 28cm; margin-top: 18px}

и вообще все исчезло:)
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 37 отправлено 04:09, 31.05.2009
.cell это не тэг, а класс

в блоке должно быть какое-нибудь содержание, иначе отображаться он не будет. только в ie будет виден маленький кусок.
и ещё: ты уверен в margin-left: 28cm;?


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Студент
  1. Офлайн
  2. Посетители
  3. 26 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 38 отправлено 21:49, 01.06.2009
да, я понимаю, что .cell это не тег, а класс. Я просто не могу объяснить то, что хочу сказать:) Точнее, могу, но не всегда:) Даже не возьмусь за это дело:)

Тебя смущает то, что я в одном месте использовал px, а в другом - cm? Да я и сам думаю, что так делать не надо. Это ведь не правильно и противоречит всяким там стандартам? Честно сказать, и не помню, почему я так сделал. Скорее всего, это помогло мне воткнуть блок туда, куда я хотел. Ну да, по-моему, так и было
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 39 отправлено 00:34, 02.06.2009
ну...просто это похоже был слишком радикальный способ:))))


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 2 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 40 отправлено 09:56, 02.06.2009
Доброе время суток, столкнулся с проблемой, сделал все по уроку "25 всплывающее окно" , окно в HTML на моем компьютере выходит, а когда переношу на DLE, не открывается.. CSS - читает точно, есть подозрение на z-index, но что нужно добавить я даже не знаю..

Вот код:

php code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
  5. <title>Российская школа CSS. Урок CSS 25. Создание всплывающего окна</title>
  6. <link rel="stylesheet" href="css/about.css" type="text/css">
  7. </head>
  8. <body>
  9. <center><table><tr><td><img class="img2" src='images/themes/1236023058_pic_id258372.jpeg' WIDTH=245 HEIGHT=260 alt='Темы оформления общее понятие' style='border:0px;'></td><td><strong>Тема оформления</strong> — шаблон, который украшает или заменяет вашу текшую тему на рабочем столе, при этом меняется все, показ часов, пуск, панель, иконки и другое, для управления тем существуют различные программы, например <strong>stylexp</strong> - для Windows XP. </td></tr></table>
  10. <br><br>
  11. <h3>Полный список категорий</h3></center>
  12. <hr>
  13. <br>
  14. <center><table><tr><td align='center' width='10%' class='tbl'><span class='smalls'><a href="index.php?do=faq&op=send"><img class="img1" src='images/textures/animals.jpg' alt='Различные текстуры животных: птицы, обезьяны и другое' style='border:0px;'><br>
  15. <a href="#" onclick="document.getElementById('wind11').style.display='block'; return false;" title="Всплывающее окно">
  16. Открыть меню</a></span></td><td align='center' width='10%' class='tbl'><span class='smalls'><a href="index.php?do=faq&op=send"><img class="img1" src='images/textures/buldings.jpg'alt='Текстуры зданий, домов' style='border:0px;'><br>
  17. </span></td>
  18. </tr></table></center>
  19. <div id="wind11">
  20. <strong>Выберите нужную программу для работы с темами:</strong><br>
  21.     <div id="rcs"><a href="http://www.xxx999.1/">StyleXP</a></div>
  22.     <div id="gzweb"><a href="http://www.xxx999.1/">WindowBlinds</a></div>
  23.     <div id="wallday"><a href="http://www.xx999x.1/">AstonShell</a></div>
  24.     <div id="one2"><a href="http://www.xxx999.1/">DesktopX</a></div>
  25.     <div id="one3"><a href="http://www.xxx999.1/">Talisman</a></div>
  26. <br>
  27. <button type="button" class="but1" value="закрыть" onclick="document.getElementById('wind11').style.display='none'; return false;">
  28. закрыть</button>
  29. </div>
  30. </body>
  31. </html>



CSS


php code:
  1. #wind11 {
  2.       position: absolute;
  3.     width:320px;
  4.     left: 35%;
  5.       top: 100px;
  6.     border:solid #105a98 4px;
  7.    display: none;
  8.       z-index: 100;
  9.     overflow: hidden;
  10.     background-color:#348c03;
  11.    color:#fff;
  12.    text-align:center;
  13.     padding:10px;
  14. }
  15.  
  16. #rcs a {
  17.   display:block;
  18.    padding:5px 20px;
  19.    color:#fff;
  20.   font:16px Verdana;
  21.    text-align:center;
  22.    text-decoration:none;
  23.    font-weight:bold;
  24.    background: url(nav.png) repeat center;
  25.    border:3px solid #a4e0ff;
  26.   margin-top:10px;
  27. }
  28.  
  29. #rcs a:hover {
  30.   background: url(start.png) repeat center;
  31.    border:3px solid #00a8ff;
  32.   color:#333;
  33. }
  34.  
  35. #gzweb a {
  36.   display:block;
  37.    padding:5px 20px;
  38.    color:#fff;
  39.   font:16px Verdana;
  40.    text-align:center;
  41.    text-decoration:none;
  42.    font-weight:bold;
  43.    background: url(nav.png) repeat center;
  44.    border:3px solid #a8f2a4;
  45.   margin-top:10px;
  46. }
  47.  
  48. #gzweb a:hover {
  49.   background: url(start.png) repeat center;
  50.    border:3px solid #22cb19;
  51.   color:#333;
  52. }
  53.  
  54.  
  55. #wallday a {
  56.   display:block;
  57.    padding:5px 20px;
  58.    color:#fff;
  59.   font:16px Verdana;
  60.    text-align:center;
  61.    text-decoration:none;
  62.    font-weight:bold;
  63.    background: url(nav.png) repeat center;
  64.    border:3px solid #ffd89b;
  65.   margin-top:10px;
  66. }
  67.  
  68. #wallday a:hover {
  69.   background: url(start.png) repeat center;
  70.    border:3px solid #ff9c00;
  71.   color:#333;
  72. }
  73.  
  74. .but1{
  75.         background-color: #f3f3f3;
  76.        border:1px solid #333;
  77.        text-decoration:none;
  78.     color: #ffe98f;
  79.    font-size: 11px;        /* ! */
  80.     font-family: tahoma;    /* ! */
  81.     /*  width: 120px;  */
  82.         padding:3px 6px;
  83.     background-image: url(nav.png);
  84.     background-repeat: repeat-x;
  85.     font-weight: bold;
  86.         cursor: pointer;
  87. }
  88.  
  89.  
  90. #one2 a {
  91.   display:block;
  92.    padding:5px 20px;
  93.    color:#fff;
  94.   font:16px Verdana;
  95.    text-align:center;
  96.    text-decoration:none;
  97.    font-weight:bold;
  98.    background: url(nav.png) repeat center;
  99.    border:3px solid #ffd89b;
  100.   margin-top:10px;
  101. }
  102.  
  103. #one2 a:hover {
  104.   background: url(start.png) repeat center;
  105.    border:3px solid #ff9c00;
  106.   color:#333;
  107. }
  108.  
  109.  
  110. #one3 a {
  111.   display:block;
  112.    padding:5px 20px;
  113.    color:#fff;
  114.   font:16px Verdana;
  115.    text-align:center;
  116.    text-decoration:none;
  117.    font-weight:bold;
  118.    background: url(nav.png) repeat center;
  119.    border:3px solid #ffd89b;
  120.   margin-top:10px;
  121. }
  122.  
  123. #one3 a:hover {
  124.   background: url(start.png) repeat center;
  125.    border:3px solid #ff9c00;
  126.   color:#333;
  127. }


Заранее благодарен!
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 41 отправлено 14:15, 02.06.2009

3dhit писал:когда переношу на DLE, не открывается.. CSS - читает точно, есть подозрение на z-index


скорей греши на javascript - окно открывается/закрывается им.
переносишь на dle...кинешь ссылку на сайт?посмотреть вживую


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 2 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 42 отправлено 14:28, 02.06.2009
На самом деле оно открывается, оно видимо за слоями.. Добавил тебя в аське.
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 43 отправлено 18:17, 02.06.2009
всё таки не открывается надо будет всё перебробовать,я грешу на яву...


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Студент
  1. Офлайн
  2. Посетители
  3. 26 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 44 отправлено 18:58, 02.06.2009
да уж: радикальнее некуда:)
А вот смотри: когда для какого-нибудь блока определяешь Margin-left, то число px может оказаться огромным - более 900. Понимаешь?
Или это только у меня так?:)

явно у профессиональных разработчиков есть какое-то особые технологии:)
Это же ненормально, когда вот так выглядит:
.text2 {font-size: 15px; margin-left: 1006 (!!!) px; margin-top: -9px}
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 45 отправлено 20:47, 02.06.2009
зависит от задачи,которую ты ставишь.выровнять одиночный элемент по правому краю - float:right;
если элементов на одном уровне несколько можно просто вытеснить злемент вправо другими.
если выровнять элемент по центру - margin:(что-то)px auto;
можно продолжать до бесконечности)))

Последний раз редактировал Медведь 20:48, 02.06.2009

------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
 
Перейти
Найти

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

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

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

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