Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Открыть новую тему     Написать ответ в эту тему

Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ссылки для самостоятельного изучения:
 
Теория + примеры + учебники:
W3School: CSS Tutorial
MDN: Cascading Style Sheets (CSS)
WebReference: Уроки по HTML и CSS
htmlbook: Справочник CSS
YouTube: Основы CSS/CSS3
CSS для JavaScript-разработчика
Основы CSS - каскадные таблицы стилей
Статьи по основам CSS
 
Применение на практике:
StackOverflow: 'CSS' Questions
CSS-Tricks
 

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Реально ли сделать прозрачную рамку для рисунка без дополнительных слоев и т.п., т.е. что-то в этом духе:

Код:
<img src="test.jpg" class="imgborder" alt="" />


Код:
.imgborder {border: 4px solid rgba(255, 255, 255, 0.5);}

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 04:20 23-06-2011
Serg7236

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подскажите.
 
Вот допустим я задал для дива свойство позишн абсолют и лэфт 50%.
 
Смотрю, в дримвевере он у меня отстоит от левого края на 497 пикселей. Но ведь разрещение экрана у меня по ширине 1024 пикселя. То есть, я так понимаю, какую-то часть ширины "сжирают" полоса прокрутки и отступы элемента боди по умолчанию? А сколько конкретно занимает по ширине одна полоса прокрутки и сколько конкретно занимает отступ от края элемента боди по умолчанию? В числах это известно или от чего-то зависит и в разных случаях по разному?

Всего записей: 20 | Зарегистр. 24-01-2009 | Отправлено: 11:55 28-06-2011 | Исправлено: Serg7236, 11:56 28-06-2011
GeMir



Ich finde dich
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Serg7236

Цитата:
сколько конкретно занимает по ширине одна полоса прокрутки

Вопрос из разряда "какого цвета небо" - зависит от системы, установленной
темы оформления и используемого браузера.

Цитата:
сколько конкретно занимает отступ от края элемента боди по умолчанию?

Из той же оперы.

Всего записей: 10299 | Зарегистр. 15-02-2004 | Отправлено: 12:08 28-06-2011
Serg7236

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ещё вопрос.
 
У меня по команде
body {background:url(2afdf8df17cd.jpg) left bottom no-repeat;} рисунок располагается у левого края, но самое главное - виден только самый его нижний краешек, то есть, фактически он почти целиком уходит вверх за окно.
 
А "книжка пишет" (например, http://htmlbook.ru/css/background-position  ), что рисунок должен располагаться в левом нижнем углу, то есть, я так понимаю, его нижний край должен соприкасаться с нижним краем окна. Но фактически же выходит наоборот - рисунок почти целиком вылазит вверх из окна.
Где же здесь противоречие?
 
Проверял и в Опере, и в Файерфокс.

Всего записей: 20 | Зарегистр. 24-01-2009 | Отправлено: 14:00 28-06-2011 | Исправлено: Serg7236, 14:01 28-06-2011
GeMir



Ich finde dich
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Serg7236

Код:
background: url(../123.jpg) left bottom no-repeat;

Chrome 12, Opera 11 и Firefox 5 показывают нормально.
Как стиль body выглядит?

Всего записей: 10299 | Зарегистр. 15-02-2004 | Отправлено: 14:30 28-06-2011
Serg7236

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Так и выглядит -  
body {background:url(2afdf8df17cd.jpg) left bottom no-repeat;}
Больше ничего.
 
У меня Опера 11.
 
Добавлено:
Кстати, я кажется понял.
 
Так
body { position:absolute; background:url(2afdf8df17cd.jpg)  left bottom no-repeat;}
 
всё ОК.
 
Значит, нужно ещё указывать позишн абсолют.
 
Правда, в книжке об этом не написано, вроде бы.

Всего записей: 20 | Зарегистр. 24-01-2009 | Отправлено: 14:38 28-06-2011
LuckyStrike



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте, такой вопросик, можно ли swf вставить через css, у меня логотип сайта сделан через Adobe Flash и сохранил как swf ролик, панелька вставлена спомощью css, нужно на панельку разместить этот ролик, работаю в dreamweaver....подскажите как. Заранее спасибо
 
 
Добавлено:
вопрос теперь другой, ролик я вставил на панельку, но теперь её надо как-то выровнить, чтобы она к левому краю была от панели, как выравниевание роликов можно делать?

Всего записей: 78 | Зарегистр. 10-12-2008 | Отправлено: 18:43 29-06-2011
KurkSS

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ПОМОГИТЕ ЗАСТАВИТЬ МОЗИЛУ работать как опера.
 
значит что мы имеем (задача)
 
табличка в цетре экрана по высоте на весь экран(или больше)
 
верхняя строка=ячейка, это два елемента - слева лого, справа меню.
 
НО фон меню(чорный цвет) должен тянуться далеко вправо за границы таблицы. я делал так
 

Код:
 
<table>
<tr><td>
<div class="parent_top"
     <div class="logo">LOGO_alya_img_vnutri_tega_a</div>
 
     <div class="menu_bg">
 
               <div class="menu">nu_i_samo_menu_vide_ul_li_ul_li</div>
 
     </div>
</div>
 
</td></tr>
 
<tr2>....
.......
</table>
 
стили
1) .parent_top {position:relative} -дабы относительно него позиционировать фон меню
2).menu_bg { background-color:#000; position absolute;left:600px;width:10000px}
     хочу чорный прямоугольник который будет справа от лого начинаться и в далеко тянуться
 
3).menu {width:500px;.....} дабы само меню было впределах таблицы
 
 

 
опера показывает как и еи, то что надо. а мозила пля, нивкакую не хочет...
нужно убрать див parent_top - тогда мозила покажет фон за пределами родителя, но тогда позиционирование меню, нарушаеться при маштабировании во всех браузерах...
 
 
viziting потом coolpapa потом com.ua
сейчас сдесь я выложил этот сайт который делаю...

Всего записей: 73 | Зарегистр. 22-05-2008 | Отправлено: 16:16 30-08-2011
Hardycore



Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Проинспектировав оперой вот что получил
 
 
Добавлено:
Проинспектировав оперой вот что получил
div.top_menu_bg {  
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
height: 35px;
left: 630px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
position: absolute;
width: 10000px;
z-index: 2;
}
Чёто тут ты явно намудрил лишнего. Домой дойду постараюсь помочь ближе к вечеру
 
Добавлено:
width: 10000px; тут явно лишнее
Добавлено:
поставил: width: 1000% и оно растягивается далеко далеко =)))

Всего записей: 324 | Зарегистр. 20-04-2010 | Отправлено: 17:26 30-08-2011 | Исправлено: Hardycore, 17:47 30-08-2011
KurkSS

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
тут ещо одного сразу не заметил....
 
тоесть вот как типовый сайт...
таблица в три строки, в каждой див с текстом по центру, фон верхней строки и нижней какойто цвет... фон средней строки отсутствует, но есть фоновое изображение в диве  
верхний и нижний фон растянуты на весь экран по ширине
 
<table>background-color:#fff; width=100% height=100%
 
<tr><td>background-color:#000;   height 50px
<div> елементы меню в нём
 
<tr><td>    height 100%; vertical-align:top;
<div> background-image:url(....);
в нём основной текст страницы
 
 
<tr><td>background-color:#000;   height 30px
<div> сдесь текст подвала
 
</table>
 
у всех дивов боковые маргины авто(чтоб они были отцентрированы по горизонтали)
 
- у мня проблема втом что верхняя строка не должна быть вся чорная
в верхнем диве идёт блок-ссылка на 300точек, а потом начинаться должен чорный фон и до упора вправо...  
 
и подобное должно сохраняться при маштабировании... тоесть ставим мелкий маштаб
все дивы стают мелкие и по центру, вверху чорный фон начинаеться в диве и до упора  
притом не появляеться скролинг(как если задать ширину 10000%)
 
большой маштаб...все разлазится в стороны появляються полосы прокрутки, чорный верхний фон не начинает залазить влево на ссылку
 
Добавлено:

Цитата:
Добавлено:
width: 10000px; тут явно лишнее
Добавлено:
поставил: width: 1000% и оно растягивается далеко далеко =)))

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

Всего записей: 73 | Зарегистр. 22-05-2008 | Отправлено: 23:07 30-08-2011
sasha300



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет всем!
   
 
Вот код index.html:

Код:
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Документ без названия</title>
</head>
<body>
 
<div id="header">
  <div id="logo">
    </div>
  <div id="loz">
    </div>
</div>
 
<div id="nav">
    <div id="menu">
    </div>
</div>
 
<div id="prokladka">
</div>
 
<div id="content">
    <div id="contmiddle">
        <div id="contbot">
           </div>
    </div>
</div>
 
</body>
</html>
 
 

 
Вот код style.css:
 

Код:
 
@charset "utf-8";
/* CSS Document */
 
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background-color:#eff3fc;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/* Мои идентификаторы */
 
#header{
    height:120px;
    width:100%;
    background-color:#0066FF;
    background-repeat:repeat-x}
 
#logo{
    height:70px;
    width:30%;
    background-color:#063;
    margin-top:25px;
    float:left;
    margin-left:40px;}
    
#loz{
    height:100%;
    width:400px;
    background-color:#F00;
    float:right;}
 
/* Меню */
    
#nav{
    height:30px;
    width:100%;
    background-color:#999;
    background-repeat:repeat-x;}
    
#menu{
    height:30px;
    width:700px;
    margin:0 auto;
    background-color:#CC0;}
    
/* Контент */
 
#content{
    margin: 0 auto;  
    height:150px;
    width:98%;
    background-color:#6F3;}
    
#prokladka{
    height:14px;
    background-color:#eff3fc;}
 
#contmiddle{
    height:100%;
    width:100%;
    border:2px solid #000000;}
 
#contbot{
    background-image:url(images/righttop.png);
    height:10px;
    width:10px;
    background-position:right;}
    
 

 
В чем заключается ошибка? Заранее спасибо!
 
p.s.: И как скрывать код за плюсиком? Чтобы интересующийся человек нажал на плюсик и развернулся код, ну а не интересующийся прошел бы мимо.. Код more немного другое..
    
    

Всего записей: 1409 | Зарегистр. 10-02-2008 | Отправлено: 20:55 12-03-2012 | Исправлено: sasha300, 21:00 12-03-2012
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
див  
стайл - хайд
стиль:онмаусклик - блок
когда-то работало. Новых стандартов не глядел

Всего записей: 16272 | Зарегистр. 13-02-2003 | Отправлено: 21:25 12-03-2012
panda3

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
sasha300
Не понял, если div прижат влево, как background-position может его прижать вправо?
 

Код:
 
<div id="content">  
    <div id="contmiddle">  
    <div id="cornerTR">
    <div id="cornerBL">
    <div id="cornerBR">
       Content here....
    </div>
    </div>
    </div>
    </div>  
</div>
 

 

Код:
 
#contmiddle{  
    height:100%;  
    width:100%;  
    border:2px solid #000000;
    background: url(cornerTL.png) 0 0 no-repeat;
    }  
 
#cornerTR{ background: url(cornerTR.png) 100% 0 no-repeat; height:100%; }  
#cornerBL{ background: url(cornerBL.png) 0 100% no-repeat; height:100%; }  
#cornerBR{ background: url(cornerBR.png) 100% 100% no-repeat; height:100%; }  
 

Всего записей: 206 | Зарегистр. 06-02-2007 | Отправлено: 10:14 15-03-2012
sasha300



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
panda3
в общем на тот шаблон забил, сейчас новый делаю.

Всего записей: 1409 | Зарегистр. 10-02-2008 | Отправлено: 23:55 30-03-2012
CoolCmd



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
есть простой код.
код
нужно получить закругленные углы у менюшки. в лисе и осле все намана, а в опере и хромом вот такая порнография:
   
элементы менюшки вылезают из закругленных углов. что я неправильно сделал?
 
Добавлено:
position: absolute добавил....
 
Добавлено:
вот что нашел, но это для хромого, для оперы не подходит.

Всего записей: 35 | Зарегистр. 05-02-2005 | Отправлено: 17:18 09-04-2012 | Исправлено: CoolCmd, 18:52 09-04-2012
Ruslan_Bondarev

Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Приветствую, правил css меню, горизонтальное выпадающее 2 уровня... меню честно говоря стырил с дрома )) передал под себя, всё работает, только под браузером IE выпадающее меню не подсвечивается при наведении, код:
Код:
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<style>
table                        { border-collapse: collapse; width: 1024px }
td                    { vertical-align: top; padding: 0 }
.menu                { background-color: #FBD8DE; margin: 0 0 10px 0; _margin-bottom: -3px }
.menu td                    { height: 23px; text-align: center; width: 20% }
.menu div                    { position: relative; background-color:#FBD8DE }
.menu a                { color: #000 !important; text-decoration: none; background-color:#FBD8DE; display: block; padding: 0px 0px 1px 0px; height: 23px }
.menu .hover                { background-color: #F8EFA8 }
.menu .hover div            { background-color: #F8EFA8 }
.menu .hover a                { background-color: #F8EFA8 }
.menu td .sub                { height: 12px; display: none; position: absolute; left: 0; right: 0; top: 23px; text-align: left; font-size: 12px; z-index: 1 }
.menu td .sub div            { background-color: #FBD8DE }
.menu td .sub div:hover        { background-color: #F8EFA8; color: #fff; zoom: 1.05 }
.menu td .sub a                { color: #d2d2d2; background: none; padding: 0px 10px 10px 0px; text-align: center; height: 12px }
</style>
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table class="menu" align="center">
<td><div><a href="index.php"><span style="font-size:16pt;"><font face="Zrnic Cyr">Главная</font></span></a></div></td><td><div><a href="works.php"><span style="font-size:16pt;"><font face="Zrnic Cyr">Работы&nbsp;</font></span></a><font face="Zrnic Cyr"></font><div class="sub"><div class=""><a href="works.php#obl"><span style="font-size:14pt;"><font face="Zrnic Cyr">Обложки на паспорт</font></span></a><font face="Zrnic Cyr"></font><span style="font-size:14pt;"></span></div><div class=""><a href="works.php#otkr"><span
style="font-size:14pt;"><font face="Zrnic Cyr">Открытки</font></span></a><font face="Zrnic Cyr"></font><span style="font-size:14pt;"></span></div><div class=""><a href="works.php#prigl"><span style="font-size:14pt;"><font face="Zrnic Cyr">Приглашения</font></span></a><font face="Zrnic Cyr"></font><span
style="font-size:14pt;"></span></div><div class=""><a href="works.php#korob"><span style="font-size:14pt;"><font face="Zrnic Cyr">Коробочки, бонбоньерки...</font></span></a><font face="Zrnic Cyr"></font><span style="font-size:14pt;"></span></div><div class=""><a href="works.php#foto"><span style="font-size:14pt;"><font face="Zrnic Cyr">Фотоальбомы</font></span></a><font face="Zrnic Cyr"></font><span style="font-size:14pt;"></span></div><div class=""><a href="works.php#raznoe"><span style="font-size:14pt;"><font
face="Zrnic Cyr">Разное</font></span></a></div></div></div></td></td><td><div><a href="usl.php"><span
style="font-size:16pt;"><font face="Zrnic Cyr">Условия заказа</font></span></a></div></td><td><div><a href="contacts.php"><span style="font-size:16pt;"><font face="Zrnic Cyr">Контакты</font></span></a></div></td><td><div><a href="http://vk.com/club_handworkdv"><span style="font-size:16pt;"><font face="Zrnic Cyr">Мы Вконтакте.ру</font></span></a></div></td></table>
</body>
 

вот пример
спасибо...

Всего записей: 8 | Зарегистр. 01-11-2011 | Отправлено: 11:10 19-04-2012
tolyn77



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
здравствуйте
 
подскажите можно как нибудь посмотреть какой тип применен у того или иного объекта?
просто стили подгружаются из внешний файлов а их много не могу обнаружить какой стиль влияет на свойство объекта
можно ли как переопределить его если он задан в каком то из подгруженных css файлов?
заранее благодарен

Всего записей: 1507 | Зарегистр. 07-09-2004 | Отправлено: 17:00 20-12-2012 | Исправлено: tolyn77, 09:47 21-12-2012
Botovskiu

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
СТИЛЬ CSS  ДЛЯ ФОТО,  как реализовать такое не совсем понял, где то видел пример.
 
Есть област изображения 200x200
Если фотка 360x240 то в область изображения попадёт только 200x200
 
Кто ни будь понял что я хочу ??

 
Можно стиль сделать что бы искажалось изображение, но это не красиво.
Просто есть фотки 360x240 и  320x220 и 380x260, и при загрузки на сайт скрипт уменьшает их но они все равно не ровные, делали так что бы все фото одного размера были  через скрипт,  но некоторые фото искаженные, вот и хотим стиль css такой что бы он не искал, а просто определенную область показывал фото.

Всего записей: 124 | Зарегистр. 20-10-2011 | Отправлено: 19:17 23-12-2012
regkz



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
всем привет, подскажите как мне наложить один div на другой.
нужно чтобы из этого
   
 
получилось это
 

Всего записей: 1175 | Зарегистр. 16-01-2007 | Отправлено: 20:07 23-12-2012
OLEX



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
regkz
 
див-родитель - position: relative;
див-чайлд - position: absolute; left: 10px; bottom: 10px;
 
Добавлено:
Botovskiu
 
<style>
.fotoOuter {width: 200px; height: 200px; overflow: hidden;}
.fotoOuter img {min-width: 200px; min-height: 200px; }
</style>
 
<div class='fotoOuter'>
<img src="тут фотка">
</div>
 
Добавлено:
Ruslan_Bondarev
в IE :hover работает только для ссылок

----------
Отче Наш, иже еси в моем PC. Да святится имя и расширение Твоё. ENTER.

Всего записей: 3591 | Зарегистр. 09-07-2002 | Отправлено: 23:23 23-12-2012
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru