Lepszy sposób na przesuwanie tekstu na wierzchu obrazu o różnych szerokościach kontenera

Przeprojektowuję witrynę, a różne sekcje (nagłówek, obraz banera, główny itp.) Mają tło, które rozciąga się na całej długości, jednak treść jest zawarta na określoną szerokość, a to pole jest wyśrodkowane.Lepszy sposób na przesuwanie tekstu na wierzchu obrazu o różnych szerokościach kontenera

Jednak w projekcie "obraz baneru" (który jest obrazem poniżej nagłówka, ale nad główną treścią) wykracza poza szerokość pozostałej treści. Początkowo było to łatwe, dopóki nie pojawi się potrzeba, aby tekst na górze obrazu banera, a tekst musiałby być zgodny z resztą tekstu.

Nie mogę użyć obrazu tła CSS, ponieważ na niektórych stronach obszar obrazu baneru będzie suwakiem, który wymaga tagów.

Mam roztwór roboczy, ale wydaje się, niezgrabne i miałem nadzieję znaleźć lepszą metodę: http://jsfiddle.net/PkStg/10/

HTML:

<div class="header"> 
    <div class="content-wrapper"> 
     header text 
    </div> 
</div> 
<div class="banner"> 
    <div class="content-wrapper"> 
     <div class="banner-text-outer"> 
      <div class="banner-text-inner"> 
       <h2>banner text header</h2> 
       <p>banner text paragraph</p> 
      </div> 
     </div> 
    </div> 
    <div class="banner-image-wrapper"> 
     <img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" /> 
    </div> 
</div> 
<div class="main-content"> 
    <div class="content-wrapper"> 
     main content text 
    </div> 
</div>

CSS:

.header, .banner, .main-content { width: 100%; } 
.header { background: red;} 
.banner { background: green; } 
.main-content { background: yellow; } 
.content-wrapper { 
    margin: 0 auto; 
    max-width: 300px; 
} 

.banner-text-outer { 
    position: relative; 
} 
.banner-text-inner { 
    position: absolute; 
    top: 10px; 
} 

.banner-image-wrapper { 
    margin: 0 auto; 
    max-width: 400px; 
    min-width: 300px; 
    font-size: 0; 
} 
.banner-image-wrapper img { 
    width: 100%; 
}

Źródło

2013-06-27 gregtheross

Skrócenie zapytanie pobierze Ci kilka odpowiedzi –

zakładam drugą '.banner -text-outer' powinno być '.ba nner-text-inner'? – Justin

Nie widzę użycia dla '.banner-text-outer' i' .banner-text-inner'. Możesz usunąć '.banner-text-outer' i użyć dopełnienia, aby wyrównać tekst wewnątrz (lub margines na znacznikach' h2' i 'p'). Poza tym uważam, że kod wygląda na czysty. –

wiem że nie chcesz używać obrazu tła, ale tutaj jest rozwiązanie, które używa tego dla każdego, kto widzi stronę.

Być może twój suwak może wykorzystać obraz tła?

ten powinien zrobić: jsFiddle

HTML

<body> 
    <div class="header"> 
     <div class="content-wrapper"> 
      header text 
     </div> 
    </div> 
    <div class="banner"> 
     <div class="content-wrapper"> 
      <div class="banner-text-outer"> 
       <div class="banner-text-inner"> 
        <h2>banner text header</h2> 
        <p>banner text paragraph</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="main-content"> 
     <div class="content-wrapper"> 
      main content text 
     </div> 
    </div> 
</body>

CSS

.header, .banner, .main-content { width: 100%; } 

.header { background: red;} 
.banner { background: green; } 
.main-content { background: yellow; } 
.content-wrapper { 
    margin: 0 auto; 
    max-width: 300px; 
} 

.banner { 
    background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat; 
    background-size: contain; 
    background-position: center; 
    min-height: 150px; 
}

Źródło

2013-06-27 16:23:24 screenmutt

dziękuję, nie jest to CAŁKOWICIE od stołu, po prostu przeszukałem daleko i wprowadziłem spory zakres dostosowania do suwaka, którego obecnie używamy. Nadal dał ci uprowadzenie do szczegółowego i wykonalnego rozwiązania i może wrócić do tego pomysłu.Jednak w twoim kodzie, ponieważ nie ma już tagu , nie powinno być w tekście rozwiązania baner-tekst-zewnętrzny i tekst-baner-wewnętrzny? – gregtheross

Zakładam, że używasz ich do innych stylów. – screenmutt

To jest późna akceptacja twojej odpowiedzi, ale ostatecznie zepsułem się i użyłem zastępowania obrazu tła =) – gregtheross

Lepszy sposób na przesuwanie tekstu na wierzchu obrazu o różnych szerokościach kontenera

Odpowiedz

Powiązane problemy