» Вопросы по CSS

Цитата:

подскажите плиз со следующим шаманством:

на другом ресурсе помогли:

box-sizing: border-box;
для элементов .cinput должно помочь (при XHTML Strict).
http://htmlbook.ru/blog/ispolzovanie-box-sizing

Смотрим скрин картинки, видим планету, на планете расставлены точки с названием городов, где филиалы компании.

Значит сама картинка земли с задним фоном, идет как задний фон в сайта.

Далее вывод точек на картинке, каждая точка это css

скрин:

http://pixs.ru/showimage/wwwwwwwwww_9542761_2152074.jpg

пример скрипта:

Код: <table width="100%" border="0" cellpadding="0" cellspacing="0" id="wrapper">
<tr>
    <td align="center"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
        <td height="800" align="center">
        <table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
         <tr>
            <td width="1100" height="800" background="transcargo.jpg">
            <div



id="t1"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t1.png" alt="Сделать стартовой" /></a></div>
            <div



id="t2"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t2.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t3"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t3.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t4"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t4.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t5"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t5.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t6"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t6.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t7"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t7.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t22"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t22.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t20"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t20.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t11"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t11.png" alt="Сделать стартовой" /></a></div>
             &n
bsp;         <div id="t10"><a href="#" title="Сделать стартовой"><img src="{THEME}/images/t10.png" alt="Сделать стартовой" /></a></div>    
            </td



>
         </tr>
        </table>
        </td>
     </tr>
    </table></td>
</tr>
</table>

Подскажите

.twoColFixLtHdr #mainContent { ..... }

что значит?

Это любой элемент, имеющий идентификатор mainContent и одновременно класс twoColFixLtHdr ???

Или же это любой элемент с идентификатором mainContent , имеющий предком элемент с классом twoColFixLtHdr ???
    

Serg7236

Цитата:

любой элемент с идентификатором mainContent , имеющий предком элемент с классом twoColFixLtHdr

Спасибо!

Добавлено:
Но как тогда понимать то, что я прочитал в книжке Эрика Мейера, что выражение

.warning.urgent {...}

будет означать элемент, имеющий МНОЖЕСТВЕННЫЙ класс class="warning urgent" ?


А, я наверное понял. Всё дело в пробеле между g и точкой! Если его нет, то нужно понимать так, как я пишу выше, а если так:
.warning .urgent {...}

то это уже будет элемент с классом urgent , имеющий предком элемент с классом warning ! Я прав???

Serg7236
да, вся разница в пробеле

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

вот страница http://diploma.h19.ru/

Толи не вижу элементарного решения, толи это действительно нужно как-то иначе делать.

CSS выглядит следующим образом:

[more]
Код: nav {
    margin: 0;
    padding: 20px;
    background: #525d69;
    border: none;
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
}

nav ul { /* Навигационная панель - строчный список */
    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav li {
    margin: 0px;
    padding: 5px;
    color: #bbbfc3;
    display: inline;
}

nav li.current_page { /* Пункт открытой страницы ссылкой не является и подсвечивается синим */
    color: #fff;
    background: #4083a9;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

nav li a { /* ...все остальные пункты меню - ссылки */
    margin: 0;
    padding: 5px;
    color: #bbbfc3;
}

nav li a:hover { /* ...подсвечиваются при наведении курсора */
    color: #fff;
    background: #7b838b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

nav li a:active {
    color: #bbbfc3;
}

nav li a:visited {
    color: #bbbfc3;
}

nav li a:visited:hover {
    color: #fff;
}

проблема в том что когда у тебя есть тег А у тебя по стилю добавляется padding: 5px;
а когда его нет - ничего на эти 5 пикселей меню и прыгает

сделай лучше так

<li><span class="current_page">Anstatt der Begruessung</span></li>
<li><a href="../notepad.php">Werke</a></li>
<li><a href="../notepad.php">Notizblock</a></li>
<li><a href="../notepad.php">Ueber mich</a></li>

nav li span.current_page { /* Пункт открытой страницы ссылкой не является и подсвечивается синим */
color: #fff;
background: #4083a9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}

sitd777
Угу, спасибо большое, теперь всё как и хотелось отображается.
Причина-то мне известна была, просто не знал во что не ссылку "завернуть" можно.
Параграф семантически не подходил, а про span'ы забыл, так как старался всегда
без "исключений" обходиться.

Реально ли сделать прозрачную рамку для рисунка без дополнительных слоев и т.п., т.е. что-то в этом духе:

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

Подскажите.

Вот допустим я задал для дива свойство позишн абсолют и лэфт 50%.

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

Serg7236

Цитата:

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

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

Цитата:

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

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

Ещё вопрос.

У меня по команде
body {background:url(2afdf8df17cd.jpg) left bottom no-repeat;} рисунок располагается у левого края, но самое главное - виден только самый его нижний краешек, то есть, фактически он почти целиком уходит вверх за окно.

А "книжка пишет" (например, http://htmlbook.ru/css/background-position ), что рисунок должен располагаться в левом нижнем углу, то есть, я так понимаю, его нижний край должен соприкасаться с нижним краем окна. Но фактически же выходит наоборот - рисунок почти целиком вылазит вверх из окна.
Где же здесь противоречие?

Проверял и в Опере, и в Файерфокс.

Serg7236

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

Так и выглядит -
body {background:url(2afdf8df17cd.jpg) left bottom no-repeat;}
Больше ничего.

У меня Опера 11.

Добавлено:
Кстати, я кажется понял.

Так
body { position:absolute; background:url(2afdf8df17cd.jpg) left bottom no-repeat;}

всё ОК.

Значит, нужно ещё указывать позишн абсолют.

Правда, в книжке об этом не написано, вроде бы.

Здравствуйте, такой вопросик, можно ли swf вставить через css, у меня логотип сайта сделан через Adobe Flash и сохранил как swf ролик, панелька вставлена спомощью css, нужно на панельку разместить этот ролик, работаю в dreamweaver....подскажите как. Заранее спасибо


Добавлено:
вопрос теперь другой, ролик я вставил на панельку, но теперь её надо как-то выровнить, чтобы она к левому краю была от панели, как выравниевание роликов можно делать?

ПОМОГИТЕ ЗАСТАВИТЬ МОЗИЛУ работать как опера.

значит что мы имеем (задача)

табличка в цетре экрана по высоте на весь экран(или больше)

верхняя строка=ячейка, это два елемента - слева лого, справа меню.

НО фон меню(чорный цвет) должен тянуться далеко вправо за границы таблицы. я делал так


Код:
<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;.....} дабы само меню было впределах таблицы

Проинспектировав оперой вот что получил


Добавлено:
Проинспектировав оперой вот что получил
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% и оно растягивается далеко далеко =)))

тут ещо одного сразу не заметил....

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

<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% и оно растягивается далеко далеко =)))

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

Привет всем!


Вот код 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>

див
стайл - хайд
стиль:онмаусклик - блок
когда-то работало. Новых стандартов не глядел

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>

panda3
в общем на тот шаблон забил, сейчас новый делаю.

есть простой код.
[more=код]
Код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
        .gm-for-qq-popup {
position: absolute;
            border: 1px solid #444;
            border-radius: 10px;
            overflow: hidden;
            white-space: nowrap;
            box-shadow: 4px 4px 6px rgba(0,0,0,.15);
            font: 12px Tahoma, Arial, sans-serif;
            background: url("data:image/gif;base64,R0lGODlhCgAIAAAAACH5BAEAAAEALAAAAAAKAAgAoP///wEAAAIQhBFxi8qWHnRzxmadTjrPAgA7") no-repeat center, #6391D1;
        }
        .gm-for-qq-popup-hide {
            visibility: hidden;
            opacity: 0;
        }
        .gm-for-qq-popup-full {
            max-width: 250px;
            max-height: 150px;
        }
        .gm-for-qq-popup-icon {
            width: 18px;
            height: 16px;
        }
        .gm-for-qq-popup-item {
            display: block !important;
            padding: 4px !important;
            text-align: left !important;
            text-decoration: none !important;
            color: black !important;
            background: #F5F9FD !important;
        }
        .gm-for-qq-popup-item:hover {
            color: white !important;
            background: #6391D1 !important;
        }
        .gm-for-qq-popup-item + .gm-for-qq-popup-item {
            border-top: 1px solid gray;
        }
        :not(.gm-for-qq-popup-full) > .gm-for-qq-popup-item {
            display: none !important;
        }
        /*
        .gm-for-qq-popup-item:first-of-type {
            border-radius: 9px 9px 0 0;
        }
        .gm-for-qq-popup-item:last-of-type {
            border-radius: 0 0 9px 9px;
        }
        */
</style>

<script type="text/javascript">
</script>

</head>
<body>

<br>
<div class="gm-for-qq-popup gm-for-qq-popup-icon">
    <a href="javascript:" class="gm-for-qq-popup-item">Item 1</a>
    <a href="javascript:" class="gm-for-qq-popup-item">Item 2</a>
    <a href="javascript:" class="gm-for-qq-popup-item">Item 3</a>
</div>
<br>
<div class="gm-for-qq-popup gm-for-qq-popup-full">
    <a href="javascript:" class="gm-for-qq-popup-item">Item 1</a>
    <a href="javascript:" class="gm-for-qq-popup-item">Item 2</a>
    <a href="javascript:" class="gm-for-qq-popup-item">Item 3</a>
</div>

</body>
</html>

Приветствую, правил 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>

здравствуйте

подскажите можно как нибудь посмотреть какой тип применен у того или иного объекта?
просто стили подгружаются из внешний файлов а их много не могу обнаружить какой стиль влияет на свойство объекта
можно ли как переопределить его если он задан в каком то из подгруженных css файлов?
заранее благодарен

СТИЛЬ CSS ДЛЯ ФОТО, как реализовать такое не совсем понял, где то видел пример.

Есть област изображения 200x200
Если фотка 360x240 то в область изображения попадёт только 200x200

Кто ни будь понял что я хочу ??

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

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


получилось это

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 работает только для ссылок