<Div> dynamic resizing or alternative

Discussion in 'Web Design' started by Cinder, Jul 21, 2012.

to remove all ads.
  1. Cinder

    Cinder New Member

    Messages:
    11
    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!
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    lose the fixed height (use min-height instead) and clear the floats so the element can/will expand.
     
  3. Cinder

    Cinder New Member

    Messages:
    11
    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!
     
  4. LeeHarris

    LeeHarris New Member

    Messages:
    8
    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
     
  5. Cinder

    Cinder New Member

    Messages:
    11
    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?
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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>
    ???
     
  7. Cinder

    Cinder New Member

    Messages:
    11
    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.
     
  8. LeeHarris

    LeeHarris New Member

    Messages:
    8
    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 :)
     
  9. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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.
     
  10. Cinder

    Cinder New Member

    Messages:
    11
    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.
     
  11. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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.
     
  12. Cinder

    Cinder New Member

    Messages:
    11
    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?
     
  13. Cinder

    Cinder New Member

    Messages:
    11
    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?
     
  14. Cinder

    Cinder New Member

    Messages:
    11
    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: Jul 22, 2012
  15. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    More likely it needs to be after the CSS declarations and rules have been loaded.
     
  16. Cinder

    Cinder New Member

    Messages:
    11
    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
     
  17. Cinder

    Cinder New Member

    Messages:
    11
    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".
     
  18. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    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.
     
  19. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    Set a cookie with the state when it is clicked, then read it back on page load.
     
  20. Cinder

    Cinder New Member

    Messages:
    11
    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

    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?
     

Share This Page