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

Статус
Закрыто для дальнейших ответов.

Pavl

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

Привожу часть кода 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;
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
и Вы хотите, чтобы по одной строчке стилей Вам помогли? выложите стили всей шапки...
если теоретически, то у ссылки должны быть прописаны размеры...если адаптивный дизайн, то размеры прописываются под каждый экран, а если резиновый - то в процентах...
 
  • Like
Реакции: Pavl

Pavl

Active Member
Регистрация
28.09.2016
Сообщения
43
Почему-же? Я готов выложить здесь хоть весь код движка 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;
}
Естественно, при необходимости выложу больше кода.
 

Jackito

Designer
Регистрация
28.01.2011
Сообщения
289
Браузер за вас не будет изменять размеры вашего сайта, это все прописывается в коде. Читайте про медиа запросы.
 
  • Like
Реакции: Pavl

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
Pavl сказал(а):
Естественно, при необходимости выложу больше кода.
не надо "больше", надо "нужный"... :)

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

Pavl

Active Member
Регистрация
28.09.2016
Сообщения
43
motek сказал(а):
Естественно, при необходимости выложу больше кода.
не надо "больше", надо "нужный"... :)

Pavl сказал(а):
<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;
}
Так выглядит кнопка:




Jackito сказал(а):
Браузер за вас не будет изменять размеры вашего сайта, это все прописывается в коде. Читайте про медиа запросы.
Да, я понимаю, что это все прописывается в коде. Только, не понимаю - где именно? :)
 
Статус
Закрыто для дальнейших ответов.
Верх Низ