Объект не двигается css
Сайт на WordPress, я несколько дней мучался, роя интернет и решая как добавить социальные кнопки (кнопки, нажимая на которые юзверь попадёт на группу сайта ВКонтактике например), что не заметил очевидного решения, взять картинку с кнопкой, и вставить её в шапку (хочу чтоб была справа вверху) и в неё встроить ссылку. Ну сказано, сделано, нашёл гайд, сделал, но проблема в том что она не справа, а слева. Вот что было написано в гайде
Добавил, убирал float, менял значения на разные, на тысячные, на любые, кнопка никуда не двигается, вообще никаких изменений не происходит. Кэш браузера удалял. Я было подумал что style.css вообще не работает, удалил весь код из него, заметил явные изменения на сайте, некоторые вещи пропали. Значит вроде как работает. Так где моя ошибка?
Плавающие элементы сильно зависят от окружения, надо смотреть целиком.
И попробуй прикола ради в девтулз проинспектировать свой баннер и посмотреть, какие стили на него реально применяются.
П.С.
скорей всего на кнопки вешается position: absolute; скриптом и там же они позиционируются, в этом случае, срать они хотели на то, какие стили ты добавишь в .banner, кроме position отличного от static, конечно.
П.П.С. Если у кнопок свой float, это тоже может подкинуть говна на вентилятор
| И попробуй прикола ради в девтулз проинспектировать свой баннер и посмотреть, какие стили на него реально применяются. |
element.style < >img < vertical-align: middle; >img < border: 0; max-width: 100%; height: auto; >*, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >img[Attributes Style] < width: 150px; height: 150px; >Inherited from a a, .searchform .screen-reader-text, .post_meta i, .author_bio_sidebar .social_box a, .post-title a:hover, .post-footer i, .page_nav_wrap .post_nav ul li .current, .page_nav_wrap .post_nav ul li a:hover < color: #FF5B5B; >a < color: #ff5b5b; text-decoration: none; >a < cursor: pointer; >user agent stylesheet a:-webkit-any-link < color: -webkit-link; text-decoration: underline; cursor: auto; >Inherited from body.home-page.home.blog.logged-in.admin-bar.js.customize-support body < font-family: "Roboto", arial, sans-serif; >body, button, input, select, textarea < color: #8B8686; font-family: sans-serif; font-size: 12px; line-height: 20px; >body < font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; color: #8b8686; background-color: #210f1d; >Inherited from html html < font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); >html < font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; >Pseudo ::before element *, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >Pseudo ::after element *, *:before, *:after
есть один раз style.css но там чёт всё перечёркнуто
______________________
Используйте тег [CODE] (кнопка с решеткой # в форме сообщения) при вставке кода на форум.
Так сложно гадать. Советую начать с изучения основ CSS и HTML, а не тупо копипастить что-то откуда-то.
В конец в файле style.css. Оказалось что он там может не работать, я его закинул повыше (а именно в хедер в конец) и всё заработало, оставляю здесь, надеюсь кому то ещё поможет!
Что странного?
В CSS правила находящиеся «ниже» перезаписывают такие же старые правила. (ну и остальные правила каскадирования http://htmlbook.ru/samcss/kaskadirovanie)
Помогите с html и css Картинка не двигается (margin-left)
Добавь display: block; к стилям .imgl и проверь (F12 в браузере), какие стили реально применяются к изображению.
У вас в .border написано marfin-left вместо маргина)) И дважды.
А по вашему коду — сдвиг картинки должен работать. Но возможно у вас где-то еще в коде встречается img . потому и не рекомендуют использовать important. Пробуйте .img1 (без пробела перед important, и пробел после восклицательного знака. mail ломает запись)
И по ходу вам нужно скорее центрировать всё, чем задавать отступ слева в пикселях (в том числе и .border). Потому что у всех экраны разные — а вы делаете страничку под свой экран пикселями) У других будет по другому отображаться.
Такие весчи нужно делать или на процентах, или центрировать.
Центрирование картинки выглядит так:
(у div по дефолту стоит display:block;)
(ширина основной статьи спокойно может быть в пикселях, главное чтобы было в центре, а не привязано к левому краю экрана)
как один из вариантов, не вникая в код, сработает 100%
Не двигается картинка вверх CSS/HTML
>
.header_inner display:flex;
justify-content: space-between;>
.button background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 23px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
>
.button1 background-color: #fff;
.button1:hover background-color: #393939;
color: white;
>
.button2 background-color: white;
color: black;
.button2:hover background-color: #393939;
color: white;
>
.button3 background-color: white;
color: black;
.button3:hover background-color: #393939;
color: white;
>
.button4 background-color: white;
color: black;
.intro_titledisplay: block;
padding-top:229px;
font-family: «Segoe UI», Frutiger, «Frutiger Linotype», «Dejavu Sans», «Helvetica Neue», Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 26.4px; > h3 < font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; >p < font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; >blockquote < font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; >pre < font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px;;
>
.rightdisplay: inline-block;
padding-bottom: 100px;
>
HTML:
Почему всем кажется, что в голове верстальщиков встроенный интерпретатор кода.
Никто не будет работать с кодом в таком виде. существует https://jsfiddle.net/
Elepsis Eclipse Гений (61765) Если у .right убрать display: inline-block; картинка уйдет направо) inlint-block; схлопывает размеры блока до размеров его контента. А по умолчанию — у div стоит display: block — и он занимает всю доступную ширину.
Блок не двигается
есть компонент для джумлы, но он не удачно налез на кнопки навигации, хотел его подвинуть ниже.
добавил туда такую строчку
пробовал менять цифры, а блок не двигается.. как его опустить?
Изменено 24 апреля 2012 пользователем nikki4
Ссылка на комментарий
Поделиться на других сайтах
2 ответа на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |