Pesquisar na Comunidade

Ola pessoal boa tarde, estou criando um menu carousel mas tem um problema. Quando o texto é muito grande, dou um <br> para continuar em baixo, só que não está fazendo isso, ele está sobrepondo um texto no outro. Segue o código abaixo CSS body { background:#fff; font-family:Arial, sans-serif; } p { margin-bottom:20px; } .clearout { height:20px; clear:both; } #flexiselDemo1, #flexiselDemo2, #flexiselDemo3 { display:none; } .nbs-flexisel-container { position:relative; max-width:100%; } .nbs-flexisel-ul { position:relative; width:9999px; margin:0px; padding:0px; list-style-type:none; text-align:center; height: 80px; } .nbs-flexisel-inner { overflow:hidden; float:left; width:100%; background:#fcfcfc; background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */ background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */ background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */ background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */ background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */ background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */ border:1px solid #ccc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .nbs-flexisel-item { float:left; margin:0px; padding:0px; cursor:pointer; position:relative; line-height:0px; } .nbs-flexisel-item img { cursor: pointer; position: relative; margin-top: 10px; margin-bottom: 10px; max-width:100px; max-height:45px; } .nbs-flexisel-item label { cursor: pointer; position: relative; margin-top: 10px; margin-bottom: 10px; max-width:100px; max-height:45px; } /*** Navigation ***/ .nbs-flexisel-nav-left, .nbs-flexisel-nav-right { width: 22px; height: 22px; position: absolute; cursor: pointer; z-index: 100; opacity: 0.5; } .nbs-flexisel-nav-left { left: 10px; background: url(../images/button-previous.png) no-repeat; } .nbs-flexisel-nav-right { right: 5px; background: url(../images/button-next.png) no-repeat; } JavaScript (function ($) { $.fn.flexisel = function(options) { var defaults = $.extend({ visibleItems : 4, animationSpeed : 200, autoPlay : false, autoPlaySpeed : 3000, pauseOnHover : true, setMaxWidthAndHeight : false, enableResponsiveBreakpoints : true, clone : true, responsiveBreakpoints : { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }, options); /****************************** Private Variables *******************************/ var object = $(this); var settings = $.extend(defaults, options); var itemsWidth; // Declare the global width of each item in carousel var canNavigate = true; var itemsVisible = settings.visibleItems; // Get visible items var totalItems = object.children().length; // Get number of elements var responsivePoints = []; /****************************** Public Methods *******************************/ var methods = { init : function() { return this.each(function() { methods.appendHTML(); methods.setEventHandlers(); methods.initializeItems(); }); }, /****************************** Initialize Items Fully initialize everything. Plugin is loaded and ready after finishing execution *******************************/ initializeItems : function() { var listParent = object.parent(); var innerHeight = listParent.height(); var childSet = object.children(); methods.sortResponsiveObject(settings.responsiveBreakpoints); var innerWidth = listParent.width(); // Set widths itemsWidth = (innerWidth) / itemsVisible; childSet.width(itemsWidth); if (settings.clone) { childSet.last().insertBefore(childSet.first()); childSet.last().insertBefore(childSet.first()); object.css({ 'left' : -itemsWidth }); } object.fadeIn(); $(window).trigger("resize"); // needed to position arrows correctly }, /****************************** Append HTML Add additional markup needed by plugin to the DOM *******************************/ appendHTML : function() { object.addClass("nbs-flexisel-ul"); object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>"); object.find("li").addClass("nbs-flexisel-item"); if (settings.setMaxWidthAndHeight) { var baseWidth = $(".nbs-flexisel-item img").width(); var baseHeight = $(".nbs-flexisel-item img").height(); $(".nbs-flexisel-item img").css("max-width", baseWidth); $(".nbs-flexisel-item img").css("max-height", baseHeight); } $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object); if (settings.clone) { var cloneContent = object.children().clone(); object.append(cloneContent); } }, /****************************** Set Event Handlers Set events: click, resize, etc *******************************/ setEventHandlers : function() { var listParent = object.parent(); var childSet = object.children(); var leftArrow = listParent.find($(".nbs-flexisel-nav-left")); var rightArrow = listParent.find($(".nbs-flexisel-nav-right")); $(window).on("resize", function(event) { methods.setResponsiveEvents(); var innerWidth = $(listParent).width(); var innerHeight = $(listParent).height(); itemsWidth = (innerWidth) / itemsVisible; childSet.width(itemsWidth); if (settings.clone) { object.css({ 'left' : -itemsWidth }); }else { object.css({ 'left' : 0 }); } var halfArrowHeight = (leftArrow.height()) / 2; var arrowMargin = (innerHeight / 2) - halfArrowHeight; leftArrow.css("top", arrowMargin + "px"); rightArrow.css("top", arrowMargin + "px"); }); $(leftArrow).on("click", function(event) { methods.scrollLeft(); }); $(rightArrow).on("click", function(event) { methods.scrollRight(); }); if (settings.pauseOnHover == true) { $(".nbs-flexisel-item").on({ mouseenter : function() { canNavigate = false; }, mouseleave : function() { canNavigate = true; } }); } if (settings.autoPlay == true) { setInterval(function() { if (canNavigate == true) methods.scrollRight(); }, settings.autoPlaySpeed); } }, /****************************** Set Responsive Events Set breakpoints depending on responsiveBreakpoints *******************************/ setResponsiveEvents: function() { var contentWidth = $('html').width(); if(settings.enableResponsiveBreakpoints) { var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; // sorted array for(var i in responsivePoints) { if(contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint itemsVisible = settings.visibleItems; break; } else { // determine custom responsiveBreakpoint to use if(contentWidth < responsivePoints[i].changePoint) { itemsVisible = responsivePoints[i].visibleItems; break; } else continue; } } } }, /****************************** Sort Responsive Object Gets all the settings in resposiveBreakpoints and sorts them into an array *******************************/ sortResponsiveObject: function(obj) { var responsiveObjects = []; for(var i in obj) { responsiveObjects.push(obj[i]); } responsiveObjects.sort(function(a, b) { return a.changePoint - b.changePoint; }); responsivePoints = responsiveObjects; }, /****************************** Scroll Left *******************************/ scrollLeft : function() { if (object.position().left < 0) { if (canNavigate == true) { canNavigate = false; var listParent = object.parent(); var innerWidth = listParent.width(); itemsWidth = (innerWidth) / itemsVisible; var childSet = object.children(); object.animate({ 'left' : "+=" + itemsWidth }, { queue : false, duration : settings.animationSpeed, easing : "linear", complete : function() { if (settings.clone) { childSet.last().insertBefore( childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) } methods.adjustScroll(); canNavigate = true; } }); } } }, /****************************** Scroll Right *******************************/ scrollRight : function() { var listParent = object.parent(); var innerWidth = listParent.width(); itemsWidth = (innerWidth) / itemsVisible; var difObject = (itemsWidth - innerWidth); var objPosition = (object.position().left + ((totalItems-itemsVisible)*itemsWidth)-innerWidth); if((difObject <= Math.ceil(objPosition)) && (!settings.clone)){ if (canNavigate == true) { canNavigate = false; object.animate({ 'left' : "-=" + itemsWidth }, { queue : false, duration : settings.animationSpeed, easing : "linear", complete : function() { methods.adjustScroll(); canNavigate = true; } }); } } else if(settings.clone){ if (canNavigate == true) { canNavigate = false; var childSet = object.children(); object.animate({ 'left' : "-=" + itemsWidth }, { queue : false, duration : settings.animationSpeed, easing : "linear", complete : function() { childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) methods.adjustScroll(); canNavigate = true; } }); } }; }, /****************************** Adjust Scroll *******************************/ adjustScroll : function() { var listParent = object.parent(); var childSet = object.children(); var innerWidth = listParent.width(); itemsWidth = (innerWidth) / itemsVisible; childSet.width(itemsWidth); if (settings.clone) { object.css({ 'left' : -itemsWidth }); } } }; if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2'); return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); return methods.init.apply(this); } else { $.error('Method "' + method + '" does not exist in flexisel plugin!'); } }; })(jQuery); HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name = "viewport" content = "user-scalable=no, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Flexisel - A responsive jQuery Carousel</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.flexisel.js"></script> </head> <body> <p>You can also change the number of items shown depending on the screen width!</p> <ul id="flexiselDemo2"> <li><img src="images/executivo.png" /><br><label>Portal Executivo</label></li> <li><img src="images/relatorios.png" /><br><label>Relatórios</label></li> <li><img src="images/planejamento.png" /><br><label>Planejamento</label></li> <li><img src="images/projetos.png" /><label><br>Gerenciamento de <br>Projetos e Obras</label></li> <li><img src="images/transparencia.png" /><label><br>Transparência e <br>Comunicação Social </label></li> <li><img src="images/indicadores.png" /><label><br>Indicadores</label></li> </ul> <div class="clearout"></div> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo2").flexisel({ enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); }); </script> </body> </html>