Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 5

#1 Pavl

Pavl

    Прохожий

    Топикстартер
  • Участник
  • 0
    18 сообщ.

Отправлено 28 Сентябрь 2016 в 21:35

Суть вопроса в том, что при уменьшении окна браузера, происходит уменьшение хедера с изображением. А размер кнопки при этом остаётся неизменным. То есть на экране происходит диспропорция самого хедера и кнопки-ссылки в хедере. Как сделать, чтобы при уменьшении (или увеличении) окна браузера пропорционально друг другу изменялся размер хедера и кнопки-ссылки в хедере?
Спасибо!
 

Привожу часть кода index.php и template.css:
 

index.php

<!-- Header -->          
       <header class="header" role="banner" >
         <a href="index.php/svyazatsya" id="blok2"><img src="images/headers/vopros.png"></a>
             
             
       <div class="header-inner clearfix">
             
               <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                   <?php echo $logo; ?>
                   <?php if ($this->params->get('sitedescription')) : ?>
                       <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
                   <?php endif; ?>
               </a>
               <div class="header-search pull-right">
        </div>
                 
           </div>
        </header>

template.css

#blok2{ position: absolute; right:10px; top:55px; margin-bottom: -130px;}

.header {     margin-bottom: 10px;     position:relative;

  • 0

Спонсор

#2 motek

motek

    злой как @

  • V.I.P.
  • 320
    730 сообщ.

Отправлено 29 Сентябрь 2016 в 00:28

и Вы хотите, чтобы по одной строчке стилей Вам помогли? выложите стили всей шапки...

если теоретически, то у ссылки должны быть прописаны размеры...если адаптивный дизайн, то размеры прописываются под каждый экран, а если резиновый - то в процентах...


  • 1

#3 Pavl

Pavl

    Прохожий

    Топикстартер
  • Участник
  • 0
    18 сообщ.

Отправлено 29 Сентябрь 2016 в 15:15

Почему-же? Я готов выложить здесь хоть весь код движка CMS Joomla вместе со всеми файлами, если это необходимо.

Просто я только начинаю изучать сайтостроение, поэтому не совсем понимаю, что значит:

выложите стили всей шапки...

 

Я нашёл все стили, содержащие в своём названии .header: 

.page-header {
padding-bottom: 8px;
margin: 18px 0 27px;
border-bottom: 1px solid #eee;
.dropdown .dropdown-menu .nav-header {
padding-left: 20px;
padding-right: 20px;
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
text-transform: uppercase;
}


.nav li + .nav-header {
margin-top: 9px;
}
.nav-list .nav-header {
;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}


.modal-header .close {
margin-top: 2px;
}


.modal-header h3 {
margin: 0;
line-height: 30px;
}
.page-header h1 small {
display: block;
line-height: 18px;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.nav-collapse .nav .nav-header {
color: #555;
text-shadow: none;
}
.page-header {
margin: 2px 0px 0px 0px;
padding-bottom: 5px;
}
.header {
margin-bottom: 10px;
}


.header.finder {
margin-top: 14px;
}


.header.finder .btn {
margin-top: 0px;
}
.well .page-header {
margin: 0px 0px 5px 0px;
}
.module-header {
padding-bottom: 17px;
margin: 20px 0 18px 0;
border-bottom: 1px solid #eeeeee;
}
.header .nav > li:last-child > .dropdown-menu,
.item-actions .dropdown-menu,
.item-comment .dropdown-menu {
left: initial;
right: 0;
}
.header {
background: transparent;
}


.header .brand {
float: none;
display: block;
text-align: center;
}


.header .nav.pull-right,
.header-search {
float: none;
display: block;
}


.header-search form {
margin: 0;
}


.header-search .search-query {
width: 90%;
}


.header .nav-pills > li > a {
border: 1px solid #ddd;
border-bottom: 0;
margin: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: 0;
}


.header .nav-pills > li:first-child > a {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}


.header .nav-pills > li:last-child > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
border-bottom: 1px solid #ddd;
}

Естественно, при необходимости выложу больше кода.


  • 0

#4 Jackito

Jackito

    Designer

  • Участник
  • 103
    289 сообщ.

Отправлено 01 Октябрь 2016 в 21:09

Браузер за вас не будет изменять размеры вашего сайта, это все прописывается в коде. Читайте про медиа запросы.


Сообщение отредактировал Jackito: 01 Октябрь 2016 в 21:12

  • 1

#5 motek

motek

    злой как @

  • V.I.P.
  • 320
    730 сообщ.

Отправлено 03 Октябрь 2016 в 20:29

Естественно, при необходимости выложу больше кода.

не надо "больше", надо "нужный"... :)
 

 <header class="header" role="banner" >
         <a href="index.php/svyazatsya" id="blok2"><img src="images/headers/vopros.png"></a>

я так понимаю, это код кнопки?
откройте сайт в браузере и через инспектор кода посмотрите, какие стили относятся к данному элементу,
а так же к элементам, являющимся родительскими для данной кнопки...вот эти стили сюда и выложите...
можете добавить картинку - как эта кнопка выглядит
  • 1

#6 Pavl

Pavl

    Прохожий

    Топикстартер
  • Участник
  • 0
    18 сообщ.

Отправлено 05 Октябрь 2016 в 22:40

 

Естественно, при необходимости выложу больше кода.

не надо "больше", надо "нужный"... :)
 
 <header class="header" role="banner" >
         <a href="index.php/svyazatsya" id="blok2"><img src="images/headers/vopros.png"></a>
я так понимаю, это код кнопки?
откройте сайт в браузере и через инспектор кода посмотрите, какие стили относятся к данному элементу,
а так же к элементам, являющимся родительскими для данной кнопки...вот эти стили сюда и выложите...
можете добавить картинку - как эта кнопка выглядит

 

 

Стили, относящиеся к данному элементу:
.header {
    margin-bottom: 10px;
    position: relative;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}


#blok2 {
    display: block;
    position: absolute;
    right: 0px;
    top: 55px;
    margin-bottom: -130px;
}
a {
    color: #0a0a0a;
}
a {
    color: #08c;
    text-decoration: none;
    font-family: monotype corsiva;
    font-size: 20px;
    margin: 1px;
}


img {
    border: none;
}
img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}





Так выглядит кнопка:

 

f353f945f7fe.png

 


Браузер за вас не будет изменять размеры вашего сайта, это все прописывается в коде. Читайте про медиа запросы.

 

Да, я понимаю, что это все прописывается в коде. Только, не понимаю - где именно?  :) 


Сообщение отредактировал Pavl: 05 Октябрь 2016 в 22:41

  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей