Foros del Web » Creando para Internet » CSS »

Div, css y responsive

Estas en el tema de Div, css y responsive en el foro de CSS en Foros del Web. Hola a todos, estuve toda la semana intentando armar una web con div, css y que sea responsive.... es tal la cantidad de código en ...
  #1 (permalink)  
Antiguo 30/08/2014, 08:28
 
Fecha de Ingreso: febrero-2003
Mensajes: 37
Antigüedad: 21 años, 2 meses
Puntos: 0
Pregunta Div, css y responsive

Hola a todos, estuve toda la semana intentando armar una web con div, css y que sea responsive.... es tal la cantidad de código en el css que fui poniendo, pisando, sacando arreglando, comentando... que termine absolutamente perdido!! Por lo que decidí empezar de cero... por favor suplico paciencia!

Lo que voy a hacer es una sola pagina y luego ir aplicando lo mismo a las demás, no se si es óptimo pero a mi me va a servir para ir "machacándolo"

No he logrado poner el texto de abajo en columnado con las fotos y en el menu superior no logro mover el logo a la izquierda y centrar horizontalmente las imagenes y los textos.

Hasta ahora lo que logre fue esto:

http://www.nachodelatorre.com.ar/pro.../probando.html

y necesito que quede así:

http://www.nachodelatorre.com.ar/pro...ffee/look1.jpg

Una vez que pueda solucionar esto empiezo con lo de responsive.

Muchas gracias a todos! Saludos

PD: No puse el código pues no se como se hace para ponerlo prolijamente con (según he leído) un tag, si me lo cuentan también se los agradecería mucho
  #2 (permalink)  
Antiguo 30/08/2014, 11:38
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: Div, css y responsive

Para poner código, lo seleccionas y usas la opción highlight en el editor.

Ambos problemas podrías solucionarlos con float: left.
__________________
(:
  #3 (permalink)  
Antiguo 30/08/2014, 19:20
 
Fecha de Ingreso: febrero-2003
Mensajes: 37
Antigüedad: 21 años, 2 meses
Puntos: 0
Respuesta: Div, css y responsive

lo edito para que quede prolijo

Última edición por idelatorre; 31/08/2014 a las 06:38 Razón: lo borre para hacerlo prolijo con Highlight!
  #4 (permalink)  
Antiguo 31/08/2014, 06:45
 
Fecha de Ingreso: febrero-2003
Mensajes: 37
Antigüedad: 21 años, 2 meses
Puntos: 0
Respuesta: Div, css y responsive

Cita:
Iniciado por pzin Ver Mensaje
Para poner código, lo seleccionas y usas la opción highlight en el editor.

Ambos problemas podrías solucionarlos con float: left.

Hola! Acá de nuevo finalmente pude encontrar el highliht, tuve que tocar las preferencias de mi perfil...

Luego de tu sugerencia pzin finalmente logre que los textos se centren pero si le pongo a los tres divs float:left desaparecen... con dos se centran pero al sacarle las xxxxxxxxxx a la tercer linea del div del medio se descentra todo, y con el menú sigo igual sin poder hacer que el logo se muestre a la izq y lo demas alineado a la derecha y todo centrado verticalmente. Ojalá alguien me pueda destrabar y pueda seguir, se me acaban los tiempo y todavía tengo que investigar como hacer toda esta pagina responsive...

Quedo atento y ansioso! Saludos y gracias de nuevo a todos! Ahi va el código

Código HTML:
Ver original
  1. <!doctype html>
  2. <meta charset="windows-1250">
  3. <title>Untitled Document</title>
  4.  
  5. <!-- NECESARIOS para fancyBox-->
  6.     <!-- Add jQuery library -->
  7.     <script type="text/javascript" src="img/look/lib/jquery-1.10.1.min.js"></script>
  8.     <!-- Add mousewheel plugin (this is optional) -->
  9.     <script type="text/javascript" src="img/look/lib/jquery.mousewheel-3.0.6.pack.js"></script>
  10.  
  11.     <!-- Add fancyBox main JS and CSS files -->
  12.     <script type="text/javascript" src="img/look/source/jquery.fancybox.js?v=2.1.5"></script>
  13.     <link rel="stylesheet" type="text/css" href="img/look/source/jquery.fancybox.css?v=2.1.5" media="screen" />
  14.  
  15.     <!-- Add Button helper (this is optional) -->
  16.     <link rel="stylesheet" type="text/css" href="img/look/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
  17.     <script type="text/javascript" src="img/look/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
  18.  
  19.     <!-- Add Thumbnail helper (this is optional) -->
  20.     <link rel="stylesheet" type="text/css" href="img/look/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
  21.     <script type="text/javascript" src="img/look/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
  22.  
  23.     <!-- Add Media helper (this is optional) -->
  24.     <script type="text/javascript" src="img/look/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
  25.  
  26.     <script type="text/javascript">
  27.         $(document).ready(function() {
  28.             /*
  29.              *  Simple image gallery. Uses default settings
  30.              */
  31.  
  32.             $('.fancybox').fancybox();
  33.  
  34.             /*
  35.              *  Different effects
  36.              */
  37.  
  38.             // Change title type, overlay closing speed
  39.             $(".fancybox-effects-a").fancybox({
  40.                 helpers: {
  41.                     title : {
  42.                         type : 'outside'
  43.                     },
  44.                     overlay : {
  45.                         speedOut : 0
  46.                     }
  47.                 }
  48.             });
  49.  
  50.             // Disable opening and closing animations, change title type
  51.             $(".fancybox-effects-b").fancybox({
  52.                 openEffect  : 'none',
  53.                 closeEffect : 'none',
  54.  
  55.                 helpers : {
  56.                     title : {
  57.                         type : 'over'
  58.                     }
  59.                 }
  60.             });
  61.  
  62.             // Set custom style, close if clicked, change title type and overlay color
  63.             $(".fancybox-effects-c").fancybox({
  64.                 wrapCSS    : 'fancybox-custom',
  65.                 closeClick : true,
  66.  
  67.                 openEffect : 'none',
  68.  
  69.                 helpers : {
  70.                     title : {
  71.                         type : 'inside'
  72.                     },
  73.                     overlay : {
  74.                         css : {
  75.                             'background' : 'rgba(238,238,238,0.85)'
  76.                         }
  77.                     }
  78.                 }
  79.             });
  80.  
  81.             // Remove padding, set opening and closing animations, close if clicked and disable overlay
  82.             $(".fancybox-effects-d").fancybox({
  83.                 padding: 0,
  84.  
  85.                 openEffect : 'elastic',
  86.                 openSpeed  : 150,
  87.  
  88.                 closeEffect : 'elastic',
  89.                 closeSpeed  : 150,
  90.  
  91.                 closeClick : true,
  92.  
  93.                 helpers : {
  94.                     overlay : null
  95.                 }
  96.             });
  97.  
  98.             /*
  99.              *  Button helper. Disable animations, hide close button, change title type and content
  100.              */
  101.  
  102.             $('.fancybox-buttons').fancybox({
  103.                 openEffect  : 'none',
  104.                 closeEffect : 'none',
  105.  
  106.                 prevEffect : 'none',
  107.                 nextEffect : 'none',
  108.  
  109.                 closeBtn  : false,
  110.  
  111.                 helpers : {
  112.                     title : {
  113.                         type : 'inside'
  114.                     },
  115.                     buttons : {}
  116.                 },
  117.  
  118.                 afterLoad : function() {
  119.                     this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
  120.                 }
  121.             });
  122.  
  123.  
  124.             /*
  125.              *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
  126.              */
  127.  
  128.             $('.fancybox-thumbs').fancybox({
  129.                 prevEffect : 'none',
  130.                 nextEffect : 'none',
  131.  
  132.                 closeBtn  : false,
  133.                 arrows    : false,
  134.                 nextClick : true,
  135.  
  136.                 helpers : {
  137.                     thumbs : {
  138.                         width  : 50,
  139.                         height : 50
  140.                     }
  141.                 }
  142.             });
  143.  
  144.             /*
  145.              *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
  146.             */
  147.             $('.fancybox-media')
  148.                 .attr('rel', 'media-gallery')
  149.                 .fancybox({
  150.                     openEffect : 'none',
  151.                     closeEffect : 'none',
  152.                     prevEffect : 'none',
  153.                     nextEffect : 'none',
  154.  
  155.                     arrows : false,
  156.                     helpers : {
  157.                         media : {},
  158.                         buttons : {}
  159.                     }
  160.                 });
  161.  
  162.             /*
  163.              *  Open manually
  164.              */
  165.  
  166.             $("#fancybox-manual-a").click(function() {
  167.                 $.fancybox.open('1_b.jpg');
  168.             });
  169.  
  170.             $("#fancybox-manual-b").click(function() {
  171.                 $.fancybox.open({
  172.                     href : 'iframe.html',
  173.                     type : 'iframe',
  174.                     padding : 5
  175.                 });
  176.             });
  177.  
  178.             $("#fancybox-manual-c").click(function() {
  179.                 $.fancybox.open([
  180.                     {
  181.                         href : '1_b.jpg',
  182.                         title : 'My title'
  183.                     }, {
  184.                         href : '2_b.jpg',
  185.                         title : '2nd title'
  186.                     }, {
  187.                         href : '3_b.jpg'
  188.                     }
  189.                 ], {
  190.                     helpers : {
  191.                         thumbs : {
  192.                             width: 75,
  193.                             height: 50
  194.                         }
  195.                     }
  196.                 });
  197.             });
  198.  
  199.  
  200.         });
  201.     </script>
  202.     <style type="text/css">
  203.         .fancybox-custom .fancybox-skin {
  204.             box-shadow: 0 0 50px #222;
  205.         }
  206.  
  207.         body {
  208.             max-width: 1100px;
  209.             margin: 0 auto;
  210.         }
  211.     </style>
  212.  
  213. <!-- FIN fancyBox-->
  214.  
  215. <style type="text/css">
  216. .centrado {
  217.     margin: 0 auto;
  218.     max-width: 1100px;
  219.     clear:both;
  220.     }
  221.    
  222. .caja {
  223.     width: 85%;
  224.     margin: 0 auto;
  225. }
  226.  
  227. .caja2 {
  228.  width: 85%;
  229.  margin: 0 auto;
  230.  font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  231.  font-size:16px;
  232.  color:#fff;
  233.  text-align:center;
  234. }
  235.  
  236. .caja2 div {
  237.     display:block;
  238. }
  239.  
  240.  
  241. .menu ul{
  242.     list-style:none;
  243.     }
  244.    
  245. .menu ul li{
  246.     }
  247.    
  248.    
  249. #nav{
  250.     background-color:#fff;
  251.     border:1px solid #fff;
  252.     border-width:1px 0;
  253.     list-style:none;
  254.     margin:0;
  255.     padding:0;
  256.     text-align:right;
  257.     }
  258.  
  259. #nav li{
  260.     display:inline;
  261.     }
  262.  
  263. #nav a{
  264.     display:inline-block;
  265.     padding:12px;
  266.     }
  267.  
  268. a {
  269.     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  270.     font-size: 20px;
  271.     color: #999999;
  272. }
  273. a:link {
  274.     text-decoration: none;
  275. }
  276. a:visited {
  277.     text-decoration: none;
  278.     color: #999999;
  279. }
  280. a:hover {
  281.     text-decoration: underline;
  282.     color: #666666;
  283. }
  284. a:active {
  285.     text-decoration: none;
  286.     color: #999999;
  287. }
  288.  
  289. </head>
  290.  
  291.  
  292. <div id="contenedor-general" class="centrado" style="background-color:#EE9784">
  293.     <ul id="nav">
  294.         <li><a href="index.html"><img src="img/logoCoffeeArriba.png"></a></li>
  295.         <li><a href="nosotros.html">nosotros</a></li>
  296.         <li><a href="locales.html">locales</a></li>
  297.         <li><a href="prensa.html">prensa</a></li>
  298.         <li><a href="premios.html">premios</a></li>
  299.         <li><a href="contacto.html">contacto</a></li>
  300.         <li><a href="contacto.html" target="_blank"><img src="img/btn_facebook.png"></a></li>
  301.         <li><a href="contacto.html" target="_blank"><img src="img/btn_picassa.png"></a></li>
  302.     </ul>
  303.  
  304.   <div id="titulo"><img src="img/titulobabymujer.png"></div>
  305.  
  306. <div id="contenedor-imagenes" class="caja">
  307.     <div id="izq" style="display:inline"><a href="#"><img src="img/flechaIzq.png"/></a></div>
  308.     <div id="foto1" style="display:inline"><a class="fancybox" href="img/look/foto1grande.jpg" data-fancybox-group="gallery" title="BABY - Mujer"><img src="img/look/foto1.jpg"/></a></div>
  309.     <div id="foto2" style="display:inline"><a class="fancybox" href="img/look/foto2grande.jpg" data-fancybox-group="gallery" title="BABY - Mujer"><img src="img/look/foto2.jpg"/></a></div>
  310.     <div id="foto3" style="display:inline"><a class="fancybox" href="img/look/foto3grande.jpg" data-fancybox-group="gallery" title="BABY - Mujer"><img src="img/look/foto3.jpg"/></a></div>
  311.     <div id="der" style="display:inline"><a href="#"><img src="img/flechaDer.png"/></a></div>
  312. </div>
  313.  
  314. <div id="contenedor-textos" class="caja2">
  315.     <div id="txt" >
  316.         <div class="caja2" id="texto1" style="float:left; width:33.33%">Camperita Twin 15122.27<br>Remera Corazones 15212.06<br>Legging Estampada 15174.32</div>
  317.         <div class="caja2" id="texto2" style="float:left; width:33.33%">Blusa Belen 15210.06<br>Short Print Denim 15260.24<br>xxxxxxxxxxxxxx.xxx</div>
  318.         <div class="caja2" id="texto3" >Camperita Rositas 15121.29<br>Body Flores 15102.06<br>Pant. Rositas 15172.292</div>
  319.     </div>
  320.  </div>
  321.      
  322. </div>
  323. </body>
  324. </html>
  #5 (permalink)  
Antiguo 31/08/2014, 14:06
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: Div, css y responsive

Simplemente añádele al contenedor de los elementos un:

Código CSS:
Ver original
  1. overflow: hidden;
__________________
(:

Etiquetas: html, responsive
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




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