ciao a tutti,ho un problema con questo layout,vorrei sapere in che modo è possibile realizzare questa struttura,dal momento che con ie6 e ie7 non si vede questo bordo inserito come immagine e posizionato in modo assoluto.
vorrei sapere come fareste per realizzare questo con i css
Prima cosa posta il codice che hai fatto, altrimenti non si vede l'errore.
Seconda cosa ti faccio una domanda: Perchè vuoi inserire un bordo come immagine? Non puoi dare il bordo direttamente all'elemento?
--Non aiuto in privato--
il codice è questo:
xhtml:
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>contenuti</title>
<link rel="stylesheet" type="text/css" media="screen" href="contenutifloat.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="iecontenuti.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7contenuti.css">
<![endif]-->
</head>
<body>
<div id="container">
<div id="subcontainer">
<div id="header">[img]img/logo.gif[/img]</div>
<div id="menu">
<ul>
[*]link[*]contatti[*]link[*]prodotti[*]servizi[*]home[/list]
</div>
<div id="bordo">[img]img/container-contenuti.gif[/img]</div>
<div id="contenuti">
<div class="containingbox">
<div class="floatleft">
<h1>text</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsaem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula </p>
</div>
<div class="floatleft"><h1>text</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. FuLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aeneanem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligu</p>
</div>
<div class="floatleft"><h1>text</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. FusceLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enimgilla at, lacinia ut, augue. Nullam nunc.em ipsum dolor sit amet, consectetuer adipiscing elit. Duis lig</p>
</div>
<div class="floatleft"><h1>text </h1>
Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lpendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequaem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aeneanconse</p>
</div>
<div class="floatleft"><h1>text </h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in coem ipsum dolor sit amet, consectetuer adi</p>
</div>
<div class="floatleft"><h1>text</h1>
Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condienatis enim nec quam. Cras faucibus,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aeneem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligu</p>
</div>
</div>
<div id="footer">
[img]img/icone/icon_home.gif[/img]home|
[img]img/icone/page_text.gif[/img]servizi |
[img]img/icone/page_text.gif[/img]prodotti |
[img]img/icone/list_links.gif[/img]link|
[img]img/icone/icon_user.gif[/img]login|
[img]img/icone/icon_mail.gif[/img]contatti|
[img]img/icone/sitemap_color.png[/img]sitemap</div>
</div>
</div>
</div>
<div id="bottom"></div>
</body>
</html>
</code>
questo è il css per i browser standard:
<code>
* {
padding : 0;
margin : 0;
}
p{
color:#000000;
}
.containingbox
{
width: 800px;
height: 700px;
background-color: #e1e9ec;
margin-top: 20px;
margin-right:20px;
margin-left:20px;
background-image: url(img/img_sfondocontenuti.gif);
background-repeat: no-repeat;
background-position: 50% 15%;
margin-bottom:40px;
}
.floatleft
{
float: left;
width: 250px;
height: 300px;
margin: 5px;
}
body{
font-family: arial,sans-serif;
font-size: 76%;
text-align:center; /*centra in IE 5.x*/
margin:0;
padding:0;
background-repeat: repeat-x;
background-position: left top;
background-attachment: scroll;
background-image: url(img/profondita.gif);
background-color: #cddeeb;
}
#menu a#current{color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;}
#menu a#current li:hover, a#current li:hover a {color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;}
/* Struttura */
#header{
width:820px;
margin-top: 0px;
}
#container{
width:821px;
text-align:left;
margin: 0px auto;
margin-top: 20px;
}
#container #contenuti{
margin-top: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #034e75;
background-color: #e1e9ec;
width: 821px;
filter:alpha(opacity=50); /*trasparenza*/
-moz-opacity: 0.5;
opacity:0.5;
}
#subcontainer{
text-align: left;
}
/* Navigazione */
#menu {
height:10px;
list-style:none;
width: 100%;
margin-bottom: 50px;
}
#menu ul
{
margin: 0px;
list-style-type: None;
}
#menu li
{
display: Inline;
float: right;
width: 50px;
padding: 1px;
font-family: Verdana;
font-size: 0.9em;
}
#menu a {
line-height:50px;
text-align:center;
text-decoration: none;
color: #333333;
}
#menu a:hover {
color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;}
#menu .active {
color: #004c75;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #004c75;
}
#container #contenuti #footer a {
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
color:#336698
}
#container #footer {
border-top-width: thin;
border-top-style: dotted;
border-top-color: #000033;
height: 50px;
width: 820px;
clear: both;
margin-top: 20px;
padding-top: 10px;
}
#subcontainer #bordo {
width: 850px;
height: 3px;
margin-bottom: 30px;
margin-left: -12px;
margin-right: -20px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
margin-top: -25px;
}
#bottom{
background-image: url(img/ombrasotto.gif);
background-repeat: no-repeat;
height: 128px;
background-color: #cddeeb;
width: 100%;
background-position: center top;
margin-top: 20px;
}
#container #subcontainer #contenuti #footer img {
padding-right: 5px;
padding-top: 2px;
}
#container #subcontainer #contenuti .containingbox .floatleft h1 {
padding: 20px;
font-size: 1.2em;
font-family : verdana;
font-weight: bold;
padding-bottom: 10px;
}
#container #subcontainer #contenuti .containingbox .floatleft p {
text-align:justify;
font-size:1em;
color:#000000;
padding: 20px;
}
#container #subcontainer #contenuti .containingbox .floatleft a {
color: #004c75;
text-decoration: none;
}
</code>
questo il css per IE6:
<code>
#menu{
margin-bottom:30px;
}
#subcontainer #bordo {
width: 840px;
height: 3px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
position:absolute;
top:193px;
}
#container{
width:800px;
text-align:left;
margin: 0px auto;
margin-top: 20px; /* per i browser moderni */
/* per i browser moderni */
}
#container #contenuti{
margin-top: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #034e75;
background-color: #e1e9ec;
width: 800px;
filter:alpha(opacity=50); /*trasparenza*/
-moz-opacity: 0.5;
opacity:0.5;
margin-right:-20px;
}
.containingbox
{
width: 800px;
height: 600px;
background-color: #e1e9ec;
}
.floatleft
{
float: left;
width: 250px;
height: 300px;
margin: 5px;
}
#container #footer {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #000033;
height: 50px;
width: 820px;
clear: both;
margin-top: 20px;
}
</code>
Il problema rimane in IE7 che non me lo visualizza e per mancanza di tempo tramite un commento condizionale ho tolto totalmente il div con il bordo in questione.
la seconda domanda è che questo bordo è stato inserito a posteriori,cioè avevo già fatto la struttura della pagina,poi ho deciso di mettergli questo bordo.
e non ho inserito il codice nella modalità corretta.
cmq,anche senza rovinarsi gli occhi,mi basta un consiglio su come realizzare questo layout.
toc
Purtroppo gli occhi c'è da rovinarseli =) e ho a disposizione solo ritagli di tempo.
Il tuo codice è abbastanza avviato, importi più fogli di stile e dovrei vedere la pagina completa, anche perchè non avendo le tue immagini non è molto agevole.
La cosa che non ho capito è perchè devi utilizzare i posizionamenti, quando hai 2 elementi che naturalmente si posizionano uno sotto l'altro nella struttura (se ho capito bene, guardando il codice).
non hai il link ad una pagina che vedo l'effetto finale?
--Non aiuto in privato--
per l'attenzione.
cmq non ho un link,ma ti posto il jpg della print e la corretta visualizzazione che avviene con firefox.
con ie6 per visualizzare il bordo ho dovuto mettere mano al css e fare delle modifiche.
con ie7 stessa cosa,non si visualizza sicchè l'ho proprio levato.
ho scelto il posizionamento assoluto per il bordo,perchè come ti avevo detto è stato inserito
dopo aver già praticamente realizzato il layout.
il div bordo ha dimensioni maggiori del div container,nel quale si trova,e anche del div contenuti che lo segue.
l'ho inserito come immagine,perchè il bg del div contenuti è un'immagine che occupa tutto il div.
non so spero di aver focalizzato la questione.
Il fatto che tu abbia così tanti problemi significa che probabilmente la soluzione per cui hai optato non è proprio ottimale, anche se il layout era già realizzato.
Dando un occhio veloce al tuo codice avrei agito in maniera differente.
Avrei ridimensionato il #container della larghezza attuale di #bordo e aggiustato di conseguenza i figli.
Il div #subcontainer poteva essere sfruttato per creare lo sfondo con il bordo che attualmente posizioni.
Avrei dimensionato #contenuti e lo avrei centrato all'interno del div #subcontainer per far si che si vedesse lo sfondo di quest'ultimo.
Magari mi sbaglio, perchè non ho guardato attentamente il progetto e non so qual'è la tua possibilità d'intervento.
A volte è meglio rifare o modificare piuttosto che cercare di "toppare" del codice già esistente.
--Non aiuto in privato--
ho risolto come hai proposto,ti ringrazio per il consiglio.
Permessi di invio
Rispondi quotando
