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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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

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

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
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Xrobak
я кго как раз таки и попросил выложить "живой" код.

Всего записей: 6637 | Зарегистр. 14-02-2005 | Отправлено: 12:01 14-10-2015
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо за ответы. Отступы и прочее разобрался, но не получается сделать лого посередине страницы (контейнера). В CSS такой код:

Код:
.wrapper {
    margin: 0 auto;
    padding: 10px 0 0;
    position: relative;
    width: 960px
}
 
.siteHeader {
    margin-bottom: 1.2em
}
 
.logo {
    float: left;
}
 
.logo img {
    height: auto;
    max-width: 100%;
}
 
.title {
    float: left;
    margin-top: 5px;
}
 
.site_title {
    font-size: 2.5em;
    font-weight: normal;
    letter-spacing: .05em;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    white-space: nowrap
}
 
.site_slogan {
    font-size: 1.4em;
    font-weight: normal;
    letter-spacing: .05em;
    line-height: 1.1em;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    white-space: nowrap
}

Когда ставишь в лого большую, широкую, картинку, всё нормально показывается, слоган и навигация на месте, а если небольшую, то слоган и кнопки навигации оказывается вверху, а лого слева.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 20:11 14-10-2015
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
может это поможет
 

Код:
<!-- der Container-Layer horizontal und vertikal centered -->
 
<div id="Layer-White" style="position:absolute; height:400px; width:500px;margin-top:-200px; margin-left:-250px;  
top: 50%; left:50%; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px solid #000000; ">  
 
</div>
 

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 20:23 15-10-2015
gerzikon

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Можно ли в CSS задать определенный стиль для элементов "input" на всей странице лишь для определенного типа. Если в файле CSS определить стили для "input"

Код:
input{...}

то он будет действовать для "input" всех возможных типов. Можно ли задать стиль только для "input"-ов типа checkbox?

Всего записей: 42 | Зарегистр. 02-11-2015 | Отправлено: 00:40 06-11-2015
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
input[type="checkbox"] {...}

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 01:17 06-11-2015 | Исправлено: Xrobak, 01:17 06-11-2015
a1dot0

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всем привет!
Имеется следующий код:

Код:
 
<!DOCTYPE html>
<html>
    <head>
        <style>
            .button
            {
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                border: 1px #000 solid;
                border-radius: 18px;
                font-size: 18px;
                color: #000;
            }
        </style>
    </head>
    <body>
        <a class="button" href="/1">1</a>
    </body>
</html>
 

 
В Chrome он отображается как надо, цифра ровно по середине круга, но с#$^й Firefox добавляет по одному пикселу слева и сверху. Как от этого избавиться?
 

Всего записей: 86 | Зарегистр. 20-09-2006 | Отправлено: 23:56 26-01-2016
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Firefox 44.0 проблемы не наблюдаю. Попробуй на родительский элемент (в твоем примере это body) применить font-size:0; может так полегчает.

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 05:49 27-01-2016
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Как от этого избавиться?
-попробуйте увеличить/уменьшить на пиксель размер размер контейнера и/или шрифта, укажите какой-нибудь шрифт, м.б. браузеры используют разные шрифты по дефолту. Мне кажется цифры разные - у Fx явно жирнее.
Я думаю, от подобных проблем гарантированно не избавиться - каждый браузер имеет свою арифметику и подобные пикселы появляются из-за округлений.
Кроме этого, у вас явно по-разному сработал анти-алиасинг.
 
Если вам нужна цифра в круге, посмотрите unicode &#9312; &#9313; &#9314; &#9315; &#9316; &#9317; &#9318; &#9319; &#9320; &#9321;
 
Добавлено:
Цифры не впечатались из-за кодировки форума.
http://xn-------53daca2adiaahbcaxqqaq9b2agjfuiequrm1dbl1ogx2q.xn--p1ai/example/size/ - смотрите внизу страницы в красной рамке. Когда скопипастите, напишите, я уберу эту ерунду.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 07:43 27-01-2016
OLEX



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
a1dot0
попробуй  
border-radius: 50%;

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 09:33 27-01-2016
a1dot0

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
OLEX
Не, пиксель не пропал, но круг стал более круглым

Всего записей: 86 | Зарегистр. 20-09-2006 | Отправлено: 10:17 27-01-2016
a1dot0

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

Всего записей: 86 | Зарегистр. 20-09-2006 | Отправлено: 15:36 28-01-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Такой вопрос.
 
Вот кусок кода:

Код:
transform: rotateY(90deg); transition: transform 0.5s; transform-style: preserve-3d;

 
он поворачивает картинку с 0 до 90, что её не видно.
Можно-ли сделать так, чтоб был поворот картинки осуществлялся с 90 на 0 градусов?
т.е. картинка появлялась под 90 градусами и проворачиваться на 0.
Указать 180 не подойдет, картинка будет отражена по горизонтали, 360 - много поворотов будет...

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 21:30 02-02-2016
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
Я так понимаю, тебе такое нужно https://jsfiddle.net/3o1sxo1e/ ?
На будущее для наглядности http://daneden.github.io/animate.css/, там же есть ссылка на гитхаб где лежит исходный код этих анимаций, можешь вникнуть для понятия как все устроено

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 22:50 02-02-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Xrobak
спасибо.
 
Вот ещё такая проблемка:

Код:
<div><span>текст</span></div>

 
div и span - position: absolute;
такой вопрос, как выровнять span по средине div не прибегаю к height?
просто текст в блоке span может меняться от 1 строчки и до 10. и нужно чтоб его всегда выводило по средине div. (по средине высоты и ширины)

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 21:18 03-02-2016
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
как выровнять span по средине div
-есть куча решений, но они все разно-глючные.
Например, можно инлайн контейнер сделать высотой с родительский блок, и в нём сделать инлайн-блок выровненный по середине строки.
Но самый надёжный и простой способ - использовать табличный дизайн. В ячейке таблицы содержимое выравнивается по середине высоты. Работает во всех браузерах и совершенно очевидно в использовании.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 21:52 03-02-2016 | Исправлено: stupom, 21:53 03-02-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
stupom

Цитата:
В ячейке таблицы содержимое выравнивается по середине высоты.  

я пробовал такой вариант, но он почему-то не хочет.
 
div и span используют position:absolute; top:0; bottom:0; left:0; right:0;
и почему-то не получалось сделать табличного типа.

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 23:13 03-02-2016
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
но он почему-то не хочет

Да не могёт такого быть.

Цитата:
<table><tr><td style="height: 300px; width: 300px; text-align: center; border: 1px solid red;">bla-bla-bla<br>bla-bla-blah</td></tr></table>

-попробуйте

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 23:19 03-02-2016
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar http://webformyself.com/absolyutnoe-centrirovanie-po-gorizontali-i-vertikali-v-css/ подбирай для себя, в крайнем случае гугли - валом инфы
 

Цитата:
и почему-то не получалось сделать табличного типа

обычно это display: table-cell;

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 23:42 03-02-2016 | Исправлено: Xrobak, 23:45 03-02-2016
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Можно ещё так, правда это не работает на пылесосах или требует имитации таблицы - родительских элементов ячейки

Цитата:
<div style="height: 300px; width: 300px; text-align: center; border: 1px solid red; display: table-cell; vertical-align: middle;">bla-bla-bla<br>bla-bla-blah</div>

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 23:48 03-02-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот, пробовал реализовать как вы пишите:
 

Код:
<style>
div {width: 1000px; height: 500px; margin: 0px auto; border: 1px solid #000; position: relative; overflow: hidden;}
table, td {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
td {text-align: center; line-height: 18px; font-weight: bold; border: 1px solid red;}
</style>
<div><table><tr><td>bla-bla-bla<br>bla-bla-blah</td></tr></table></div>

 
не робит....
 
Вот более упрошенный вариант.... тут только не выравнивается по горизонтали по центру...
 

Код:
<style>
div#i {width: 1000px; height: 500px; margin: 0px auto; border: 1px solid #000; position: relative; overflow: hidden;}
 
div#a {position: absolute; top: 0; bottom: 0; left: 0; right: 0;text-align: center; vertical-align: middle;}
 
div#a div {text-align: center; line-height: 18px; font-weight: bold; border: 1px solid red; display: inline-block; margin: auto; vertical-align: middle;}
</style>
 
<div id="i">
<div id="a">
<div>bla-bla-bla<br>bla-bla-blah</div>
</div>
</div>

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 14:32 04-02-2016
Открыть новую тему     Написать ответ в эту тему

Страницы: 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

Компьютерный форум 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