Ваши вопросы по копанию в css стилях форума. часть шестая.
Смотрим предыдущее тут Вопрос/ответ по дизайну css #5
Если у вас вопросы технического характера конкретно по вашему форуму - оставляйте адрес, иначе помочь вам не смогут.
Вопрос/ответ по дизайну css #6
Сообщений 971 страница 980 из 1001
Поделиться127.12.12 00:56
- технозомби
- Уважение: +9812
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
Поделиться97113.12.20 14:47
- технозомби
- Уважение: +9812
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
ocean
еще скриншотик макета плз, включая всю верхнюю часть
Поделиться97213.12.20 14:54
- Проверенный специалист
- Уважение: +604
- Достижения/подарки: cake 1 emoji_events 3
- Наградные баллы: 880
- Проверенный спец: FDFD
Герда
картинки менябельные должны быть, навигация - выпадающий список
тык
Поделиться97313.12.20 14:58
- Ломастер
- Уважение: +2525
- Достижения/подарки: cake 3 emoji_events 7
- Наградные баллы: 1 462
- Проверенный спец: FDFD
satsana написал(а):
Можно попробовать через флекс-модель!
Я такую штуку проворачивал с порядком полей в ЛС, кстати, вспоминал вчера, но не дошли руки найти инструкцию.
Поделиться97413.12.20 15:10
- Техномаг
- Уважение: +1105
- Достижения/подарки: cake 6 emoji_events 3
- Наградные баллы: 52
- Проверенный спец: FDFD
бродяга написал(а):
не дошли руки найти инструкцию
Я вот нашла под тему разговора. Держи!
Поделиться97513.12.20 16:12
- технозомби
- Уважение: +9812
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
ocean
добавляем код:
#pun-announcement {
position: absolute;
top: 0;
width: 943px;
margin-left: -11px;
}
"задираем" объяву (где у нас находятся все заготовки для верхнего контента) вверх. абсолютное позиционировние + сверху ноль пикселей
синее - ширина объявы
зеленое - двигаем влево
двигать влево надо т.к. объява по умолчанию находится внутри "окантовки"
ща получились странные размеры, можно поиграться с размерами окантовок #pun и .punbb, шоб всё было более чётно )
этот код удаляем:
Код:
#pun-announcement .container {
padding: 5px;
margin-top: 15px;
margin-bottom: 10px;
}делаем лого
#logo {
padding: 50px 0 0;
margin: 0 0 20px;
text-align: center;
}
красное - отступ сверху до логотипа
синее - отступ от логотипа до первой таблички
делаем линию над лого
#logo hr {
width: 300px;
margin: 0 auto 20px;
height: 2px;
background-color: #303225;
border: 3px solid #c0bfbd;
}
красное - ширина
синее - отступ вниз (до логотипа)
оранжевое - высота
зеленое - цвет черной линии
розовое - обводка
-------------------
вставь пока это и поменяй плз здесь селекторы:
<div id="toptable" class="table1"><div class="myinner">
тут будет контент шапки
<hr class="tophr">
</div></div><div id="toptable" class="table2"><div class="myinner">
тут будет контент шапки
<hr class="tophr">
</div></div>
селектор, который я дала, к сожалению, уже юзается здесь:
.inner, #pun_wrap #post .container, #video-area-tinp, #image-area-tinp, .pun-modal .modal-inner {
background: url(https://forumstatic.ru/files/001a/f4/24/10905.jpg) top center repeat #c0bfbd;
color: #303225;
outline: none;
border: 1px solid #303225;
}
нам этого не надо.
+ синее: у тебя в этом коде проблема с фоном - совершенно не нужно вставлять картинку-квадрат: https://forumstatic.ru/files/001a/f4/24/10905.jpg
такие одноцветные штуки делаются кодом.
удали картинку, просто оставь цвет: background: #c0bfbd;
Поделиться97613.12.20 16:44
- Проверенный специалист
- Уважение: +604
- Достижения/подарки: cake 1 emoji_events 3
- Наградные баллы: 880
- Проверенный спец: FDFD
Герда написал(а):
вставь пока это и поменяй плз здесь селекторы:
поменяно с:
Герда написал(а):
такие одноцветные штуки делаются кодом.
там смыл в том, что на однотонную заливку добавлен шум стильно модно молодежно
тоже поменяла
готово!
Поделиться97713.12.20 16:48
- технозомби
- Уважение: +9812
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
ocean написал(а):
на однотонную заливку добавлен шум
аааа... ну, его прям ваще не видно. =) хотя я реально очкарик - мб я просто слепая и не вижу, другие заценят.
если это текстура - тогда пусть будет.
если у туловища тоже такая же текстура, то можно ее вставить вот сюда:
#pun {
background-color: #bcbbb9;
(вместо зелененького)
Поделиться97813.12.20 16:57
- Проверенный специалист
- Уважение: +604
- Достижения/подарки: cake 1 emoji_events 3
- Наградные баллы: 880
- Проверенный спец: FDFD
Герда написал(а):
если у туловища тоже такая же текстура, то можно ее вставить вот сюда:
надо очень постараться, чтобы разглядеть...
простите хдд
да, я поняла, что там в любом случае было не правильно, кто ж знал про бордер пусть пока голеньким чистеньким останется
Поделиться97913.12.20 17:20
- технозомби
- Уважение: +9812
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
1. коды линий внутри хтмл удалить:
Код:
<hr class="tophr">
я их вставила, ориентируясь на предыдущую версию сверстанного сайта (где была черная линия), на макете их нет, так шо можно просто вытащить.
делаем стиль окантовки табличек:
Код:
#toptable {
padding: 3px;
background: #bcbbb9;
position: relative;
}
#toptable .inner {
border: 2px solid #303225;
padding: 5px;
}это то же самое, что мы делали для "туловища" - фон отступ до черной линии, черная линия и тступ текста от черной линии.
ширина нам не нужна, т.к. она уже прописана в #pun-announcement
position: relative; - на будущее для верстки контента табличек
двигаем меню
для начала чистим код.
вот это свойство убрать:
#pun-navlinks, #pun-navlinks .container {
height: 2px;
}
вот эти коды полностью удалить:
Код:
#pun-ulinks {
margin-top: -260px;
margin-bottom: 10px;
margin-left: -10px;
text-align: center;
}
#pun-ulinks .container {
padding: 0;
margin: 280px 0 0 0;
}
добавляем позиционирование меню:
#pun-navlinks, #pun-ulinks {
position: absolute;
width: 922px;
text-align: center;
}
#pun-navlinks {top: 300px;}
#pun-ulinks {top: 320px;}
красная - ширина меню
синее - отступ сверху
#pun-navlinks = навигация
#pun-ulinks = юзер-меню
двигаем вторую табличку
#toptable.table2 {top: 170px;}
она двигается не от самого верха форума, а от того места, где находилась (т.е. под первой табличкой)
мы ее двигаем на расстояние, которое должны занимать менюшки.
все отступы сверху надо подправить по ходу верстки содержимого табличек.
сделаешь первую табличку - будет понятно, насколько сверху менюшку двигать.
сделаешь обе - возможно стоит подправить потом отступ #pun
собственно, всё.
касательно содержимого табличек.
если нужно что-то радикально внутри табличек подвинуть (например, кнопки "новости", "игра" и т.д.), можно тоже делать через position: absolute
вся фича в том, что у тебя в окантовку табличек вставлено position: relative;
когда у родителя есть такое свойство при применении абсолютного позиционирования, двигаться содержимое будет не от краев экрана, а от родителя с relative - это очень удобно.
так что всё, что находится внутри #toptable ты можешь через top left right bottom расставить.
Поделиться98013.12.20 17:41
- Проверенный специалист
- Уважение: +604
- Достижения/подарки: cake 1 emoji_events 3
- Наградные баллы: 880
- Проверенный спец: FDFD
Герда написал(а):
когда у родителя есть такое свойство при применении абсолютного позиционирования, двигаться содержимое будет не от краев экрана, а от родителя с relative - это очень удобно.
Герда написал(а):
так что всё, что находится внутри #toptable ты можешь через top left right bottom расставить.
спасибо большое! дальше должна разобраться если нет, приду еще спрашивать хд
