Добавление кнопки-ссылки в хедер сайта.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Pavl, 17 сен 2016.

  1. Pavl

    Pavl

    Регистрация:
    17 сен 2016
    Сообщения:
    10
    Симпатии:
    0
    Добрый день!
    Пытаюсь создать свой первый сайт на CMS Joomla и возникла следующая проблема. Не получается правильно вставить кнопку-ссылку в хедер сайта.
    Пробую два варианта:
    1) В свойствах кнопки-ссылки задаю относительное позиционирование. Результат - кнопка устанавливается, но при этом высота хедера увеличивается на высоту кнопки. то есть хедер становится больше по высоте и вверху хедера появляется дополнительный ненужный белый фон. То есть, получается не красиво.
    2) В свойствах кнопки-ссылки задаю абсолютное позиционирование. Результат - кнопка устанавливается и на этот раз высота хедера не увеличивается и это хорошо. Только, возникает другая проблема - при сокращении окна браузера кнопка-ссылка начинает "плавать" по сайту.
    Цель - сделать так, чтобы при вставке кнопки-ссылки в хедер, хедер не становится больше по высоте и при этом не начинал "плавать" по сайту! Что конкретно нужно для этого сделать?
    Привожу часть кода index.php и template.css:

    index.php
    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
    PHP:
    #blok2{ position: relative; left:855px; top:130px; }
    Если нужно показать больше кода, то я добавлю.
     
  2. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    54
    Симпатии:
    3
    Доброго, используй position: absolute; для кнопки. А position: relative; для родителя относительно которого он будет позиционироватся. Заменить left:855px; на right (в px или %) предпологаю б что этого будет достаточно.
     
  3. wh1tegray

    wh1tegray

    Регистрация:
    19 сен 2016
    Сообщения:
    5
    Симпатии:
    1
    1) у .header добавь position:relative; а у кнопки absolute, при этом поиграйся с позиционированием относительно header (неплохо бы его стиль выложить сюда)
    2) в класс блока добавить margin-bottom: -130px; и посмотреть результат
     
  4. Pavl

    Pavl

    Регистрация:
    17 сен 2016
    Сообщения:
    10
    Симпатии:
    0
    Мной были внесены коррективы в файл index.php и template.css:
    index.php

    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
    PHP:
    #blok2{ position: absolute; right:10px; top:55px; margin-bottom: -130px;}
    PHP:
    .header {
        
    margin-bottom10px;
        
    position:relative;

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