Tables and Menus (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message


chris_wolfe -> Tables and Menus (9/1/2005 16:56:30)

Hi

Im having some real difficulties at the moment trying to sort out the layout of my site. I have laid it out with 3 tables. The top containing a logo and menu, the middle the content of the page and the bottom general info etc. Basically i have come across a few problems. I kinda of understand basic HTML and CSS but am unclear or certain things so if anybody can help point me in the right direction i would greatly appreciate it.

Firstly, the menu. I have used a site called infinite global menu's to design the menu bar as i really wanted a drop down menu bar. The first problem is to do with the size. The coding they give you lays the menu bar out using px which from my understanding should not really be used in tables because it does not support different users views. Am i correct in think that ideally i should be using % when laying out because they will adapt to different users browser and screen settings?

I also used a font for the menu, which i have downloaded of the internet, so have embedded it into my site. This has ususally worked in the past but it will not work in the menu.

If these are problems which i can not easily get around, i think i need a new menu, Ive searched the internet for ages but have had no luck looking for a tutorial which can teach me how to design drop down menu's. Can any one recomend a good site (preferabbly for the easily confused) where i can learn how to do this?

Secondly, to do with the general layout. I have used tables, and in a seperate css given them various styles so they will reoccur in all the tables. In the CSS i have used

table {
border: 2px solid #E3A91E;
-moz-border-radius: 2%;
padding: 10;
spacing: 8;
width: 750px;
height: 51px;
background: #061f58;
}

When it comes to the padding and spacing is this correct as in doesnt seem to be doing anything? To round the corners of the border i used -moz-border-radius, is there away to round them in I.E?

Sorry for such an assault of questions. I have been trying to sort it out for the past week and it is driving me insane.

Any help would be greatly appreciated.

Chris

(oh yeah, to make everything clearer i uploaded a page onto a friends server, if u want to look its http://www.koreshrocks.co.uk/beardedgroove/Links/bandlinks.htm )




Tailslide -> RE: Tables and Menus (9/1/2005 17:24:58)

Hi Chris

You're right that using pxs is generally not the best idea as far as font-sizes go. You can use them for laying out bits of your web page as long as you've got the room to increase your font-size a few times without the layout breaking. So font-sizes definitely not pxs - layout boxes etc - pxs if you've got the room to play with. Download Firefox and see what happens when you increase the font-size . Your menu font-size is pretty big anyway but I guess there might be a danger of people wanting to increase the main content text size - and the menu text would get bigger along with it.

If you want to play with CSS dropdowns - there are a couple out there. The most famous one is probably the Suckerfish Dropdown (read all the comments for extra info) and the SEO Consulting one is popular here too. Neither of these are "pure CSS" they both need a little Javascript to get the dropdowns to work in IE.

Far as rounded corners go - you could either use a background image or a CSS technique - here are a few to choose from: http://css-discuss.incutio.com/?page=RoundedCorners

Embedding fonts is usually more trouble than it's worth and I believe it's browser support is patchy - either stick with standard fonts or use images for the menu items.





Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.03125