Gracias por la ayuda .
para ver el ejemplo de como sale es aqui:
[url=http://www.atk20.com/2/][/url]
Código HTML :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sin título</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link type="text/css" href="estilos/adaptativeflex.css" rel="stylesheet" /> <script src="prefix.js" ></script> </head> <body> <div class="contenedor"> <header> <div class="logo"> <img src="images/logo.jpg" width="150" alt=""> <a href="#">FEDE</a> </div> <nav> <a href="#">Inicio</a> <a href="#">Blog</a> <a href="#">Proyectos</a> <a href="#">Contacto</a> </nav> </header> <section class="main"> <article> <img src="imgpublicidad/6767.jpeg" width="300" height="255"> ESTE TEXTO QUIERO QUE SALGA ABAJO DE LA FOTO. COMO DESCRIPCION Y NO ALADO... <img src="imgpublicidad/6767.jpeg" width="300" height="255"> <img src="imgpublicidad/6767.jpeg" width="300" height="255"> <img src="imgpublicidad/6767.jpeg" width="300" height="255"> <img src="imgpublicidad/6767.jpeg" width="300" height="255"> <img src="imgpublicidad/321.jpeg" width="300" height="255"> </article> </section> <!-- <aside> <div class="widget"> <div class="imagen"></div> </div> <div class="widget"> <div class="imagen"></div> </div> </aside>--> <footer> <section class="links"> <a href="#">Inicio</a> <a href="#">Blog</a> <a href="#">Proyectos</a> <a href="#">Contacto</a> </section> <div class="social"> <a href="#">FB</a> <a href="#">TW</a> </div> </footer> </div> </body> </html>
y el codigo CSS
Código CSS :
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contenedor {
background:#ccc;
width:90%;
max-width:1024px;
margin:auto;
/* Flexbox */
display:flex;
flex-flow:row wrap;
}
body {
background:#e9e9e9;
}
header {
background:#2c3e50;
width:100%;
padding:20px;
/* Flexbox */
display: flex;
justify-content:space-between;
align-items:center;
flex-direction:row;
flex-wrap:wrap;
}
header .logo {
color:#fff;
font-size:30px;
}
header .logo img {
width:50px;
vertical-align: top;
}
header .logo a {
color:#fff;
text-decoration: none;
line-height:50px;
}
header nav {
width:50%;
/* Flexbox */
display:flex;
flex-wrap:wrap;
align-items:center;
}
header nav a {
background:#c0392b;
color:#fff;
text-align: center;
text-decoration: none;
padding:10px;
/* Flexbox */
flex-grow:1;
}
header nav a:hover {
background:#e74c3c;
}
.main {
background:#fff;
padding:20px;
flex:1 1 70%;
/*flex:1;*/
}
.main article {
margin-bottom: 20px;
padding-bottom:20px;
border-bottom:1px solid #000;
}
.main article:nth-last-child(1){
margin-bottom: 0;
padding-bottom: 0;
border-bottom:none;
}
/*aside {
background:#e67e22;
padding:20px;
/*FLEX*/
flex:1 1 30%;
/*flex:0 0 300px;*/
display: flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:flex-start;
}
aside .widget {
background: #d35400;
height:150px;
margin:10px;
}
*/
footer {
background:#2c3e50;
width: 100%;
padding:20px;
/* Flexbox */
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
footer .links {
background:#c0392b;
display:flex;
flex-wrap:wrap;
}
footer .links a {
flex-grow:1;
color:#fff;
padding:10px;
text-align: center;
text-decoration:none;
}
footer .links a:hover {
background:#E74C3C;
}
footer .social {
background:#e67e22;
}
footer .social a {
color:#fff;
text-decoration: none;
padding:10px;
display: inline-block;
}
@media screen and (max-width: 800px) {
.contenedor {
flex-direction:column;
}
header {
flex-direction:column;
padding:0;
}
header .logo {
margin:20px 0;
}
header nav {
width: 100%;
}
aside {
flex-direction:row;
flex:0;
}
aside .widget {
flex-grow:1;
}
}
@media screen and (max-width: 600px) {
aside {
flex-direction:column;
}
footer {
justify-content:space-around;
}
}Le agradezco de antemano su tiempo y muchas gracias.!!!
saludos a todos .!!
