[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 67
  • Last Modified:

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.
0
breeze351
Asked:
breeze351
  • 2
  • 2
  • 2
1 Solution
 
zephyr_hex (Megan)DeveloperCommented:
Create a container div, and then two child divs inside that container div.  The first div holds the content of the menu items, and the second div holds the image.  Then style the first child div to float left.

Here is a Fiddle Demo.

HTML
<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="http://findicons.com/files/icons/1995/web_application/48/smiley.png"> </div>
</div>

Open in new window


CSS
#menu {
  float:left;
}

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You can also make the image a background-image of the menu item and position it right-center.
0
 
breeze351Author Commented:
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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Kim WalkerWeb Programmer/TechnicianCommented:
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?
0
 
zephyr_hex (Megan)DeveloperCommented:
Were you able to locate the conflicting CSS?  If not, can you set up a Fiddle Demo that demonstrates the problem?
0
 
breeze351Author Commented:
Got it thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now