Tema: Diferentes
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 13/10/2009, 13:54
lasombra
 
Fecha de Ingreso: noviembre-2006
Mensajes: 122
Antigüedad: 17 años, 5 meses
Puntos: 0
Respuesta: Diferentes
Esto es el HTML
Cita:
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Noticias</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

</div>
<div id="main_content">
<div id="top_banner">
<a href="index.html"><img src="images/logo.jpg" width="230" height="130" alt="home" title="logo" border="0" class="logo" /></a>
</div>

<div id="page_content_left">
<div class="title">
Welcome to our photoGallery
</div>
<div class="content_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="content_text">
<img src="images/illustr2.jpg" width="130" height="79" alt="pic" title="pic" class="pic" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="title">
About us
</div>
<div class="content_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

<div class="content_text">


</div>
</div>

etc...
CSS
Cita:
body
{
background:url(images/top_bg.jpg) repeat-x top #F6F5E9;
margin:auto;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:11px;
color:#ccc;
}

h1{
font-size:15px;
color:#6C0008;
padding:5px;
margin:3px;
font-weight:normal;
}
h2{
font-size:13px;
color:#666666;
margin:0px;
padding:3px;
}
h3{
font-size:14px;
color:#666666;
margin:0px;
padding:3px;
}
h4{
font-size:12px;
color: #CE6700;
margin:0px;
padding:3px;
font-weight:normal;
}
.clear {
clear:both;
overflow:hidden;
height:4px;
}
#main_content{
width:650px;
height: auto;
margin:auto;
background-color:#F6F6EE;
border:8px #FFFFFF solid;
font:"Times New Roman", Times, serif,;
font-size:16px;
color:#191970;
text-align:center;

}
#top_banner{
width:650px;
height:130px;
margin:auto;
/*background:url(images/illustr.jpg) no-repeat right;*/
}
img.logo{
padding-left:15px;
}
/*------top menu---------*/
#top_menu{
width:800px;
margin:auto;
padding:15px;
}
ul.menu {
list-style-type:none; display:block; width: auto; height:18px; margin:auto; padding:0;}

ul.menu li {
display:inline;}

a.nav:link, a.nav:visited {
display:block; float:left; padding:4px 11px 0 26px; margin:0;width: auto; height:18px; text-align:center; line-height:18px; font-weight:bold; font-size:12px;
text-decoration:none; color:#fff; background:url(images/bt_bg.jpg) no-repeat left;}

a.nav:hover {
display:block; float:left; padding:4px 11px 0 26px; margin:0;width: auto; height:18px; text-align:center; line-height:18px;
text-decoration:none; color:#fff; background:url(images/bt_bg_a.jpg) no-repeat left;}
/*----page content----*/
#page_content{
width:800px;
height:auto;
margin:auto;
}
#page_content_left{
width:600px;
height:auto;
float:left;
padding:10px;

}
#page_content_right{
width:400px;
height:auto;
float:left;
padding:10px;
}
.title{
font-size:16px;
color:#808080;
clear:both;
padding-left:10px;
}
.content_text{
font-size:11px;
color:#333333;
height:auto;
text-align:justify;
padding:8px;
}
img.pic{
padding:0px;
margin-right:10px;
margin-bottom:10px;
border:5px #FFFFFF solid;
float:left;
}
img.map_pic{
padding:0px;
margin:10px;
border:5px #FFFFFF solid;
float:right;
}
img.gallery{
padding:0px;
margin:8px;
border:5px #FFFFFF solid;
float:left;
}
.more{
width:auto;
float:right;
height:20px;
}
.link_more a{
width:auto;
float:left;
text-decoration:none;
color:#990000;
font-size:12px;
padding:3px 23px 0 5px;
}
.link_more a:hover{
text-decoration:underline;
}
img.more{
float:left;
}
#page_bottom{
width:830px;
clear:both;
padding:10px;
height:auto;
}
img.inspiration{
padding:2px;
margin:3px;
border:2px #FFFFFF solid;
}

/*-------footer-----*/
#footer{
width:2032px;
height:50px;
margin-top:60px;
background-color: #CCCCCC;
}

#copyrights{
width:350px;
color: #666666;
font-size:10px;
float:left;
padding:10px;
}