Skip navigation
Currently Being Moderated

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

Feb 16, 2014 3:51 PM

Tags: #help #jquery #dreamweaver

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

 
Replies
  • Currently Being Moderated
    Feb 16, 2014 9:10 PM   in reply to LaurensHoddenbagh

    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!!!!!!!!!!!!

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2014 9:08 PM   in reply to LaurensHoddenbagh

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 11:27 AM   in reply to LaurensHoddenbagh

    #1

    .StyleSubkopEnkellijns {

        font-size: 1.3em;

        color: #F60;

        line-height: 3em;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 11:59 AM   in reply to LaurensHoddenbagh

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 12:04 PM   in reply to Nancy O.

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 12:12 PM   in reply to Nancy O.

    More CSS:

     

    article h4 {

         font-weight:bold;

         margin:0; padding:0;

         line-height:1;

    }

     

    article blockquote {

         margin-top:0;

         color: #666;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 12:49 PM   in reply to LaurensHoddenbagh

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 20, 2014 5:08 PM   in reply to LaurensHoddenbagh

    #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.hoddenbag h.nl%2Fbibleopentest%2Farmour.html

     

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 20, 2014 5:13 PM   in reply to LaurensHoddenbagh

    #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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 9:35 AM   in reply to LaurensHoddenbagh

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 10:50 AM   in reply to LaurensHoddenbagh

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 11:45 AM   in reply to LaurensHoddenbagh

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 12:55 PM   in reply to LaurensHoddenbagh

    #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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 1:52 PM   in reply to LaurensHoddenbagh

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

     

    .gridContainer {

         background:#FFF;

         overflow:hidden;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 1:55 PM   in reply to LaurensHoddenbagh

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 1:59 PM   in reply to LaurensHoddenbagh

    -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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2014 2:37 PM   in reply to LaurensHoddenbagh

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

     

    ol {

    padding-top: 2%;

    padding-bottom: 2%;

    }

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points