gumspitter

I have done the layout of a new site using divs and some background patterns so far. I also have added a javascript that scrolls images horizontally. My question is how do I add my buttons to the top of the content div? I created another div named "nav" and added the png. images. The buttons I have added also makes the div larger. I do want to expand div at all. How do I get div back to These buttons were created in Photoshop, then saved for the web, as a png file. The confusing part comes in when I insert into the div "nav".I have also created another version of the buttons I want to use as a rollover effect. How do I add other image to get the rollover effect?

Please help if you can
www.absherkennels.com/construction_test.html

Thanks,
Gumspitter

jonweb2009

you could try one of these CSS MENU'S and build your own navigation menu

http://rainbow-templates.com/

__________________
HTML PHOTOSHOP ASP.NET, JAVASCRIPT WEB DESIGN TUTORIALS. www.tutorialriver.com

PixelPusher

Gumspitter,

First I would recommend using a list to hold your menu (nav) not a div. Using the css style float you can have the list items line up horizontally. This is the same principal as the menu on your baseball site. If you are wanting your buttons to differ in length (based on the character length) you will need to incorporate a "sliding door" effect. Here is a tutorial about using the sliding door effect. Personally, I would use a pointed edge image as you don't use any rounded corners in the layout.

Also for semantic purposes, don't use empty tags to create vertical/horizontal space. This is BAD practice. Use padding or margins, after all that is their purpose. For example, remove all those empty heading 6 (h6) tags and simply add a large margin to the bottom of the table with moving images. And remove the span above the "layer5" div. Simply put the menu there and add margins to the table below to keep it in position.

Questions? just ask.

__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

gumspitter

Pixel the effect I am trying to accomplish is similar to this site:
www.josephconst.com

The buttons stand out from the rest of the page. I understand there should be some consistency in the layout but there are thousands of sites that have navigation buttons with rounded corners. I thought it looked pretty good but the css was way off. I appreciate your comments but I as just wondering if I should try to get rounded corners on the other elements of the site?


I would to have header, with mmi construction text, a small div area (black background with buttons I created with rollover effect). The content part of the site would also have the same background as the heder. The footer needs to have a limited size so the text is centered and not a lot of extra empty space. On the joseph site page the buttons seems stranded in too much space I want my page have a more clean area with little wasted space.

Do you have any books suggestions that I can get that do a really good job of explaing every possible layout in css?

Thanks again for the help.

David

PixelPusher

David,

I took a look at the menu on that site. Yeah, you are right. That is a poorly coded menu. For one is uses many different flash pieces (one for each button) instead one solid swf. In addition, it uses a primitive embedding method in the page markup.

I understand you want to have a menu that stands out but I am not convinced it is necessarily the rounded corners that achieves this. I think it is more the design of the menu in general (e.g. colors, shape, gradients, font, etc) that will make it "pop". In regards to adding more rounded corners to your site, it really depends on your theme. Personally speaking, this is a construction site right? When I think of construction I envision building blocks, scaffolding, angles, etc. All of which have hard edges not rounded corners?

As far as books go, I would bet you can find quite a few great titles on amazon. One that i found through a search is "Eric Meyer on CSS". Through my years of working with CSS I have frequently heard this gentleman's name (plus I have read some of his online articles). This title also comes highly recommended: "DHTML and CSS for the World Wide Web" (also sold on amazon).

My suggestion while you look at getting some books, is to build in stages. Get your basic structure down (with clean code). Then build upon that.
Use the correct tags for page elements and style as much as you can with CSS. This way you will learn as you go along and you will be producing semantic, clean code. One of the best resources for HTML and CSS (and PHP, ASP) is W3Schools.com

We are also here to help

__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

gumspitter

Thanks Pixel, I have taken the button images out and reworked the code from scratch. I took the java script scolling out as well. As you can see I have block buttons now with a rollover. I now want to align the buttons horizontally in the black "nav" div so the is no space vertically. Is this possible, I may have to make butons smaller to make this happen right?. Please if you can what is the best way to get these buttons to be horizontal inside of the black background? Please send the proper code if you would. I have researched the Internet tutorials and nothing seems to work with my current code.


sorry for the horrible typos in the last response.

Thanks,
David

PixelPusher

Your welcome David, and in answer to your question, yes it is possible to have the links align horizontally. You will just need to remove the width and float from the list (ul) and apply a left float to the list items (li).

Adjusting the Horiz Layout
Now you will notice that list items (and buttons) wrap under each other. This is because the total width of the buttons (and list) is wider that the width of its parent container, so by default the float style will wrap any extras and start a second horizontal line.

To solve this, either reduce the link width (160px) or remove it entirely and just use L or R padding on the links. By doing the latter, you will have an even amount of space on each side of each link regardless of the character length.

You will also want to add the same L or R padding to the list (ul) to adjust the first or last link. Meaning by only adding a left padding to the links, you will stop the doubling issue between each link, but the last link will be positioned up against the list edge, so this is where you want to add the right padding to the list to compensate.

__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

gumspitter

I now have the buttons lined horizontally but I could not get the spacing to work correctly. Now the buttons seem bunched. Please tell me regarding my code below where to add the padding. I have tried to place it where I you explained but nothing changed.

css code

#nav {
background-color: #000000;
position: absolute;
height: 46px;
width: 990px;
left: 1px;
<!-- navigation code -->
}
ul.links {

margin:0;
padding:0;

height:auto;
}
ul.links li {
list-style-type:none;
width:100px;
margin:2px 0;
padding:0;
float:left;
}
ul.links a:link, ul.links a:visited {
display:block;
font-weight:bold;
font-size:11
pt;
color:#fff;
width:120px;
height:35px;
line-height:37px;
text-align:center;
text-decoration:none;
background: url(gray.png) no-repeat;
outline:none;
padding:0;
margin:0;
}
ul.links a:hover, ul.links a:focus {
background: url(dark.png) no-repeat;
padding: 0;
}
<!--This is navigation code -->
}

Please help,again.

Thanks,
David

PixelPusher

David,

You don't need to wrap the list in a div. A list is a block level element just like a div and can be styled in the same fashion. I removed the "style1" class also because it was empty. The trick here is most of your styling is going to be focused on the anchor tags. We want to use a little as possible on the other elements.

For the list (UL), we remove any default margins and padding, and set a width if needed. Set the overflow to hidden, this will allow the height of the list to adjust to any floated elements within. There is no need for positioning, leave it as static (default) unless you pan to do something fancy. Ok, that is it here.

For the list items (LI), we remove any list style plus any padding and margins. This makes sure that our list items sit at the top of the list and are stacked right next to each other. Lastly, we align them horizontally starting from the left with a left float. Done here.

For the anchors (A), we set the display to block and set the height of each anchor (link). The width we want to leave as alone, as we want it to adjust based on the character length of the anchor text. Then add your background image for the static state. And then set the font style and color. Adjust the line height (aligns the text vertically). Set the text align and text decoration. Set the outline (if you want to remove the dotted line around the links that appears after clicking). The margins on the anchors will also need to be set to zero as we don't want space between the anchors, we want it inside the anchors. For this we use padding. The padding you will need to play with left/right settings to get the spacing exactly right. One last option is to use the white-space style. This can be set to "nowrap" which will make sure your anchor text reads on one line (only applies to links with more than one word). In the hover class, only add the styles you want to change from the original class. The only one that applies here is the background image.

Here is the code adjusted.

That should do the trick. There will be a tiny space at the end of the last anchor (right side). You can create a extra style that adds a little more padding for that element.

Let me know if I missed something, or if you have other questions.

__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

bcrump

@PixelPusher
Thanks you really know your thing

__________________
SEO Video Marketing