<Div> dynamic resizing or alternative

Cinder

New Member
Hi guys,

I have a menu on my site that uses an explorer-style file tree view with collapsible lists to show sub-trees.

The problem I'm having is that the frame that I built around this (divs with 100% height) dont resize its background images to match the extension when all the sub-trees are open.

See it in action on my site, www.arcticknives.com, and click on all the "+" signs in the menu to break the frame.

How can I fix this?

Also since I'm among a bunch of good web designers here, do you come to think of any suggestions for improving my site just off the bat?

Thanks a bunch!
 

chrishirst

Well-Known Member
Staff member
lose the fixed height (use min-height instead) and clear the floats so the element can/will expand.
 

Cinder

New Member
If I set the parent divs' (the menu box container) height using min-height, the frame sides disappear completely right away. I assume thats because they rely on their parent which doesn't have a specified height using min-height?

The whole box is built by 5 parts,

top
left border
content
right border
bottom

if that makes any difference.

Which floats are you referring to in your previous post? The left and right borders clear their respective sides, and the top and bottom parts of the box clears both sides.

I'm sorry to be a bit slow about these things, I learn as I go.
Your help is much appreciated!
 

LeeHarris

New Member
Use this

Hi there,

I would go about it in a slightly different way.

HTML:

Code:
<div class="sidebar1">
  <div id="menuTop"></div>
  <div class="clear"></div>
  <div id="menuCenter">
  <ul id="navtree" class="filetree">
     <li><a href="javascript:loadContent('#content', '_pages/home.htm');">Home</a></li>
     <li><span>New Knives</span>
	  <ul>
		<li><a href="javascript:loadContent('#content', '_pages/hybridwave.htm');">Hybrid Wave</a></li>
		<li><a href="javascript:loadContent('#content', '_pages/scarletclover.htm');">Scarlet Clover</a></li>
	 </ul>
	 </li>
	 <li><span>For Sale</span>
	 <ul>
	 <li><a href="javascript:loadContent('#content', '_pages/hybridwave.htm');">Hybrid Wave</a></li>
	 <li><a href="javascript:loadContent('#content', '_pages/mayan.htm');">Mayan</a></li>
	 </ul>
	 </li>
	 <li><a href="javascript:loadContent('#content', '_pages/gallery.htm');">Gallery</a></li>
	 <li><span>Events</span>
	 <ul>
	 <li><a href="javascript:loadContent('#content', '_pages/ludvika2012.htm');">Ludvika 2012</a></li>
	 </ul>
	 <li><a href="javascript:loadContent('#content', '_pages/about.htm');">About Me</a></li> 
	 <li><a href="javascript:loadContent('#content', '_pages/links.htm');">Links</a>
	 </li>
	 <li><a href="javascript:loadContent('#content', '_pages/contact.htm');">Contact</a></li>
	</ul>

<div class="clear"></div>
    
</div> <!-- end #menuCenter -->

<div id="menuBottom"></div>

</div> <!-- end .sidebar1 -->

CSS

Code:
.clear {
clear: both;
}

.sidebar1 {
	float: left;
	width: 214px;
	height: auto;
	padding-bottom: 10px;
	font-size: 0.85em;
	padding-top: 0px;
	padding-left: 0px;
	margin-left:15px;
	margin-top: 30px;
}

#menuTop {
	float: left;
	width:214px;
	padding:0px;
	height:55px;
	background-image:url(_images/layout/menuTop.png);
	background-repeat:no-repeat;
	clear:both;	
}

#menuBottom {
	width:214px;
	padding:0px;
	height:30px;
	background-image:url(_images/layout/menuBottom.png);
	background-repeat:no-repeat;
	clear:both;	
}
#menuCenter {
	background: url(_images/menubg.jpg) repeat-y;
	width:214px;
	padding-left: 0px;
	padding-top: 10px;
	margin-left: 0px;
}
ul#navtree {
margin: 0px; padding: 0px 0px 20px 40px;
}

That should sort your problem out :)

You will need this image for #menuCenter - http://www.lee-harris.co.uk/menubg.jpg
 

Cinder

New Member
Thanks a lot LeeHarris, I will give it a try tomorrow (its almost 2AM here, better not touch anything right now ;) )

I see that you changed the approach to top - center - bottom, but what I don't really follow is the function of the clear class and the divs of that class that you put added?
 

Phreaddee

Super Moderator
Staff member
without going through all that lee went through,
a "clear" generally clears the float.

why tho are your links.
HTML:
<li><a href="javascript:loadContent('#content', '_pages/hybridwave.htm');">Hybrid Wave</a></li>

???
 

Cinder

New Member
without going through all that lee went through,
a "clear" generally clears the float.

why tho are your links.
HTML:
<li><a href="javascript:loadContent('#content', '_pages/hybridwave.htm');">Hybrid Wave</a></li>

???

I do realize that "clear" clears the float, but I dont understand what effect it will have in this case, so a small explanation for my own understanding would be much appreciated :)

My links are <li> because they are part of the filetree script which uses unordered lists, and the loadContent is a script for loading the links in #content div. It works quite well, the only problem I have with it is that you cannot hit "back" in the browser and step back within my site.. don't know if that can be fixed somehow.
 

LeeHarris

New Member
I do realize that "clear" clears the float, but I dont understand what effect it will have in this case, so a small explanation for my own understanding would be much appreciated :)

My links are <li> because they are part of the filetree script which uses unordered lists, and the loadContent is a script for loading the links in #content div. It works quite well, the only problem I have with it is that you cannot hit "back" in the browser and step back within my site.. don't know if that can be fixed somehow.

The Clear div ensures that #menuCenter ends after its contents - the ul. Its still a bit messy, but it is the quickest way to fix the problem :)
 

Phreaddee

Super Moderator
Staff member
I've no issue with links being wrapped in a li.
it is slightly concerning that they NEED javascript to function.
that doesnt sound very accessible.
 

Cinder

New Member
As I said before, I learn as I go with my site and I dont really know what is common practice for many of the things I do. I'm all ears for better solutions to the functions I have on the site.

I implemented the code you supplied Lee, it works like a charm and is live online now :) I also used it on all the other boxes on the site, like the links page, its so nice that the boxes will automatically resize now that I add content :D

What do you guys think, since you have a lot more experience with web design and know of more than one way of doing things, is there anything you think I should change, add or remove to make the site look nice and/or function better?

Phreaddee, I googled ways to load content into a target div and the only way I found to do it without php and server-side stuff was to use javascript. More than likely there is a better way that I dont know of.
 

ronaldroe

Super Moderator
Staff member
Phreaddee, I googled ways to load content into a target div and the only way I found to do it without php and server-side stuff was to use javascript. More than likely there is a better way that I dont know of.

If it's just a static site, have different pages instead of loading content from the same page. Use PHP includes for standard elements like the nav, header and footer. That way, you change it in one place and it changes across all of them.

Your site should always work with or without JS. Think about what would happen if a user has JS turned off, or their browser fails to retrieve it from the server for whatever reason. There would be zero navigation. Also, search engines can't index what they can't see, and since your links, to them go nowhere, only the main page will get indexed.
 

Cinder

New Member
If it's just a static site, have different pages instead of loading content from the same page. Use PHP includes for standard elements like the nav, header and footer. That way, you change it in one place and it changes across all of them.

Your site should always work with or without JS. Think about what would happen if a user has JS turned off, or their browser fails to retrieve it from the server for whatever reason. There would be zero navigation. Also, search engines can't index what they can't see, and since your links, to them go nowhere, only the main page will get indexed.

Hmm, I did some reading on php include and I understand it would work, but my first approach was to not have the entire site reload as I click a link, thats the main reason for using the JS content loader script. I'm guessing that's not the way to go?

I dont know how to write any php, is there a steep learning curve for it, since I need to have all the parts of the site as .php files (menu, header etc..)?

I wonder how much work it would be to convert my site to use php includes, feels like a major overhaul?
 

Cinder

New Member
I've been testing the php include a bit and it seems to work all right for the most part, one thing I'm having issues with is the treeview script in the menu bar. How do I include the script sources etc to make it work when using php include? Is there something to keep in mind with php when doing this sort of thing?
 

Cinder

New Member
Is it not adviseable to php include the <head> tag of my pages?
It seems that the treeview script that I'm using does not work if I put the source tags for the .css and .js files into my head.php, as soon as I move them back to index.php the treeview works again? Is there some kind of parsing order that I need to take into consideration?

The slideshow on my front page works fine even though the source tags are in the head.php?

Seems like the treeview.js source tag is extremely sensitive, and needs to be put as the last line in the <head> tag..?

I have no idea what to make of this haha :D
 
Last edited:

chrishirst

Well-Known Member
Staff member
Seems like the treeview.js source tag is extremely sensitive, and needs to be put as the last line in the <head> tag..?
More likely it needs to be after the CSS declarations and rules have been loaded.
 

Cinder

New Member
Yes it seems like it needs to be the last one declared for it to work.

One thing that is bumming me out a bit is that when the page reloads after you click a link, the treeview collapses again so you have to click the '+' again to see the subtree. I'm guessing there is no easy way to have the script remember which state it was in earlier since the site actually loads a completely different page every time you click a link. But I suppose its a good trade for having google finding all my pages in their crawls instead :p
 

Cinder

New Member
Can you guys recommend a php guestbook that I can contain within a div on the site?
I tried to make one called "BellaBook" work, but it breaks out of the div and takes up the whole browser when I click "sign" or "view guestbook".
 

chrishirst

Well-Known Member
Staff member
Can you guys recommend a php guestbook
No! No and absolutely NO!!.

"guestbooks" are simply spam magnets and belong in the early to mid 1990's (which is exactly where they should stay) along with rotating 'e' gifs for email links and "best viewed in Internet Explorer at 800x600" disclaimers.
 

chrishirst

Well-Known Member
Staff member
I'm guessing there is no easy way to have the script remember which state it was in earlier
Set a cookie with the state when it is clicked, then read it back on page load.
 

Cinder

New Member
No! No and absolutely NO!!.

"guestbooks" are simply spam magnets and belong in the early to mid 1990's (which is exactly where they should stay) along with rotating 'e' gifs for email links and "best viewed in Internet Explorer at 800x600" disclaimers.

Haha well that was a definitive answer :D They're really frowned upon that badly? I thought I needed something to give the site some interaction and personal flair, but maybe I'll skip the guestbook then :p

Set a cookie with the state when it is clicked, then read it back on page load.

Do you know of a good tutorial for this? I googled using cookies but there seems to be many different kinds. The treeview script that I have is javascript based, so am I supposed to use a cookie in javascript here, or am I getting this wrong?
 
Top