31 Replies Latest reply: Feb 26, 2014 5:49 PM by LaurensHoddenbagh RSS

    Need some answers with re-building my website to fluid grid

    LaurensHoddenbagh

      Hi guys, I'm rebuilding my website to fluid grid.

      The first 5 mainpages are ready uploaded on a test location: http://www.hoddenbagh.nl/bibleopentest/index.html

      Now I'm starting to rebuild the study pages. The first one is finished except there are a few things which I can't get right. And I used a Javascript to get pop-up windows, which are working well but I hope there is a better way to do that.

      Ok the questions:

       

      1. How do I add some space above the first line below the orange heading? http://www.hoddenbagh.nl/bibleopentest/armour.html. I tried <br> and <p></p>

       

      2. As said I use Javascript to get thet bible-texts when people click on the text reference, but I would like it much better when the text appears in a small window when the viewer is hoovering over the text, or click on it and then click it away. Again I used this on this page: http://www.hoddenbagh.nl/bibleopentest/armour.html

       

      3. Almost at the end of the page I tried to ad an ordered list. The code is in the HTML, but it doesn't show up in thw browser. I tried to change the settings for the list, but then the nav-bar is changing as well, and I don't want that. 

       

      I hope I get some answers

       

      Laurens

        • 1. Re: Need some answers with re-building my website to fluid grid
          mytaxsite.co.uk CommunityMVP

          Let's start with one question at a time:

           

          1) The p tag and br tag should both work if you put them correctly like this:

           

          <p> </p>

          <br>

           

          Between the two Ps there is & nbsp; but the forums is removing it so I can't demostrate this unless I use an image like this:

           

          2014-02-17_0509.png

           

          Alternatively, you could insert a new style like this:

           

          span.StyleSubkop {

              margin-top: 20px;

          }

           

          Hope this clears your 1st question!!!!!!!!!!!!

          • 2. Re: Need some answers with re-building my website to fluid grid
            mytaxsite.co.uk CommunityMVP

            Now let me try with Q3:

             

            In your code you have something like this:

             

            <div id=ol><ol>

            <li>Gods Spirit is praying for the saints because we don't know all the time how to pray.</li>

            <li>Gods Spirit want to use our spirit and mouth to speak mysteries to God, by speaking in tongues.</li>

            <li>Gods Spirit is blessing us in that way by building up our faith.</li>

            </ol></div>

            Change it to this:

             

             

            <div id="ol"><ol>

                                    <li>Gods Spirit is praying for the saints because we don't know all the time how to pray.</li>

                                    <li>Gods Spirit want to use our spirit and mouth to speak mysteries to God, by speaking in tongues.</li>

                                    <li>Gods Spirit is blessing us in that way by building up our faith.</li>

                                </ol></div>

             

             

            And also, you need to add a style for it like this:

             

            #ol {

                list-style: decimal;   

            }

             

            I have used decimal but you can use almost anything: circle, square etc etc.  DW will prompt you for various alternatives.  The reason you need this is because you have another generic style that is removing all the default listings for OL and UL tags.

             

            Hope this clears Q3.

             

            I don't understand Q2 so I will leave it for somebody else to handle it.

            • 3. Re: Need some answers with re-building my website to fluid grid
              LaurensHoddenbagh Community Member

              Thanks, As I said in my post: I tried <p></p> and <br>but that doesn't move the text down here. 

              The <p> </p> does, but is ad more space than just a regular <p>. I don't like that so much .

               

              Your alternatively suggestion moves all text styled with that class 20px down.

              Till I hear a better solution I leave it with <p> </p>

               

              Probably the problem has to do with that orange field above the text.

              • 4. Re: Need some answers with re-building my website to fluid grid
                LaurensHoddenbagh Community Member

                Thanks for this answer too...

                I see I forgot the quotes around "ol".

                Corrected that and added the style you suggested.

                But... It doesn't gave the result I was hoping for.

                • 5. Re: Need some answers with re-building my website to fluid grid
                  Nancy O. CommunityMVP

                  #1

                  .StyleSubkopEnkellijns {

                      font-size: 1.3em;

                      color: #F60;

                      line-height: 3em;

                  }

                   

                   

                  Nancy O.

                  • 6. Re: Need some answers with re-building my website to fluid grid
                    LaurensHoddenbagh Community Member

                    That changes all the other uses of this class too, isn't it?

                    • 7. Re: Need some answers with re-building my website to fluid grid
                      Nancy O. CommunityMVP

                      I would like to see you start using good semantic structure in your HTML.  This will make your content more meaningful and CSS styling much simpler.

                       

                       

                      <article>

                      <h3>Ephesians 6:11-18</h3>

                      <p>The apostle Paul writes in his letter to the Ephesians about the armor of God. He's not doing this to be a little bit interesting. No, he thinks we as christians have to know something about struggle. Not struggle against people, but struggle against dark powers, against the rulers, against the authorities, against the powers of this dark world and against the spiritual forces of evil in the heavenly realms. The subject of our struggle is the devil with his army. Fallen angels, demons.

                      That is something. That's why God made available the armor for us. That's the subject we're going to study. First we read the according texts.</p>

                       

                        <h4>Ephesians 6:11-18</h4>

                       

                      <blockquote>

                      "11 Put on the full armor of God so that you can take your stand against the devil's schemes. 12 For our struggle is not against flesh and blood, but against the rulers, against the authorities, against the powers of this dark world and against the spiritual forces of evil in the heavenly realms. 13 Therefore put on the full armor of God, so that when the day of evil comes, you may be able to stand your ground, and after you have done everything, to stand. 14 Stand firm then, with the belt of truth buckled round your waist, with the breastplate of righteousness in place, 15 and with your feet fitted with the readiness that comes from the gospel of peace. 16 In addition to all this, take up the shield of faith, with which you can extinguish all the flaming arrows of the evil one. 17 Take the helmet of salvation and the sword of the Spirit, which is the word of God. 18 And pray in the Spirit on all occasions with all kinds of prayers and requests. With this in mind, be alert and always keep on praying for all the saints."

                      </blockquote>

                       

                      <p>Paul explains why we have to put on the full armor of God: Take your stand!</p>

                       

                      <p>This means: show the enemy who you are. Show him you're not afraid because God Himself will do the battle. There is a nice story in the bible which shows exactly what I mean, it is the story of king Jehoshaphat (2 Chronicles 20:1-30).</p>

                       

                      </article>

                       

                      Nancy O.

                      • 8. Re: Need some answers with re-building my website to fluid grid
                        Nancy O. CommunityMVP

                        CSS:

                         

                        article {

                             width: 80%;

                             margin:0 auto;

                             padding: 2%;

                        }

                         

                        article h3 {

                            font-size: 1.3em;

                             line-height: 3em;

                             font-weight:bold:

                             text-align:center:

                             color: #F60;

                        }

                         

                        article p {

                            color: #383838;

                            line-height: 1.5em;

                            text-align: left;

                            font-size: 1.1em;

                        }

                         

                        Clean, simple code is easier to work with.

                         

                         

                        Nancy O.

                        • 9. Re: Need some answers with re-building my website to fluid grid
                          Nancy O. CommunityMVP

                          More CSS:

                           

                          article h4 {

                               font-weight:bold;

                               margin:0; padding:0;

                               line-height:1;

                          }

                           

                          article blockquote {

                               margin-top:0;

                               color: #666;

                          }

                          • 10. Re: Need some answers with re-building my website to fluid grid
                            Nancy O. CommunityMVP

                            Part #2  Fancybox tips.

                             

                            You're using a lot of useless code.

                             

                            Replace all this:

                             

                            <script type="text/javascript">

                            //<![CDATA[

                            $(document).ready(function() {

                               

                                                    $("#various1").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                             

                                                    $("#various2").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various3").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various4").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various5").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various6").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various7").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various8").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various9").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various10").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various11").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various12").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various13").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various14").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various15").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various16").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various17").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various18").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various19").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various20").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various21").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various22").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                    $("#various23").fancybox({

                                                            'titlePosition'         : 'inside',

                                                            'transitionIn'          : 'none',

                                                            'transitionOut'         : 'none'

                                                    });

                                                   

                                            });

                            </script>

                             

                            With this.  It's all you need.

                             

                            <!--fancybox function-->

                            <script>

                            $(document).ready(function() {

                              $('a.inline').fancybox({

                                'transitionIn'    :'none',

                                'transitionOut' :'none',

                                'titlePosition'   :'inside',

                                'autoScale'     :'true'

                              });

                            });

                            </script>

                             

                             

                            Your text links will look like this:

                             

                            <a class="inline" href="#data1">Link to data1</a>

                             

                            <a class="inline" href="#data2">Link to data2</a>

                             

                            <a class="inline" href="#data3">Link to data3</a>

                             

                            <a class="inline" href="#data4">Link to data4</a>    etc....

                             

                             

                            <!--Inline Details-->

                            <div style="display:none">

                                <div id="data1">Detail for data1</div>

                                <div id="data2">Detail for data2</div>

                                <div id="data3">Detail for data3</div>

                                <div id="data4">Detail for data4</div>

                            </div>

                             

                             

                             

                            Nancy O.

                            • 11. Re: Need some answers with re-building my website to fluid grid
                              LaurensHoddenbagh Community Member

                              Hi Nancy, This fancy box thing helps a lot. Thank you very much!

                              What you suggested about the HTML and CCS is of course correct, but all the 120 pages I have to do are styled in the way you think is not the best way to do it. So when I want to correct that  I have so many corrections to make that it is hard to follow what I'm doing, so I will leave it like it is. It works.

                              Maybe when everything is transformed, and I have some time left, I will clean-up the code.

                               

                              I posted the page again

                              http://www.hoddenbagh.nl/bibleopentest/armour.html.

                               

                              There is still something not right.

                               

                              1. In previous pages I had in div1 the background set to white, but the white is not visible.

                               

                              2. The ordered list is not showing as an ordered list, it's almost at the end of the page.

                               

                              3. The text in the fancy box pop-ups is sometimes truncated. Don't know how to solve that.

                               

                               

                              In the meantime I'm working on an other page, it's already on the test site.

                              I worked on thet page by first getting everything OK for the width for iPhone. There it is as I like to see it. I mean the buttons on the right bar are at the right side.

                               

                              When I drag the window wider to the iPad view or the computer screen view the buttons move horizontally. I don't understand why it is good in the iPhone view but not in the wider vieuws. What did I do wrong?

                              There are still a few other things where I have to work on, but for now I like to see the button problem solved.

                              This is the page: http://www.hoddenbagh.nl/bibleopentest/bride1.html

                               

                              Thanks


                              • 12. Re: Need some answers with re-building my website to fluid grid
                                LaurensHoddenbagh Community Member

                                I guess I'm spoiled by the quick answers I normally get on this forum. But one of my problems is solved by myself

                                It was the last mentioned problem about not having all the buttons at the right side. I figured that I could set the width of the 'aside' to a smaller percentage. Now everything stays on the right side.

                                 

                                The three problems which are still not solved are:

                                http://www.hoddenbagh.nl/bibleopentest/armour.html.

                                 

                                1. In previous pages I had in div1 the background set to white, but the white is not visible.

                                 

                                2. The ordered list is not showing as an ordered list, it's almost at the end of the page.

                                 

                                3. The text in the fancy box pop-ups is sometimes truncated. Don't know how to solve that.

                                 

                                I would love to hear something from you guys.

                                 

                                Laurens

                                • 13. Re: Need some answers with re-building my website to fluid grid
                                  Nancy O. CommunityMVP

                                  #1 Looks white to me.  Did you clear your browser's cache?

                                   

                                  #2 Fix your code errors, there's a stray </div> tag on line 361

                                  http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.hoddenbagh.nl%2Fbibleopentest %2Farmour.html

                                   

                                  #3  Fancybox doesn't look truncated to me.  In which browsers are you testing and seeing this?

                                   

                                   

                                  Nancy O.

                                  • 14. Re: Need some answers with re-building my website to fluid grid
                                    Nancy O. CommunityMVP

                                    #2  change your  #ol style to this without the # sign.  Adjust values as needed.

                                     

                                    ol li {

                                    margin-left:25px;

                                    padding-left; 15px;

                                    list-style: decimal;

                                    }

                                     

                                     

                                    Nancy O.

                                    • 15. Re: Need some answers with re-building my website to fluid grid
                                      LaurensHoddenbagh Community Member

                                      Great! Help on the way

                                       

                                      1. You can see it's not white when you look at the logo, that's white.

                                      I want the background white and the rest of the screen a light grey like it is now.

                                       

                                      2. I changed the syle of the ol li as you said, but it didn't help.

                                       

                                      3. I remove the </div>. That was sloppy of me.

                                       

                                      4. I was thinking... since I can't get the background white AND the buttons in the <aside> don't change when I hover over them (there are buttons at another page:

                                      http://www.hoddenbagh.nl/bibleopentest/bride1.html) although I styled them to do, is er something in the way in the head perhaps?

                                       

                                      5. The truncation of the text is not visible anymore, thanks to your better javascript. But I see the text is rather small, maybe to small to see it on an iPhone. Any suggestion how to get that larger?

                                       

                                      Laurens

                                      • 16. Re: Need some answers with re-building my website to fluid grid
                                        Nancy O. CommunityMVP

                                        See Screenshots.  Simply style the ol li selector -- no .classes, no #IDs required.

                                        CSSLists.jpg

                                        All I see is a white background.  And your top menu text turns orange on hover. So I don't understand the problem.

                                        Armour.jpg

                                         

                                         

                                        Nancy O.

                                        • 17. Re: Need some answers with re-building my website to fluid grid
                                          LaurensHoddenbagh Community Member

                                          I didn't know you have to style the 'ol li' without the dot. Learned something again

                                          Now it works I tried to style it a little bit to my needs. I used:

                                           

                                          ol li {

                                          margin-left:16%;

                                          font-size:1.1em;

                                          color: #383838;

                                          line-height: 2em;

                                          list-style: decimal;

                                          }

                                           

                                          I changed the px to % because it's a fluid grid.

                                          And I had to change font-size etc. as well, because within the 'ol li' it is not inherited. I don't understand why, but for now it works.

                                           

                                          About the white background: see screenshot. The background of the logo is pure white, the rest of the background is light gray.

                                           

                                          About the buttons, I know that the buttons on the top are working fine, but there is a button on the armour page at the bottom that is clickable, but doesn't change visualy. I gave a link (http://www.hoddenbagh.nl/bibleopentest/bride1.html) to another page with much more buttons where you can see what I mean. The buttons in the header are fine but the buttons at the 'aside' are not visualy changing.

                                           

                                          Laurens

                                          • 18. Re: Need some answers with re-building my website to fluid grid
                                            LaurensHoddenbagh Community Member

                                            I thought I added a screenshot, but I don't see it. I'll try it again...

                                            Screen Shot 2014-02-21 at 11.07.21.png

                                            • 19. Re: Need some answers with re-building my website to fluid grid
                                              Nancy O. CommunityMVP

                                              About the white background: see screenshot. The background of the logo is pure white, the rest of the background is light gray.

                                              Sorry, I'm not noticing it on my display.  #FFF and #F0F0F0 are nearly identical.  If you want your logo's background to match your page background, use a transparent PNG.  See screenshot from Photoshop.

                                              Twitter-Icon-Saved.jpg

                                               

                                              Aside links:  Add this to your CSS.  Change colors as desired.

                                               

                                              a.ButtonsRightBar {color:red}

                                              a.ButtonsRightBar:hover,

                                              a.ButtonsRightBar:active,

                                              a.ButtonsRightBar:focus {color:blue}

                                               

                                               

                                              Nancy O.

                                              • 20. Re: Need some answers with re-building my website to fluid grid
                                                LaurensHoddenbagh Community Member

                                                Quote " If you want your logo's background to match your page background, use a transparent PNG."

                                                 

                                                I know that, thanks anyway, but what I want is to have my background white, or any color that I like, not the html back ground, but just the website itself. That's why I used the div1 to set the background to white. I did that in the original website and that went well (http://www.biblopen.org). But here it is not working. To make it more visual what I mean I changed the html background to a darker grey.

                                                 

                                                When I click on the #div1 tag in the selectors panel I see just a blue line on the top of the window.(see screenshot) I think the whole window should be blue (selected), but it isn't.

                                                Screen Shot 2014-02-21 at 12.02.43.png

                                                About the aside links...

                                                I changed the ".ButtonsRightBar a" to "a.ButtonsRightBar" and now I have the result I wanted. But what I don't understand is that in the original site (http://www.biblopen.org) it works the way it was. So why do I have to change that now? Is it because it is now in an "aside" container?

                                                 

                                                Laurens

                                                • 21. Re: Need some answers with re-building my website to fluid grid
                                                  Nancy O. CommunityMVP

                                                  I can't comment on links in your old site.  What I can tell you is your current site uses anchor classes, so that's what needs to be defined.

                                                   

                                                  BACKGROUND:

                                                  To illustrate a point, I'm using obnoxious background colors here:

                                                   

                                                       body {background:silver}

                                                   

                                                       .gridContainer {background: aqua}

                                                   

                                                       #div1 {background:yellow}

                                                   

                                                  Body is the parent element for everything on the page. 

                                                   

                                                  gridContainer is the page wrapper for everything in your Fluid Grid Layout.  As such, you don't need a div1 container.   Simply use what you have & take div1 out of your HTML.  Change .gridContainer background to  #FFF.

                                                   

                                                   

                                                  Nancy O.

                                                  • 22. Re: Need some answers with re-building my website to fluid grid
                                                    LaurensHoddenbagh Community Member

                                                    OK, as I understand, the body (with my #html,body selector) is everything you see when you open a window in a site.

                                                    Then there is the gridContainer (which wrappes around everything I like to show)

                                                     

                                                    What I did was deleted the div1 (which was automatically inserted when I started the fluid grid.)

                                                     

                                                    Then I changed the background of the gridContainer to white.

                                                    Then nothing changed

                                                     

                                                    I looked at the index page of this site (http://hoddenbagh.nl/bibleopentest/index.html) there I have the same settings but there the grid container has a white background.

                                                     

                                                    I feel stupid.

                                                     

                                                    Laurens

                                                    • 23. Re: Need some answers with re-building my website to fluid grid
                                                      Nancy O. CommunityMVP

                                                      #html is a div ID.  html is a selector name for your browser's document window.  Big difference.

                                                       

                                                      I don't recommend using html selectors in your CSS because some browser developers are threatening to ignore it at some point in the future.  For best results, use the body selector to style your page background.

                                                       

                                                      When things go wrong, validate your code and fix reported errors. 

                                                       

                                                      CSS - http://jigsaw.w3.org/css-validator/

                                                      HTML - http://validator.w3.org/

                                                       

                                                      It's very possible you have orphaned tags in your HTML, or minor CSS errors.

                                                       

                                                      Don't worry about  errors in your Boilerplate.css code.  You can safely ignore those warnings. 

                                                       

                                                       

                                                       

                                                      Nancy O.

                                                      • 24. Re: Need some answers with re-building my website to fluid grid
                                                        LaurensHoddenbagh Community Member

                                                        I checked http://hoddenbagh.nl/bibleopentest/armour.html
                                                        there are a lot of errors in the jQuery part.

                                                        Some warnings about webkit, which seems an Adobe thing.

                                                        Maybe not all browser will support that.

                                                         

                                                        The HTML5 was OK except two errors, which I don't know how to solve.

                                                        I used a <br> tot give more space between the list items.

                                                         

                                                        So, I can't find an error which doesn't allow to get a white background in the gridContainer.

                                                         

                                                        Laurens

                                                        • 25. Re: Need some answers with re-building my website to fluid grid
                                                          Nancy O. CommunityMVP

                                                          It's caused by margin collapse.  Try adding this to what you have:

                                                           

                                                          .gridContainer {

                                                               background:#FFF;

                                                               overflow:hidden;

                                                          }

                                                          • 26. Re: Need some answers with re-building my website to fluid grid
                                                            Nancy O. CommunityMVP

                                                            You shouldn't use <br> tags inside <li> tags.  For best results, style your lists with CSS to add the required space between items.

                                                             

                                                            li {

                                                                 line-height: 1.5;

                                                            }

                                                             

                                                             

                                                            Nancy O.

                                                            • 27. Re: Need some answers with re-building my website to fluid grid
                                                              Nancy O. CommunityMVP

                                                              -webkit is a browser prefix for Chrome and Safari.  You need to add browser prefixes to some CSS properties or they don't work in those browsers.  Same goes for -mozilla (Firefox), -ms (microsoft IE) -o (Opera), etc...  Browser prefixes are not technically valid code but they are necessary so just ignore those errors.

                                                               

                                                               

                                                              Nancy O.

                                                              • 28. Re: Need some answers with re-building my website to fluid grid
                                                                LaurensHoddenbagh Community Member

                                                                OK, I added the 'overflow:hidden;' in the grid container, that helped to get the white backgrounf, but why was that NOT necessary at the main pages? (index.html etc.)

                                                                I'm afraid hat this overflow hidden thing is influencing other things as well. Why was it added there by Adobe? It must have a function.

                                                                 

                                                                I tried that:

                                                                li {

                                                                     line-height: 1.5;

                                                                }

                                                                already, but when you look in the smaller webspace for iPhones you wil see that all lines have a higher line-height. And that's not what I want. I want just more space between the different subjects.

                                                                When you have a large block of text, instead of a single line, then I like to have those lines from one list-point together, and a line break between the the first list-point and the next one.

                                                                 

                                                                BTW I'm very happy and greatfull with your help

                                                                 

                                                                Laurens

                                                                • 29. Re: Need some answers with re-building my website to fluid grid
                                                                  Nancy O. CommunityMVP

                                                                  To create space between ordered list groups, add the following.  Adjust values as needed.

                                                                   

                                                                  ol {

                                                                  padding-top: 2%;

                                                                  padding-bottom: 2%;

                                                                  }

                                                                   

                                                                   

                                                                  Nancy O.

                                                                  • 30. Re: Need some answers with re-building my website to fluid grid
                                                                    LaurensHoddenbagh Community Member

                                                                     

                                                                    You were almost right

                                                                    It was not the 'ol' but the 'li'.

                                                                     

                                                                    You see I'm really learning and not just copy and paste.

                                                                     

                                                                    Still no clue why I don't have to add "overflow-hidden" to the gridcontainer css for the index page.

                                                                     

                                                                    Laurens

                                                                    • 31. Re: Need some answers with re-building my website to fluid grid
                                                                      LaurensHoddenbagh Community Member

                                                                      I didn't like the solution to add "overflow-hidden", don't know why, maybe it's just me

                                                                      So I tried to figure why one page has a white background and the other, with the same css, not.

                                                                      Finally I found it. It was because I added "article" just because Nancy said it was better practice. And she's probably right, but as soon as I added "article" the white background disappeared, even in the navbar section.

                                                                      Now I removed it and still everything is going well.

                                                                       

                                                                      Thanks guys for all the help, you're great!

                                                                      I changed a few other pages to CSS fluid grid and till now I didn't find problems

                                                                       

                                                                       

                                                                      Laurens