Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hi - love your book and cannot wait to get going with applying your very clear php and sql code.

 

However, I am falling at the first hurdle wrestling with the twitter bootstrap framework. Can you help?

 

You can see where I have got to at http://www.worldsgreatestchallenge.com .

 

I have downloaded the latest version of bootstrap and incorporated the sticky-footer-navbar.min.css. from your downloadable code from ex1. However, the navbar does not display at the top.

 

I have managed to add the grey stripe at the top by adding the following to the sticky-footer-navbar.css:

 

.navbar {

height: 60px;

background-color: #f5f5f5;

}

 

However, try as I might, I cannot get the nav buttons and dropdown menus to display. I have checked and rechecked the html/php code and all seems in order. I would paste it here but I cannot get any of the paste buttons in the wysiwyg panel above to work. 

 

Any ideas?

 

PS the categories do not display on my site because I have not yet created the relevant table.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

UPDATE

 

I have a really slow internet connection and once when I loaded my home page, the page loaded temporarily without any CSS formatting. ie no grey navbar. I could see the home, about, contact, register items as an unordered list on the page, so it seems to me that there is not a problem with the php code for the navbar but there is some problem linking the relevant navbar elements to the css in order to get them to display properly.

 

In the template header, I have the following between the <head> tags:

 

<link href="/includes/scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="/includes/scripts/bootstrap/css/sticky_footer/sticky-footer-navbar-ex1.css" rel="stylesheet">

 

I haven't touched the bootstrap.min.css script. As mentioned previously, the grey bar was not showing at all so I added some code to the sticky-footer-navbar-ex1.css script.

 

However, the rest of the page displays with all the styling that I would expect, so it seems that some kind of link to the css is being made. Perhaps there is a problem with the classes I have assigned to the navbar elements?

  • <div class="navbar navbar-fixed-top">
  • <div class="container">
  • <button type="button" class="navbar-toggle" ...
  • <span class="icon-bar">
  • <a class="navbar-brand"
  • <div class="nav-collapse collapse">
  • <ul class="nav navbar-nav">
  • <li if( $this_page == $value ) { echo 'class="active"'; }>

NB there is no class specified for inactive <li> elements, but this is all how it is in the book. 

 

Any clues as to how to get the navbar buttons to show up in the grey bar at the top of the page?

 

Share this post


Link to post
Share on other sites

IGNORE PART OF MY LAST

 

the <li> elements of course have a class of "dropdown", unless this is superceded by "active".

 

I am wondering if anything has changed with the latest release of bootstrap, ie v3.3.2?

Share this post


Link to post
Share on other sites

RESOLVED

 

It appears that the header template includes a <div with the class="nav-collapse collapse" . This class is not defined in either the bootstrap.css or the sticky-footer-navbar.css and yet somehow makes the navbar  not appear. Once I added an exclamation mark (!) to the relevant div tags, eg:

  •  <!div class="nav-collapse collapse">
  • <!/div><!-- / .nav-collapse -->

the navbar magically appeared!

 

Perhaps this bit of styling is supposed to make the navbar appear, if you hover near the top of the page, but this was not happening for me.

 

Bottom line:

 

To make the grey bar appear at the top of the page, you need to add the following to the sticky-footer-navbar.css:

 

.navbar {

 

height: 60px;

background-color: #f5f5f5;

 

}

 

To make the page buttons appear inside the navbar, in the header template, you need to:

 

  • disable the navbar collapse <div class="nav-collapse collapse"> and corresponding </div> tag, by adding an exclamation mark immediately after the opening '<' symbol.

 

And whilst we are at it, to get the page content to line up into a left hand margin and main section, I too needed to:

  • amend the <div class="col-3"> and <div class="col-9> tags to read class="col-md-3" and class="col-md-9" respectively.

 

Now all I need to do, is to get the current/active page to be automatically highlighted in the nav bar ...

 

Share this post


Link to post
Share on other sites

Thanks. with the benefit of hindsight, it now seems all rather obvious, but at the time, I was wrestling with a lot of new stuff. The bootstrap framework, sticky-footer-with-navbar template was all very new and I felt a bit over-faced when I expected to load it and it all work. Although, that said, I am still struggling to understand why a template which advertises a navbar, has that element preset to collapse! Is it supposed to appear if one hovers near the top of the page?

 

! am pleased that I got most of the way there by myself in the end. although, the page 'button' for $this_page still does not highlight automatically, and I noticed that the grey header and footer bar does not show up in safari. Any clues?

Share this post


Link to post
Share on other sites

To get the highlight on the active page, you'd need to add code that checks the current page and adds the right close accordingly. Not sure about the Safari issue (but debugging CSS isn't my strong suit!). 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...