...

View Full Version : Help with my Layout



elementis0
06-26-2007, 08:07 PM
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??

koyama
06-27-2007, 10:21 PM
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

elementis0
06-28-2007, 05:14 AM
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:



<!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>

koyama
07-01-2007, 06:32 PM
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:


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


#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.

elementis0
07-02-2007, 07:15 AM
Dood..... I love you

vexen
07-02-2007, 11:22 PM
if you want my opinion, i would use a list for the navigation



<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



#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/

elementis0
07-03-2007, 06:45 AM
Thanks for the tip, ill prolly tweak the coding when i get the motivation



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum