15 replies [Last post]
Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

I am creating a site for a friend of mine, but i can't get the menu aligned properly.

http://members.home.nl/kusters/mda/
http://members.home.nl/kusters/mda/css/mdacss.css

I used a backgroundimage in css, and wrote the link on top of that, but i want the link to be right next to the small logo. I tried using padding and margin in several classes, but i only got the margin-left to work!

What did i miss?

Resurrection is for those who did not get it right the first time

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aligning text

Lots! Smile

First off you are using table to hold the layout. Some people with multi-column layouts do have an excuse that CSS layouts are too hard for them. But your layout is one column so there is absolutely no reason to use a table. (These forums are devoted to promoting the use of CSS for layout and tables for tabular data).

Second off, you don't have a complete doctype. That'll mean some browsers display in their own "quirks" mode. Which means the page could look significantly different from one browser to the next. Your also using a transitional doctype, for a new page you are better off using strict. It'll also help you develop your HTML and CSS skills faster - it won't let you get into bad habits.

Your menu.

A common way to handle menus is as unordered lists of links.

<ul id="menu">
  <li><a href="#">menu item</a></li>
  <li><a href="#">menu item</a></li>
  <li><a href="#">menu item</a></li>
</ul>

There is a site, list-a-matic devoted to different methods of styling menus contructed using this html.

In your case.
- Drop the menudiv
- place the background image on the link element, give it some padding-left to avoid the text appearing above the image. use background-position if you need to alter the location of the image.
- make the link element display block so the whole menu item area is clickable.
- reduce the size of the image to just the image part, background colour can handle the rest

e.g. assuming an id of 'menu' on the container that holds the menu, be it a <ul> element as I suggest or a <td> element as you have now.

#menu a {
   background: url(../images/button.jpg) left center #066DB8;
   padding-left: 25px;
   display: block;
   width: 80px;
   height: 2em;  /* using ems is more resilient to user font-size changes */
}

As a side note. The <a> element is normally display:inline. When it is inline it will ignore margin-left and margin-right.

Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Aligning text

Yes you are right: I find it too difficult to use css to create tables.

And yes you are right, there is no need to use tables here. So i will change that.

Used another DOCTYPE (Strict) But then i got this:

The tag: "body" doesn't have an attribute: "text" in currently active versions.[XHTML 1.0 strict] (And this on practically on all tags) ????

Gonna check out the listamatic and learn.....and gonna work on the rest and start from scratch..... :? Laughing out loud

I am still in the process of learning, when will it ever stop???? Laughing out loud

Resurrection is for those who did not get it right the first time

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aligning text

re: text.

Its not necessary, you can control the text colour in CSS using the color property.

e.g.

body {
  color: #000000;
}

Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Aligning text

I get this on almost every tag: so if i get it right i need to use css for all of the tags with this comment?

Resurrection is for those who did not get it right the first time

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Aligning text

Laughing out loud No, you need to get rid of the text attribute wherever you find it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aligning text

Yes. The idea behind CSS is to separate the presentation (styling) from the content. All the attributes whose only purpose was to alter the element's presentation should be removed from your html and their equivalents placed in your CSS.

text => color
bgcolor => background-color
align => text-align

etc.

Modern thought is its not up to the designer to open new windows on the user's pc. The user can do that if they wish. As such, the "target" attribute has been deprecated and shouldn't be used.

Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Aligning text

Ok, i done my homework and built the site again from scratch.

http://members.home.nl/kusters/mda/
http://members.home.nl/kusters/mda/css/mdacss.css

I hope you are satisfied with the result. Wink

The only thing i want now: the backgroundcolor around the menu links a little wider. I tried several things but i cannot get the same results in ff and ie.

I also put a comment in the css about alignment, please take a look at it.

And indeed i do not need any extra stuff for the layout in the HTML code. Virtually anything can be done in CSS. Shock

I also did validation on both CSS and HTML and i passed in STRICT MODE !

Looking forward to your comment!

Resurrection is for those who did not get it right the first time

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aligning text

Browsers have a whole host of default styles (or equivalents) which they use to get the standard look for each element. For most of the "semantic" block elements that means they have approx. 1em of margin-top and margin-bottom. Its that which puts one line of blank space between paragraphs, headings, etc.

The UL element is the same. What you are seeing is the margin of the ul element collapsing with the margins of #navcontainer. When margins collapse the largest margin takes over and is applied to the outermost element in the collapse. Hence what you are seeing. A more detailed and coherent Smile explanation can be found at W3c css2.1.

Until you are familiar with how margins work and interact it is probably sensible to place the following at the start of your CSS.

* {margin: 0; padding: 0;}

This utilises the universal selector to override browser defaults and zero all margins and padding. You then add back margins & padding as you need them.

Not all browsers use the same styles for spacing. The above line has the added effect of ensuring every browser is following your instructions.

For your menu, with the margins zeroes you can then use padding on the #navlist to increase its height.

Some notes:
For the menu, the ul element is the container. There isn't really a need for another container outside it. You can merge #navcontainer & #navlist into one.

You use h5 elements for your headings. Its better to use headings in order. A page should have one h1 element - its title. Then other headings as required will follow on from that - in the case of your page that would make the headings all h2.

I am guessing you are using h5 at the default size and look is closest to what you want. What you should be doing is using h2 and then styling it to be how you want - font-size, -weight, color, background etc. This means the heading should display the same in every browser - you aren't at the mercy of what some browser geek decided the default should be for his browser.

Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Aligning text

The site does not look very attractive, but it's meant purely to inform people. I am creating this site for a friend who is the Pres. of the foundation, eventhough i am an amateur in webdesign, i want it to work without any problems. (The original site is still running, but i don't want to change it until i am satisfied with whatever I came up with. (The original is not mine though, i hate frames. Evil )

OK, what about this then?

http://www.mdaeurope.org/nieuw2/
http://www.mdaeurope.org/nieuw2/mdacss.css

I decided to go for a two column layout with left menu (without using tables), because the menu is getting too big for a horizontal layout. Maybe i should dig in to dropdown menus?

Anyway, this is what i came up with......works both in FF and IE.
Fits 800*600 and 1024*768.

Did i miss anything (again?) Laughing out loud

Maybe any tips on what YOU would do? Designwise?

Thanks for your support so far..... Laughing out loud

Resurrection is for those who did not get it right the first time

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aligning text

I'm not a designer, so please don't take my 0.02 as anything near "correct".

First some technical stuff:

- if you narrow the page your right portion will slip below your left portion. That is because you are using % for one part of the layout and px for another part in the same "layer". I would either make them both %, remove the float from the right hand pane and use margin-left to clear the menu panel, or make the layout fixed width.
- if you're using XHTML-Strict, I think your html line should include some extra information (though I could be wrong here).

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

- For the banner, you may want to place the image inside an <h1> tag. Also include the text "Muscular Dystrophy Association Europe" and construct the style so the text doesn't show. Either that or put the text in the alt attribute, "logo" is pretty meaningless if we don't know for what it is a logo.

Now some design stuff:
- I think you could use some padding to the right of the menu. Space is good in a design, at least I think so. Take a look around at different sites and I think you'll find well spaced less busy sites look better and are easier to use.
- Gary has the figures for this, but I think an ideal line length is about 15 words (~60em). Anything longer than that an someone reading needs to scan along the line and then back and down. That length or shorter and its possible to read straight down. This is an argument against a fluid design that can result in very long line lengths - implying a fixed width (or max width) may be good for the right hand pane.
- It could do with some images to break things up a little, see content stuff below.

Some content stuff:
- I get lost when I start reading your first paragraph. The site title implies the site is to do with Muscular Distrophy. The first paragraph seems to describe an affiliation between Harley Davidson or riders of Harley Davidsons and muscular dystrophy fund raising. I'd be inclined to have a tag line or an intro paragraph bigger than the normal text that summarises that affiliation in some way - and perhaps some photos showing the your fundraising activities or the work you do with MD sufferers.
- There are a lot of &trade; throughout the text. Are they necessary on every mention of Harley Davidson and H.O.G. I found them distracting.
- You may want to use <meta> tags to provide extra information about your page, e.g. title, content, description, robots.

<meta name="title" content="site title, similar to your <title> contents" />
<meta name="keywords" content="originally used to list keywords your site could be indexed on, not used so much by search engines anymore since it was abused by many." />
<meta name="description" content="search engines may use this as the short summary they return with the page link" />
<meta name="robots" content="index,follow" />
<meta name="author" content="you" />
<meta name="date" content="2006-02-23" />

Lastly, accessibility stuff.

Since this is a site concerned with a serious illness, you may want to make sure its compliance with all the nice accessibility rules is exemplary. Details concerning accessibility can be found in an excellent article by Lorraine, stickied at the top of the off-topic forum.

I'm sorry if this seems a lot to take in all at once - but you did ask Smile. Feel free to ignore, contradict or question any of the points above.

Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Aligning text

OK, i decided to use a H1 tag for the header.

For the lay-out: the MDA board decided to use a horizontalstyle layout, so i moved back to the original (horizontal) layout.

As far as the text goes, i asked for a intro-text which will be added some time this week. I added more space and indeed it helps a lot reading the page! The trademark HAS to be on every mention of harley and hog and mda, unfortunately. But i shrinked it to a minimum!

I had meta tags on the first setup, but forgot to copy them, but i am gonna work on some extra meta's.

I will look into the accessability guide of Lorraine this week!

Thanks Chris for your remarks, it really helps. But i need yet more help......

On the LINK section i want the countries and the links seperated from eachother and have the links lined out nicely. I can't get it done with margin and padding. should i use seperate divs?

You see, i take your comments quite seriously, i want to do this one right. (The MDA's wishes kept in mind).

http://www.mdaeurope.org/nieuw3/index.html

Resurrection is for those who did not get it right the first time

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aligning text

For the links section try organising things a little differently:

Perhaps as a definition list ...

<dl>
  <dt>USA</dt>
  <dd>Muscular Dystrophy Association Tucson</dd>
  <dt>Australia</dt>
  ...
</dl>

or a nested list....
<ul>
  <li>USA
    <ul>
      <li>Muscular Dystrophy Association Tucson</li>
    </ul>
  </li>
  <li>Australia
    <ul> ....
    </ul>
  </li>
  ...
</ul>

Either way, you should get the extra elements to make applying extra spacing easier.

I am not so sure about your top right picture on the home page. The silhouetted people make it look more like a still from a terrorist video than friendly, jovial bikers Smile

Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Aligning text

LOL, don't let 'em hear that! They ARE bikers you know! :twisted:

I will brighten it up a bit.........

Thanks for the tips again. Gonna work on that.

Cool

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 11 years 30 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Aligning text

MDA Europe is published.

Unfortunately i had to use tables in some pages, because time was running out on me....

Could anyone check the a:hover a:active and stuff, cos i made an error somewhere......can't figure out where.

I got several a: but the last (.footer) one overwrites the other a:

Sad

Resurrection is for those who did not get it right the first time

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aligning text

I'm not sure what you mean?

Do you want the footer link to appear similar to your other links?
Or is some other link picking up the footer style incorrectly? If so which link, where?