asked on

Left menu with a header image

I need to create something that looks like this
---------------------------------------------------------------------------------------------
| Menu Item 1 | Image |
| Menu Item 2 | |
| Menu Item 3 | |
| Menu Item 4 | |
---------------------------------------------------------------------------------------------

I can't figure out how to display the menu items and still have the image for the logo displayed to the right.

ASKER CERTIFIED SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kim Walker

You can also make the image a background-image of the menu item and position it right-center.

breeze351

ASKER

Zeph
No Joy. I copied your code and tried it. The image appears below the menu!

<!DOCTYPE html><head>
	<title>Menu</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="stylesheet" type="text/css" href="Fred.css">
</head>


<div id="container">
  <div id="menu">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  <div id="image">
    <img src="Images/Lang_Logo.jpg"> </div>
</div>

Open in new window

Fred.css

#menu {
  float:left;
}

Open in new window

Kim Walker

There must be a conflict with other styles. What is the base URL of your Fred.css and Images/Lang_Logo.jpg files? Or better yet, what is the URL to your test file if it's available remotely?

zephyr_hex (Megan)

Were you able to locate the conflicting CSS? If not, can you set up a Fiddle Demo that demonstrates the problem?

breeze351

ASKER

Got it thanks