[CSS] Allineare a destra il form di ricerca [era:Aiuto con css]
Salve, questa è una parte del mio codice:
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Viaggi & Miraggi</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<style type="text/css">
<!--
.h8 {
text-align: right;
font-size: 18px;
font-family: Verdana, Geneva, sans-serif;
color: #990000;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<h1>Viaggi & Miraggi</h1>
<div id="copyright">
<p>Copyright 2010.</p>
<p>Tutti i diritti riservati.</p>
</div>
</div>
<div id="right">
<div id="nav">
<ul>
<li class="selected"><a href="index.php">Home</a></li>
<li><a href="index.php?view=articoli">Articoli</a></li>
<li><a href="index.php?view=foto">Fotografie</a></li>
<li><a href="index.php?view=diari">Diari</a></li>
<li><a href="index.php?view=viaggi&miraggi">Viaggi & Miraggi</a></li>
<li><a href="index.php?view=destinazioni">Destinazioni</a></li>
<li class="last"><a href="segnalazioni">Le vostre segnalazioni</a></li>
</ul>
</div>
<div id="subnav">
<ul>
<li class="selected"><a href="index.php">Home</a></li>
<li><a href="index.php?view=articoli">Articoli</a></li>
<li><a href="index.php?view=foto">Fotografie</a></li>
<li><a href="index.php?view=diari">Diari</a></li>
<form method="POST" action="index.php?view=risultati"></cerca>
<input name="key" type="text">
<input type="submit" value="Cerca">
</form>
</ul>
</div>
E questo è il mio file css:
Codice PHP:
html, body, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #990000;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FF7F00;
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #8E0D0D url(images/page_bg.jpg) repeat-x;
text-align: center;
font: 11px arial, sans-serif;
color: #565656;
}
/** layout **/
#wrapper {
text-align: left;
margin: auto;
width: 788px;
position: relative;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 268px;
}
#right {
position: absolute;
top: 0;
left: 268px;
width: 520px;
}
/** Left **/
#left {
background: url(images/logo.jpg) no-repeat;
padding-top: 30px;
}
#left h1 {
text-align: center;
font: 28px verdana, serif;
color: #6C0505;
height: 709px;
}
#copyright {
color: white;
}
#copyright p {
margin: 0 1em 0.5em 1em;
}
/** Right **/
#nav {
background: url(images/header.jpg) no-repeat;
height: 68px;
}
#nav ul {
margin: 0;
padding: 0 0 0 5px;
}
#nav li {
float: left;
border-right: 1px solid #A26A6B;
padding: 46px 9px 9px 9px;
list-style: none;
}
#nav li.last {
border-right: none;
}
#nav a {
color: #CECECE;
font: 10px arial, sans-serif;
font-weight: normal;
}
#nav .selected a {
font-weight: bold;
}
#subnav{
background: url(images/header2.jpg) no-repeat;
height: 24px;
}
#subnav ul {
margin: 0;
padding: 0 0 0 20px;
}
#subnav li {
float: left;
border-right: 0,5px solid #ffffff;
padding: 6px 15px 9px 9px;
list-style: none;
}
#subnav li.last {
border-right: none;
}
#subnav li.search{
text-align: left;
}
#subnav a {
color: #CECECE;
font: 9px arial, sans-serif;
font-weight: normal;
}
#subnav .selected a {
font-weight: bold;
}
/** Body **/
#body {
background: url(images/body_bg.jpg) repeat-y;
}
#body-top {
background: url(images/body_top.jpg) no-repeat;
}
#body-bot {
background: bottom left url(images/body_bot.jpg) no-repeat;
padding: 36px 39px 19px 39px;
text-align: left;
}
#body h2 {
font: 14px "verdana", serif;
text-align: left;
}
#body h2 strong {
color: #660505;
font-weight: normal;
font-size: 18px;
text-align: center;
font-style: normal;
}
#body h3 {
font: 14px "Times New Roman", serif;
color: #660505;
margin-top: 1.4em;
margin-bottom: 1.1em;
text-align: left;
}
#body h4 {
color: #660505;
text-align: left;
}
#body .left {
margin: 0 26px 0 0;
}
/** footer **/
.body-hr {
clear: both;
height: 43px;
background: bottom left url(images/body_hr.jpg) no-repeat;
margin: 10px -39px;
}
#footer-1 {
float: left;
width: 104px;
padding-right: 30px;
margin-top: 5px;
border-right: 1px solid #ACACAC;
font: 14px "times new roman", serif;
color: #660505;
text-align: center;
}
#footer-1 strong {
display: block;
font-size: 18px;
font-weight: normal;
}
#footer-2 {
float: left;
width: 154px;
margin-left: 12px;
font: 18px "times new roman", serif;
color: #000;
line-height: 34px;
}
#footer-2 .left {
margin-right: 12px;
}
#footer-3 {
float: left;
width: 135px;
margin: 0;
font: 14px "times new roman", serif;
color: #000;
text-align: center;
}
#footer-3 .left {
margin-right: 12px;
}
div {
font-family: Verdana, Geneva, sans-serif;
}
Come posso fare in modo che il form per la ricerca venga visualizzato a destra e che l'elenco a suo fianco (home, articoli, fotografie, diari) venga visualizzato a sinistra?
http://enkantar.altervista.org è il sito in questione e la barra nera è la barra in questione dove vorrei visuaizzare a sinistra le scritte e a destra la ricerca! Scusate la poca chiarezza!
