Member Avatar for ggeoff

Hi

I am trying to locate a menu over my masthead, which consists of a full width image. Towards the left there is the page name and to the right of that is the main navigation menu. There is an outerwrapper div and then the masthead div and below that the menu div. I have positioned the menu absolutely as otherwise there is a "hole" left in the page as the div still remains in the document flow. The problem is that although this works, as soon as the browser is altered in width the menu stays tied to the portal frame when I would have thought it would be absolutely positioned to the masterhead. I can't understand why the menu isn't positioned relative to the outerwrapper div, as that is what it is inside.

<div id="outerWrapper">
  <div id="header">
  <span style="position:relative; top: 30px; left: 190px;">test page&nbsp;</span>
  </div>
  <div id="pagemenu">
  <span style="position:absolute; top: 30px; left:570px; background-color: fuchsia;">
  <?php include("mainmenu.txt");?></span>
   </div>

This has stretched my patience to the utmost. Some expert guidance would help me retain my sanity!!

Thanks Geoff

  • 3 Contributors
  • 4 Replies
  • 151 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ggeoff
Member Avatar for harrierdh

Absolute positioning is just that. You can not put it in a container. It is always positioned relative to the top left corner of your browser window.

You could try relative positioning. It would be better to work with floating though. In the long run it will save your hair.

Member Avatar for ggeoff

Absolute positioning is just that. You can not put it in a container. It is always positioned relative to the top left corner of your browser window.

You could try relative positioning. It would be better to work with floating though. In the long run it will save your hair.

Thanks, but you are incorrect. The w3schools.com site states: "Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:"

My question could be rephrased: what is the parent element to my menu div? I thought it is the outerwrapper div.

Member Avatar for ko ko

The absolute position element was not DIV, it was span tag inside 'pagemenu' DIV.

<span style="position:absolute; top: 30px; left:570px; background-color: fuchsia;">
<?php include("mainmenu.txt");?></span>

So, it can be related to it's parent DIV 'pagemenu'. If DIV('pagemenu') has the property,(position: relative), the span stay 30px far from the top of DIV('pagemenu'). Try with:

<div id="pagemenu" style="position:relative">
<span style="position:absolute; top: 30px; left:570px; background-color: fuchsia;">
<?php include("mainmenu.txt");?></span>
</div>

Good luck..

Member Avatar for ggeoff

The absolute position element was not DIV, it was span tag inside 'pagemenu' DIV.

<span style="position:absolute; top: 30px; left:570px; background-color: fuchsia;">
<?php include("mainmenu.txt");?></span>

So, it can be related to it's parent DIV 'pagemenu'. If DIV('pagemenu') has the property,(position: relative), the span stay 30px far from the top of DIV('pagemenu'). Try with:

<div id="pagemenu" style="position:relative">
<span style="position:absolute; top: 30px; left:570px; background-color: fuchsia;">


<?php include("mainmenu.txt");?></span>
</div>

Good luck..

Thanks Zero13! Yes that locates the menu. All I needed to do next (after all sorts of tries) was to move the pagemenu div inside the header div and adjust the CSS:

<div id="outerWrapper">
  <div id="header">
  <span style="position:relative; top: 30px; left: 190px;">test page&nbsp;</span>
		<div id="pagemenu"style="position:relative; top:-75px">
		<span style="position:absolute; top: 30px; left:570px; background-color: fuchsia;">
		<?php include("mainmenu.txt");?></span>
		</div>
   </div
</div>

You certainly saved my sanity Xero13! Thanks once again :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.