Posizionare Iframe e menù a discesa

valerio.capo · 2015-08-25T10:41:40+0200

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"/>


<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>



</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> 

<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>



</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!

n1k4r0 · 2015-08-25T14:14:22+0200

sinceramente non ho capito chiaramente quello che vuoi ottenere ma forse quello che ti serve è una regola css.
dovresti provare ad assegnare al frame (che poi penso sia un iframe visto che un frame non si aggiunge alla pagina ma la divide in più parti) una regola css che è:

Codice:

float: right;

puoi farlo nel file stile.css oppure direttamente nel iframe con una cosa tipo questa

HTML:

<iframe style="float: right;" ... >

Cerca

Cerca

Posizionare Iframe e menù a discesa

valerio.capo

Nuovo Utente

n1k4r0

Utente Attivo

Discussioni simili