PDA

View Full Version : Struggling to aline simple horizontal menu!



agentm
Mar 12th, 2010, 11:33 PM
I am quite new to CSS and try for the first time without tables. Been struggling the entire afternoon with this problem. For some reason the horizontal menu would JUST NOT line up with the top left image!

Here is the link: http://www.henkprinsloo.com/test/newindex.html


I would appreciate any help! Thanks:)

CSS


.droplinebar ul{
display: inline;
padding: 0;
margin-left: 0;
margin-right: 0;
font: bold 14px Arial;
background: transparent; /*default background of menu bar*/
}

.droplinebar ul li{
display: block;
}

.droplinebar ul li a{
display: block;
float: right;
color: black;
text-align:center;
padding-top: 4px;
text-decoration: none;
}

.droplinebar ul li a:visited{
display: block;
color: black;
}

#maincontainer{
width: 800px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
display: block;
background: black;
height: 79px; /*Height of top section*/
width: 800px;
}


#contentwrapper{
display: inline;
background: #7c8355;
width: 800px;
}

.topmenuleftbar{
display: block;

}




HTML Code



<div id="maincontainer">
<div id="topsection"><img src="images/mainlayout4_01.jpg" width="800" height="79" title="" alt=""/></div>

<div id="contentwrapper">
<div class="topmenuleftbar">
<img src="images/mainlayout4_02.jpg" width="377" height="25" title="" alt=""/>
</div>
<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a class="tabministries" href="ministries.html" target="content">Ministries</a>
<ul>
<li><a class="menuchildren" href="children.html" target="content">Children</a></li>
<li><a class="menuteens" href="teens.html" target="content">Teens</a></li>
<li><a class="menuladies" href="ladies.html" target="content">Ladies</a></li>
<li><a class="menumen" href="men.html" target="content">Men</a></li>
<li><a class="menuadults" href="adults.html" target="content">Adults</a></li>
<li><a class="menuseniors" href="seniors.html" target="content">Seniors</a></li>
</ul>
</li>
<li><a class="tabcomingevents" href="events.html" target="content">Coming Events</a></li>
<li><a class="tababoutus" href="aboutus.html" target="content">About Us</a>
<ul>
<li><a class="menuhistory" href="history.html" target="content">Church History</a></li>
<li><a class="menumission" href="mission.html" target="content">Mission Statement</a></li>
<li><a class="menuwebelieve" href="webelieve.html" target="content">What We Believe</a></li>
<li><a class="menuourpastor" href="ourpastor.html" target="content">Meet Our Pastor</a></li>
</ul>
</li>
<li><a class="tabhome" href="welcome.html" target="content">Home</a></li>
</ul>
</div>
</div>

</div>

Excavator
Mar 13th, 2010, 01:36 AM
Hello agentm,
If you move #topmenuleftbar's closing div to include the ul you can float mainlayout4_02.jpg and put the menu alongside.
Try changing your markup to look like this -

<div id="maincontainer">
<div id="topsection"><img src="images/mainlayout4_01.jpg" title="" alt="" width="800" height="79"></div>

<div id="contentwrapper">
<div class="topmenuleftbar">
<img src="images/mainlayout4_02.jpg" title="" alt="" width="377" height="25">
<!--</div>-->
<ul class="droplinebar">
<li><a class="tabministries" href="ministries.html" target="content">Ministries<img src="down.gif" class="downarrowclass" style="border: 0pt none; padding-left: 5px;"></a>
<ul style="visibility: visible; width: 143px; left: 441.5px; top: 141px; display: none;">
<li><a class="menuchildren" href="children.html" target="content">Children</a></li>
<li><a class="menuteens" href="teens.html" target="content">Teens</a></li>
<li><a class="menuladies" href="ladies.html" target="content">Ladies</a></li>
<li><a class="menumen" href="men.html" target="content">Men</a></li>
<li><a class="menuadults" href="adults.html" target="content">Adults</a></li>
<li><a class="menuseniors" href="seniors.html" target="content">Seniors</a></li>
</ul>
</li>
<li><a class="tabcomingevents" href="events.html" target="content">Coming Events</a></li>
<li><a class="tababoutus" href="aboutus.html" target="content">About Us<img src="down.gif" class="downarrowclass" style="border: 0pt none; padding-left: 5px;"></a>
<ul style="visibility: visible; width: 143px; left: 441.5px; top: 141px; display: none;">
<li><a class="menuhistory" href="history.html" target="content">Church History</a></li>
<li><a class="menumission" href="mission.html" target="content">Mission Statement</a></li>
<li><a class="menuwebelieve" href="webelieve.html" target="content">What We Believe</a></li>
<li><a class="menuourpastor" href="ourpastor.html" target="content">Meet Our Pastor</a></li>
</ul>
</li>
<li><a class="tabhome" href="welcome.html" target="content">Home</a></li>
</ul>
<!--end topmenuleftbar--></div>

</div>



And some CSS to go along with that -


#contentwrapper{
background: #7c8355;
width: 800px;
overflow: auto;
}
#contentwrapper img {float: left;}
.topmenuleftbar{overflow: auto;}



And more CSS -
ul.droplinebar{
display: inline;
padding: 0;
margin-left: 0;
margin-right: 0;
font: bold 14px Arial;
background: transparent; /*default background of menu bar*/
}

ul.droplinebar li{
display: block;
}

ul.droplinebar li a{
display: block;
float: right;
color: black;
text-align:center;
padding-top: 4px;
text-decoration: none;
}

ul.droplinebar li a:visited{
display: block;
color: black;
}

ul.droplinebar li a:hover, ul.droplinebar li .current{ /*background of main menu bar links onMouseover*/
color: white;
}


/* Sub level menus*/
ul.droplinebar li ul{
position: absolute;
z-index: 100;
right: 0;
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
ul.droplinebar li ul li a{
font: normal 14px Verdana;
text-align:center;
padding-top: 5px;
padding-right: 2px;
/*margin: 0;*/

}


/*------------- Top Menu ---------------*/

And, of course, still more styling to get it to look like you want.

agentm
Mar 13th, 2010, 02:13 AM
thanks! I will try this and let know if there are more problems