Sto imparando ad usare Dreamweaver8 utilizzando il tutorial cafe_townsend.
Quello con le tabelle mi è venuto benissimo e sono anche riuscita a pubblicarlo.
Ho però la fissa dei div e dei css, anche se sono alle prime esperienze ho letto parecchio, ma purtroppo la pratica e la teoria sono due cose diverse.
Ho realizzato il sito cafe_townsend con i livelli in modalità progettazione e, a parte il fatto che nn riuscivo a centrarlo nel browser, tutto è andato alla perfezione.
Seguendo il vs forum sono riuscita finalmente a centrarlo … fantastico … solo che quasi tutto il resto è un disastro. Ho utilizzato il div “box” x centrare il contenuto ed i div nidificati per tutto il resto. I problemi?
Primo : nn mi visualizza il colore di sfondo dei div ma solo quello dello sfondo del body.
Secondo : quando clicco nel div per inserire i contenuti nn me li mette dove dovrebbe, in dreamweaver li vedo corretti ma nel browser vengono visualizzati nelle posizioni più disparate, addirittura sovrapposti ad altri div.
Insomma un vero e proprio casino!
Qualcuno mi può spiegare che succede e come ovviare a tutto ciò.
Ringrazio anticipatamente ed allego il codice utilizzato:
HTML
<!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>Cafe Townsend</title>
<style type="text/css">
<!--
#box {
position:absolute;
left:0;
top:20;
width:700;
height:655;
z-index:1;
}
#banner_graphic {
position:absolute;
left:0;
top:0;
width:700;
height:90;
z-index:2;
}
#flash_fma {
position:absolute;
left:0;
top:91;
width:700;
height:166;
z-index:3;
}
#header {
position:absolute;
left:0;
top:257px;
width:700;
height:24;
z-index:4;
}
#center_content {
position:absolute;
left:0;
top:281px;
width:700;
height:350;
z-index:5;
}
#footer {
position:absolute;
left:0;
top:631;
width:700;
height:24;
z-index:6;
}
#navigation {
position:absolute;
left:0;
top:0;
width:140;
height:350;
z-index:7;
background-color: #993300;
}
#flash_video {
position:absolute;
left:140;
top:0;
width:230;
height:350;
z-index:8;
background-color: #F7EEDF;
}
#text {
position:absolute;
left:370;
top:0;
width:330;
height:350;
z-index:9;
background-color: #F7EEDF;
}
body {
background-color: #000000;
}
-->
</style>
<link href="cafe_townsend.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="banner_graphic">[img]images/banner_graphic.jpg[/img]</div>
<div id="flash_fma"></div>
<div id="header">[img]images/body_main_header.gif[/img]</div>
<div id="center_content">
<div id="navigation">Cuisine Chef Ipsum Articles Special Events Location Menu Contact Us </div>
<div id="flash_video"></div>
<div id="text">
<span class="bold">Café Townsend’s visionary chef</span> and founder leads the way in a culinary revolution. Proclaimed by many to be the best chef in the world today, Chef Ipsum blends earthy seasonal flavors and bold ingredients to create exquisite contemporary cuisine. </p>
<span class="bold">The name Café Townsend</span> comes from our first restaurant, located in a historic building on Townsend Street in San Francisco, where we opened the doors in 1992. We’ve replicated the elegant interior, exceptional service, and world class cuisine in our restaurants around the country.</p>
</div>
</div>
<div id="footer">[img]images/body_main_footer.gif[/img]</div>
</div>
</body>
</html>
CSS
#box {
width: 700px;
margin-left: -350px;
position: absolute;
left: 50%;
}
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
.bold {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
font-weight: bold;
color: #990000;
}
.navigation {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #993300;
display: block;
padding: 8px;
width: 140px;
}
.navigation:hover {
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #D03D03;
display: block;
padding: 8px;
width: 140px;
}
Rispondi quotando
