Как разместить изображения рядом с логотипом? - PullRequest
Новая
       39

Как разместить изображения рядом с логотипом?

0 голосов
/ 04 октября 2019

Я использую Wordpress 5.2.2 с темой Newspress Extend в качестве родителя.

Я восстановил настройки темы по умолчанию в разделе Внешний вид -> Параметры Newspress, пытаясь исправить что-то не связанное, и потерял собственный HTML / встроенный CSS, который перемещал рекламные объявления, один слева и один справа, чтобы быть сэндвичем. логотип. К сожалению. Я попытался угадать код замены, основываясь на моих очень ограниченных знаниях html / css, и он отображает их не только над логотипом, но и над верхним меню. Я знаю, что это изменение может быть сделано в этом разделе, потому что я просто пытаюсь восстановить его до того, что было от предыдущего разработчика. Помощь будет принята с благодарностью.

Внешний вид -> Параметры Newspress -> Общие параметры -> Пользовательский код в области головы (все страницы) 

<a href=https://www.flalottery.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery" style="float:left; max-width: 25%;"></a>

<a href="https://www.southeasternhonda.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"/ style="float: right; max-width: 25%;"></a>

пользовательский снимок экрана css

снимок экрана с логотипом в пользовательском интерфейсе темы Newspress

соответствующая страница

1 Ответ

0 голосов
/ 04 октября 2019

Ваши объявления находятся вне контейнера div. На самом деле они сейчас находятся над метатегами сайта. CSS - мощный инструмент, но его не следует использовать для чрезмерного исправления или маскировки неправильной структуры HTML. Вы должны вставить свои объявления в соответствующие элементы.

Вот как должен выглядеть ваш HTML, особенно для вашего заголовка div: 

<div id="header">
        <div id="header-content">

    <!-- Site Titele and Description Goes Here -->
    <div class="topadlft"><a href="https://www.flalottery.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery"></a><a href="#" target="_blank"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></a></div> 
    <a href="https://ebonynewstoday.com/"><img class="site-logo" src="http://ebonynewstoday.com/wp-content/uploads/2017/04/Ebony_LOGOHorizontal_Color.gif"><h1 class="site-title-hidden">Ebony News Today</h1></a>

    <h2 class="site-title-hidden">"The Heartbeat of Our Community"</h2>        
    <div class="topadrt"><a href="https://www.southeasternhonda.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"></a><a href="#" target="_blank"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></a></div> 

    </div><!-- header-content -->
    <div class="heading-date">Friday, October 4, 2019</div>  
    </div>

Вы также можете отключить «display: none;»селекторы в вашем CSS-файле для классов "topadlft" и "topadrt". Также удалите встроенные стили из каждого рекламного изображения. Вы хотите, чтобы классы div, содержащие рекламу, выполняли здесь тяжелую работу. Встроенные стили просто вызовут дальнейшие осложнения.

После того, как вы обратились к вышесказанному, вы должны получить что-то похожее на это:

Фиксированное изображение заголовка

...