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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать по выравниванию объекта на странице. Есть стек для программы-редактора и никак не получается сделать, чтобы объект показывался посередине. Перепробовал всё, что знаю.
Здесь сам стек, и полученная страница. Хотелось бы сделать так, чтобы выравнивание по середине было изначально в CSS самого стека.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 13:38 03-06-2016
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Стек не является объектом форматирования. Попробуйте переформулировать вопрос в терминологии HTML.
Если надо блок по середине ширины сделать - ставьте ему margin: auto. Другие варианты можно предложить, когда будет понятна схема макета и цель.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 13:44 03-06-2016
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
stupom
Этот стек вставляется на страницу и по-умолчанию он стоит слева, и настроек для его положения нет вообще. Поэтому и хотелось бы сделать так, чтобы по-умолчанию при добавлении всё (звёзды и текст) было по центру.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 17:30 03-06-2016
stupom



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

Код:
<div style="border: red 1px solid;"><div style="border: green 1px solid; width: 50%; margin: auto;">Текст</div></div>

-вот вам блок по-центру.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 17:35 03-06-2016
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
stupom
Спасибо за советы! Первый бесполезно, пробовал менять на разные значения и добавляя другие, элемент меняет место на странице, но почему-то всё равно встаёт не по центру, а чуть правее центра. Со вторым не понял, куда именно этот код и зачем в нём бордер.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:43 03-06-2016
stupom



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

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 20:09 03-06-2016
WONDROUS



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

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 15:28 26-06-2016
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ИМХО - изучение библиотек и фреймворков для HTML-CSS-JavaScript не целесообразно. Без знания нативных языков не обойтись. Вы всё равно к этому придёте, только потеряв кучу времени, если конечно не бросите вебдизайнить.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 15:34 26-06-2016
HeT BonpocoB



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
может кому не лень будет разобраться?
в твиттере есть нехитрая анимация "дня рождения" в виде шариков (увидеть можно в рандомном профайле с незакрытой датой рождения по тегу > #HappyBirthday )
 
не могу отыскать их в коде, это скрипт или простой css?
всё что нашёл в css

Всего записей: 1342 | Зарегистр. 30-03-2003 | Отправлено: 22:08 22-08-2016
Mavrikii

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

Цитата:
это скрипт  

но частично можно сделать с помощью css, вот только начальные и конечные координаты нужно задавать случайно, css это не может.
https://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm
ps: саму анимацию можно посмотреть только если есть аккаунт, видимо.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:14 22-08-2016 | Исправлено: Mavrikii, 22:15 22-08-2016
HeT BonpocoB



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

Цитата:
ps: саму анимацию можно посмотреть только если есть аккаунт, видимо.
это про твиттер?
да не, вроде показывает и без..
вот у девочки Ссылка например NSFW!
(рандомный акк )
 
ладно, коль скрипт то поищу чтонить похожее на css завтра

Всего записей: 1342 | Зарегистр. 30-03-2003 | Отправлено: 22:22 22-08-2016
Mavrikii

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

Цитата:
да не, вроде показывает и без..  

не показывало с ABP )  
 

Код:
define("app/ui/profile/balloons_animation",["module","require","exports","core/component","app/utils/random","app/utils/params"],function(module, require, exports) {
function BalloonsAnimation(){this.defaultAttrs({playBalloonsAnimation:!1,colors:["Balloon--red","Balloon--blue","Balloon--yellow","Balloon--purple","Balloon--green"],sizes:["Balloon--small","Balloon--medium","Balloon--large"],scale:[.65,.85,1],speed:[.21,.25,.3],numberOfBalloons:42,maxBalloonDriftOnXAxis:600,minInitialDelay:500,maxDelayAfterInital:4500,fpsDebuggerBoxClass:"Balloon-fpsDebugger",debuggerBoxParam:"debug"}),this.animationStates={inProgress:0,finished:1},this.balloonsData=[],this.animationStep,this.animationStartTime,this.balloonAnimationRequest,this.viewportSize,this.lastAnimationStepTime=0,this.windowWasBlurred=!1,this.frameCount=0,this.lowestFps=Number.MAX_VALUE,this.highestFps=0,this.averageFps=0,this.easeIn=function(a){return 1-Math.cos(a*(Math.PI/2))},this.pathFunctions=["linear","curve","sinusoidal"],this.linear=function(a,b,c,d){return{xAxis:b*c,yAxis:b*d}},this.curve=function(a,b,c,d){var e=2+a*1;return{xAxis:Math.pow(b,e)*c,yAxis:b*d}},this.sinusoidal=function(a,b,c,d){var e=(2+a*2)/4;return{xAxis:Math.sin(b*Math.PI*e)*c,yAxis:b*d}},this.balloonAnimationDuration=function(a,b){var c=this.attr.speed[b%this.attr.speed.length];return a/c},this.isAnimationInProgress=function(){return this.balloonsData.some(function(a){return a.state===this.animationStates.inProgress},this)},this.setBalloonPosition=function(a,b){var c=this.easeIn(b),d=this[a.chosenPath](a.randomFactor,c,a.xSize,a.ySize),e=a.startPosition.xAxis+d.xAxis,f=a.startPosition.yAxis+d.yAxis;a.$node.css({transform:"matrix("+a.scale+", 0, 0, "+a.scale+", "+e+", -"+f+")"})},this.getAnimationStep=function(){var a=Date.now();!this.animationStartTime&&this.animationStartTime!==0?this.animationStartTime=a:this.calculateFpsInfo(a),this.windowWasBlurred&&(this.windowWasBlurred=!1,this.animationStartTime+=a-this.lastAnimationStepTime),this.lastAnimationStepTime=a,this.balloonsData.forEach(function(b){var c=this.animationStartTime+b.delay;if(a>c){var d=a-c,e=d/b.animationDuration;e<=1.2?this.setBalloonPosition(b,e):(b.state=this.animationStates.finished,b.$node.addClass("u-hidden"))}},this),this.isAnimationInProgress()?this.balloonAnimationRequest=window.requestAnimationFrame(this.animationStep):this.cleanUpBalloons()},this.startAnimation=function(){this.animationStep=this.getAnimationStep.bind(this),this.balloonAnimationRequest=window.requestAnimationFrame(this.animationStep)},this.requestAnimation=function(a,b,c){this.isAnimationInProgress()||(this.resetControlVariables(),this.calculateViewPortSize(),this.createBalloons(),this.resetFpsInfo(),this.trigger("uiBalloonAnimationPlayed",{autoplay:a||c&&c.autoplay}),this.startAnimation())},this.chooseBalloon=function(a){var b=this.attr.colors[a%this.attr.colors.length],c=this.attr.sizes[a%this.attr.sizes.length];return["Balloon",b,c].join(" ")},this.createBalloons=function(){var a=this.pathFunctions.length;for(var b=0;b<this.attr.numberOfBalloons;b++){var c=$("<span>",{"class":this.chooseBalloon(b)});this.$node.append(c);var d=c.height(),e=c.width(),f=this.viewportSize.width-e,g=f*Math.max(b-5,0)/this.attr.numberOfBalloons,h=g+f*Math.min(b+5,this.attr.numberOfBalloons)/this.attr.numberOfBalloons,i={xAxis:random.getRandomInteger(g,h),yAxis:-1*d},j=random.getRandomInteger(i.xAxis,i.xAxis+this.attr.maxBalloonDriftOnXAxis)-this.attr.maxBalloonDriftOnXAxis/2,k=this.pathFunctions[b%a],l=Math.random(),m=random.getRandomInteger(this.attr.minInitialDelay,this.attr.minInitialDelay+this.attr.maxDelayAfterInital),n=Math.abs(j-i.xAxis),o=Math.abs(this.viewportSize.height-i.yAxis),p=this.balloonAnimationDuration(o,b);this.balloonsData.push({$node:c,state:this.animationStates.inProgress,delay:m,animationDuration:p,startPosition:i,scale:this.attr.scale[b%this.attr.scale.length],ySize:o,xSize:n,chosenPath:k,randomFactor:l})}},this.cleanUpBalloons=function(){this.balloonAnimationRequest&&window.cancelAnimationFrame(this.balloonAnimationRequest),this.balloonsData.forEach(function(a){a.$node.remove()}),this.balloonsData=[],this.logFpsInfo()},this.calculateViewPortSize=function(){var a=$(window);this.viewportSize={height:a.height(),width:a.width()}},this.setWindowBlurredFlag=function(){this.windowWasBlurred=!0},this.resetControlVariables=function(){this.balloonsData=[],this.animationStep=undefined,this.animationStartTime=undefined,this.balloonAnimationRequest=undefined,this.viewportSize=undefined,this.lastAnimationStepTime=0,this.windowWasBlurred=!1},this.calculateFpsInfo=function(a){if(a>this.animationStartTime+this.attr.minInitialDelay+this.attr.maxDelayAfterInital/2){var b=Math.round(1e3/(a-this.lastAnimationStepTime)*100)/100;this.frameCount+=1,this.averageFps+=b,this.lowestFps=Math.min(this.lowestFps,b),this.highestFps=Math.max(this.highestFps,b)}},this.resetFpsInfo=function(){this.frameCount=0,this.averageFps=0,this.lowestFps=Number.MAX_VALUE,this.highestFps=0},this.logFpsInfo=function(){var a=console;params.fromQuery(window.location)[this.attr.debuggerBoxParam]&&(a.log("Average FPS: "+this.averageFps/this.frameCount),a.log("Lowest FPS: "+this.lowestFps),a.log("Highest FPS: "+this.highestFps))},this.after("initialize",function(){this.attr.autoPlayBalloonsAnimation&&this.on(document,"uiSwiftLoaded uiPageChanged",this.requestAnimation.bind(this,!0)),this.on(document,"uiBeforePageChanged",this.cleanUpBalloons),this.on(window,"blur",this.setWindowBlurredFlag),this.on(document,"uiBalloonAnimationRequested",this.requestAnimation.bind(this,!1))}),this.before("teardown",function(){this.cleanUpBalloons()})}var defineComponent=require("core/component"),random=require("app/utils/random"),params=require("app/utils/params");module.exports=defineComponent(BalloonsAnimation)
});

 
использует их фреймворк. но можно сделать проще, используя возможности CSS3
 

Цитата:
ладно, коль скрипт то поищу чтонить похожее на css завтра  

дал же ссылку выше.
 
pps: вот, накидал по быстрому с помощью jQuery - https://jsfiddle.net/8tm8x7yg/

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 22:40 22-08-2016 | Исправлено: Mavrikii, 23:27 22-08-2016
HeT BonpocoB



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Mavrikii, кул , благодарю
 
до этого мне гугл ещё выдал нечто на чистом css (вроде) Ссылка
думаю если там покрутить можно их и дальше разлетаться научить...
(хотя и так неплохо)

Всего записей: 1342 | Зарегистр. 30-03-2003 | Отправлено: 00:43 23-08-2016 | Исправлено: HeT BonpocoB, 00:45 23-08-2016
Mavrikii

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

Цитата:
до этого мне гугл ещё выдал нечто на чистом css (вроде)

там строго заданное движение, случайность не получится чистым CSS.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 00:55 23-08-2016
vikt88



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Друзья, кто разбирается в хтмл, его нужно удалять в пшп или нет?




Читайте правила и название темы. Не нужно писать свой вопрос в тему к которой он не имеет ни малейшего отношения.

Всего записей: 1 | Зарегистр. 24-08-2016 | Отправлено: 15:35 24-08-2016
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vikt88 - по желанию, хотите - удаляйте, хотите - нет. Но если не начнёте учить HTML, то что пытаетесь сделать никогда не сделаете - гарантирую.

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 16:05 24-08-2016
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как в этом файле (архив) сделать, чтобы верхний рейтинг был по центру, а не слева. И как выравнить текст по центру звёзд (вертикально)?
Рейтинг ниже получилось выравнить только за счёт установки фиксированной ширины.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 17:50 09-09-2016
OLEX



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

Всего записей: 3590 | Зарегистр. 09-07-2002 | Отправлено: 18:35 09-09-2016
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
OLEX
Да, в Safari и Chrome почему-то такой вид, а в Firefox 42 (им пользуюсь) нормально показывается.
Похоже сам стек (плагин) рейтинга глючный, тогда вопрос отменяется, спасибо.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 18:41 09-09-2016 | Исправлено: WONDROUS, 19:01 09-09-2016
Mavrikii

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

Цитата:
Похоже сам стек (плагин) рейтинга глючный, тогда вопрос отменяется,

глюков нет, он просто пытается загрузить .json файл с диска, что во многих браузерах запрещено.
 

Цитата:
jquery-2.2.2.min.js:4 XMLHttpRequest cannot load file:///C:/temp/rateit/files/stacks_in_2_page0_VoteData.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 20:58 09-09-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