Ciao a tutti, sono alle prime armi con Html e Css.
Ho creato due Div, uno "sopra" e l'altro "sotto".
Nel div "sotto" ho scritto dei paragrafi e vorrei aggiungere accanto a questi paragrafi un frame. Ho scritto il codice html e dato le proprietà ma non riesco a posizionarlo a destra dei testi. ll frame si posiziona sotto e mi va nel footer.
Cosa devo modificare? ho scritto align="center" o "right" all'interno del frame e non succede nulla.
Anche aggiungendo un menù a discesa, questo mi va sempre sotto.
Come faccio a posizionarlo? Ad esempio: i paragrafi a sinistra come sono, al centro il menù a tendina e il frame a destra.
Ecco il codice html completo:
<!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>Ristorante Vitorchiano, Viterbo - Osteria Basilicò</title>
<meta name="description" content="Benvenuti nel sito del nostro ristorante situato a Vitorchiano a pochi passi da Viterbo"/>
<meta name="keywords" content="ristorante Vitorchiano, osteria Vitorchiano,osteria a Vitorchiano"/>
<link rel="stylesheet" type="text/css" href="css/stile.css"/>
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="index_files/vlb_files0/vlightbox0.css" type="text/css" />
<link rel="stylesheet" href="index_files/vlb_files0/visuallightbox.css" type="text/css" media="screen" />
<script src="index_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<script src="index_files/vlb_engine/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
</head>
<body>
<div id="container">
<div id="riga">
<p align="center"> Tel: +39 0761.34.07.86</p>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Menu.html">Menu</a></li>
<li><a href="Pizzoleria.html">Pizzoleria</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="Contatti.html">Contatti</a></li>
</ul>
<p><a href="Menu.html"><img alt="Logo Rist" src="img/Logo.jpg" title="ristorante viterbo" class="immagine" /> </a></p>
</div>
<div id="testata"></div>
<div id="contenuti">
<div id="sopra">
<p>L'Osteria Basilicò nasce da un'idea, tornare ai sapori di una volta; da una voglia, far gustare ricette antiche preparate con cotture tradizionali e rigorosamente con prodotti freschi di giornata.</p>
<p>Noi puntiamo sulla tradizione Italiana, senza limitarci al solo Lazio e sempre affascinati dalla scoperta di tutti quei piatti che hanno reso celebre la cucina italiana nel mondo.</p>
<p>Senza dimenticare che l'Osteria accosta il pasto al vino: per questo abbiamo selezionato anche circa 300 tra le migliori etichette provenienti da ogni regione d'Italia.</p>
<p>Basilicò è anche una BRACERIA di altissima ricerca, con selezioni di carni italiane e estere. Tra le nostre carni:Chianina , Cinta Senese, Angus Argentino, Polacco, Americano, Scozzese, la mitica Tomahawk , Kobe. Se siete amanti di carne alla brace non potete non venire.</p>
<p>Per scoprire l'Italia del gusto, veniteci a trovare e resterete ammaliati da quante ricette della tradizione dovete ancora assaggiare.</p>
<p align="right"><strong>Valerio Caporossi</strong></p>
<h1>Photo Gallery</h1> <!-- Start VisualLightBox.com BODY section id=0 -->
<div id="vlightbox0">
<a class="vlightbox0" href="index_files/vlb_images0/sala_1.jpg" title="Sala 1"><img src="index_files/vlb_thumbnails0/sala_1.jpg" alt="Sala 1"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_2.jpg" title="Sala 2"><img src="index_files/vlb_thumbnails0/sala_2.jpg" alt="Sala 2"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_3.jpg" title="Sala 3"><img src="index_files/vlb_thumbnails0/sala_3.jpg" alt="Sala 3"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_4.jpg" title="Sala 4"><img src="index_files/vlb_thumbnails0/sala_4.jpg" alt="Sala 4"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_5.jpg" title="Sala 5"><img src="index_files/vlb_thumbnails0/sala_5.jpg" alt="Sala 5"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_6.jpg" title="Sala 6"><img src="index_files/vlb_thumbnails0/sala_6.jpg" alt="Sala 6"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_7.jpg" title="Sala 7"><img src="index_files/vlb_thumbnails0/sala_7.jpg" alt="Sala 7"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_8.jpg" title="Sala 8"><img src="index_files/vlb_thumbnails0/sala_8.jpg" alt="Sala 8"/></a>
<span class="vlb"><a href="http://visuallightbox.com">simple lightbox jquery</a>by VisualLightBox.com v6.1</span>
</div>
<script src="index_files/vlb_engine/vlbdata0.js" type="text/javascript"></script>
<!-- End VisualLightBox.com BODY section -->
</div>
</div>
<div id="sotto">
<h2>ORARIO RISTORANTE</h2>
<p>lunedì: Aperto <b>PRANZO/CENA</b></p>
<p>martedì: <b>CHIUSO</b></p>
<p>mercoledì: Aperto <b>PRANZO/CENA</b></p>
<p>giovedì: Aperto <b>PRANZO/CENA</b></p>
<p>venerdì: Aperto <b>PRANZO/CENA</b></p>
<p>sabato: Aperto <b>PRANZO/CENA</b></p>
<p>sabato: Aperto <b>PRANZO/CENA</b></p>
<iframe width="420" height="200" src="https://www.youtube.com/embed/LDu3nv0j_lg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
<p class="footer">Osteria Basilicò - Via de La Quercia, 15/b Vitorchiano (VT) - Tel. +39.0761.3704</p></div>
</div>
</body>
</html>
IL CSS è:
@charset "utf-8";
/* CSS Document */
#menu
{
width:1024px;
height:50px;
background-color:#FFF;
}
#container
{
width:1024px;
padding:0;
margin:auto;
}
#testata
{
width:1024px;
height:340px;
padding-top:0;
border-style:solid;
border-width:medium;
background:url(../img/Ristorante.jpg);
}
#riga
{
width:1024px;
height:50px;
background-color:#630;
}
#contenuti
{
width:1024px;
height:500px;
background:#FFF;
padding-top:0;
}
#sopra
{
width:1024px;
height:250px;
background-color:#FFF;
}
#sotto
{
width:1024px;
height:250px;
margin-top:35px;
background-color:#630;
}
#footer
{
width:1005px;
height:150px;
background-color:#630;
margin-top:10px;
margin-left:152px;
padding-top:10px;
padding-left:20px;
text-align:center;
}
.footer
{
margin:0;
padding:0;
padding-top:50px;
color:#FFF;
}
#menu ul
{
margin:0;
padding-top:10px;
list-style:none;
padding-left:0;
}
#menu li
{
float:left;
margin-left:10px;
}
#menu a
{
text-decoration:none;
color:#000;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#menu a:hover
{
text-decoration:none;
color:#FF3;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
h1{
margin:0
padding-top:10px;
padding-left:10px;
font-family:"Times New Roman", Times, serif;
}
h2{
margin:0;
padding-top:10px;
padding-left:10px;
font-family:"Times New Roman", Times, serif;
color:#FFF;
font-size:12px;
}
p
{
margin:0;
padding-top:10px;
padding-left:10px;
padding-right:20px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.immagine
{
width:200px;
height:50px;
margin-left:30px;
border:double;
border-color:#F00;
}
GRAZIE MILLE E SCUSATE!
Ho creato due Div, uno "sopra" e l'altro "sotto".
Nel div "sotto" ho scritto dei paragrafi e vorrei aggiungere accanto a questi paragrafi un frame. Ho scritto il codice html e dato le proprietà ma non riesco a posizionarlo a destra dei testi. ll frame si posiziona sotto e mi va nel footer.
Cosa devo modificare? ho scritto align="center" o "right" all'interno del frame e non succede nulla.
Anche aggiungendo un menù a discesa, questo mi va sempre sotto.
Come faccio a posizionarlo? Ad esempio: i paragrafi a sinistra come sono, al centro il menù a tendina e il frame a destra.
Ecco il codice html completo:
<!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>Ristorante Vitorchiano, Viterbo - Osteria Basilicò</title>
<meta name="description" content="Benvenuti nel sito del nostro ristorante situato a Vitorchiano a pochi passi da Viterbo"/>
<meta name="keywords" content="ristorante Vitorchiano, osteria Vitorchiano,osteria a Vitorchiano"/>
<link rel="stylesheet" type="text/css" href="css/stile.css"/>
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="index_files/vlb_files0/vlightbox0.css" type="text/css" />
<link rel="stylesheet" href="index_files/vlb_files0/visuallightbox.css" type="text/css" media="screen" />
<script src="index_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<script src="index_files/vlb_engine/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
</head>
<body>
<div id="container">
<div id="riga">
<p align="center"> Tel: +39 0761.34.07.86</p>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Menu.html">Menu</a></li>
<li><a href="Pizzoleria.html">Pizzoleria</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="Contatti.html">Contatti</a></li>
</ul>
<p><a href="Menu.html"><img alt="Logo Rist" src="img/Logo.jpg" title="ristorante viterbo" class="immagine" /> </a></p>
</div>
<div id="testata"></div>
<div id="contenuti">
<div id="sopra">
<p>L'Osteria Basilicò nasce da un'idea, tornare ai sapori di una volta; da una voglia, far gustare ricette antiche preparate con cotture tradizionali e rigorosamente con prodotti freschi di giornata.</p>
<p>Noi puntiamo sulla tradizione Italiana, senza limitarci al solo Lazio e sempre affascinati dalla scoperta di tutti quei piatti che hanno reso celebre la cucina italiana nel mondo.</p>
<p>Senza dimenticare che l'Osteria accosta il pasto al vino: per questo abbiamo selezionato anche circa 300 tra le migliori etichette provenienti da ogni regione d'Italia.</p>
<p>Basilicò è anche una BRACERIA di altissima ricerca, con selezioni di carni italiane e estere. Tra le nostre carni:Chianina , Cinta Senese, Angus Argentino, Polacco, Americano, Scozzese, la mitica Tomahawk , Kobe. Se siete amanti di carne alla brace non potete non venire.</p>
<p>Per scoprire l'Italia del gusto, veniteci a trovare e resterete ammaliati da quante ricette della tradizione dovete ancora assaggiare.</p>
<p align="right"><strong>Valerio Caporossi</strong></p>
<h1>Photo Gallery</h1> <!-- Start VisualLightBox.com BODY section id=0 -->
<div id="vlightbox0">
<a class="vlightbox0" href="index_files/vlb_images0/sala_1.jpg" title="Sala 1"><img src="index_files/vlb_thumbnails0/sala_1.jpg" alt="Sala 1"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_2.jpg" title="Sala 2"><img src="index_files/vlb_thumbnails0/sala_2.jpg" alt="Sala 2"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_3.jpg" title="Sala 3"><img src="index_files/vlb_thumbnails0/sala_3.jpg" alt="Sala 3"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_4.jpg" title="Sala 4"><img src="index_files/vlb_thumbnails0/sala_4.jpg" alt="Sala 4"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_5.jpg" title="Sala 5"><img src="index_files/vlb_thumbnails0/sala_5.jpg" alt="Sala 5"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_6.jpg" title="Sala 6"><img src="index_files/vlb_thumbnails0/sala_6.jpg" alt="Sala 6"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_7.jpg" title="Sala 7"><img src="index_files/vlb_thumbnails0/sala_7.jpg" alt="Sala 7"/></a>
<a class="vlightbox0" href="index_files/vlb_images0/sala_8.jpg" title="Sala 8"><img src="index_files/vlb_thumbnails0/sala_8.jpg" alt="Sala 8"/></a>
<span class="vlb"><a href="http://visuallightbox.com">simple lightbox jquery</a>by VisualLightBox.com v6.1</span>
</div>
<script src="index_files/vlb_engine/vlbdata0.js" type="text/javascript"></script>
<!-- End VisualLightBox.com BODY section -->
</div>
</div>
<div id="sotto">
<h2>ORARIO RISTORANTE</h2>
<p>lunedì: Aperto <b>PRANZO/CENA</b></p>
<p>martedì: <b>CHIUSO</b></p>
<p>mercoledì: Aperto <b>PRANZO/CENA</b></p>
<p>giovedì: Aperto <b>PRANZO/CENA</b></p>
<p>venerdì: Aperto <b>PRANZO/CENA</b></p>
<p>sabato: Aperto <b>PRANZO/CENA</b></p>
<p>sabato: Aperto <b>PRANZO/CENA</b></p>
<iframe width="420" height="200" src="https://www.youtube.com/embed/LDu3nv0j_lg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
<p class="footer">Osteria Basilicò - Via de La Quercia, 15/b Vitorchiano (VT) - Tel. +39.0761.3704</p></div>
</div>
</body>
</html>
IL CSS è:
@charset "utf-8";
/* CSS Document */
#menu
{
width:1024px;
height:50px;
background-color:#FFF;
}
#container
{
width:1024px;
padding:0;
margin:auto;
}
#testata
{
width:1024px;
height:340px;
padding-top:0;
border-style:solid;
border-width:medium;
background:url(../img/Ristorante.jpg);
}
#riga
{
width:1024px;
height:50px;
background-color:#630;
}
#contenuti
{
width:1024px;
height:500px;
background:#FFF;
padding-top:0;
}
#sopra
{
width:1024px;
height:250px;
background-color:#FFF;
}
#sotto
{
width:1024px;
height:250px;
margin-top:35px;
background-color:#630;
}
#footer
{
width:1005px;
height:150px;
background-color:#630;
margin-top:10px;
margin-left:152px;
padding-top:10px;
padding-left:20px;
text-align:center;
}
.footer
{
margin:0;
padding:0;
padding-top:50px;
color:#FFF;
}
#menu ul
{
margin:0;
padding-top:10px;
list-style:none;
padding-left:0;
}
#menu li
{
float:left;
margin-left:10px;
}
#menu a
{
text-decoration:none;
color:#000;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#menu a:hover
{
text-decoration:none;
color:#FF3;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
h1{
margin:0
padding-top:10px;
padding-left:10px;
font-family:"Times New Roman", Times, serif;
}
h2{
margin:0;
padding-top:10px;
padding-left:10px;
font-family:"Times New Roman", Times, serif;
color:#FFF;
font-size:12px;
}
p
{
margin:0;
padding-top:10px;
padding-left:10px;
padding-right:20px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.immagine
{
width:200px;
height:50px;
margin-left:30px;
border:double;
border-color:#F00;
}
GRAZIE MILLE E SCUSATE!