Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
therass
0 / 0 / 0
Регистрация: 03.07.2018
Сообщений: 6
1

Расположение элементов на странице

04.07.2018, 00:21. Просмотров 422. Ответов 10
Метки нет (Все метки)

Доброй ночи. Делаю свой первый сайт в качестве обучения. Читая литературу все кажется предельно ясно, но как только начинаешь что-то делать сразу всплывают косяки, решение которых, может и простое, но вообще не понятно какой и где искать ответ. На какие-то находишь, какие-то не даются. В общем...
Вот то что имеется на данный момент: рисунок 519.


HTML5
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
<body>
        <header>        </header>
            
            <div id="logo">
                <a href="index.html"><img src="images/logo.png" width="60" 
   height="60" alt="Пример"></a>  
               
            </div>
            <nav>
                <ul>
                    <!-- <li><a id="logo" href="index.html"><img src="images/logo.jpg"></a></li> -->
                    <li><a href="about.html">О нас</a></li>
                    <li><a href="uslugi.html">Услуги</a></li>
                    <li><a href="contacts.html">Контакты</a></li>
                    <li style="float:right"> <span id="phone">  8937-000-00-00</span></li>
                </ul>
            </nav>
            
            
            <article>
                123456789abcdefg    -------------------------------------------------------------------
                -------------------------------------------------------------------
                -------------------------------------------------------------------
                -------------------------------------------------------------------
                -------------------------------------------------------------------
                -------------------------------------------------------------------
                -------------------------------------------------------------------
                -------------------------------------------------------------------
                -
            </article>
            
            
            <footer>
                
            </footer>
        <!--</div>-->
    </body>
CSS
1
2
3
4
5
6
7
8
9
10
11
#logo{
    height: 90px;
    width: 90px;
    background-color: aqua;
    z-index: 15;
    position: sticky;
    top: 0px;
    /*left: 20px; /* СЪЕЗЖАЕТ */
    float: left;
        
}
В хтмл я вставляю картинку через
HTML5
1
2
<a href="index.html"><img src="images/logo.png" width="60" 
   height="60" alt="Пример"></a>
,явно указывая высоту 60 и ширину 60. Хотел бы сделать это через css, но не знаю как "обратиться" именно к картинке(или ссылке надо обращаться) пробовал: div#logo a img, div#logo a img src, #logo img, и много других вариантов, убирая или добавляя теги.
Так же хотел бы сделать картинку посередине блока div#logo, но, по той же причине ( не знаю как обратиться к картинке в блоке через css) не могу это сделать.
Также, хочу сместить блок div #logo на 20px вверх и на 20px влево. Когда смещаю влево:
CSS
1
2
3
4
5
6
7
8
9
10
11
#logo{
    height: 90px;
    width: 90px;
    background-color: aqua;
    z-index: 15;
    position: sticky;
    top: 0px;
    left: 20px; /* СЪЕЗЖАЕТ */
    float: left;
        
}
, то блок заежает на текст, хотя раньше тот его обтекал. рисунок 521.
Как сместить блок вверх - вообще не понятно.. как я понимаю нужно указать top: -20px, но top:0px уже указано для sticky.
На рисунке 520 видно что я хочу, примерно.
0
Миниатюры
Расположение элементов на странице   Расположение элементов на странице   Расположение элементов на странице  

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.07.2018, 00:21
Ответы с готовыми решениями:

Расположение элементов на странице
Всем привет! Ребята есть такая проблема: вот ссылка на страницу...

Расположение элементов на странице относительно друг друга
Здравствуйте, на странице html расположено несколько элементов и подключен для...

Расположение на странице
Всем добрый вечер! Возник вопрос: как расположить два объекта на странице...

Расположение текста на странице
Всем доброго времени суток. Есть фон для сайта. Но есть проблема с размещением...

Расположение div'ов на странице
Столкнулась с такой проблемой: div'ы не накладываются друг на друга... Не знаю,...

10
53ifbb
55 / 54 / 21
Регистрация: 01.03.2016
Сообщений: 570
04.07.2018, 01:38 2
Цитата Сообщение от therass Посмотреть сообщение
но не знаю как "обратиться" именно к картинке(или ссылке надо обращаться)
Когда вы пишите селектор начиная с решетки - это значит селектор по id. Т.е. в теге нужен атрибут id="..".
Можете прописать явно имя класса в тег class="...".
А что бы ни чего не прописывать в html, то ваши варианты должны работать, значит, что перекрывает или кешерится в браузере. Где тестите ?
0
therass
0 / 0 / 0
Регистрация: 03.07.2018
Сообщений: 6
04.07.2018, 01:46  [ТС] 3
Так есть 'id="logo"', это id блока див, в котором все остальное. Насколько понимаю, я могу обратиться к какому-либо тегу в блоке див с id logo, как бы указывая путь до этого тега. (обратиться к тегу img, который находится в div с id=logo)
Создал файлы с расширениям, пишу в brackets, потом просто открываю в яндекс браузере, вот и весь тест))) Дальше пока не умею...
0
Academik
660 / 439 / 172
Регистрация: 04.04.2013
Сообщений: 1,917
04.07.2018, 10:49 4
therass, в случае когда у элемента в html разметке указаны свойства, то они имеют приоритет перед свойствами, описанными в файле стилей.

Другими словами браузер высоту и ширину для картинки возьмет из html разметки.
CSS
1
2
3
4
#logo img{
    width: 20px;
    height: 20px;
}
HTML5
1
2
3
4
5
<div id="logo">
    <a href="index.html">
        <img src="images/logo.png" width="60" height="60" alt="Пример">
    </a>  
</div>
Если хотите через стили прописать, вам следует удалить атрибуты height и width у тега img.

Добавлено через 3 минуты
Цитата Сообщение от therass Посмотреть сообщение
Так же хотел бы сделать картинку посередине блока div#logo, но, по той же причине ( не знаю как обратиться к картинке в блоке через css) не могу это сделать.
CSS
1
2
3
4
5
#logo a{
    width: 20px;
    margin: 0 auto;
    display: block;
}
Тут надо учитывать один момент, свойство margin: 0 auto; работает в паре со свойством width.
1
therass
0 / 0 / 0
Регистрация: 03.07.2018
Сообщений: 6
04.07.2018, 13:05  [ТС] 5
Но это все не отвечает на главный вопрос: как поднять блок div с id logo на 20пх вверх, при этом оставив залипание. Он идет после хедера и перед навигацией в коде, соответственно он выравнивается навигацией по высоте.
И вообще, правильно ли я реализовываю этот логотип, или стоило бы сделать это как-то иначе?
0
Academik
660 / 439 / 172
Регистрация: 04.04.2013
Сообщений: 1,917
04.07.2018, 14:09 6
Цитата Сообщение от therass Посмотреть сообщение
И вообще, правильно ли я реализовываю этот логотип, или стоило бы сделать это как-то иначе?
Ну я бы заверстал как-то так:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body{margin: 0}
.clearfix:after{content: ''; clear: both; display: block;}
 
header{height: 200px; background: url('https://t4.ftcdn.net/jpg/00/82/57/87/240_F_82578711_nSmAiTenz6hTBOfGSjo5CvfZUa3J2mPf.jpg') top center no-repeat; overflow: hidden;}
header .logo{margin: 50px 0 0 50px; width: 90px; height: 90px; background: url('https://skachat-dlya-android.ru/wp-content/uploads/2017/03/comodo-mobile-security-mini.png'); background-size: 90px; display: block;}
 
.sub-header{padding: 15px 25px; background-color: #bbb;}
.sub-header nav{float: left;}
.phone{float: right; padding: 5px 0 5px 28px; background: url('https://www.freeiconspng.com/uploads/active-call-phone-icon--icon-search-engine-11.png') left no-repeat; background-size: 15px 15px;}
 
.menu{padding: 0; margin: 5px 0 0 0;}
.menu li{list-style-type: none; margin-right: 15px; display: inline;}
.menu li a{color: #000;}
.menu li a:hover{text-decoration: none;}
 
article{padding: 20px;}
article h1{margin-top: 0;}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<header>
    <a href="/" class="logo"></a>
</header>
 
<div class="sub-header clearfix">
    <nav>
        <ul class="menu">
            <li><a href="about.html">О нас</a></li>
            <li><a href="uslugi.html">Услуги</a></li>
            <li><a href="contacts.html">Контакты</a></li>
        </ul>
    </nav>
    <div class="phone">8937-000-00-00</div>
</div>
 
<article>
    <h1>Заголовок страницы</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
 
<footer>
 
</footer>
https://jsfiddle.net/8L70dsvk/
0
therass
0 / 0 / 0
Регистрация: 03.07.2018
Сообщений: 6
04.07.2018, 18:15  [ТС] 7
Но у вас нет "залипашки ". И как я понимаю навигация находится в хедере, а в будущем я думаю в мобильной версии вообще убратт хедер. И могут возникнуть проблемы.
Так же все же не понятно как сдвинуть блок с лого выше на 20пх, сохранив залипашку и чтобы текст норильно оттекал и все остальное тоже..
По поводу моего вопроса как лушче сделать, то имелось в виду технмчески, а результат я хочу вмдеть именно такой как рассказывал...
0
Academik
660 / 439 / 172
Регистрация: 04.04.2013
Сообщений: 1,917
04.07.2018, 19:40 8
therass, что такое "залипашка"?

Добавлено через 17 секунд
Цитата Сообщение от therass Посмотреть сообщение
И как я понимаю навигация находится в хедере
Она под хидером расположена.
0
therass
0 / 0 / 0
Регистрация: 03.07.2018
Сообщений: 6
05.07.2018, 01:31  [ТС] 9
что такое залипашка? position: sticky; ну меня как бы залипает не прокручивается выше экрана.
Так же я хочу с логотипом. И оно как бы работает, но я не могу поднять логотип выше, потому что для sticky там указана позиция top:0 где он должен залипнуть (как я понимаю).
0
53ifbb
55 / 54 / 21
Регистрация: 01.03.2016
Сообщений: 570
05.07.2018, 09:19 10
Цитата Сообщение от therass Посмотреть сообщение
position: sticky;
На Gecko не работает. Надо другой подход использовать
0
therass
0 / 0 / 0
Регистрация: 03.07.2018
Сообщений: 6
05.07.2018, 18:10  [ТС] 11
Что такое gecko? И какой другой подход?
0
05.07.2018, 18:10
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.07.2018, 18:10

Расположение картинок на странице HTML
Добрый день. Такой вопрос: как сделать так, чтобы следующая картинка на...

Задать расположение картинки на веб-странице
Добрый день. Как можно задать координаты расположения картинки на...

Расположение на странице. ВИД: Список/Витрина
Увидел такую интересную фишку: &quot;список/витрина&quot; При нажатии того или иного...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru