homepage Welcome to WebmasterWorld Guest from 54.167.144.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Placing Image and Menu next to each other.
lunavoco



 
Msg#: 4600647 posted 3:06 pm on Aug 9, 2013 (gmt 0)

I'm new to CSS and fighting my way through it.

I have an image in a div and a flyout menu in a div. I'd like to have them next to each other, image on left and menu on right.

I placed them both in a larger div and tried to center that. It's not working.

I spent most of yesterday at work googleing with limited results. I tried overflow hidden, but that didn't work.

Suggestions?

HTML:
<div id="inthemiddle">


<div id="splash">
<img src="menusplash.gif" alt="More to come.">
</div>


<div id="menu">
<ul>
<li><a href="#">MDK</a>
<ul>
<li><a href="MDK\MDK Rules 1.0.pdf">Current Rules</a>
</li>
</ul>
</li>
<li><a href="#">RPGs</a>
<ul>
<li><a href="#">Legend of the Five Rings</a>
<ul>
<li><a href="RPGs\4E Character Sheet - Color.pdf">4E Color Character Sheet</a></li>
<li><a href="RPGs\Probability Chart+.pdf">Probability Chart+</a></li>
</ul>
</li>
<li><a href="#">Mage: The Awakening</a>
</li>
<li><a href="#">Shadowrun</a>
</li>
</ul>
</li>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div>


</div>


CSS
#inthemiddle {
overflow: hidden;}



/* MENU*/
/* Define the body style */
body {
font-family:Arial;
font-size:12px;}


/* We remove the margin, padding, and list style of UL and LI

components */
#menu ul, #menu ul li{
margin:0;
padding:0;
Position:relative;
list-style:none;}


/* We apply background color and border bottom white and width to

150px */
#menu ul li{
background-color:#333333;
border-bottom:solid 1px 333333;
width:150px;
cursor:pointer;}


/* We apply the background hover color when user hover the mouse

over of the li component */
#menu ul li:hover{
background-color:#660000;
position:relative;}

/* We apply the link style */
#menu ul li a{
padding:5px 15px;
color:#ffffff;
display:inline-block;
text-decoration:none;}


/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the

ul until the user hover the parent li item */
#menu ul li ul{
position:absolute;
display:none;}


/* When user has hovered the li item, we show the ul list by

applying display:block, note: 150px is the individual menu width. */
#menu ul li:hover ul{
left:150px;
top:0px;
display:block;}


/* we apply different background color to 2nd level menu items*/
#menu ul li ul li{
background-color:#660000;}


/* We change the background color for the level 2 submenu when

hovering the menu */
#menu ul li:hover ul li:hover{
background-color:#CD0000;}


/* We style the color of level 2 links */
#menu ul li ul li a{
color:#ffffff;
display:inline-block;
width:120px;}


/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu

*/
#menu ul li:hover ul li ul{
position:absolute;
display:none;}


/* We show the third level menu only when they hover the second

level menu parent */
#menu ul li:hover ul li:hover ul{
display:block;
left:150px;
top:0;}


/* We change the background color for the level 3 submenu*/
#menu ul li:hover ul li:hover ul li{
background:#CD0000;}


/* We change the background color for the level 3 submenu when

hovering the menu */
#menu ul li:hover ul li:hover ul li:hover{
background:#FF7619;}


/* We change the level 3 link color */
#menu ul li:hover ul li:hover ul li a{
color:#ffffff;}


/* Clear float */
.clear{
clear:both;}

[edited by: DrDoc at 7:11 pm (utc) on Aug 9, 2013]
[edit reason] Removed broken link [/edit]

 

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4600647 posted 7:14 pm on Aug 9, 2013 (gmt 0)

Welcome to WebmasterWorld!

So, you want both centered on the page?
+-------------------+ 
| +------+------+ |
| | IMG | MENU | |
| +------+------+ |
+-------------------+

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4600647 posted 8:38 pm on Aug 9, 2013 (gmt 0)

I'm looking for one of two terms:

display: inline-block
and/or
float: {left or right}

The posted CSS has a comment line "clear floats", but no sign of the floats themselves. A "float" property would have to be attached to either "splash" or "menu", whichever comes first in the HTML (only one, not both)

The form "display: inline-block" shows up several times-- but only attached to <a> elements. An "inline-block" property would need to be attached to both "splash" and "menu".

Option C is "display: table-cell" but you don't see this nearly as often.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4600647 posted 8:56 pm on Aug 9, 2013 (gmt 0)

Hi there lunavoco,

and a warm welcome to these forums. ;)

Here is you amended code, for you to try...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>image and menu horizontally centered</title>

<style>

/* Define the body style */

body {
background-color:#f0f0f0;
font-family:arial,sans-serif;
font-size:12px;
}
#inthemiddle {
width:300px;
margin:auto;
background-color:#333;
border:1px solid #999;
box-shadow:10px 10px 10px #666;
}
#inthemiddle:after {
content:'';
display:block;
clear:both;
}
#splash {
float:left;
width:150px;
}
/* MENU*/

/* We remove the margin, padding,
and list style of UL components */

#menu, #menu ul {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}
#menu {
float:left;
}
#menu ul {
box-shadow:10px 10px 10px #666;
}

/* We apply background color and border
bottom white and width to 150px */

#menu li {
position:relative;
background-color:#333;
border-bottom:1px solid #333;
width:150px;
cursor:pointer;
}
#menu li ul li {
width:auto;
}


/* We apply the background hover color when user
hover the mouse over of the li component */

#menu li:hover {
position:relative;
background-color:#600;
}

/* We apply the link style */

#menu li a {
display:block;
padding:5px 15px;
color:#fff;
text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and
hidden the ul until the user hover the parent li item */

#menu li ul {
position:absolute;
display:none;
}


/* When user has hovered the li item, we show the ul list by applying
display:block, note: 150px is the individual menu width. */

#menu li:hover ul {
left:150px;
top:0;
display:block;
}


/* we apply different background color to 2nd level menu items*/

#menu li ul li {
background-color:#600;}


/* We change the background color for the level 2
submenu when hovering the menu */

#menu li ul li:hover {
background-color:#cd0000;
}

/* We style the color of level 2 links */

#menu li ul li a {
display:block;
color:#fff;
}

/**** THIRD LEVEL MENU ****/

/* We need to hide the 3rd menu, when
hovering the first level menu*/

#menu li:hover ul li ul {
position:absolute;
display:none;
}


/* We show the third level menu only when
they hover the second level menu parent */

#menu li ul li:hover ul {
display:block;
left:100%;
top:0;
}


/* We change the background color for the level 3 submenu*/

#menu li:hover ul li:hover ul li {
background:#cd0000;
}


/* We change the background color for the level 3
submenu when hovering the menu */

#menu li ul li ul li:hover a {
background:#ff7619;
}

/* We change the level 3 link color */

#menu li ul li:hover ul li a {
color:#fff;
}
</style>

</head>
<body>

<div id="inthemiddle">

<img id="splash" src="menusplash.gif" alt="More to come.">

<ul id="menu">
<li><a href="#">MDK</a>
<ul>
<li><a href="MDK\MDK-Rules-1.0.pdf">Current Rules</a></li>
</ul></li>
<li><a href="#">RPGs</a>
<ul>
<li><a href="#">Legend of the Five Rings</a>
<ul>
<li><a href="RPGs\4E-Character-Sheet-Color.pdf">4E Color Character Sheet</a></li>
<li><a href="RPGs\Probability-Chart.pdf">Probability Chart+</a></li>
</ul></li>
<li><a href="#">Mage: The Awakening</a></li>
<li><a href="#">Shadowrun</a></li>
</ul></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">unknown</a></li>
<li><a href="#">unknown</a></li>
</ul>

</div><!-- end #inthemiddle -->

</body>
</html>


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved