continuando a procedere con la costruzione sono incappato con il problema nella seconda fascia, nella quale devo inserire le 3 colonne. Il problema è lo sfondo che non appare nel browser Firefox, mentre in explorer non c'è problema. Di seguito riporto il codice di costruzione.
codice:
<!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=utf-8" />
<title>Documento senza titolo</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banda1" class="banda">
<div class="wrapper">
<div id="content">
<div class="topLeft">[img]images/happy-hour-bar.png[/img]</div>
<div class="topRight">
<div id="facebook">[img]images/costruzione3.gif[/img]</div>
<div id="menu">
<ul class="centra">
[*]HOME[*]HOME[/list]
</div>
</div>
<div id="flash">[img]images/immagini-flash.png[/img]</div>
</div>
</div>
</div>
<div id="banda2" class="banda">
<div class="wrapper">
<div id="contentCentrale">
<div class="centralLeft">
aAsd
</div>
<div class="centralRight">
asd
</div>
</div>
</div>
</div>
<div id="banda3" class="banda">
<div class="wrapper">
Nulla facilisi. Vivamus nisl ante, gravida euismod, accumsan eu, tempus vel, metus. Suspendisse eu magna. Vestibulum faucibus, dolor quis porttitor tristique, diam metus gravida ligula, vel vehicula pede nibh ac nisi. Phasellus libero. Nam ut lorem a turpis suscipit eleifend. Pellentesque sagittis nulla vitae purus. Pellentesque quis purus. Praesent et nisi in nisl fringilla sodales. Nunc tincidunt, est ac venenatis euismod, massa augue elementum orci, eget elementum magna erat at lorem.</p>
</div>
</div>
</body>
</html>
codice css
codice:
@charset "utf-8";
/* CSS Document */
* {margin: 0; padding: 0; }
body{
background-color:#2C2C2C;
}
.wrapper { width: 990px; padding: 0px 0 0px 0; margin: 0 auto; }
.banda { width: 100%; }
/*inizio fascia top*/
#banda1 { background: #2C2C2C; }
#banda1 p { color: #666; }
#content{
position: relative;
padding: 0;
left: 0px;
width:990px;
height:550px;
}
#content .topLeft{
float:left;
padding:0px 0px 0px 0px;
}
#content .topRight{
float:right;
margin:0px 0px 0px 0px;
width:790px;
}
div#facebook{
margin:22px 0px 0px 0px;
float:right;
}
div#flash{
margin:0;
padding:0;
}
/*fascia menu*/
div#menu{
float:left;
width:790px;
height:49px;
font-size:10pt;
font-weight:bold;
/*font-family: Century Gothic, sans-serif;*/
font-family:Arial, Helvetica, sans-serif;
margin:22px 0px 0px 0px;
}
/*** MENU ***/
.menu{
width:992px;
height:50px;
text-align:center;
/*background-color:#069;*/
margin: 0 auto;
padding:0px 0px 0px 0px;
}
.centra{
margin: 0px 0px 0px 0px;
}
ul.menu{
/**/float: center;
width: 960px;
margin: 0px 0px 0px 0px;
}
ul#menuf7{
float: left;
width: 960px;
margin: 0px 0px 0px 0px;
}
#menu,#menu li{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li,#menu a, #menu span{
float: left;
height: 39px;
line-height: 39px
}
#menu a{
text-decoration: none;
color: #E7E7E7;
padding-left: 12px;
}
#menu span{
padding-right: 19px;
cursor: pointer
}
#menu a:hover{
/*background-color: #FCF4D4;*/
color: #669FD8
}
#menu a:hover span{
/*background-color: #FCF4D4;*/
color: #669FD8;
}
#menu #current a{
/*background-color: #FCF4D4;*/
color: #669FD8;
}
#menu #current span{
/*background-color: #FCF4D4;*/
color: #669FD8;
}
/*** FINE MENU ***/
/*fine fascia Top*/
/*fascia 2*/
#banda2 {
background-image:url(../images/sfondo-centrale.gif);
background-repeat:repeat;
}
#banda2 p { color: #2a2a2a; }
#contentCentrale{
/*position: relative;
padding: 0;
left: 0px;
width:990px;*/
}
#contentCentrale .centralLeft{
float:left;
padding:0px 0px 0px 0px;
width:650px;
}
#contentCentrale .centralRight{
float:right;
margin:0px 0px 0px 0px;
width:310px;
}
/*fine fascia 2*/
#banda3 { background: #3a3a3a; }
#banda3 p { color: #eee; }
Permessi di invio
Rispondi quotando