Buenas,
Estoy realizando un trabajo y necesitaría algún consejo al respecto....
Tengo que realizar una web con el siguiente wirframe: http://oi66.tinypic.com/68znmp.jpg
Tengo ya bastante avanzado el tema, pero creo que no voy por el buen camino ya que creo que se podría hacer también mediante tablas, no?
Adjuno codigo para consejos:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>PAC3</title>
<link rel="stylesheet" href="estils.css" type="text/css" />
</head>
<body>
<div id="cabecera">
<img id="logo" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/logo.png"
alt="logo" />
<h1>Shoping time</h1>
<div id="iconos">
<ul>
<li><img src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/icon_session.png"
alt="sesion" /> </li>
<li><img src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/icon_heart.png" alt="heart"
/></li>
<li><img src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/icon_bag.png" alt="bag" />
</ul> </li>
</div>
</div>
<nav class="navegador">
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Dona</a></li>
<li><a href="#">Infantil</a></li>
</br> <img id ="buscar" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC
%20FINAL/Recursos/images/icon_search.png" alt="bag" />
<li><a href="#">Inspiració</a></li>
<li><a href="#">Roba</a></li>
<li><a href="#">Sabates</a></li>
<li><a href="#">Esport</a></li>
<li><a href="#">Complents</a></li>
<li><a href="#">Ofertes</a></li>
</ul>
</nav>
<div class="container">
<h2>"Ofertes del 50% temporada / primavera estiu. Aconsegueix les últimes tendències a preus genials"<h2>
<img id="sales" src="file:///C:/Users/Jose%20Luis/Desktop/UOC/2%20semestre/Webs/PAC%20FINAL/Recursos/images/sale.png" alt="logo"
/>
</div>
</body>
</html>body {
margin: 0;
padding: 0;
font: 16px/1.6 Georgia, "Times New Roman", Times, serif;
color: #242424;
text-align: justify;
}
.container {
width: 100%;
max-width: 960px;
margin: 50px auto; /*centrem el contingut horitzontalment*/
}
/* ---------- Cabecera ----------*/
#cabecera {
background-color: #F8E0EC;
padding: 30px;
width: auto;
}
#logo{
float: left;
margin-left: 40px;
width: 100px;
height: 100px;
border: 0px;
}
#cabecera h1 {
position: relative;
top: 5px;
left: 10px;
}
#iconos {
float: right;
margin-top: -80px;
}
#iconos li {
display: inline;
list-style: none;
}
#iconos ul {
margin: 60px;
margin-top: 1px;
}
#buscar {
float: right;
margin-top: -10px;
}
/* ---------- Navegador ----------*/
ul.breadcrumb {
padding: 10px 10px 30px;
margin-left: 30px;
margin-right: 30px;
list-style: none;
background-color: #eee;
font-size: 17px;
}
ul.breadcrumb li {
display: inline;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
/* ---------- Cos ----------*/
#sales {
width: 1285px;
margin-left: -164px;
height: 300px;
}
h2 {
text-align: center;
margin top: -4px;
}Gracias
