div Float left e div a destra che non vedono spazio a SX

[esseAemme]

Buongiorno a tutti,

:-)

è la prima volta che scrivo, devo presentarmi da qualche parte? Non ho visto messaggi di servizio. Se sì fatemi presente così procedo.


Veniamo al problema tecnico:
Devo preparare una news, vedete l'immamgine allegata, e il testo va ad appiccicarsi a sinistra e non ne vuole sapere di margini o padding...

Dato che il problema è sorto per avere la corretta visualizzazione con IE, ho adottato una vostra guida e questo è quanto ho nei miei fogli:


FOGLIO HTML

Header
<!--[if IE]>

<style type:"text/css"> span.newsmanifest{font-size:150px; padding-top: 15px; height: auto} </style>

<![endif]-->
/Header


Body
<div class="newssf">
<span class="newsmanifest">[img]immagine.jpg[/img]</span>
<div class="newstestodata">DataNews</div>
<div class="newstestooggetto">OggettoNews</div>
<div class="newstestointro">TestoIntro</div>
</div>

CSS
.newssf { width: 1040px; height: 150px; margin: 0px;
background-image: url('../img/foglia_boxNews.jpg');
background-repeat: no-repeat;
background-position: left;
}

span.newsmanifest { width: 150px; height: 150px; vertical-align: middle;
line-height: 150px; text-align: center; padding-top: 15px;
float: left;
}
span.newsmanifest img { vertical-align: middle; }


div.newstestodata
{
margin-left: 30px; padding: 15px 30px 10px 30px;
border-left-color: #ffffff; border-left-width: 15px;
font-family: verdana, arial, sans-serif; font-size: 14px; color:#074b8a;
text-align: justify;
}

div.newstestooggetto
{
font-family: verdana, arial, sans-serif; font-size: 16px; font-weight: bold;
color:#0000FF; text-align: justify; padding: 5px 30px 10px 30px;
}

div.newstestointro
{
font-family: verdana, arial, sans-serif; font-size: 14px; color:#074b8a;
line-height: 2em; text-align: justify; padding: 5px 30px 10px 30px;
}

In allegato l'immagine di come si presenta questa news, e come potete notare ha la data, l'oggetto e il testo anteprima che si appicca a sinistra, e margini e padding left li ignora completamente, perchè?

Al momento non ho più idee se non ripristinare le tabelle...
Grazie
Sam

[mangusta91]

Ciao, benvenuto. Per una corretta lettura del codice per favore inseriscilo fra i tag [ CODE ] e [ /CODE ] (ovviamente senza spazi), altrimenti non si capisce molto. Il problema che riscontri è visualizzabile da qualche parte o stai lavorando solo in locale?

[esseAemme]

Ciao Mangusta91,

grazie per la risposta. Sto lavorando in locale

Procedo a modificare come hai indicato:

FOGLIO HTML

Sezione Header del documento html - inserito per browser IE

<!--[if IE]>

<style type:"text/css"> span.newsmanifest{font-size:150px; padding-top: 15px; height: auto} </style> 

<![endif]-->

Sezione Body del foglio html

<div class="newssf">
<span class="newsmanifest">[img]immagine.jpg[/img]</span>
<div class="newstestodata">DataNews</div>
<div class="newstestooggetto">OggettoNews</div>
<div class="newstestointro">TestoIntro</div>
</div>

CSS - Foglio di stile

.newssf { width: 1040px; height: 150px; margin: 0px;
background-image: url('../img/foglia_boxNews.jpg');
background-repeat: no-repeat;
background-position: left;
}

span.newsmanifest { width: 150px; height: 150px; vertical-align: middle;
line-height: 150px; text-align: center; padding-top: 15px;
float: left;
}
span.newsmanifest img { vertical-align: middle; }


div.newstestodata
{
margin-left: 30px; padding: 15px 30px 10px 30px;
border-left-color: #ffffff; border-left-width: 15px;
font-family: verdana, arial, sans-serif; font-size: 14px; color:#074b8a;
text-align: justify;
}

div.newstestooggetto
{
font-family: verdana, arial, sans-serif; font-size: 16px; font-weight: bold;
color:#0000FF; text-align: justify; padding: 5px 30px 10px 30px;
}

div.newstestointro
{
font-family: verdana, arial, sans-serif; font-size: 14px; color:#074b8a;
line-height: 2em; text-align: justify; padding: 5px 30px 10px 30px;
}

Il risultato che voglio ottenere è che i div
newstestodata
newstestooggetto
newstestointro

siano spostati di 5 pixel più a destra, perchè ora sono appiciccati al bordo...

Grazie
sAm

[mangusta91]

sei in grado farmi avere "immagine.jpg"? così provo direttamente io a capire dove sta il problema

[esseAemme]

Ciao Mangusta 91,

immagine jpg -> è l'immagine bianca quadrata sopra il box arancione che ha angoli arrotondati a sinistra. E' quella che puoi vedere nel primo messaggio, dove all'interno c'è scritto Immagine per News 120x120.

foglia_boxNews ->Il box arancione a sinistra e il box bordato blu a destra è una unica immagine larga 1017 pixel e alta 150 pixel.


Ti allego foglia_boxNews cosi vedi lo sfondo

[mangusta91]

dovrei esserci riuscito.. modifica così il tuo codice:

CSS:

.newssf 
{ width: 1040px; 
height: 150px; 
margin: 0px; 
background-image: url('../img/foglia_boxNews.jpg'); 
background-repeat: no-repeat; background-position: left; } 

.newsmanifest 
{ width: 150px; 
height: 150px; 
vertical-align: middle; 
line-height: 150px; 
text-align: center; 
padding-top: 15px; 
float: left; } 

.newsmanifest img 
{ vertical-align: middle; } 

div.newstestodata 
{ margin-left: 30px; 
padding: 15px 30px 10px 10px; 
border-left-color: #ffffff; 
border-left-width: 15px; 
font-family: verdana, arial, sans-serif; 
font-size: 14px; 
color:#074b8a; 
text-align: justify; } 

div.newstestooggetto 

{ font-family: verdana, arial, sans-serif; 
font-size: 16px; 
font-weight: bold; 
color:#0000FF; 
text-align: justify;
padding: 5px 30px 10px 10px; } 

div.newstestointro 
{ font-family: verdana, arial, sans-serif; 
font-size: 14px; 
color:#074b8a;
line-height: 2em; 
text-align: justify; 
padding: 5px 30px 10px 10px; } 

#box 
{ width: 890px; 
margin-left: 150px; }

BODY:

<body>

<div class="newssf">
<div class="newsmanifest">[img]immagine.jpg[/img]</div>
<div id="box">
<div class="newstestodata">DataNews</div>
<div class="newstestooggetto">OggettoNews</div>
<div class="newstestointro">TestoIntro</div>
</div> 
</div>


</body>

così facendo ora il tuo css se gli cambi il padding ti obbedisce

[esseAemme]

Ciao Mangusta91

cavolo cavolo cavolo!!!!

Anch'io avevo fatto un div box, il mio si chiama newstesto, ma ora ho capito:

il float porta il div newsmanifest al di fuori del flusso del documento.

Grazie Mangusta grazie 1000!!!!

[esseAemme]

Mangusta91: con quel box però, in IE, l'immagine a sinistra non rimane più float, viene spostata in alto e div di destra iniziano dopo la fine dell'immagine.

Ho risolto lasciando l'html senza box e indicando ai div che vanno a destra e contengono testo il margin-left: 150px;

Grazie per le dritte ;-D
Samantha

[mangusta91]

figurati byebye

[ac_socmel]

.newsmanifest {
    margin-right: 50px /*esempio*/
}

non è più semplice?