ok, forse sono stato un po' troppo avaro di spiegazioni. Ora sarà più specifico.
Questa è ciò che sono riuscito ad ottenere...accantonando per un'attimo il logo.
Vi allego anche le porzioni rilevanti del css e il markup utilizzato.
codice:
<body>
...
<div id="slogan_wrapper">
<div id="slogan">
Il nuovo concetto di disinfestazione.</p>
</div>
</div>
</body>
...
codice:
/* ********** GENERAL SETUP ********** */
/* ********** Tipografia ************* */
html{
font-size: 100.01%;
}
body{
font: 0.75em "Lucida Sans Unicode","Lucida Grande",Lucida,Arial,sans-serif;
}
h1{
font-size: 2.4em
}
h2{
font-size: 1.8em
}
h3{
font-size: 1.4em
}
h4{
font-size: 1.2em
}
h5{
font-size: 1em
}
h6{
font-size: 0.85em
}
/* ********** Line-Height ************ */
p, blockquote, pre, ol, dl, ul, form {
line-height:1.5
}
/* ********** Whitespace ************* */
html, body
{
margin: 0;padding: 0; border: 0
}
h1, h2, h3, h4, h5, h6
{
margin: 0.7em 0 0.2em
}
address, blockquote, dl, form,fieldset, ol, table, p, pre, ul
{
margin-top: 0.2em;
margin-bottom: 1.2em
}
/* ******* TEMPLATE SETTINGS ********* */
/* ******* General ******************* */
body {
background: #ececed url(../img/bg.png) repeat-x top;
color: #333 ;
text-align:center
}
/* ******* Slogan ******************** */
#slogan_wrapper {
position: relative;
top: 130px;
background-color: #D4D4D4;
clear:both;
text-align:right;
padding-top: 1px;
padding-bottom: 1px;
}
#slogan {
background: #36a4d5 url(../img/grediente_slogan.png) repeat-x top;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
#slogan p {
width: 964px;
margin: 0 auto;
font-size: 1.333333333em;
font-weight:bold;
line-height: 2.3125em;
color: #fff;
background: transparent;
}
Scusate la "sbrodolata" di CSS, ma ho preferito postarlo tutto per completezza e chiarezza.
Ora, sono riuscito ad ottenere una barra blu, sfumata, per lo slogan. Aumentando la grandezza del carattere del browser, aumenta in proporzione anche l'altezza della barra che lo contiene.
La nota insolita, è il posizionamento relativo. L'ho posizionato a 130px dall'alto, in modo da poter vedere le propozioni e cose così.
Quello che devo inserire adesso è questa immagine per l'header
in modo che si sovrapponga alla barra che ho generato. Come posso fare? Forse racchiudendo slogan_wrappe che il contenitore dell'immagine del logo dentro lo stesso contenitore e utilizzando la proprietà z-index?
Per favore aiutatemi che sto nella melma.
Ciao.
C4Rd0.
Rispondi quotando
