Foros del Web » Creando para Internet » CSS »

responsible desing

 Estas en el tema de responsible desing en el foro de CSS en Foros del Web. he intentado hacer esta web con responsible desing pero tengo un par de dudas, haber si alguien puede ayudarme. 1. usando las media queries no ...
  #1 (permalink)  
Antiguo 19/10/2012, 08:14
laura_moreno14
Invitado
  
Mensajes: n/a
Puntos:
responsible desing
he intentado hacer esta web con responsible desing pero tengo un par de dudas, haber si alguien puede ayudarme.

1. usando las media queries no puedo cambiar la altura del div header cuando cambio de resolucion.
  #2 (permalink)  
Antiguo 19/10/2012, 08:16
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: responsible desing
Nótese que sin código es bastante imposible ayudar.
__________________
(:
  #3 (permalink)  
Antiguo 19/10/2012, 08:34
laura_moreno14
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: responsible desing
Cita:
Iniciado por laura_moreno14 Ver Mensaje
he intentado hacer esta web con responsible desing pero tengo un par de dudas, haber si alguien puede ayudarme.

1. usando las media queries no puedo cambiar la altura del div header cuando cambio de resolucion.
perdon que sin querer no termine el mensaje

2. no consigo alinear los botones de seguir y me gusta

Código: 
* { margin: 0; padding: 0; list-style-position:inside;}
html { font-size:100%; height:100%; font-family:Arial, Helvetica, sans-serif;}
body { width:100%; font-size:0.8em;}
/*Header*/
header { width:100%; background:#282828; overflow:hidden; height:100px;  box-shadow: 0px 0px 7px #000;}
#titulo a { width:18%; color:#FFF; float:left; font-size:4em; font-weight:bold; text-decoration:none; margin-left:1%; padding:0.6%; font-family: 'Alegreya SC';}
#social { width:15%; float:right; margin:1.7% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%; opacity:0.5;}
#social li:hover { opacity:1;}
/* Nav*/
nav { width:98%;background:#93d22b; overflow:hidden; margin:1%;-moz-border-radius: 34px; border-radius: 4px;}
#menu { width:67%; float:left; font-size:1.2em; list-style: none;}
#menu a { color: #fff;float:left; text-decoration: none;  font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { float:left; padding: 3.5% 2.7% 3.5% 2.7%;}
#menu li:hover { float:left; padding: 3.5% 2.7% 3.5% 2.7%;background:#B3EE44;}
.buscador { width:30%;float:right; margin:1%; padding:0.5%;}
#search { width:80%;}
/*index, single, page*/
#wrapper { width:98%; margin: 0 auto; overflow:hidden; padding:1%;}
#contenedor2 { width:73%; float:left;}
#posts { width:94%; margin:3%; overflow:hidden;}
#posts a { color:#93d22b;}
#posts .printfriendly { float:right; text-decoration:none; color:#000;}
#posts .printfriendly:hover{ text-decoration:underline;}
#social2 {}
.twitter-share-button { margin-top:1%; padding:0;}
.fb-like { margin-bottom:1%; padding:0;}
p img { display:block; margin:auto; }
.metabox { margin: 2% 0; overflow:hidden;}
.metabox a{ color:#93d22b; text-decoration: none;}
.metabox a:hover { text-decoration:underline; color:#B3EE44;}
.meta {
background-repeat: no-repeat; 
padding-left:20px;
margin-bottom: 4px;
float:left;
height:16px;
background-position: center left;
}
.category {background-image: url(images/cate.png);}
.tags{background-image: url(images/tag.png);}
#previus { width:50%; float:left;}
#next { width:50%; float:left; text-align:right;}
#coments { margin-top:5%;}
/* Comments! */
 ol.commentlist {list-style-type: none; width:100%;position:relative;}
 ol.commentlist li {width:95%;overflow:hidden;background: #e1e1e1;-webkit-border-radius: 10px;border-radius: 10px;border: 1px solid #ccc;padding:2%;margin: 2% 0;}
 .comment-author { width: 60%;float:left;height:40px;}
 .comment-author img {float:left;border: 1px solid #ccc;margin: 2px;}
 .fn { color: #2d435a;font-weight:bold;font-size:14px;}
 .says {}
 .comment-meta { width: 40%;float:left;height:40px;text-align:right;overflow:hidden;}
 .comment-awaiting-moderation { width:100%; margin-right:10px; text-align:right;}
 .comment-meta a {}
 ol.commentlist li p {}
 .reply a {padding: 1%; background: #666; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; color:#FFF; text-decoration:none; margin:1%; float:left;}
input { margin-bottom: 1%;}
/*category: biblioteca*/
 li.cat-item { list-style:none; padding:3%; border-bottom:1px #B3EE44 dashed;}
  li.cat-item:hover { background:#DBF86B;}
 /*archive*/
.cat{ overflow:hidden; border-bottom:1px #B3EE44 dashed; padding:3%;}
.cat:hover {background:#DBF86B;}
.enlace { float:left;width:100%; display:block; margin-bottom:2%;}
.enlace h1 a{text-decoration:none;}
.enlace h1 a:hover{text-decoration:underline;}
.contenedor { width:100%; float:left;}
.imagen { float:left; width:25%; display:block;}
.resumen { float:right; width:75%; display:block;}
.mas{ margin-top:3%; width:20%;}
.mas a { text-decoration:none;}
.mas a:hover { text-decoration:underline;}
/*sidebar*/
aside { width:25%; float:right; margin:0.8%;}
aside #buscador { display:none; }
.widget { overflow:hidden; width:88%; margin-bottom:3%; padding:0 6% 6% 6%;}
.widget li { text-decoration:none; list-style:none; border-top:1px #B3EE44 dashed; padding:3%;}
.widget li:hover { background:#DBF86B; text-decoration:none;}
.widget a { text-decoration:none; color:#000; }
.widget a:hover { text-decoration: none; color:#FFF;}
.encab { font-size:1.3em; font-weight:bold; color:#000; margin-bottom: 3%;}
.tagcloud a{ width:auto; float:left; height:auto; background: #93d22b; margin: 1%; padding:1%; color:#FFF; font-weight:bold; -moz-border-radius: 4px; border-radius: 4px;}
.tagcloud a:hover{background:#B3EE44; color:#FFF; -moz-border-radius: 4px; border-radius: 4px;}
/*paginacion*/
.pagenavi {margin:3% 0 5% 0;float:left;width: 100%;}
.pagenavi a {padding: 1%;margin-right: 1%;text-decoration: none;border: 0.1em solid #eee;color: #000;}
.pagenavi a:hover {border: .1em solid #000;color: #000;background-color: #eee;}
.pagenavi span.pages {padding: 1%;margin-right: 0.8%;color: #000;font-weight:bold;border: .1em solid #999;}
.pagenavi span.current {padding: 1%;margin-right: 0.8%;font-weight:bold; border: 0.1em solid #666;color: #000;}
.pagenavi span.expand {padding: 0;margin: 0;border: .1em solid #ccc;color: #000;}
.pagenavi .first, .pagenavi .last { border: .1em solid #aaa;}
.pagenavi .single_page {border: 1px solid #ccc;}
/*resultados de busqueda*/

/*footer*/
footer { width:97%; background:#000; overflow:hidden; font-size: 1.2em; padding:1.5% 1.5% 0.5% 1.5%;}
footer a { color:#FFF; text-decoration:none;}
footer a:hover { color:#93d22b;}
#colabora { width:100%; padding:1%;}
#colabora .encab { color:#93d22b; margin-bottom:0.5%;}
#colabora li { list-style:none;}
#enlaces { width:100%; overflow:hidden;}
#enlaces li { float:right; color:#FFF; list-style:none; margin: 1% 1% 1% 2%}

/* Large screens ----------- */
@media screen and (min-width : 1300px) {
#titulo a { font-size:4.8em;}
#social { width:15%; float:right; margin:2.5% 0 1% 1%;}
nav { width:18%; float:left; margin:1% 1% 1% 0;}
#menu { width:100%; overflow:hidden; font-size:1.4em; list-style: none;}
#menu a { color: #fff; overflow:hidden; text-decoration: none;  font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { width:92%;overflow:hidden; padding: 5% 0 5% 8%;}
#menu li:hover { float:left; padding: 5% 0 5% 8%;background:#B3EE44;}
.buscador { display:none; width:90%;float:right; margin:1%; padding:3% 0 10% 0;}
#posts { width:74%; float:right;}
p img { min-width:500px;}
#imagen {width:30%;}
#resumen { width:70%;}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (max-width : 1050px) {
#titulo a { width:18%; color:#FFF; float:left; font-size:3.5em; font-weight:bold; text-decoration:none; margin-left:2%; padding:1%; font-family: 'Alegreya SC';}
#social { width:20%; float:right; margin:1.7% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%;}
#menu { width: 75%; font-size: 1.1em;}
#menu li { float:left; padding: 2.5% 1.7% 2.5% 1.7%;}
#menu li:hover { float:left; padding: 2.5% 1.7% 2.5% 1.7%;}
.buscador { width: 22%; margin:1%; padding:0.2%;}
aside { width:25%; margin:0.8%;}
aside .buscador { display:none;}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (max-width : 820px) {
#social { width:25%; float:right; margin:3% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%;}
header #buscador { visibility:visible; width: 100%;}
#menu { width: 100%; font-size: 1em;}
#menu li { float:left; padding: 2.5% 2.3% 2.5% 2.3%;}
#menu li:hover { float:left; padding: 2.5% 2.3% 2.5% 2.3%;}
.buscador { display:none;}
#contenedor2{ width:68%;}
#posts h1 { font-size:1.7em;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
aside { width:30%; margin:0.8%;}
aside .buscador { display:block; width:90%; margin:0 0 5% 10%;}
}


/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width : 480px) {
#header { height:50px; float:none;}
#titulo a { font-size:2.5em; padding:0.7%; margin-top:5%;}
#social { width:27%; float:right; margin:8% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 0; opacity:0.5;}
#social li img { height:30px;}
#posts .printfriendly { font-size: 0.8em; }
#posts .printfriendly img{ height: 10px; }
#contenedor2 { width:100%;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
aside { width:98%; margin:0.8%;}
footer { font-size: 1em;}
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 360px) {
#titulo a { font-size:2em;}
#social { width:30%;}
#posts h1 { font-size:1.2em;}
#posts img { max-width:300px;}
#social li img { height:20px;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
#menu {  font-size: 0.9em;}
}
  #4 (permalink)  
Antiguo 19/10/2012, 12:41
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 11 años, 9 meses
Puntos: 86
Respuesta: responsible desing
Cita:
Iniciado por laura_moreno14 Ver Mensaje
perdon que sin querer no termine el mensaje

2. no consigo alinear los botones de seguir y me gusta

Código: 
* { margin: 0; padding: 0; list-style-position:inside;}
html { font-size:100%; height:100%; font-family:Arial, Helvetica, sans-serif;}
body { width:100%; font-size:0.8em;}
/*Header*/
header { width:100%; background:#282828; overflow:hidden; height:100px;  box-shadow: 0px 0px 7px #000;}
#titulo a { width:18%; color:#FFF; float:left; font-size:4em; font-weight:bold; text-decoration:none; margin-left:1%; padding:0.6%; font-family: 'Alegreya SC';}
#social { width:15%; float:right; margin:1.7% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%; opacity:0.5;}
#social li:hover { opacity:1;}
/* Nav*/
nav { width:98%;background:#93d22b; overflow:hidden; margin:1%;-moz-border-radius: 34px; border-radius: 4px;}
#menu { width:67%; float:left; font-size:1.2em; list-style: none;}
#menu a { color: #fff;float:left; text-decoration: none;  font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { float:left; padding: 3.5% 2.7% 3.5% 2.7%;}
#menu li:hover { float:left; padding: 3.5% 2.7% 3.5% 2.7%;background:#B3EE44;}
.buscador { width:30%;float:right; margin:1%; padding:0.5%;}
#search { width:80%;}
/*index, single, page*/
#wrapper { width:98%; margin: 0 auto; overflow:hidden; padding:1%;}
#contenedor2 { width:73%; float:left;}
#posts { width:94%; margin:3%; overflow:hidden;}
#posts a { color:#93d22b;}
#posts .printfriendly { float:right; text-decoration:none; color:#000;}
#posts .printfriendly:hover{ text-decoration:underline;}
#social2 {}
.twitter-share-button { margin-top:1%; padding:0;}
.fb-like { margin-bottom:1%; padding:0;}
p img { display:block; margin:auto; }
.metabox { margin: 2% 0; overflow:hidden;}
.metabox a{ color:#93d22b; text-decoration: none;}
.metabox a:hover { text-decoration:underline; color:#B3EE44;}
.meta {
background-repeat: no-repeat; 
padding-left:20px;
margin-bottom: 4px;
float:left;
height:16px;
background-position: center left;
}
.category {background-image: url(images/cate.png);}
.tags{background-image: url(images/tag.png);}
#previus { width:50%; float:left;}
#next { width:50%; float:left; text-align:right;}
#coments { margin-top:5%;}
/* Comments! */
 ol.commentlist {list-style-type: none; width:100%;position:relative;}
 ol.commentlist li {width:95%;overflow:hidden;background: #e1e1e1;-webkit-border-radius: 10px;border-radius: 10px;border: 1px solid #ccc;padding:2%;margin: 2% 0;}
 .comment-author { width: 60%;float:left;height:40px;}
 .comment-author img {float:left;border: 1px solid #ccc;margin: 2px;}
 .fn { color: #2d435a;font-weight:bold;font-size:14px;}
 .says {}
 .comment-meta { width: 40%;float:left;height:40px;text-align:right;overflow:hidden;}
 .comment-awaiting-moderation { width:100%; margin-right:10px; text-align:right;}
 .comment-meta a {}
 ol.commentlist li p {}
 .reply a {padding: 1%; background: #666; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; color:#FFF; text-decoration:none; margin:1%; float:left;}
input { margin-bottom: 1%;}
/*category: biblioteca*/
 li.cat-item { list-style:none; padding:3%; border-bottom:1px #B3EE44 dashed;}
  li.cat-item:hover { background:#DBF86B;}
 /*archive*/
.cat{ overflow:hidden; border-bottom:1px #B3EE44 dashed; padding:3%;}
.cat:hover {background:#DBF86B;}
.enlace { float:left;width:100%; display:block; margin-bottom:2%;}
.enlace h1 a{text-decoration:none;}
.enlace h1 a:hover{text-decoration:underline;}
.contenedor { width:100%; float:left;}
.imagen { float:left; width:25%; display:block;}
.resumen { float:right; width:75%; display:block;}
.mas{ margin-top:3%; width:20%;}
.mas a { text-decoration:none;}
.mas a:hover { text-decoration:underline;}
/*sidebar*/
aside { width:25%; float:right; margin:0.8%;}
aside #buscador { display:none; }
.widget { overflow:hidden; width:88%; margin-bottom:3%; padding:0 6% 6% 6%;}
.widget li { text-decoration:none; list-style:none; border-top:1px #B3EE44 dashed; padding:3%;}
.widget li:hover { background:#DBF86B; text-decoration:none;}
.widget a { text-decoration:none; color:#000; }
.widget a:hover { text-decoration: none; color:#FFF;}
.encab { font-size:1.3em; font-weight:bold; color:#000; margin-bottom: 3%;}
.tagcloud a{ width:auto; float:left; height:auto; background: #93d22b; margin: 1%; padding:1%; color:#FFF; font-weight:bold; -moz-border-radius: 4px; border-radius: 4px;}
.tagcloud a:hover{background:#B3EE44; color:#FFF; -moz-border-radius: 4px; border-radius: 4px;}
/*paginacion*/
.pagenavi {margin:3% 0 5% 0;float:left;width: 100%;}
.pagenavi a {padding: 1%;margin-right: 1%;text-decoration: none;border: 0.1em solid #eee;color: #000;}
.pagenavi a:hover {border: .1em solid #000;color: #000;background-color: #eee;}
.pagenavi span.pages {padding: 1%;margin-right: 0.8%;color: #000;font-weight:bold;border: .1em solid #999;}
.pagenavi span.current {padding: 1%;margin-right: 0.8%;font-weight:bold; border: 0.1em solid #666;color: #000;}
.pagenavi span.expand {padding: 0;margin: 0;border: .1em solid #ccc;color: #000;}
.pagenavi .first, .pagenavi .last { border: .1em solid #aaa;}
.pagenavi .single_page {border: 1px solid #ccc;}
/*resultados de busqueda*/

/*footer*/
footer { width:97%; background:#000; overflow:hidden; font-size: 1.2em; padding:1.5% 1.5% 0.5% 1.5%;}
footer a { color:#FFF; text-decoration:none;}
footer a:hover { color:#93d22b;}
#colabora { width:100%; padding:1%;}
#colabora .encab { color:#93d22b; margin-bottom:0.5%;}
#colabora li { list-style:none;}
#enlaces { width:100%; overflow:hidden;}
#enlaces li { float:right; color:#FFF; list-style:none; margin: 1% 1% 1% 2%}

/* Large screens ----------- */
@media screen and (min-width : 1300px) {
#titulo a { font-size:4.8em;}
#social { width:15%; float:right; margin:2.5% 0 1% 1%;}
nav { width:18%; float:left; margin:1% 1% 1% 0;}
#menu { width:100%; overflow:hidden; font-size:1.4em; list-style: none;}
#menu a { color: #fff; overflow:hidden; text-decoration: none;  font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { width:92%;overflow:hidden; padding: 5% 0 5% 8%;}
#menu li:hover { float:left; padding: 5% 0 5% 8%;background:#B3EE44;}
.buscador { display:none; width:90%;float:right; margin:1%; padding:3% 0 10% 0;}
#posts { width:74%; float:right;}
p img { min-width:500px;}
#imagen {width:30%;}
#resumen { width:70%;}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (max-width : 1050px) {
#titulo a { width:18%; color:#FFF; float:left; font-size:3.5em; font-weight:bold; text-decoration:none; margin-left:2%; padding:1%; font-family: 'Alegreya SC';}
#social { width:20%; float:right; margin:1.7% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%;}
#menu { width: 75%; font-size: 1.1em;}
#menu li { float:left; padding: 2.5% 1.7% 2.5% 1.7%;}
#menu li:hover { float:left; padding: 2.5% 1.7% 2.5% 1.7%;}
.buscador { width: 22%; margin:1%; padding:0.2%;}
aside { width:25%; margin:0.8%;}
aside .buscador { display:none;}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (max-width : 820px) {
#social { width:25%; float:right; margin:3% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%;}
header #buscador { visibility:visible; width: 100%;}
#menu { width: 100%; font-size: 1em;}
#menu li { float:left; padding: 2.5% 2.3% 2.5% 2.3%;}
#menu li:hover { float:left; padding: 2.5% 2.3% 2.5% 2.3%;}
.buscador { display:none;}
#contenedor2{ width:68%;}
#posts h1 { font-size:1.7em;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
aside { width:30%; margin:0.8%;}
aside .buscador { display:block; width:90%; margin:0 0 5% 10%;}
}


/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width : 480px) {
#header { height:50px; float:none;}
#titulo a { font-size:2.5em; padding:0.7%; margin-top:5%;}
#social { width:27%; float:right; margin:8% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 0; opacity:0.5;}
#social li img { height:30px;}
#posts .printfriendly { font-size: 0.8em; }
#posts .printfriendly img{ height: 10px; }
#contenedor2 { width:100%;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
aside { width:98%; margin:0.8%;}
footer { font-size: 1em;}
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 360px) {
#titulo a { font-size:2em;}
#social { width:30%;}
#posts h1 { font-size:1.2em;}
#posts img { max-width:300px;}
#social li img { height:20px;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
#menu {  font-size: 0.9em;}
}
Hola te falto mostrar el html y si puedes pon un link del proyecto parar analizar la falla!
__________________
Saludos!
----------------------------------------------------------
  #5 (permalink)  
Antiguo 20/10/2012, 05:18
laura_moreno14
Invitado
  
Mensajes: n/a
Puntos:
El link es el de mi firma
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:27.