Some Problems

HTML & CSS
1

I just posted my first site New Life Christian Center and I am having a few problems.

One thing I couldn’t figure out is how to get the pictures (which I floated right) and the sidebar 1(which I floated left) to display next to each other. the picture would always go below the sidebar. In a few of the pages it really looks bad for example

Worship

I would like the first picture next to the paragraph that says “I am Damaris” not crowded up on the other picture. I tried doing an HTML align right instead of a float but got the same result. Most the pages in Ministry and Children have that problem. So any help would be appreciated.

Also I wanted the spacing on the navigation bar to be better. (the drop down menu being more even with the top, the last item -help from above- going to the end of the bar, etc.) But what is there is the best I could do. It’s a widget from dreamweaver. Probably not that big of deal, but bugs me some.

Another issue i have is that there is a 5-10px space between the flash banner and the navigation bar in Firefox (but not in other browsers).

I noticed today (when I got on a bigger screen because the site is liquid.) that I need to extend some of the background images of the page titles. (we made the decision at the last minute to make the max-width 1200 instead 1000, since my screen is small I didn’t realize the effect on the titles) I have the background pics with a width of 600px, do you think 800px is enough. (sigh, photoshop here I come.)

Did I mess up anywhere else???

Thanks for all the help you could give me.

2

I assume you are talking about float clearing issues and you need to clear the floated images in some way.

You could set the hr to clear the image above and then that will make the next block start down the page. However you will need to add overflow:hidden to the right content to contain the clearing effect to that column only otherwise it will clear your left columns also.


.subContent{
overflow:hidden;
zoom:1.0;/* ie fix*/
}
hr{clear:both}

Also I wanted the spacing on the navigation bar to be better. (the drop down menu being more even with the top, the last item -help from above- going to the end of the bar, etc.) But what is there is the best I could do. It’s a widget from dreamweaver. Probably not that big of deal, but bugs me some.

You can’t really make the last menu item just fill the remaining space unless you want to use the display:table properties and lose IE7 and under support.

Your logic is a little flawed in that menu anyway as you have set the list elements to be 13.5% wide which also means that the nested list will be 13.5% of that 13.5% and so to compensate you have set the anchor to 700% width!

You just need to set the nested list to 100% width (or width:auto if not floated).

Something like:


#MenuBar .MenuItemContainer li,
#MenuBar .MenuItemContainer li a{width:auto!important;float:none;display:block}

However, you still need to sort out padding issues that are cascading from the parent. Remember that anything you set on the parent list or anchor will also apply to any nested elements and you need to control these precisely.

Write it all down on paper and make sure that each level you take into account what has been set on the parent. (The suckerfish menus are a better alternative to that DW stuff anyway as you seem to have made it way too complicated for such a simple effect.)

Another issue i have is that there is a 5-10px space between the flash banner and the navigation bar in Firefox (but not in other browsers).

You probably need to set the object to display:block.


.header object{display:block}
3

so when I put this code in it looked like it solved the problem but in Chrome the whole .subcontent get squished to the right and looks really bad. What does overflow:hidden mean anyways?

You can’t really make the last menu item just fill the remaining space unless you want to use the display:table properties and lose IE7 and under support.

Your logic is a little flawed in that menu anyway as you have set the list elements to be 13.5% wide which also means that the nested list will be 13.5% of that 13.5% and so to compensate you have set the anchor to 700% width!

You just need to set the nested list to 100% width (or width:auto if not floated).

Something like:


#MenuBar .MenuItemContainer li,
#MenuBar .MenuItemContainer li a{width:auto!important;float:none;display:block}

I hope this is the only place my logic was flawed. I will be very proud of myself if that were true but somehow I doubt it since most of what I did was trial and error. would be advisable to try the suckerfish menu instead of trying to fix this one up?

Secondly when I put the css for the menubar into my page it went on the template I left it there. Should I move it to the main css page? I tried just putting the code above in the main css page but it didn’t do much so I am assuming I will need to put it on the template with the other menubar css is this correct.

You probably need to set the object to display:block.


.header object{display:block}

This seems to have worked on some banners but not all of them. Compare Our Ministries and [url=http://www.nlccenter.com/smallgroups.html]Small Groups

4

Overflow:hidden hides any content that overflows but more importantly creates a new block formatting context and will contain child floats and the effect of elements cleared to the current context.

Chrome and Safari of late seem to have introduced a bug and get the measurements wrong when overlow:hidden is applied in that structure. You will need instead to remove the overflow:hidden but nest an inner container in that right side to hold all the content and set it to 100% width and float:left.

This demo explains the reason for this and the method.

I hope this is the only place my logic was flawed. I will be very proud of myself if that were true but somehow I doubt it since most of what I did was trial and error. would be advisable to try the suckerfish menu instead of trying to fix this one up?

If you can’t get it to work as you want then try something simpler such as the suckerfish menu. You should be able to get your existing menu working with a bit of patience but I’m a bit pushed for time today to have another look until later.

This seems to have worked on some banners but not all of them. Compare Our Ministries and [URL=“http://www.nlccenter.com/smallgroups.html”]Small Groups

[/quote]

In the latter link the object is not inside the header div so the rule I gave you is never applied.

5

somehow I still haven’t figured it out. on this page Youth
I put the nested container called fixFloat and put in width:100% and Float:left now the whole thing goes under the left column. I looked at the link but I must be missing something. Did I put the div in the wrong place?

I haven’t even tried the navigation yet.

6

Hi,

When you float columns you must float whole columns and not lots of little columns because that won’t work.

Your sidebar needs to be one whole floated column and inside that you can stack sidebar1 and sidebar2 (and anything else) which won’t need to be floated.

e.g.


<div class="content">
 [B]   <div id="sidebar">[/B]
        <div class="sidebar1">
            <ul class="nav">
                <li><a href="worship.html">Worship</a></li>
                <li><a href="youth.html">Youth</a></li>
                <li><a href="women.html">Women</a></li>
                <li><a href="men.html">Men</a></li>
                <li><a href="prayer.html">Prayer</a></li>
                <li><a href="http://www.nlccenter.com/inform/?page_id=12&mingleforumaction=vforum&g=4.0">Prayer Corner</a></li>
            </ul>
            <!-- end .sidebar1 -->
        </div>
        <div class="sidebar2" id="sidebar2">
            <div id="p1">
                <p><a href="http://www.nlccenter.com/inform/?page_id=17">Testimonies</a></p>
            </div>
            <div id="p2">
                <p><a href="http://www.nlccenter.com/inform/">Events</a></p>
            </div>
            <div id="p3">
                <p><a href="pp.html">Prayer Partners</a></p>
            </div>
        </div>
[B]    </div>[/B]
    <div class="subContent">



#sidebar{
    float:left;
    margin-left: 10px;
    display:inline;
    width: 26%;
    margin: 6% 25px 0 10px;
} 
.sidebar1 {
    padding-bottom: 10px;
}
.sidebar2 {
    padding: 10px 0;
    margin:50px 0;
}

Regarding the logic of that dropdopwn menu then the logic is little flawed in places. Apart form the 700% width errors I mentioned earlier you also have rules like this:


#MenuBar .MenuItem .MenuItemLabel {
    text-align:left;
    line-height:1.4em;
    color:#333333;
    background-color:#E0EAF4;
   [B] padding: 6px 15px 6px 20px;[/B]
    width: 10em;
   [B] width:100%;[/B]
}
#MenuBar .SubMenu .MenuItem .MenuItemLabel {
    text-align:left;
    line-height:1em;
    background-color:#FFF0F6;
    color:#333333;
   [B] padding: 6px 12px 6px 5px;[/B]
    width: 7em;
  [B]  width:100%;[/B]
}

You have 100% widths applied to those elements but they also have padding which will make them too big to ever fit inside a parent container. You’d need to ensure that widths are on the list item and padding is on the anchor instead.

Make sure you account for padding and borders when you specify a width and if you need a perctage width container then you will to place the padding on the inner element instead.

As I said above you probably need tow rite this down on paper as you have a lot of conflicting rules and that menu system is way to complicated for a simple drop down.

7

ok here is my attempt at fixing up the navigation bar. fix navigation bar the two arrows are because I didn’t want to mess with SpryMenuBasic.css until I had it figured out. the little bit I did try and mess with it trying to move the arrow over it would just disappear so I copied the arrow gif into my pictures folder and went from there. After looking at the drop down menu suggested above I see what you mean this one is way too complicated. It was hard for me to figure out what was what esp. the difference between the .MenuItemLabel and ‘a’ and how to style each one. so I don’t know if I have this right.

One thing I could not figure out is how to make the last list under ‘Help from Above’ come out to the end of the container at the top menu. The only way I know to do that is with big percentages. I’m not even sure why that list doesn’t go out to the end.

As far as writing it out I feel like I don’t have enough of a grasp of how it all works to even know where to start.

8

If you want to remove that second arrow then you can do it here:


.MenuBar .MenuItemWithSubMenu .MenuItemLabel {
  [B]  background:none!important;[/B]
}

One thing I could not figure out is how to make the last list under ‘Help from Above’ come out to the end of the container at the top menu. The only way I know to do that is with big percentages. I’m not even sure why that list doesn’t go out to the end.

The last list item won’t go to the end of the line because you have set each list item to 13.5% which doesn’t fit exactly into 100% width. It would be very tricky to make all the list items fit across the whole length without using display table-cell properties anyway due to rounding errors with percentages.

I suggest you just settle for each being the same width and then remove this rule:


#MenuBar .MenuItemLast {
    /*width: 100%;*/
}

You should probably set a min-width for the menu also because the percentages soon become too small to hold the content.


#MenuBar .MenuItemContainer{min-width:150px}
9

so here is the update fix navigation bar

The one concern I have with the last item is that without the 100% width, when you hover the container doesn’t cover the last e in “help from above” when the browser window is smaller. Actually it gets worse as the window gets smaller.

Is it basically I need to choose between what it looks like with width:100% or what it looks like without?

Thanks again.

10

Well it all depends on how wide your browser is as it covers completely in my browser. :slight_smile: It’s only when I close the window quite small that the background doesn’t cover the text.

That’s why I suggested adding a larger min-width so that the menu is always at least a certain minimum width wide. The problems with percentages is that at some stage the content will always be too big to fit and will just spill out unless you do something about it. You have the min-width set to 100px which is not enough to cover the text so increase it to 125px.

You could add class and apply a different min-width for each if you wanted depending on the amount of text but seems a lot of effort.

11

ok so here is my latest fix navigation bar I put in a .MenuLast class and then put min-width:103px;

What do you think? Is the logic of the nav. bar better now or is it still messed up?

Ok Seriously, for your entertainment, this is not my most embarrassing mistake on the site-when I was presenting it on Sunday I was informed that my translation of “help from above” in Spanish “Ayuda de los Altos” instead of “lo alto” means help from tall people. I quickly fixed it.

12

[QUOTE=rwest;4863168]ok so here is my latest fix navigation bar I put in a .MenuLast class and then put min-width:103px;

What do you think? Is the logic of the nav. bar better now or is it still messed up?

That looks better to me :).

I don’t think you can expect much more from a fluid width drop down as there will always be a point where things don’t really fit. The min-width seems to be holding all together now.

[quote]
Ok Seriously, for your entertainment, this is not my most embarrassing mistake on the site-when I was presenting it on Sunday I was informed that my translation of “help from above” in Spanish “Ayuda de los Altos” instead of “lo alto” means help from tall people. I quickly fixed it.

You could start a craze - special accessibility for tall people sounds good.:slight_smile:

13

Thanks for all your help Paul. I really appreciate it. Hopefully, if I ever design a website again I will get this stuff straight. :slight_smile:

14

Sorry I am having one more small problem. When I put the nav. bar in the wordpress pages
NLCC | More than a church we're a family
the arrow doesn’t show up
I moved the arrow to the images folder and changed the url but I still don’t see it.

I hope I can still ask this question here.

15

You seem to have the css file in the head of the page so the path to the image will be different from the other css files as they are kept in a different directory.

If you use an absolute reference you will see it appear.


#MenuBar li a {
[B]    background-image: url("http://www.nlccenter.com/inform/wp-content/themes/nlcc/images/ArrowMenuDown.gif");
    background-position: 10px 10px;[/B]

    background-repeat: no-repeat;
    padding-bottom: 6px;
    padding-left: 20px;
    padding-top: 6px;
}
[B]#MenuBar li li a {background-image:none}
[/B]

You should create a menu css file and store it in the same directory as the other css files and then you can revert to the shorter path for consistency.