si alguien mas me puede ayudar se lo agradecería un montón..
he probado todas las combinaciones posibles.
Pongo el codigo entero pero en realidad la parte que me afecta es donde pone cambio de resolución he puesto un código del foro color red donde empieza donde tengo el problema,,,
gracias y salud
Código CSS:
Ver original<style type="text/css">
/*
R E S E T (Por Eric Meyer)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: top; background: transparent;}
body { line-height: 1;}
ol, ul { }
blockquote, q { quotes: none;}
:focus { outline: 0;}
ins { text-decoration: none;}
del { text-decoration: line-through;}
table { border-collapse: collapse; border-spacing: 0; }
a img { border:none; }
a { text-decoration: none;}
* { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/*
C L A S E S P R E S E N T A C I O N A L E S
*/
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left; }
.alignright { float: right;}
.clear:after { clear:both;
display:block;
height:0;
visibility: hidden;
content: ".";}
/* Estructura */
#contenedor {
margin: 0 auto;
width:80%;
}
header {
background-color: #F5EEFD;
overflow: hidden;
padding: 10px 30px 10px 30px;
min-width: 290px;
}
a img { float:left; }
/* contenido medio */
#contenido-tras-cabecera {
margin-top: 20px;
min-width: 290px;
overflow: hidden;
border:1px black solid;
}
footer {
background-color: #F5EEFD;
min-width: 290px;
overflow: hidden;
padding:30px 10px 5px 10px;
}
[COLOR="Red"]/* --------a partir de aqui se ajusta la pagina al cambiar la resolucion --------*/
@media screen and (max-width:720px) {
ul li { float: left;
list-style: none;
padding-bottom: 5px;
}
.ajustar-nav {
float:left;
width: 140px;
clear: left;
}
img .imagen-inicio{
position: absolute;
width: 95%;
}
img .imagen-inicio2{
position: absolute
width: 95%;
}
img .imagen-inicio3{
position:absoute
width: 95%;
}
img .imagen-inicio4{
position: absolute
width: %;
}
div #cf {
position: relative;
width: 100%;
border: solid 5px black;
}
.interior-derecho-inicio {
clear:both;
width: 100%;
}
[/COLOR]
.derechos-reservados {
float: left;
max-width:220px;
padding-left: 18px;
}
.imagen-footer-logo {
width:100%;
max-width: 200px;
float: left;
display: block;
margin-right: 80px;
padding-bottom: 5px;
padding-left: 22px;
}
p.floristeria {
color:#2DC800;
font-size: 2.2em;
float: left;
clear: both;
} }
/* ---------aqui acaba el ajuste de media -----------------*/
/* menu de navegacion */
ul {
width: 520px;
margin-top: 10px;
font-family: arial;
font-size: 1.0em;
float:right;
clear: right;
}
li {
display: inline;
list-style: square;
list-style-position: inside;
}
li:before {
content: url("imagenes/circulo.png");
}
/* Tipografia y colores */
h1 {
font-size: 1.2em;
padding-left: 10px;
line-height: 22px;
margin-top: -20px;
display: block;
color: #555555;
font-family: arial, helvetica sans-serif;
font-weight: 700;
}
article a {
color: #6633cc;
}
a:hover {
color: #FF9999;
}
h2 {
font-size: 1.0em;
font-family: arial, helvetica sans-serif;
padding-left: 10px;
}
.floristeria {
color:#2DC800;
font-size: 2.2em;
float: right;
padding-right: 10px;
padding-top: 10px;
}
P.texto-inicio {
font-size: 0.9em;
padding: 10px;
line-height: 22px;
font-family: arial, helvetica sans-serif;
color: #555555;
}
/* parte media */
.caja-inicio {
width:90%;
padding: 25px;
margin-top: 25px;
margin-left: 10px;
box-shadow: 1px 1px 5px rgba(0,0,0,.8)
}
article {
float: right;
width: 50%;
margin-right: 5px;
margin-bottom: 40px;
}
.imagen-inicio{
position: absolute;
width: 100%;
}
.imagen-inicio2{
position: absolute;
width: 100%;
}
.imagen-inicio3{
position: absolute;
width: 100%;
}
.imagen-inicio4{
position: absolute;
width: 100%;
}
/* footer */
.imagen-footer-logo {
width:100%;
max-width: 200px;
float: left;
display: block;
margin-right: 50px;
}
.imagen-footer-face {
float: right;
display: block;
padding-top: 5px;
clear: left;
}
cite {
text-align: center;
margin: 0 auto;
max-width:600px;
color: #555555;
padding-top: 10px;
padding-left: 20px;
clear:right;
}
.cajavacia {
height:50px;
}
</style>
Código HTML:
Ver original
<a href="http://www.flowerpower.es"> <img src="imagenes/logo2.png" alt="imagen" /> </a> <p class="floristeria">FLORISTERIA
<br> <span style=" font-size: 0.4em; color:#2DC800;">DISEÑO Y ARTE FLORAL
<li><a href="http://www.flowerpower.es">Inicio
</a></li> <li><a href="http://www.flowerpower.es">Quienes Somos
</a></li> <li><a href="http://www.flowerpower.es">Servicios
</a></li> <li><a href="http://www.flowerpower.es">Trabajos
</a></li> <li><a href="http://www.flowerpower.es">Noticias
</a></li> <li><a href="http://www.flowerpower.es">Contacto
</a></li> [COLOR="red"]
<div id="contenido-tras-cabecera">
<img class="imagen-inicio" src="imagenes/ramo3.jpg" /> <img class="imagen-inicio2" src="imagenes/ramo2.jpg" /> <img class="imagen-inicio3" src="imagenes/ramo4.jpg" /> <img class="imagen-inicio4" src="imagenes/ramo1.jpg" />
<article class="interior-derecho-inicio">
<h1> </br> </br>Bienvenidos a la web de Floristeria Flower Power
</h1>
Desde 1995 nos dedicamos a prestar un esmerado servicio de floristería en general.
Le atenderemos como usted se merece, por profesionales debidamente cualificados y diplomados,
con una amplia experiencia en el sector. Nosotros somos una floristería con comprobada y larga trayectoria,
siempre a la vanguardia en los aspectos más novedosos y modernos, nos preocupamos día a día a contribuir al
logro de sus deseos, ofreciendo un buen servicio, a un costo razonable y a una calidad insuperable.
Esperamos que tu visita sirva para que conozcas mejor nuestra Floristería.
<a href="http://www.elpais.es"> Pinche aqui para saber mas sobre nuestros servicios ->
</a> <div class="caja-inicio"> <p class="texto-inicio">Próximo
<a href="http://www.elpais.es">Evento.
</a></p> <a href=""><h2>Dia de la Madre 2014
</h2></a> <p class="texto-inicio">No olvides de apuntar el dia 4 de mayo en tu calendario
es el dia de la Madre.
<a href="http://www.flowerpower.es"> <img class="imagen-footer-logo" src="imagenes/logo.png" alt="imagen" /> </a>
<cite class="derechos-reservados"> All content ©2014 Flower Power | Todos los derechos reservados
Web por IZ@N
<a href="http://www.flowerpower.es"> <img class="imagen-footer-face" src="imagenes/logo-facebook.png" alt="imagen" /> </a>
</div> <!-- cierre de div container -->