Need help with a few pointers on my site for CSS layout

HTML & CSS
1

Hello there,

Can I get some help with my site: www.scotbarchitects.com/portfolio

  1. The menu at the top is a horizontal menu. However I can’t figure out how to get the height of it to 75px? What CSS Selectors do I need to select?
  2. The Categories dropdown menu to the right above the images. How do I get that to be a horizontal menu and not a dropdown menu? I want the users to have one less click if they want to sort images by category.

Thanks,
Lorne

2

Beautiful site. Exactly how do you want the top of the page (the horizontal menu) to appear? Do you want less space above the header? Or do you want the menu to take up less space beneath the header? There are several items affecting the top of the page and some are absolutely positioned.

Also, the footer is fixed at the bottom of the browser window and will overlay the slider if the window height is shortened. Is that intentional?

Did not look at the dropdown menu, yet.

3

Hey Ronpat,

Thanks for the comments. It was a slick theme and now I’m trying to customize.

The menu up top I just want the black bar to be shorter. The text still centered in the menu and the bar about 75px tall. Everything else in the header stays.

The footer is fixed, and yes I did want to get that content window to be a little higher form the bottom to allow space for the mission statement at the bottom. Have suggestions on that one too?

Thanks,
Lorne

4

Are you aware that clicking in the area to the left of the menu, where the minus sign is located, hides the menu bar and shows the word “menu”? The word “menu” appears vertically in that space. Reducing the height of the darkened area might look a bit funny. What do you think? Are you expecting that to change, too?

5

This one is over my head. Someone else will have to help lorne17.

6

Hello again,

Yes I am aware that the menu collapses. I created both the menu image and the ‘-’ image that closes the menu. Both are 75px high. But I cannot remove the dark background that is over 75px high for some reason? Can anyone help me troubleshoot this?

Second can anyone help with the footer text overlapping my text on the Profile page?

Finally, how do I make my categories drop down menu a horizontal list menu.

Thanks,
Lorne

7

You have changed the position of the <h1> element so it is out of the gray area. Nevertheless, try this to change the height of the gray area:


.plus-menu span a:link, 
.plus-menu span a:visited {
    background: url("img/plus.png") no-repeat scroll 22px 60px #FF5B3C;
    display: block;
    float: left;
    height: 22px;                    /* 22px + 40px + 13px = 75px */
    padding: [COLOR="#FF0000"]40px[/COLOR] 30px [COLOR="#FF0000"]13px[/COLOR];         /* changed from:  padding: 60px 30px 51px; */
}
.menu {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    padding: [COLOR="#FF0000"]40px[/COLOR] 60px [COLOR="#FF0000"]0px[/COLOR] 40px;    /* changed from:  padding: 60px 60px 52px 40px; */
    width: 538px;
}
8

Ron,

Thanks for the help! I actually made it 100px cuz I thought 75 was too small. But thanks to you I was able to get it looking right :slight_smile:

Now, I’m curious to know if you have suggestions on how I can go about making that Categories Dropdown menu a horizontal menu? Or does anyone elso have suggestions?

Thanks
Lorne

9

Glad I was able to find the right values to adjust. It was a challenge <grin>.

No, I can’t offer any help with the Categories dropdown. Sorry. Perhaps someone else will have some ideas.