First attempt at designing using CSS

seaweed27
seaweed27 used Ask the Experts™
on
Ok so I'm giving up on front page, and trying to get into the swing of things with dreamweaver.
I have followed some tutorials from Lynda, but remain stumped so far on a couple issues.

link
I'm using 3 column fixed width with header and footer.
My goal is for the logo to fill the header or the header to be a big as the logo-
To have the navbar against the logo/header without space between.
To have the menu bar the same size across, not like rules and regs.
Once i resolves these issue and work on a better color scheme i plan making a template
Any  other tips for a beginner would be appreciated.
Thanks
seaweed

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
A picture worths 1000 words.
Prepare a schematic layout and present it.
Top Expert 2011

Commented:
I would start by deleting the image element that you used to place the header image. Make that image the background of the header div.

.oneColFixCtrHdr #header {
    background: url("images/wssa.jpg") repeat scroll 0 0 transparent;
    height: 200px;
    padding: 0 10px 0 20px;
}

Open in new window


It starts to repeat, so you will need to either resize your header or resize the image to fit.
Jason C. LevineDon't talk to me.
Commented:
>> My goal is for the logo to fill the header or the header to be a big as the logo-

So the width of the container is 812px (look at the CSS to confirm).  Resize your logo in a graphics editor to 812 width and that will take care of part of it.  The other things you need to do is remove the CSS padding from .header and .header h1

>> To have the navbar against the logo/header without space between.

Fix the logo and it will be.  The only space there now is the padding from the header.

>> To have the menu bar the same size across, not like rules and regs.

Unfortunately, you need to drop the font size so it would all fit on a single line.  Or you can drop some words from that option.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2011
Commented:
As far as your link that says Rules and Regulations link goes, you have so much text in that link the only thing you could do is make the widths not static like they are.

Change the LI elements to this:
ul.MenuBarHorizontal li {
    cursor: pointer;
    float: left;
    list-style-type: none;
    margin: 0 4px 0 5px;
    position: relative;
    text-align: center;
    width: auto;
}

Open in new window


This will give you good spacing.

But you have to fill in the void with the same background color.

Try changing up your markup slightly. You can add a div to help this.


MARKUP

<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#home.html" class="MenuBarHorizontal">Home</a>      </li>
      <li><a class="" tabindex="-1" href="#board.html">Board</a></li>
      <li><a class="" tabindex="-1" href="#rules.html">Rules and Regulations</a>      </li>
      <li><a class="" tabindex="-1" href="#apply.html">Apply</a></li>
      <li><a class="" tabindex="-1" href="#records.html">Records</a></li>
      <li><a class="" tabindex="-1" href="#members.html">Membership</a></li>
      <li><a class="" tabindex="-1" href="#contact.html">Contact Us</a></li>
    </ul>
</div>

Open in new window


CSS

#navigation {
  width:100%;
  height: auto;
  background: #CC0001;
  float: left;
}

Open in new window


Let me know how you like that. I have attached a screenshot.



 Screenshot

Author

Commented:
Looks like progress Here is what i have now
need to remove the white bar
center the navebar better
and maybe adjust H/V position of the test to the center of navbar
thanks
temp.gif
Top Expert 2011

Commented:
The white line is being caused by a

<br> (line-break)

You have between the header and the NAV.

Add this to your ul.MenuBarHorizontal li

    margin: 0 4px 0 5px;

this will help space it out better.
Top Expert 2011

Commented:
Sorry, that <br> is between MainContent and Navigation.

Author

Commented:
its looking great, are there any other suggestions tips from the pros that help as a newbie to DW and CSS?

Seaweed
Jason C. LevineDon't talk to me.

Commented:
>> tips from the pros that help as a newbie to DW and CSS

Start Googling for tutorials :)

Author

Commented:
Great help, All of the posts contained helpful content,
Thanks
Seaweed

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial