Jump to content

Search the Community

Showing results for tags 'flexbox'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 5 results

  1. I found code for a scrolling looping slideshow that I like but I can't get the div's to center. The div's seem to be left aligned with more space on the right side of the screen than left; this is evident on my 1366px monitor but much more obvious on a 1920px monitor where there is a lot of blank space on the right side of the screen. I have assigned display:flex to the parent and nested containers and center to align-items and justify-content, but the 2 main div's ("slider" and "wrapper_slider_text") are not centering. If anyone can help, I'd be very grateful. Thanks. <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { width: 100%; margin: 0 auto 0; } .flex-container-slider { display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: 0px; justify-content: center; align-items: center; } .slider { width: 768px; height: 432x; overflow: hidden; } #slider_images { width : 9984px; height: 432px; overflow: hidden; /* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */ animation: slide 36s infinite; -moz-animation: slide 36s infinite; -webkit-animation: slide 36s infinite; -o-animation: slide 36s infinite; } #slider_images img { float: left; } .container_blank_space_small p { text-indent: -9999px; height: 26px; } @keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-moz-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-webkit-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-o-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } .wrapper_slider_text { display: flex; width: 35%; overflow: hidden; min-height: 100%; justify-content: center; align-items: center; } .slider_text { font-family: "europa",sans-serif; font-size: 125%; color: black; font-weight: 500; line-height: 125%; padding: 75px; letter-spacing: .8px; font-weight: 600; } </style> </head> <body> <header> </header> <section class="flex-container-slider"> <div class="slider"> <!-- Each image is 768px by 432px --> <div id="slider_images"> <img src="http://bartonlewisfilm.com/img_768_water.jpg" alt="water" /> <img src="http://bartonlewisfilm.com/img_768_blue.jpg" alt="blue" /> <img src="http://bartonlewisfilm.com/img_768_robins_egg.jpg" alt="robins egg" /> <img src="http://bartonlewisfilm.com/img_768_23rd_st.jpg" alt="23rd st" /> <img src="http://bartonlewisfilm.com/img_768_broken_guru.jpg" alt="broken guru" /> <img src="http://bartonlewisfilm.com/img_768_i_will_miss_you.jpg" alt="i will miss you" /> <img src="http://bartonlewisfilm.com/img_768_pants.jpg" alt="pants" /> <img src="http://bartonlewisfilm.com/img_768_nose.jpg" alt="nose" /> <img src="http://bartonlewisfilm.com/img_768_swirls.jpg" alt="swirls" /> <img src="http://bartonlewisfilm.com/img_768_church_ave.jpg" alt="church ave" /> <img src="http://bartonlewisfilm.com/img_768_network_reality_stars.jpg" alt="network reality all stars" /> <img src="http://bartonlewisfilm.com/img_768_ports.jpg" alt="ports" /> <img src="http://bartonlewisfilm.com/img_768_kline.jpg" alt="kline" /> </div> </div> <div class="wrapper_slider_text"> <div class="slider_text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus diam odio, non dignissim lectus auctor vitae. Sed facilisis malesuada velit nec vehicula. Vivamus eleifend scelerisque faucibus. </p> <div class="container_blank_space_small"> <p>text</p> </div> <p>Mauris porttitor faucibus lorem, ut tincidunt justo dignissim eget. Nulla congue orci sit amet sem commodo, et volutpat lorem cursus. </p> </div> </div> </section> </body> </html>
  2. iwato

    Text Misalignment in a Flexbox Item

    BACKGROUND: Recently I designed a filler page that is called with AJAX. When the AJAX call is made a css style sheet is called in addition to the filler. For the most part the style-sheet appears to work. Even the styling for the flex-box that is included in the filler works in part. Simply, it appears to be breaking on inheritance, and I do not know how to override it. The HTML <div id='yp_container'> <div class='yp_item'> <div class='yp_param'>Visitor ID:</div> <div id='current_visitorId' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>IP Address:</div> <div id='current_visitIp' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>Total Visits:</div> <div id='current_totalVisits' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>City:</div> <div id='current_cities' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>Referral URL:</div> <div id='current_referral_url' class='yp_value'></div> </div><!-- end div.line_item --> </div><!-- end div#yp_container --> CSS Style-Sheet (Relevant Code Only) /*************************************************** Visitor Info (Flexbox) ***************************************************/ #yp_container { display: -webkit-flex; display: flex; flex-direction: column; width:100%; } .yp_item { display: -webkit-flex; display: flex; flex-direction: row; justiy-content: space-between; } .yp_param { text-align: -webkit-right; text-align: -moz-right; padding-right: 2em; } .yp_value { text-align: -webkit-left; text-align: -moz-left; } You may observe the result by clicking on the words Your Profile under the sub-heading User Profile in the Grammar Captive navigation bar. Roddy
  3. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  4. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  5. Helloin this page, in wich I used fullpage.js, I have some issues with (i think) the flexbox with safari and with android browser (portrait view). The boxes are overlapped and not stacked. Is it possible to fix this problem? thanks Luigi
×