Welcome to WebmasterWorld Guest from 23.22.250.113

Forum Moderators: not2easy

Message Too Old, No Replies

Menu and Main Content

     

kiwis

8:16 pm on Sep 9, 2011 (gmt 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.

lucy24

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

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



Code?

kiwis

9:21 pm on Sep 9, 2011 (gmt 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;
}

alt131

2:17 pm on Sep 11, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month