Как остановить этот баннер CSS от переполнения при дублировании? - PullRequest
Новая
       11

Как остановить этот баннер CSS от переполнения при дублировании?

0 голосов
/ 28 мая 2011

На этой странице я построил заголовок ленты CSS, в котором текст / значки установлены в фоновом режиме.

Наборы будут продублированы по всей странице. Баннер отлично работает только на одном наборе, нопосле того, как я попытаюсь создать div под фоном, охватывающим весь раздел.

HTML: 

<div>


<p class="paddingbottom"><span class="bold">WHO ARE THEY? </span> Deborah is an active member of Golden Seeds a nation-wide angel investor network that provides early stage and growth capital to women-led and women-owned companies across all sectors.  During summer 2010, Jamie interned for Golden Seeds and learned how entrepreneurial ventures are funded in a collaborative environment where women’s potential for economic growth is actualized.</p>

<p>.If you are an accredited investor interested in joining Golden Seeds, please click here.</p>
</div>

</div>
<div class="clear"></div>


<div>
<p class="headerorg"><span class="shiftorg">Golden Seed </span> <span class="right"><span class="whitetitle">Website:  <a href="http://www.goldenseeds.com/">goldenseeds.com</a></span><a href="#"><img src="" alt="facebook"/></a><a href="#"><img src="http://jumpthru.net/newsite/wp-content/themes/twentyten/images/other/twitter.png" alt="twitter"/></a></span></p>


<img src="" />
<div class="leftcolorg">

<p class="paddingbottom"><span class="bold">WHO ARE THEY? </span> Deborah is an active member of Golden Seeds a nation-wide angel investor network that provides early stage and growth capital to women-led and women-owned companies across all sectors.  During summer 2010, Jamie interned for Golden Seeds and learned how entrepreneurial ventures are funded in a collaborative environment where women’s potential for economic growth is actualized.</p>

<p>WHY ARE THEY IN OUR NETWORK?JumpThru collaborates with Golden Seeds to help increase the number of women-led tech companies that get the support and funding they need to grow.  Advise on tech deals, collaborate on educational programming.If you are an entrepreneur seeking funding, please click here for the application to Golden Seeds’ program. 

If you are an accredited investor interested in joining Golden Seeds, please click here.</p>
</div>

</div>
<div class="clear"></div>

CSS: 

.headerorg {
        position: relative;
        color: #fff;
        font-style:italic;
        text-transform:uppercase;
        margin: 0 0 20px -15px;
        padding: 1px 0 2px;
        background: #ff9900;
        }


.headerorg a {
    color:#FFF;
}


.headerorg:before
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -8px;
    }

.headerorg:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #8b5f1d;
        left: 0;
    }


.shiftorg {
    padding-left: 15px;
    background-position: 5px 50%;
    background-image: url();
    background-repeat:no-repeat;
}

Ответы [ 2 ]

3 голосов
/ 28 мая 2011

Проблема заключается в том, что очистка с плавающей точкой не работает.

Чтобы выполнить очистку с плавающей точкой, вы используете следующее: 

<div class="clear"></div>

Это надежный, хотя и примитивный метод.

Проблема с вашим CSS ( строка 321, style.css): 

.clear {
    :both;
}

Это должно быть: 

.clear {
    clear: both;
}

Выочевидно, смутился тот факт, что ваше class и свойство оба имеют имя clear.

0 голосов
/ 28 мая 2011

Есть <p class="headerorg">....Если вы удалите атрибут class, он будет выглядеть мне хорошо.

...