CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

[solved] css trouble - making div appear under dynamic menu?

https://forum.cmsmadesimple.org/viewtopic.php?t=60800

Page 1 of 1

[solved] css trouble - making div appear under dynamic menu?

Posted: Sun Apr 22, 2012 2:36 pm
by ladyr0gue
Hi! at present I have a div to wrap my Left column

Code: Select all

#divLeftColWrapper{float: left; }
and in it appears the div with the menu in it

Code: Select all

#navcontainer { width:200px; float: left; margin: 0 0 60px 40px; padding: 0; display: inline; }
and below that a content div

Code: Select all

#divLeftCol {margin: 280px 0 0 40px; padding: 15px 0 0 0; width:200px; border: none;}
As you can see I have to either specify the height of the #navcontainer or as I am doing at the moment specify a large margin-top on #divLeftCol - or the #divLeftCol appears behind the menu div #navcontainer instead of below it. I would ideally like to specify min-height: 100% or height: 100% on #navcontainer but it doesn't seem to work. Have also tried float:left; clear:left on #divLeftCol.

So how do I make #divLeftCol always appear just below #navcontainer, no matter how big the menu grows?

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 3:41 pm
by atdesign
Try removing:
float: left; and display: inline;
from your #navcontainer css

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 5:10 pm
by ladyr0gue
atdesign wrote:Try removing:
float: left; and display: inline;
from your #navcontainer css
eep - thought it had done it but still doesn't work if I remove the margin... :/

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 5:41 pm
by Dr.CSS
Float all divs left?...

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 6:02 pm
by ladyr0gue
Dr.CSS wrote:Float all divs left?...
I tried that - need to add clear: left to the bottom div too (or specify width of #divLeftColWrapper as 240px)- but still need to specify menu height or margin height of #divLeftCol for it to appear below as they seem to be on top of one another! I have mucked it up somewhere haven't I...
here's the way the divs are nested

Code: Select all

<div id="divLeftColWrapper">
<div id="navcontainer">{menu template='nav-menu'}</div>
<div id="divLeftCol">
<div class="news">{news}</div>
{content}
</div> </div>
here's what I'm trying to do wit the css
css nav-menu

Code: Select all

#navcontainer { width:200px; min-height: 100%;margin: 0 0 60px 40px; padding: 0;float:left;}
css main template

Code: Select all

#divLeftColWrapper{float: left; }
#divLeftCol {margin: 0 0 0 40px; padding: 15px 0 0 0; width:200px; border: none; float:left; clear:left;}
but for some reason it can't tell what 100% of the menu div height is.

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 8:08 pm
by Dr.CSS
Sorry, I should have told you first off that it really helps to be able to see the page having trouble as there may be something else making it not work...

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 8:51 pm
by ladyr0gue
Dr.CSS wrote:Sorry, I should have told you first off that it really helps to be able to see the page having trouble as there may be something else making it not work...
ah you're too good. did you mean template or just whole page? sorry the project isn't live yet so can't send link but but my view source is as follows

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="canonical" href="http://localhost/cmsms/welcome.html" />
<title>example</title>

<base href="http://localhost/cmsms/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-11 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_562dc4221f2af867c580d1e1f9550839.css" media="all"/>
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_909f07ce1704465e5cbbf7152b0f4422.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_6c3a7cea4db916cb77c06fe10ff1ecb4.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="http://localhost/cmsms/tmp/cache/stylesheet_622e4d76be73abc695269fc8bf954923.css" media="screen"/>

<link rel="start" title="Home" href="http://localhost/cmsms/" />
<link rel="prev" title="Home" href="http://localhost/cmsms/" />
<link rel="next" title="About Us" href="http://localhost/cmsms/about-us.html" />

<!--[if IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<__script__ type="text/javascript">
var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-example']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</__script>
</head></__body>
<div id="divWrapper"><a name="top"></a>
<div id="divHeader"><div id="clickHome"> <a href="http://localhost/cmsms/" title="Home" ></a></div> 

  
<ul>

                    <li class="menuactive menuparent parent"><a class="menuactive menuparent parent" href="http://localhost/cmsms/"><span>Home</span></a>


<ul>

        <li class="menuactive"><a class="menuactive" href="http://localhost/cmsms/welcome.html"><span>Welcome</span></a>


</li></ul>
</li>

<li class="parent"><a class="parent" href="http://localhost/cmsms/about-us.html"><span>About Us</span></a>


<ul>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li></ul>
</li>

<li><a href="http://localhost/cmsms/news.html"><span>News</span></a>


</li>

<li><a href="http://localhost/cmsms/contact.html"><span>Contact</span></a>


</li>
</ul>
</div>
<div id="divInnerContainer">
<div id="divLeftColWrapper"><div id="navcontainer">
 


<ul>

<li class="parent"><a class="parent" href="http://localhost/cmsms/services.html"><span>Services</span></a>


<ul>

<li class="parent"><a class="parent" href="http://localhost/cmsms/example.html"><span>example</span></a>


<ul>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li></ul>
</li>

<li class="parent"><a class="parent" href="http://localhost/cmsms/example.html"><span>example</span></a>

<ul>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li></ul>
</li>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li>

<li class="parent"><a class="parent" href="http://localhost/cmsms/example.html"><span>example</span></a>


<ul>

<li><a href="http://localhost/cmsms/services/example.html"><span>example</span></a>


</li></ul>
</li>

<li><a href="http://localhost/cmsms/services/example.html"><span>example</span></a>


</li>

<li><a href="http://localhost/cmsms/example.html"><span>example</span></a>


</li>

<li><a href="http://localhost/cmsms/services/example.html"><span>example</span></a>


</li></ul></li>
</ul>

</div><div id="divLeftCol">
<div class="news"><!-- Displaying News Module -->
  <!-- Start News Display Template -->

<a href="http://localhost/cmsms/news.html"><h2 class="h21">Latest News</h2></a>
<ul class="list1">
<li class="firstnewscat">
	<a href="http://localhost/cmsms/index.php?mact=News,cntnt01,default,0&cntnt01number=1&cntnt01detailpage=66&cntnt01category_id=1&cntnt01returnid=66">example</a></li>
</ul>



<div class="NewsSummary">

	<div class="NewsSummaryPostdate">
		Apr 21, 2012
	</div>

<div class="NewsSummaryLink">
<a href="http://localhost/cmsms/news/1/66/example.html" title="example">example</a>
</div>

<div class="NewsSummaryCategory">
	Category: example
</div>

	<div class="NewsSummaryAuthor">
		Posted by: example
	</div>

	<div class="NewsSummarySummary">
		This is example text.
	</div>

	<div class="NewsSummaryMorelink">
		[<a href="http://localhost/cmsms/news/1/66/example.html">More</a>]
	</div>


  
</div>
<!-- End News Display Template -->

</div>

</div> </div>          
<div id="divMidCol"><h1>Header</h1>
<p></p>
<!-- Add code here that should appear in the content block of all new pages --></div>
<div id="divRightCol"><div id="rColTitle"></div>
<img src="http://localhost/cmsms/uploads/images/example.jpg" name="Image1" alt="example" /><div class="rightColContent">
</div> <div id="address">
<div id="socA">
<a class="fb" title="Find us on Facebook" href="http://www.facebook.com/pages/example" target="_blank"></a><a class="tw" title="Follow us on Twitter" href="http://twitter.com/example" target="_blank"></a></div></div></div>
<div id="divFooter">
</div></div></div>
<__body>
</__html>
and the template is here

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
{if isset($canonical)}
<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}
<link rel="canonical" href="{$content_obj->GetURL()}" />
{/if}
<title>{title}</title>
{metadata}
{cms_stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{literal}
<!--[if IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->{/literal}
{global_content name='Google Analytics'}
</head></__body>
<div id="divWrapper"><a name="top"></a>
<div id="divHeader"><div id="clickHome">{cms_selflink dir="start" text=""}</div>{menu template='header-menu'}</div>
<div id="divInnerContainer">
<div id="divLeftColWrapper"><div id="navcontainer">
{menu template='nav-menu'}</div><div id="divLeftCol">
<div class="news">{if $page_alias != 'news'}
{news number="1" detailpage="news"}
{/if}
</div>
{content block='Left content block'}
</div> </div>          
<div id="divMidCol">{if isset($pagetitle)}{$pagetitle}{/if}
{content}{content block='main module' label='This box is for module calls only, no other text etc.' oneline='true'}</div>
<div id="divRightCol"><div id="rColTitle">{content block='Right Content Title' label='(Right content header - Only used on contact page at present)' oneline='true'}</div>{content block='Image1 alt text' oneline='true' assign='alt'}
{assign var='alt' value=$alt|strip_tags|cms_escape}{* in case users enter wonky stuff *}
{content_image block='Image1' dir='images' alt=$alt}<div class="rightColContent">
{content block='Right content block'}</div>{content block='modules' label='This box is for module calls only, no other text etc' oneline='true'} {global_content name='contact'}</div>
<div id="divFooter">
</div></div></div>
<__body>
</__html>
thanks for taking the time to look :)

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 9:47 pm
by mcDavid
The answer is not in here, so there's definitely something else going on. It's very hard to tackle these kind of problems without using webbrowser development tools so a live example would really help.

Re: css trouble - making div appear underneath dynamic menu?

Posted: Sun Apr 22, 2012 11:19 pm
by ladyr0gue
mcDavid wrote:The answer is not in here, so there's definitely something else going on. It's very hard to tackle these kind of problems without using webbrowser development tools so a live example would really help.
sure, thanks anyway - I will carry on thinking and if I still haven't figured it out will post a link when its live ;) Its not a major issue as I can make the user able to modify pages and just edit the margin by hand when I add pages, but it's a niggle nonetheless :)

Re: css trouble - making div appear underneath dynamic menu?

Posted: Tue May 01, 2012 9:46 am
by ladyr0gue
Hello my dears, just to say that I haven't yet found an answer to my problem - but I have just uploaded the site onto a folder on the live server so if you wouldn't mind having a look -

The div in question is divLeftCol, which contains div.news and sometimes images and it sits behind or on top of, rather than below the dynamic menu in the left column. As you can see I have had to give it's container divLeftCol a ridiculous top margin of 277px and should the user add any pages this will need to be edited manually or the menu will cover it.

it's not on the front page but on all of the following pages
edit: deleted url

thanks :)

Re: css trouble - making div appear underneath dynamic menu?

Posted: Tue May 01, 2012 4:31 pm
by Dr.CSS
At the bottom of the nav div add <div style='clear:both;'></div>...

When you use 'position' on an element it may pull it above the layout, in your case it is the UL, when this happens the container it is in, #navcontainer, contracts till it hits something to hold it's shape and anything below it will slide up/slip under it...

Think of each 'box' as being stretchy like a rubber band that holds all of it's content in the 'box', when you float or position anything in it it's like you pull that item out of the box and hold it in place above the 'box' and the 'box' shrinks/contracts letting anything below it to move up, if you put a clear div at the bottom of the 'box' under the floated or positioned items it will hold it's shape...

Re: css trouble - making div appear underneath dynamic menu?

Posted: Tue May 01, 2012 4:52 pm
by ladyr0gue
I got all excited there and tried it - but for some strange reason its still not having it. tried putting it in the menu template, in the nav container div, and below it. both with "double quotes" and without. as you can see here, with only a 10px margin it's still hiding!
edit: deleted url

have I applied too much positioning in the menu css? I'm getting really stuck! help me please Dr....

Re: css trouble - making div appear underneath dynamic menu?

Posted: Tue May 01, 2012 5:35 pm
by Dr.CSS
Don't float the #navcontainer li and remove the position from the first #navcontainer ul ul under it...

Re: css trouble - making div appear underneath dynamic menu?

Posted: Tue May 01, 2012 6:50 pm
by ladyr0gue
Dr.CSS wrote:Don't float the #navcontainer li and remove the position from the first #navcontainer ul ul under it...
You, Sir, are my personal hero. Thank you once again :-*

Re: css trouble - making div appear underneath dynamic menu?

Posted: Tue May 01, 2012 7:25 pm
by Dr.CSS
Just a humble css Dr. making my rounds...
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited