alinhar DIV
@charset "utf-8";
body {
background-image: url(../imagens/Fundo.png);
background-repeat: repeat-x;
margin-top: 0px;
}a:link {
text-decoration: none;
color: #333333;
}a:visited {
text-decoration: none;
}a:hover {
text-decoration: none;
color: #FFFFFF;
}a:active {
text-decoration: none;
}h1 {
font-size: 36px;
}h2 {
font-size: 24px;
text-shadow: -1px 1px #CCC;
}h3 {
font-size: 18px;
text-shadow: 1px 1px 1px #000000;
color: #FDA44D;
}h4 {
font-size: 16px;
}h5 {
font-size: 10px;
float: left;
height: 15px;
width: 250px;
line-height: 2px;
}
.page {
font-family: "trebuchet MS";
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #F0EDDA;
text-decoration: none;
margin-top: 0px;
padding-top: 0px;
}nav {
float: left;
width: 250px;
height: 30px;
}
.navbutton {
background: #e6b22e;
background: -webkit-gradient(linear, left top, left bottom, from(#f2a218), to(#e6b22e));
background: -webkit-linear-gradient(top, #f2a218, #e6b22e);
background: -moz-linear-gradient(top, #f2a218, #e6b22e);
background: -ms-linear-gradient(top, #f2a218, #e6b22e);
background: -o-linear-gradient(top, #f2a218, #e6b22e);
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #333333;
font-size: 14px;
font-family: "trebuchet MS";
text-decoration: none;
padding-top: 6px;
padding-right: 12px;
padding-bottom: 6px;
padding-left: 12px;
width: 85px;
height: 15px;
text-align: center;
line-height: 15px;
float: right;
font-variant: small-caps;
margin-left: 5px;
margin-right: 5px;
-moz-border-radius-bottomleft: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFCC00;
letter-spacing: 0.5px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
}.container .photo #search h3 {
float: right;
width: 90px;
margin-top: 240px;
}.navbutton:hover {
border-top-color: #ed8f0c;
background: #ed8f0c;
color: #333333;
width: 90px;
height: 15px;
text-align: center;
line-height: 15px;
float: right;
font-family: "trebuchet MS";
font-variant: small-caps;
}.navbutton:active {
border-top-color: #f2a648;
background: #f2a648;
text-align: center;
width: 90px;
height: 15px;
line-height: 15px;
float: right;
color: #333333;
font-family: "trebuchet MS";
font-variant: small-caps;
}.navbutton a:hover {
color: #FFFFFF;
}aside, details, figcaption, figure, footer, header, hgroup, menu, section {
display: block;
width: 990px;
}nav{
display:block;
width:730px;
}
#container {
width: 1280px;
margin-top: 50px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
}header {
width: 990px;
height: 460px;
background-image: url(../imagens/header_bg.jpg);
background-repeat: repeat-x;
-webkit-border-radius:15px;
border-radius:15px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding-top: 0em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 1em;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-topright: 50px;
margin-top: 30px;
border: 10px solid #FFFFFF;
box-shadow: 0 45px 60px -50px #000000;
}
.box{
width:698px;
margin:0 auto;
position:relative;
}
#slideshow{
width:1020px;
height:309px;
margin:0 auto;
}
.header1{
width:1020px;
height:125px;
}
.slider{
width:698px;
height:310px;
overflow:hidden;
margin:0 auto;
}
.slider-item{
width:698px;
height:309px;
margin:0 auto;
position:relative;
}.slider-item p{
padding: 5px;
width: 170px;
font:normal 12px Arial;
line-height: 15px;
color:#FFF;
background: rgba(0, 0, 0, 0.5);
position:absolute;
text-align:justify;
bottom:20px;
left:20px;
}
.pager{
position:absolute;
z-index:999;
top:20px;
right:20px;
}.pager a{
display:block;
width:15px;
height:15px;
border-radius:100%;
-moz-border-radius:100%;
-webkitborder-radius:100%;
background: #999;
float:left;
cursor:pointer;
}.pager a:hover{
background:#F60;
}.pager a.activado{
background:#F60;
}
.photo {
background-repeat: no-repeat;
float: left;
height: 310px;
width: 990px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-topright: 50px;
-moz-box-shadow:0px 0px 2px #000000;
-webkit-box-shadow:0px 0px 2px #000000;
box-shadow:0px 0px 2px #000000;
opacity:0.92;
margin: 0 auto;
}footer span {
float: left;
text-align:center;
height: 15px;
width: 145px;
margin-top: 25px;
margin-left: 15px;
font-family: "trebuchet MS";
font-size: 16px;
font-weight: bold;
color: #FF9900;
}
#logo {
float: left;
height: 125px;
width: 230px;
}
#main {
float: left;
width: 970px;
background-color: #FBFAF5;
padding: 15px;
border: 10px solid #FFFFFF;
margin-top: 50px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0px 0px 2px #000000;
-webkit-box-shadow:0px 0px 2px #000000;
box-shadow:0px 0px 2px #000000;
box-shadow: 0 45px 60px -50px #000000;
margin-bottom: 30px;
}#main img {
border: 5px solid #CCCCCC;
margin-left: 5px;
margin-top: 5px;
-moz-border-radius: 10px;
}#main a {
font-family: "trebuchet MS";
font-size: 14px;
color: #FF993A;
}#main a:hover {
font-family: "trebuchet MS";
font-size: 14px;
color: #996666;
text-decoration: underline;
text-shadow: 1px #000000;
}
.box_menu {
margin: 10px;
float: left;
height: 250px;
width: 450px;
border: thick solid #F0F0F0;
-moz-border-radius: 10px;
-moz-box-shadow:0px 0px 3px #000000;
-webkit-box-shadow:0px 0px 3px #000000;
box-shadow:0px 0px 3px #000000;
}.container #main .box_menu p {
float: left;
margin-left:10px;
width: 200px;
padding: 10px;
color: #666666;
font-family: "trebuchet MS";
font-style: normal;
font-size: 13px;
text-align:justify;
line-height:20px;
}
.social {
float: right;
height: 24px;
width: 24px;
position: relative;
}
.separator {
background-image: url(../imagens/Dividers.png);
background-repeat: no-repeat;
background-position: center;
height: 32px;
width: 960px;
}
#title {
font-family: "trebuchet MS";
float: left;
width: 350px;
color: #333333;
font-weight: bold;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
line-height: normal;
display: inline;
text-shadow: -1px #000000;
font-size: 12px;
}.social img {
padding: 3px;
margin: 3px;
}details {
margin-top:5px;
float: left;
width: 970px;
text-shadow: 1px 1px #C0C0C0;
text-align:justify;
line-height:25px;
}footer {
width: 970px;
height: 80px;
background-repeat: repeat-x;
float: left;
background-color: #FFFFFF;
-moz-border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 2px 12px rgba(11, 2, 11, 0.1);
-moz-box-shadow: inset 1px 1px 2px 12px rgba(11, 2, 11, 0.1);
box-shadow: inset 1px 1px 2px 12px rgba(11, 2, 11, 0.1);
padding-left: 0px;
}li {
height: 25px;
width: 190px;
display: block;
margin-left: 0px;
list-style-position: outset;
list-style-image: url(../imagens/punto_elenco.gif);
}
.box_footer {
float: left;
height: 120px;
width: 200px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 25px;
background-image: url(../imagens/sepa_box.png);
background-repeat: no-repeat;
font-family: "trebuchet MS";
font-size: 14px;
color: #CC3300;
}a:hover img.atalhos {
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
-moz-border-radius: 10px;
opacity: 0.6;.navbutton a {
color: #333333;
}
.copy {
float: left;
height: 20px;
width: 400px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
margin-left: 30px;
text-align: right;
}.container #main #title form {
margin: 0px;
padding: 0px;
font-family: "trebuchet MS";
}/. Contacto /
#localizar{
width: 970px;
height: 450px;
}
.mapa{
width: 410px;
height: 400px;
background:#03F;
float:left;
}
.localizacao {
background:#F00;
width: 390px;
height: 400px;
float:right;
}Boa noite pessoa, porque não consigo alinhar a DIV=LOCALIZACAO A DIREITA?
no Dreamweaver aparece correcto, mas na net não.
preciso alinha a DIV = MAPA e a DIV=LOCALIZACAO uma ao lado da outra.
<!doctype html lang="pt-br"><head>
<meta charset = "UTF-8">
<meta name='description' content='A melhor carne grelhada em Portugal' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name='keywords' content='Carne, vinho, doces, café, snaker, bar, restaurante' />
<meta property='og:site_name' content='A Carvoaria' />
<meta property='og:title' content='A Carvoaria' />
<link rel="apple-touch-icon" href="/favicon.jpg">
<link rel="shortcut icon" href="/favicon.ico">
<title>Restaurante a Carvoaria</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<div class="container">
<header>
<div class="header1">
<div id="logo"><a href="index.html"><img src="imagens/logo.png" alt="Logotipo" border="0" class="atalhos" /></a></div>
<div class="social"><a href="www.facebook.com"><img src="imagens/facebook.png" alt="Facebook Carvoaria" width="24" height="24" border="0" class="atalhos" /></a></div>
<h2>Comida Tradicional</h2>
<nav>
<div class="navbutton"><a href="contacto.html">Contacto</a></div>
<div class="navbutton"><a href="...">Reservas</a></div>
<div class="navbutton"><a href="...">Galeria</a></div>
<div class="navbutton"><a href="somos.html">Quem Somos</a></div>
<div class="navbutton"><a href="index.html">Inicio</a></div>
</nav>
</div>
<div id="main">
<div id="localizar">
<div class="mapa">
<h2>Localização</h2>
<iframe src="https://www.google.com/maps/
width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="localizacao">
<h3>Morada:</h3>
<br />
<h3>Contactos:</h3>
<br />
<h3>email:</h3>
</div>
</div>
<footer> <span><a href="index.html">Inicio</a></span> <span><a href="somos.html">Quem Somos</a></span> <span><a href="#">Galeria</a></span> <span><a href="#">Reservas</a></span> <span><a href="contacto.html">Contacto</a></span> </footer>
</div>
</header>
</div>
</html>css
Discussão (2)
Carregando comentários...