Un modo migliore per spostare il testo sopra un'immagine con diverse larghezze del contenitore

Sto riprogettando un sito e le diverse sezioni (intestazione, immagine banner, principale, ecc.) Hanno uno sfondo che si estende fino in fondo, tuttavia il contenuto è contenuto in una certa larghezza e quella casella è centrata.Un modo migliore per spostare il testo sopra un'immagine con diverse larghezze del contenitore

Tuttavia, nel disegno la "immagine banner" (che è un'immagine sotto l'intestazione ma sopra il contenuto principale) si estenderà oltre la larghezza del resto del contenuto. All'inizio questo è stato facile fino a quando non è emersa la necessità di avere del testo sopra l'immagine del banner e quel testo avrebbe dovuto essere allineato con il resto del testo.

Non riesco a utilizzare l'immagine di sfondo CSS perché su alcune pagine l'area dell'immagine del banner sarà un dispositivo di scorrimento, che richiede tag.

ho una soluzione di lavoro, ma sembra goffo e speravo di trovare un metodo migliore: 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%; 
}

fonte

2013-06-27 gregtheross

Accorciare la tua domanda vi recuperare alcune risposte –

Suppongo che il secondo '.banner -text-outer' dovrebbe essere '.ba nner-text-inner'? – Justin

Non vedo l'uso di '.banner-text-outer' e' .banner-text-inner'. Puoi rimuovere '.banner-text-outer' e usare padding per allineare il testo all'interno (o margine sui tag' h2' e 'p'). Altro che penso che il codice sia pulito. –

so che non volevi usare l'immagine di sfondo, ma qui c'è una soluzione che la usa per chiunque veda la pagina.

Forse il tuo cursore potrebbe utilizzare l'immagine di sfondo?

Questo dovrebbe farlo: 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; 
}

fonte

2013-06-27 16:23:24 screenmutt

grazie, non è COMPLETAMENTE fuori dal tavolo, ho appena cercato in lungo e in largo e ho messo una buona quantità di personalizzazione nel cursore che stiamo usando al momento. Ancora ti ha dato un upvote per una soluzione dettagliata e praticabile e può rivisitare l'idea.Tuttavia, nel tuo codice, dato che non esiste più un tag , non dovrebbe essere necessario utilizzare banner-text-outer e banner-text-inner nella soluzione? – gregtheross

Supponevo che li stavate usando per altri stili. – screenmutt

È un'accettazione tardiva della tua risposta, ma alla fine mi sono rotto e uso la sostituzione dell'immagine di sfondo =) – gregtheross

Un modo migliore per spostare il testo sopra un'immagine con diverse larghezze del contenitore

risposta

Problemi correlati