Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with my Layout

    Okay well I made a website for my clan and I have a question about my layout.

    heres is the website so you can view the coding:
    http://www.clanwop.com

    Okay heres my dilemma,
    I want my div.navfooter to stretch with my content box as I add stuff to it. Whenever I add stuff to my content box I have to manually edit the height for div.navfooter every time my content box gets longer so my content box does not overlap my div.endbar.
    How can I make it so my div.navfooter stretches with my box content so I dont have to keep manually editing height??
    Last edited by elementis0; 06-27-2007 at 07:45 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by elementis0 View Post
    I want my div.navfooter to stretch with my content box as I add stuff to it. Whenever I add stuff to my content box I have to manually edit the height for div.navfooter every time my content box gets longer so my content box does not overlap my div.endbar.
    How can I make it so my div.navfooter stretches with my box content so I dont have to keep manually editing height??
    (1)
    Remove .navfooter

    (2)
    Add an extra div around .content and .nav then put in a vertically repeating background image in that div, namely the one you were using for .navfooter

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well I tried that, but it didnt show the nav bg at all and just showed the endbar which made my content greatly overlap it.

    Maybe I did it wrong? heres the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Warriors of Pinacho::Home</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <style type="text/css">
    
    div.navfooter
    {
    background-image:url('http://www.freewebs.com/clanwop/NavBOTTOM.png');
    background-repeat:repeat-y;
    }
    
    
    .cohome
    {
    position:relative;
    right:-210px;
    top:28px;
    }
    
    p
    {
    padding:1em;
    margin:0;
    color:white;
    }
    
    
    
    h1
    {
    color:white;
    margin:0;
    }
    
    ol
    {
    color:white;
    }
    
    </style>
    </head>
    
    
    
    <body onLoad="MM_preloadImages(
    'http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverHOME.png',
    'http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverMEMBERS.png',
    'http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverEVENTS.png',
    'http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverREQUIREMENTS.png',
    'http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverRULES.png',
    'http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverGALLERY.png',
    'http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverFORUM.png'
    )">
    <!--Javascript Rollover crap is in body tag-->
    
    
    
    
    
    
    
    <div class="container">
    	<div class="header">
    	</div>
    
    <div class="navfooter">
    	<div class="content">
    		<div class="cotop">
    <h2 class="cohome">Welcome!</h2>
    		</div>
    		<div class="comiddle">
    
    
    <p>We are the warriors of Pinacho we started on June 17th 2007 and we are a WarRock dedicated clan. Our goal is to 
    
    provide a close community of WarRock gamers to play together and help each 
    
    other progress in their WarRock experience. So basically we just mess 
    
    around. we are a good and fun clan, full of non-paying war rock members 
    
    looking for a good time. We will war from time to time, but we always 
    
    remember this is just a game, so relax and be a member of this close 
    
    community.
    
    </p><h3 style="color: white;"><center><b><u>How to 
    
    Join:</u></b></center></h3>
    
    <ol>
    <li>Click on the forums link in the side navigation</li>
    <li>Register to the forums</li>
    <li>Click on the Join clan WOP forum</li>
    <li>Click on the Registration Form thread stickied on the forum</li>
    
    <li>Fill out the registration form and check back later to the thread to see 
    
    if you have been accepted or not.</li>
    </ol>
    <p>If you have any problems registering or have any questions please contact 
    
    one of the leaders via x-fire or through the forums</p>
    		</div>
    		<div class="cobottom">
    		</div>
    	</div>
    <!--Start Navigation -->
    	<div class="nav">
    		<div class="home">
    	<a href="http://www.clanwop.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WOProllHome','','http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverHOME.png',1)"><img src="http://www.freewebs.com/clanwop/Homebtn.png" name="WOProllHome" border="0"></a>
    		</div>
    		<div class="members">
    <a href="http://www.freewebs.com/clanwop/members.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WOProllMembers','','http://www.freewebs.com/clanwop/Rollovers%26buttons/WoprolloverMEMBERS.png',1)"><img src="http://www.freewebs.com/clanwop/membersbtn.png" name="WOProllMembers" border="0"></a>
    	        </div>		
    		<div class="events">
    <a href="http://www.freewebs.com/clanwop/events.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WOProllevents','','http://www.freewebs.com/clanwop/Rollovers%26buttons/Woprolloverevents.png',1)"><img src="http://www.freewebs.com/clanwop/eventsbtn.png" name="WOProllevents" border="0"></a>
    		</div>
    		<div class="requirements">
    	<a href="http://www.freewebs.com/clanwop/requirements.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WOProllrequirements','','http://www.freewebs.com/clanwop/Rollovers%26buttons/Woprolloverrequirements.png',1)"><img src="http://www.freewebs.com/clanwop/requirementsbtn.png" name="WOProllrequirements" border="0"></a>
    		</div>
    		<div class="rules">
    	<a href="http://www.freewebs.com/clanwop/rules.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WOProllrules','','http://www.freewebs.com/clanwop/Rollovers%26buttons/Woprolloverrules.png',1)"><img src="http://www.freewebs.com/clanwop/rulesbtn.png" name="WOProllrules" border="0"></a>
    		</div>
    		<div class="gallery">
    		<a href="http://www.freewebs.com/clanwop/gallery.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WOProllgallery','','http://www.freewebs.com/clanwop/Rollovers%26buttons/Woprollovergallery.png',1)"><img src="http://www.freewebs.com/clanwop/gallerybtn.png" name="WOProllgallery" border="0"></a>
    		</div>
    		<div class="forum">
    		<a href="http://z7.invisionfree.com/warriorsofpinacho/index.php?act=idx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WOProllforum','','http://www.freewebs.com/clanwop/Rollovers%26buttons/Woprolloverforum.png',1)"><img src="http://www.freewebs.com/clanwop/forumbtn.png" name="WOProllforum" border="0"></a>
    </div>
    </div>
    		
    <!-- End Navigation-->
    	<div class="navfooter">
    	</div>
    	<div class="endbar">
    </div>
    </body>
    </html>

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by elementis0 View Post
    Well I tried that, but it didnt show the nav bg at all and just showed the endbar which made my content greatly overlap it.
    Yeah, you needed to clear the floats. Try this:
    Code:
    <div class="container">
    	<div class="header">[...]</div>
    	<div id="inner-container">
    		<div class="content">[...]</div>
    		<div class="nav">[...]</div>
    	</div>
    	<div class="endbar">[...]</div>
    </div>
    together with this:
    Code:
    #inner-container {
    	background-image: url('http://www.freewebs.com/clanwop/NavBOTTOM.png');
    	background-repeat: repeat-y;
    	overflow: hidden;
    	_zoom: 1; /* emulate overflow:hidden in IE6 */
    }
    As a side note you need to take a look at the page in IE6. It is broken when viewed in that browser.

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Dood..... I love you

  • #6
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    if you want my opinion, i would use a list for the navigation

    Code:
    <div class="nav">
    <ul id="vertmenu">
     <li id="a"><a href="#"></a></li>
     <li id="b"><a href="#"></a></li>
     <li id="c"><a href="#"></a></li>
    </ul>
    </div>
    i am using an id vertmenu but you could use anything else

    Code:
    #nav { margin:0;padding:0;border:0 }
    #vertmenu { width:250px;margin:0;padding:0;border:0;list-style-type:none; }
    #vertmenu li { width:250px;height:50px;padding:0;margin:0;border:0 }
    #vertmenu #a { background:url(http://www.freewebs.com/clanwop/membersbtn.png) }
    #vertmenu #b { background:url(http://www.freewebs.com/clanwop/eventsbtn.png) }
    #vertmenu #c { background:url(http://www.freewebs.com/clanwop/requirementsbtn.png) }
    #vertmenu a { padding:0;margin:0;border:0 }
    </style>
    there is a small margin between each LI element on IE6, maybe more experienced coders could point this out

    for your rollover you might want to check this out:
    http://www.elated.com/articles/css-rollover-buttons/

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the tip, ill prolly tweak the coding when i get the motivation


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •