WordPress.org

1. dewijones67
   Member
   Posted 1 year ago #

   Hello,

   I'm a high school ICT teacher, not a web expert, I'm tryign to help put a local primary school by setting up there website. It's mainly done but I'm trying to add a row of links between the Header Banner and the main body.

   I want it to look like this one:
   http://www.newporthigh.co.uk/
   Which I created (with the help of this forum - thanks again all!!) for our school.

   The site I'm now working on is:
   http://www.millbrookprimary.co.uk/
   I've added the space and experimented with the
   

   <li> code (below) but when I drop in the code to the header.php file inside the tag:
   <div id="hd">

   It throws out the rest of the page and only adds the links as a vertical list not a horizontal one.

   I have experimented with loads of different options and always ended up having to reload the original theme to fix the problems I've caused.

   Please help...? Thanks in advance......!
   

   <div id="menu1">
   <div style="padding-left: 70px">
   </li>
   <li><a title="Taliesin House" href="http://www.taliesinhouse.blogspot.com/"
   target="_blank">Taliesin Blog</li>
   <li><a title="Branwen House" href="http://www.branwenhouse.blogspot.com/"
   target="_blank">Branwen Blog</li>
   <li><a title="Olwen House" href="http://www.olwenhouse.blogspot.com/">Olwen Blog</a></li>
   <li><a title="Pryderi House" href="http://www.pryderihouse.blogspot.com/"
   target="_blank">Pryderi Blog</li>
   <li><a title="6th Form Blog" href="http://nhssixthform.blogspot.com/">6th Form Blog</a></li>
   </div>

2. stvwlf
   Member
   Posted 1 year ago #

   To make the list display horizontally you assign either
   float: left OR
   display: inline

   to the LI tags, in your stylesheet

   At this point I'd really encourage you to learn to work with the new custom menu system that was added in WP 3.0
   You will likely find that much easier.

   here's what looks like a decent introduction
   http://boxmodeljunkie.com/wordpress-custom-menus/

   Here's a more involved article:
   http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus

3. dewijones67
   Member
   Posted 1 year ago #

   Hi Stvwlf,

   Thanks for the response:

   It looks good - although a little (lot) daunting, were using wordpress 2.8.5. These articles suggest this funtionality is only available in wordpress 3.0 - is that correct if so - its the old school explanation I need?

   Could you give me an example of where I would add the "display: inline" to my styles sheet?

   For example:
   If I place the div id Menu code (above) within the <div id="hd"> tag in the header.php file. I would need a #Menu tag in my style sheet (I think?). This is the code I'm struggling with, I've tried:

   #menu1 li {
   display: inline;
   align: center;

   Which simply threw out the rest of the page altogther - any ideas?

   Many Thanks - in advance - I think I'm really close to it just missing some vital bits...?

   Thank you - please tell me if I've got it all backwards - I'm no expert as you can see...!

   Dewi

4. stvwlf
   Member
   Posted 1 year ago #

   hi

   you will need to upgrade to 3.0 to use the new menu features. ( you should do that anyway, for security reasons )

   I don't see a nav bar menu on http://www.millbrookprimary.co.uk

   On http://www.newporthigh.co.uk you have the coding i am referring to
   already in place on the horiz nav.

   except your UL is in the wrong position there

   <div style="padding-left: 70px;">
   <ul>
   <li><a href="http://www.newporthigh.co.uk/" title="Home Page">Home</a></li>
   <li><a target="_blank" href="http://www.keystage3newporthigh.blogspot.com/" title="Key Stage 3 Blog">KS3 Blog</a></li>
   </ul><!--      <<===  this doesn't belong here
   <li-->  <<=== the ending comment doesn't belong here    <a target="_blank" href="http://www.taliesinhouse.blogspot.com/" title="Taliesin House">Taliesin Blog</a>
   <li><a target="_blank" href="http://www.branwenhouse.blogspot.com/" title="Branwen House">Branwen Blog</a></li>
   <li><a target="_blank" href="http://www.olwenhouse.blogspot.com/" title="Olwen House">Olwen Blog</a></li>
   <li><a target="_blank" href="http://www.pryderihouse.blogspot.com/" title="Pryderi House">Pryderi Blog</a></li>
   <li><a target="_blank" href="http://nhssixthform.blogspot.com/" title="6th Form Blog">6th Form Blog</a></li>
   ===>>> a  </ul> belongs here
   </div>

   the css being applied to that code is
   style.css line 138
   #menu li { display: inline; }

   You have the solution on your earlier site.

   To do this kind of work I highly recommend installing the Firebug addon for FireFox which is like having a stethoscope into the heart of any element on the page's applied CSS. It shows you exactly what is going on.

   You are doing a good job, by the way.

5. dewijones67
   Member
   Posted 1 year ago #

   Hi Stvwlf,

   Thanks again for the response - I'll look into the upgrade (hopefully its straightforward.

   I hadn't noticed the poor position of the thanks for that, its now moved.

   I use the firefox add on your correct its really useful. My issue is I'm not an expert on the code.

   In the style.css on the Millbrook site there is already a routine called #menu. So when I added the code:

   #menu li {
   display: inline;
   align: center;

   It through the whole page below out!!

   Can you see a way round this?

   Thanks again for your help...!
   Dewi

6. stvwlf
   Member
   Posted 1 year ago #

   hi Dewi

   if you can, name the top nav you are adding something other than #menu, like maybe #topmenu or #topnav

   That way when you assign CSS to it, it will be only for that one sectiin and not affect any other section on the page (change the CSS accordingly).

   Also, in case you don't know, the definition of an ID (what '#' represents) an ID is unique on a page, whereas a class is designed to be allowable on a page more than once. Thus having two sections called #menu on the same page is invalid HTML.

   take care...

7. dewijones67
   Member
   Posted 1 year ago #

   That is brilliant - worked a treat - easy really I guesss.!!

   Thank you for the advice on class and ID it makes a bit more sense now.

   Once again on behalf of both schools, thank you for your help..!

Topic Closed

This topic has been closed to new replies.