Welcome to WebmasterWorld Guest from 54.196.244.186

Forum Moderators: not2easy

Message Too Old, No Replies

Menu and Main Content

     
8:16 pm on Sep 9, 2011 (gmt 0)

New User

joined:Sept 9, 2011
posts:6
votes: 0


I have a basic page, it's got a header at the top and footer at the bottom.

Everything looks great and works well in all browsers.

The issue I have is on some pages I want the content to have a menu on the left, sometimes two menus on the left next to each other then the main content on the right.

This is all over the show in different browsers. Sometimes it looks great but for others it does this

I have

1. Menus are on top of each other
2. The menu has a different margins

How can I get this consistant.
8:47 pm on Sept 9, 2011 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12720
votes: 244


Code?
9:21 pm on Sept 9, 2011 (gmt 0)

New User

joined:Sept 9, 2011
posts: 6
votes: 0



<div class="MainContent2">

<p class="HeadTitle">Page Title</p>
<p class="RegFont">This is my main paragraph with information</p>


<p class="RegFontBold">Bullet Points</p>
<ul class="nav2">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>



<div class="MainMenu"><?php require_once('includes/main_menu.php'); ?></div>
<div class="MainMenu"><?php require_once('includes/sub_menu.php'); ?></div>
<div style="clear: both;"></div>

</div>



.MainPage {
background-color:#FFFFFF;
width: 990px;
margin: 0 auto;
min-width: 990px;

}

.MainContent2 {
float:right;
min-height: 500px;
width: 600px;
margin-right:15px;
margin-left: 15px;
margin-bottom: 15px;
display: table-cell;

}
.MainMenu {
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
list-style-type:none;
padding: 2px;
}

.nav2 {
list-style:none;
width: 300px;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 0px;
}

ul.nav2 li {
border-bottom: 1px solid #666;
padding: 5px;
}

.RegFont {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:left;
}

.RegFontBold {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
text-align:left;
}
2:17 pm on Sept 11, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi kiwis, and welcome to WebmasterWorld :)

Thank you for providing a code sample. As you have large number of inconsistencies between browsers/versions I would suggest first making sure the css and html are valid.

From your description, you are wanting a simple two column layout with menu/s on the left and content on the right. There are lots of ways to achieve that, but to start, the provided html has both div.MainMenu inside div.MainContent2. If the div.MainMenu's contint he menus, and div.Maincontent2 contans the content that is supposed to float to the right, then the two menu divs need to be removed from inside that div.Maincontant2.

Second, depending on your html structure and the browser versions being supported the menu divs will probably need to be given a width and floated as well.

However, as you have used display:table-cell, I wonder if you are only supporting modern browser/versions. If so, it should be possible to achieve this using display:inline-block, or display:table/row/cell if you wish.

In terms of margins, browser/versions vary on the default margins and padding for <ul>'s. A common technique is to zero both, then set your preferred dimensions.