Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

div within another div positioning

Status
Not open for further replies.
rrmcguire

rrmcguire

Programmer
Oct 13, 2010
304
US
Hello,

My page at
I have a spry menu within my navigation div but also want to put another navigation bar or series of links above the spry menu but with what I currently have setup the navigation bar at the top which is a div within an ap div moves when the page is adjusted in size any help would be appreciated: (attached is my script)

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

#apDiv2 {
position:absolute;
width:666px;
height:30px;
z-index:3;
left: 452px;
top: 16px;
}
-->
</style>
</head>
<body bgcolor="#999966" background="images/test background.png">
<div id="navigation">

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
<ul>
<li><a class="MenuBarItemHover" href="#">Flatbed</a></li>
<li><a class="MenuBarItemHover" href="#">Van</a></li>
<li><a class="MenuBarItemHover" href="#">Heavy Haul</a></li>
<li><a class="MenuBarItemHover" href="#">Global</a></li>
<li><a class="MenuBarItemHover" href="#">LTL</a></li>
<li><a class="MenuBarItemHover" href="#">Cross Border</a></li>
</ul>
<li><a href="#">Customers</a>
</li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li></ul>
<div id="apDiv2">
<div id="topmenu">testing for top menu navigation</div>
</div>
</div navigation>
<div id="banner">
<div id="bannertext">
<p>&nbsp;</p>
<p>A FRESH NEW LOOK AT TRANSPORTATION</p>
</div bannertext>
<div id="bannertext2"> &quot;No Bad Deals&quot;</div bannertext2>
<div id="bannertext3">
<h2 class="bold">Welcome to Our Website </h2>
<p>With over two decades of service, Meadow Lark has offered innovative solutions to any transportation need with on-demand operation services and advanced technology. Customers, Contractors, and agents alike benefit from association with our company. Family owned and operated, Meadow Lark is the premier choice for your shipping requirements.</p>
<p>&nbsp;</p>
</div bannertext3>
</div banner>
<div id="content">
<div id="contentcompany">About Our Company
<h5>Mission Statement</h5>

<div id="missionstatement">
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare ourselves to any other business, only to how WE were yesterday.</li>
<li>Our Word is our bond.</li>
</ul>
</div mission>
</div contentcompany>

</div content>
<div id="footer">Content for id "footer" Goes Here</div footer>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
Sort by date Sort by votes
Do you mind using a little puncuation (maybe a period now and then)? It will really clarify your question.

tip: Putting borders on the divs really helps put things in perspective when developing.

Code: 
div {
   border: 1px solid #000000;
}

-Geates



"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon
 
Upvote 0 Downvote
You seriously need to re-think your approach. Your making things too complex.

Use the natural flow of the page to help you, instead of fighting with it, and having to wrongfully use positioning and strange padding.

If you wanty something above something else, then you put it above it in the html.

Code: 
<div id="navigation">
<div id="div1"></div>
<div div id="div2"></div>
</div>

Divs will naturally stack on top of each other without any css applied.

Since your Navigation div has a specified width, giving your other 2 divs specified widths will help you with the positioning.

CSS: 
#navigation{
width:900px;
height:100px;
margin:auto;
}

#div1{
width:70px;
}

#div2{
width:30px;
}


With that Div2 will be at the bottom of the navigation div, and div one will sit on top of div2.

no padding, no floating, no absolute positioning.


NOTE: Unless absolutely necessary, positioning (absolute, or relative) should be avoided.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
My one navigation menu is a spry menu which sits at the bottom of the navigation div within it, what I'm trying to do is create either another spry menu which is aligned at the top of the navigation div within it as well, or a div which I can align a series of links inside of it.....also is it possible to have a background with text on it then have links to that text
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
546
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
157
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
105
tyutghf
tyutghf
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
148
ggriffit
ggriffit
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
412
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top