Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

indented <div>

Options
  • 24-10-2008 2:23pm
    #1
    MargeS
    Registered Users Posts: 1,002 ✭✭✭


    Can anyone tell me what's happening here. I need all the menu items aligned left under one another. But the second <div> (Facilities) is appearing indented by the width of the img.

    So it's appearing like this;
    div 01
    div 02

    instead of:
    div01
    div02

    <!-- Surrounding div -->
<div class="ms-navitem" align="left" style="font-weight:bold; height:100%;width:100%; padding-top:8px; padding-left:8px; padding-bottom:8px; background-color:red; background-image:url(''); ">
<div>
    <img align="left" src="/_layouts/images/menudwnarrow.gif" alt="">
    <a class="ms-navitem" id="Administration_Link" title="Administration" style="width:100%; CURSOR: hand; padding-bottom:10px; background-image:url('#'); text-align:left"
          onclick="javascript:window.location.href='#'"
          onmouseover="MSOWebPartPage_OpenMenu(Administration_Menu, this);">
         Administration 
        </a>
         </div>
<div style="margin-left:0px;">
             <img align="left" src="/_layouts/images/menudwnarrow.gif" alt="">
        <a class="ms-navitem" id="Facilities_Link" title="Facilities" style="width:100%; CURSOR: hand; padding-bottom:10px;  background-image:url('#'); text-align:left"
        onclick="javascript:window.location.href='#'"
          onmouseover="MSOWebPartPage_OpenMenu(Facilities_Menu, this);">
          Facilities
         </a>
         </div>
</div>


Comments

  • Options
    #2
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    Ok a few problems (apart from the bright red background :eek: - just messing :P) - you have the first div declared with a class and then you proceed to add styling to it. Why? I think what you're trying to do is a vertical menu. Try the following code (adapt to suit whatever color scheme you're trying)

    CSS file 
    .vertical_menu
{
    BORDER-RIGHT: #94aa74 1px solid;
    BORDER-TOP: #94aa74 1px solid;
    BORDER-LEFT: #94aa74 1px solid;
    WIDTH: 150px;
    BORDER-BOTTOM: 0px
}
.vertical_menu UL
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none
}
.vertical_menu LI A
{
    PADDING-RIGHT: 0px;
    DISPLAY: block;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 4px;
    FONT: bold 12px/24px Verdana, Arial, Helvetica, sans-serif;
    PADDING-TOP: 4px;
    BORDER-BOTTOM: #94aa74 1px solid;
    HEIGHT: 24px;
    TEXT-DECORATION: none
}
.vertical_menu LI A:link
{
    COLOR: #5e7830
}
.vertical_menu LI A:visited
{
    COLOR: #5e7830
}
.vertical_menu LI A:hover
{
    COLOR: #26370a;
    BACKGROUND-COLOR: #94aa74
}
.vertical_menu LI A.selected
{
    COLOR: #26370a;
    BACKGROUND-COLOR: #fbe26d
}

    HTML file 
    <html>
<head>
<link rel="stylesheet" href="vertical.css" media="screen" />
<link rel="stylesheet" href="horizontal.css" media="screen" />
<style>
	body {
		margin:		0px;
		padding:	0px;
	}
</style>
</head>
<body>
	<div class="vertical_menu">
	<ul>
		<li /><a href="test.html" class="selected">Item 1</a>
		<li /><a href="test.html">Item 1</a>
		<li /><a href="test.html">Item 1</a>
		<li /><a href="test.html">Item 1</a>
		<li /><a href="test.html">Item 1</a>
	</ul>
	</div>
</body>
</html>

    Adapt as you see fit.

    Regards,
    RD


Advertisement