Comunidad de diseño web y desarrollo en internet online

Problemas style.responsive

Citar            
MensajeEscrito el 30 Oct 2014 06:20 am
Problemas style.responsive
Hola buenos días a todos soy nuevo en todo esto del diseño web estoy diseñando un sitio web con Artisteer 4,2 pero tengo un pequeño problema con el diseño responsive de la pagina. Tiene 3 columnas una central con todo el contenido básico del sitio y dos columnas más una a cada lado. Por debajo de 980px la columna de la derecha se sitúa por debajo de la columna central y la columna de la izquierda que tiene su menú de navegación por encima de la columna central. Que modificaciones tendría que hacer en el codigo para que por debajo de de 980px la columna de la derecha desapareciera por tener contenido de poca relevancia y aun permaneciera la columna de la izquierda en su sitio con su menú de navegación pero que por debajo de 768px la columna de la izquierda pasara debajo de la columna central de contenido. Espero puedan ayudarme a resolver dicho dilema.

/* Created by Artisteer v4.2.0.60623 */

.responsive body
{
min-width: 240px;
}

.responsive img
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.responsive .art-content-layout img,
.responsive .art-content-layout video
{
max-width: 100%;
height: auto !important;
}

.responsive.responsive-phone .art-content-layout img
{
margin: 1%;
}

.responsive.responsive-phone .art-collage,
.responsive.responsive-tablet .art-collage {
margin: 0 !important;
}

.responsive .art-content-layout .art-sidebar0,
.responsive .art-content-layout .art-sidebar1,
.responsive .art-content-layout .art-sidebar2
{
width: auto !important;
}

.responsive .art-content-layout,
.responsive .art-content-layout-row,
.responsive .art-layout-cell
{
padding: 0;
display: block;
}

.responsive .image-caption-wrapper
{
width: auto;
}

.responsive.responsive-tablet .art-vmenublock,
.responsive.responsive-tablet .art-block
{
margin-left: 1%;
margin-right: 1%;
width: 48%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.responsive .art-responsive-embed
{
height: 0;
padding-bottom: 56.25%;
/* 16:9 */
position: relative;
}

.responsive .art-responsive-embed iframe,
.responsive .art-responsive-embed object,
.responsive .art-responsive-embed embed
{
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.responsive .art-sheet
{
width: auto !important;
min-width: 240px !important;
max-width: none !important;
margin-right: 1% !important;
margin-left: 1% !important;
}

#art-resp {
display: none;
}

@media all and (max-width: 999px)
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
}

@media all and (max-width: 480px)
{
#art-resp, #art-resp-m { display: block; }
#art-resp-t { display: none; }
}

#art-resp-desktop {
display: none;
}
#art-resp-tablet-landscape {
display: none;
}
#art-resp-tablet-portrait {
display: none;
}
#art-resp-phone-landscape {
display: none;
}
#art-resp-phone-portrait {
display: none;
}

@media (min-width: 1200px)
{
#art-resp-desktop { display: block; }
}

@media (min-width: 980px) and (max-width: 1199px)
{
#art-resp-tablet-landscape { display: block; }
}

@media (min-width: 768px) and (max-width: 979px)
{
#art-resp-tablet-portrait { display: block; }
}

@media (min-width: 480px) and (max-width: 767px)
{
#art-resp-phone-landscape { display: block; }
}

@media (max-width: 479px)
{
#art-resp-phone-portrait { display: block; }
}
.responsive .art-header
{
width: auto !important;
max-width: none !important;
min-height: 100px !important;
min-width: 0 !important;
text-align: center;
}

.default-responsive .art-header
{
height: auto;
}

.default-responsive .art-header *
{
position: relative;
text-align: center;
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}

.default-responsive .art-header .art-headline,
.default-responsive .art-header .art-slogan
{
display: block !important;
top: 0 !important;
left: 0 !important;
margin: 2% !important;
text-align: center !important;
}

.default-responsive .art-header .art-headline a,
.default-responsive .art-header .art-slogan
{
white-space: normal !important;
}

.default-responsive .art-header .art-logo
{
display: inline-block;
margin: auto !important;
left: auto;
top: auto !important;
width: auto;
height: auto;
}

.responsive .art-header .art-slidenavigator
{
position: absolute;
}

.default-responsive .art-header .art-positioncontrol
{
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: auto;
height: auto;
margin: auto;
}

.responsive .art-header #art-flash-area
{
display: none;
}

/* Search and other elements in header element directly */
.default-responsive .art-header>.art-textblock
{
position: relative !important;
display: block !important;
margin: 1% auto !important;
width: 75% !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
}

.default-responsive .art-header .art-textblock
{
position: relative !important;
display: block !important;
margin: auto !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
height: auto !important;
width: auto;
background-image: none;
}

/* '.art-header *' used noram align, but for '.art-textblock *' we must force align because of preview */
.responsive .art-header .art-textblock *
{
text-align: center !important;
}

.default-responsive .art-header .art-shapes > .art-textblock,
.default-responsive .art-header .art-slide-item > .art-textblock
{
display: none !important;
}

.default-responsive .art-header .art-shapes > .art-textblock *
{
text-align: center !important;
width: auto !important;
height: auto !important;
display: block;
}

.default-responsive .art-header .art-slider .art-textblock *
{
text-align: center !important;
width: auto !important;
height: auto !important;
display: block;
}

/* For icons like facebook, rss, etc. */
.responsive .art-header>.art-textblock>div
{
width: 100%;
}
.responsive .art-content-layout,
.responsive .art-content-layout-row,
.responsive .art-layout-cell
{
display: block;
}

.responsive .art-layout-cell
{
width: auto !important;
height: auto !important;
}

.responsive .art-content-layout:after,
.responsive .art-content-layout-row:after,
.responsive .art-layout-cell:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.responsive ul.art-vmenu>li>ul
{
padding: 5px;
display: none;
}

.responsive ul.art-vmenu>li>ul:before
{
display: block;
position: absolute;
content: ' ';
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.responsive ul.art-vmenu>li>ul.vmenu-resp-popup-visible
{
display: block;
}

.responsive ul.art-vmenu ul {
position: relative;
left: auto;
top: auto;
visibility: visible;
}

.responsive ul.art-vmenu ul ul a
{
padding-left: 50px;
}

.responsive ul.art-vmenu ul ul ul a
{
padding-left: 75px;
}

.responsive ul.art-vmenu ul ul ul ul a
{
padding-left: 100px;
}

.responsive ul.art-vmenu ul ul ul ul ul a
{
padding-left: 125px;
}

.responsive .art-post
{
border-radius: 0;
}

.responsive .art-footer-inner
{
min-width: 0;
}

.responsive .responsive-tablet-layout-cell
{
width: 50% !important;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.responsive .responsive-layout-row-3 .responsive-tablet-layout-cell
{
width: 33.33% !important;
}

Por fuenwood

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 02 Nov 2014 03:47 am
Primero un consejo, usa el concepto de mobile first. Te dará una maquetación ordenada, limpia y con poco código.

Pasando a lo que dices, para que la columna derecha figure oculta hasta los 980px, agrega esto:

@media all and (max-width: 980px)
.clasedelacolumnaderech {display:none}

Y con eso desaparecerá.

Lo otro que comentas de la columna izquierda abajo de la central.

se me ocurre ponerlos en float left los dos, y la columna derecha con un margin-top del alto de la del centro.

También puedes crear un div contenedor de esas columnas y le asignas un position relative, luego a la columna derecha le pones position absolute y le das igual un margin-top del alto de la del centro o un top: altodelcentro

Espero te ayude.

Por sotelor10

Claber

179 de clabLevel

2 tutoriales

Genero:Masculino  

Diseñador y Maquetador Web

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.