Jump to content

Recommended Posts

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.

  • Like 1
Link to post
Share on other sites

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>


#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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...