X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Выровнить блоки Div по центру
zik
zik
Topic Starter сообщение 6.7.2015, 23:20; Ответить: zik
Сообщение #1


Бывалый
****

Группа: User
Сообщений: 450
Регистрация: 15.12.2007
Из: Belarus
Поблагодарили: 87 раз
Репутация:   26  


Добрый день. подскажите как в существующий блок Div вставить ещё один, что бы все блоки были на 1 линии.

Есть код шапки

Код
<div id="header">
                   <h1 class="logo">
                    <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                        
                            <img id="logo" src="/wp-content/uploads/2015/07/logo.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
                        
                    </a>
                    </h1>      
</div>


Результат - шапка белого фона, по центру - логотип.

Хочу в шапку вставить контактные телефоны (справа), при этом что бы логотип остался по центру и вёрстка осталась адаптивной (бесплатный шаблон).

Вот код блока с телефонами

Код
<div id="numbersh"> <b>Телефоны</b> <div class="velcom"> +375 29 9914891 </div> <div class="mts"> +375 29 8339938 </div>


теоретически могу присвоить h1 logo и numbersh значения display:inline block, задать размеры 80 и 20%, но как тогда отцентрировать логотип?

Хотелось что бы на мобильном телефоне, блок с контактными телефонами уходил под логотип


--------------------
вэп дисаен
C вами с 2007 года
ICQ 532011
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
HillClimb
HillClimb
сообщение 7.7.2015, 0:13; Ответить: HillClimb
Сообщение #2


Частый гость
**

Группа: User
Сообщений: 76
Регистрация: 4.11.2013
Из: Украины
Поблагодарили: 22 раза
Репутация:   3  


zik, h1.logo {
text-align:center;
}
и картинка в h1 выровняется по центру
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zik
zik
Topic Starter сообщение 7.7.2015, 0:46; Ответить: zik
Сообщение #3


Бывалый
****

Группа: User
Сообщений: 450
Регистрация: 15.12.2007
Из: Belarus
Поблагодарили: 87 раз
Репутация:   26  


она выравняется относительно своего Diva, а слева от него же есть Div с телефонами...т.е получится не по центру экрана


--------------------
вэп дисаен
C вами с 2007 года
ICQ 532011
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
n1tr1k
n1tr1k
сообщение 7.7.2015, 0:49; Ответить: n1tr1k
Сообщение #4


Любитель BMW и бекона :)
*****

Группа: Active User
Сообщений: 767
Регистрация: 17.1.2009
Из: Saint-Petersburg
Поблагодарили: 266 раз
Репутация:   65  


zik, на сайт можно взглянуть или на локалке? Больше бы инфы. Какие у Вас на данный момент стили?

Если на скорую руку, то можно так:

HTML:
Код
<div id="header">
    <div id="logo">
        <h1 class="logo">
            <a href="/" rel="home">
                <img id="logo" src="/wp-content/uploads/2015/07/logo.png" alt="" />
            </a>
        </h1>
    </div>

    <div id="numbersh"><b>Телефоны</b><span class="velcom"> +375 29 9914891 </span> <span class="mts"> +375 29 8339938</span></div>
</div>


CSS:
Код
#header {
    width:100%;
    margin:0 auto;
    position:relative;
}
#logo {
    position:absolute;
    float:left;
    top:0;
    left:50%;
    margin-left:-20px;    
}
#numbersh {
    float:right;
}
#numbersh span {
    display:inline;
    padding:0 10px;
}


У лого margin-left пишите с минусом ширину логотипа, чтобы он был по центру.

Я там в Вашем коде немного подредактировал php, так как тестировал на обычном html-файлике.

Сообщение отредактировал n1tr1k - 7.7.2015, 1:00


--------------------
ICQ: 494-420


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Пропали блоки в продуктах Wordpress
6 mxxx 936 6.12.2017, 11:22
автор: mxxx
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыDIV-ная верстка PSD-макетов
Wordpress / Joomla / DLE
153 Ramos 45927 8.2.2014, 16:35
автор: Dimqa
Горячая тема (нет новых ответов) div - Верстка дизайнов
ищу работу!
35 Amicus 10373 10.5.2011, 18:50
автор: becks


 



RSS Текстовая версия Сейчас: 11.12.2017, 13:25
Дизайн