Eugenice
-
Posts
5 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Eugenice
-
Добрый вечер, уважаемые форумчане. Я пишу с нуля свой первый сайт и у меня на этапе верстки возникла проблема с размещением меню, что вкладывается в блок header. При масштабировании страницы, меню меняет свои значения: либо оно вылазит за пределы блока-родителя, либо не доходит до его границ (появляются неприятные белые полосы). Возникает вопрос, как зафиксировать меню так, чтобы масштабирование не меняло расположение его блоков? + при масштабе в 100% приходится использовать не целочисленное значения в отступах nav ul li a {padding:41.6px 50px;} для того, чтобы избавиться от белой линии под блоком (методом подгона). Хочется понять, как можно "вылечить" и этот дефект. Раз высота шрифта 15px, а высота блока header 100px, то отступы сверху-снизу должны быть (100-15)/2=42.5. Откуда тогда берется 41.6 не совсем понятно. Прикладываю скриншот https://yadi.sk/i/HOGOClqb3Gmy2k с описанием для лучшего понимания ситуации, а сам код прикрепил к сервису codepen: С уважением, Евгений.
-
Сделайте мне пожалуйста такой слайдер, как на этом сайте - http://www.gameray.ru/ Только чтобы таймер под картинкой следующего "кадра" не пропадал резко, а плавно исчезал или плавно возвращался назад по истечению времени.
-
Ребятки! Пожалуйста, помогите сделать или хотя бы найти исходники чудесного слайдера, который красуется на сайте http://www.gameray.ru
-
Салют ребятки. Решил сделать сайт, но столкнулся с проблемой. Не могу создать многоуровневое (3-х) горизонтальное меню (пока не особо получается дружить со списками). Кто профи - помогите! Пожалуйста! html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Menu</title> <link href="css/menu/style.css" rel="stylesheet" type="text/css"> <link href="css/menu/font.css" rel="stylesheet" type="text/css"> </head> <body> <header> <nav> <ul> <li><a href="#">Текст1</a> <ul> <li><a href="#">Текст1.1</a></li> </ul> <ul> <li><a href="#">Текст1.2</a></li> </ul> </li> </ul><!-- --><ul> <li><a href="#">Текст2</a></li> </ul><!-- --><ul> <li><a href="#">Текст3</a></li> </ul><!-- --><ul><li><a href="#">Текст4</a></li></ul><!-- --><ul><li><a href="#">Текст5</a></li></ul><!-- --><ul><li><a href="#">Текст6</a></li></ul><!-- --><ul><li><a href="#">Текст7</a></li></ul><!-- --><ul><li><a href="#">Текст8</a></li></ul><!-- --> </nav> </header> </body> </html> css: *{margin:0; padding:0;} body{background:url(../../img/1.jpg); background-size:cover;} header{margin:0 auto; width:1518px; background:#FFF; color:#000; text-transform:uppercase; } nav{text-align:right;} ul{display:inline-table;list-style:none; margin:0; padding:30px;} a{text-decoration:none;color:#000;} ul:hover{padding:0px;} ul:hover a{background:#191919;color:#FFF;padding:30px;display:inline-table;} ul li ul { display: none; background:#fff;position: absolute; margin: 0; padding: 0; } ul li:hover > ul{ display:block;color:#000; } ul li:hover ul li a {width:300px; font-size:12px; font-weight:normal; display:block; color:#000; border-left:3px solid #FFF; background:#fff;} ul li:hover ul li a:hover,ul li:hover ul li:hover > a{ background:#191919;display:block; border-left:3px solid #FFF; color:#fff; }
-
Всем привет. Вопрос касается html, css. Занимаюсь версткой сайта. Хотел бы сделать список (чисто на divах без конструкции ul li), который похож на тот, что был сделан на сайте (название сайта на картинке ) . Но я не могу с ходу понять... возможно ли сделать это без использования JS? Чисто через html и css3. Если можно, то как? Парочку попыток я предпринял. Сразу столкнулся с кучей проблем. Начиная с картинки, которая хоть и увеличивалась в блоке с помощью события hover, но была слегка забагована. Местами она просто навсего теряла эффект плавности и приобретала дерганное увеличение/уменьшение, что можно наблюдать в демонстрации к этой статье: http://tradebenefit.ru/art?id=190 . Если вы не видите дефектов, то просто побалуетесь подольше с наведением на изображения и возможно вы поймете о чем речь. Далее возник вопрос, как сделать блок, который затемнял изображение и в тоже время не мешал срабатывать методу hover для блока с картинкой под ним. Тоже самое и с текстом... чтобы и он и не мешал срабатывать блокам находящимся под текстовым блоком. В общем буду рад любым подсказкам, касаемо этого вопроса. Всем добра!