fsiebert Posted September 18, 2011 Share Posted September 18, 2011 Hello, I'm trying to copy the "contentAll" div menu of my website horizontally so I have three or four of these menus. I've tried with tables, but I can't get the styling right. I want the spacing to be exactly like it is right now, and the second column to be, say fifty pixels from the first one? Here's my HTML <!DOCTYPE HTML><html><head><title>Francis Siebert</title><link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" /></head><body><div id="header"> <h1>Francis Siebert, just another boring, want to be writer.</h1></div><div id="contentAll"> <p>Non-Fiction</p> <p><a href="http://www.westerngazette.ca/author/francis-siebert/" target="_blank">Western Gazette</a><br /> <a href="http://www.iamanelephant.com/" target="_blank">I am an Elephant</a></p></div></body></html> Thank you. Link to comment Share on other sites More sharing options...
Ingolme Posted September 18, 2011 Share Posted September 18, 2011 Remember that two elements can't have the same ID. I think you should restructure your HTML. That's a horrible use of the <p> tag. I don't see any <p>aragraphs! Here's an example of a menu that might look like what you want. If there's anything a bit out of place you don't need to change the HTML, just adjust the margins and paddings with CSS.HTML: <ul id="menu"> <li><h3>Non-Fiction</h3> <ul> <li><a href="http://www.westerngazette.ca/author/francis-siebert/" target="_blank">Western Gazette</a></li> <li><a href="http://www.iamanelephant.com/" target="_blank">I am an Elephant</a></li> </ul> </li> <li><h3>Second menu</h3> <ul> <li><a>Another link</a></li> <li><a>Another link</a></li> </ul> <li> <li><h3>Third menu</h3> <ul> <li><a>Another link</a></li> <li><a>Another link</a></li> </ul> <li></ul> CSS: #menu, #menu ul { padding: 0; list-style-type: none;}#menu h3 { font-size: 1em; margin: 0.8em 0;}#menu > li { padding-left: 50px;} Link to comment Share on other sites More sharing options...
fsiebert Posted September 18, 2011 Author Share Posted September 18, 2011 Thank you. Now, how do I make it so the second menu is next to the first menu rather than below? Link to comment Share on other sites More sharing options...
Ingolme Posted September 18, 2011 Share Posted September 18, 2011 I forgot to add that, change the style rule to this: #menu > li { padding-left: 50px; float: left} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.