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 6 of 6

Thread: help

  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help

    I am making a website template in photoshop and I would like the content section to be expandable. I want it so when I put content on that section it will expand w/o messing up all the links and images on the side. How can I go about doing this? (I am usuing dreamweaver)

    Here is a quick example I drew up to show you exactly what Im looking for.

    Regular...
    http://img176.imageshack.us/img176/3833/1gk2.jpg

    Then with more content it expands...
    http://img513.imageshack.us/img513/8619/2vr5.jpg

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Do you have a link to anything you've done already? All layouts are different. Personally I wouldn't use tables for page layout. You should read the link in my sig titled "Why tables for layout is stupid?".
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what do you sugest I use then? this is my website right now www.spectiveskate.com and Im looking to make a site more like this http://www.sk8fever.com/ which its content section expands

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I recommend you use CSS/Divs. This should get you started
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    background:#FFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    #container {
    width:573px;
    margin:auto;
    min-height:100%;
    border-left:1px solid #000;
    border-right:1px solid #000;
    }
    * html #container {
    height:100%;
    }
    #header {
    height:248px;
    background:url(images/Spective_01.gif) no-repeat center;
    text-indent:-9999px;
    }
    #contbg {
    width:39px;
    height:387px;
    background:url(images/Spective_03.gif) top center no-repeat;
    float:left;
    }
    #content {
    width:519px;
    margin-right:15px;
    float:left;
    margin-bottom:15px;
    }
    #nav {
    margin:0;
    padding:0;
    list-style:none;
    height:19px;
    }
    #nav li {
    float:left;
    line-height:0px;
    font-size:0;
    display:inline;
    position:relative;
    top:1px;
    }
    #nav li.first {
    margin-left:0;
    }
    #main {
    border:1px solid #000;
    }
    #main p {
    margin:0;
    padding:10px 5px;
    text-align:justify;
    }
    .clear {
    clear:both;
    line-height:0px;
    font-size:0;
    }
    </style>
    <script 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>
    </head>
    <body>
    <div id="container">
    	<div id="header">spectiveskate</div>
    	<div id="contbg">&nbsp;</div>
    	<div id="content">
    		<ul id="nav">
    			<li class="first"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image54','','images/images/rollover_04.gif',0)"><img src="images/Spective_04.gif" name="Image54" width="53" height="19" border="0"></a></li>
    			<li><a href="products.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image55','','images/images/rollover_06.gif',1)"><img src="images/Spective_06.gif" name="Image55" width="76" height="19" border="0"></a></li>
    			<li><a href="team.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image56','','images/images/rollover_08.gif',1)"><img src="images/Spective_08.gif" name="Image56" width="45" height="19" border="0"></a></li>
    			<li><a href="media.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image57','','images/images/rollover_10.gif',1)"><img src="images/Spective_10.gif" name="Image57" width="56" height="19" border="0"></a></li>
    			<li><a href="forum" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image58','','images/images/rollover_12.gif',1)"><img src="images/Spective_12.gif" name="Image58" width="59" height="19" border="0"></a></li>
    		</ul>
    		<div id="main">
    			<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer, arcu sed pellentesque hendrerit, nulla elit blandit nisi, mollis laoreet lacus mauris ut justo. Vestibulum sagittis molestie turpis. Quisque neque. Sed ante nunc, porttitor id, mollis vel, pellentesque at, nisl. Donec lacus arcu, ultrices nec, vehicula id, eleifend at, ipsum. Donec congue felis eget nisl. Praesent ac odio id arcu ornare semper. Nunc in libero. Morbi pellentesque luctus felis. Nullam fermentum, sapien ut dictum pellentesque, turpis neque pellentesque sapien, ut tempor velit augue nec massa. Pellentesque tellus diam, dapibus non, condimentum sit amet, viverra sed, turpis. </p>
    			<p> Sed aliquam. Etiam non sapien. Fusce libero. Sed suscipit quam sit amet neque. Quisque fermentum mollis dui. Cras tincidunt libero non ante. Sed at mi. Nam laoreet odio. Duis volutpat sem eget enim. Sed sed odio a massa scelerisque facilisis. Aliquam ac tortor. </p>
    			<p> Morbi et orci. Donec adipiscing justo et mauris. Nam velit lacus, pellentesque quis, lobortis et, posuere at, lacus. Cras fermentum mauris a ante tempus accumsan. Cras ornare sapien eu nulla. Vivamus mollis tellus quis lectus. Donec a neque. Mauris leo lectus, volutpat in, feugiat in, tristique non, quam. In diam metus, viverra vitae, fringilla non, elementum mattis, elit. Nam molestie fringilla odio. Praesent pulvinar, orci eget blandit consectetuer, felis mauris lacinia elit, eu semper mi lectus quis dui. Morbi non risus ut elit rhoncus auctor. Nunc leo. Donec tortor lorem, venenatis eu, sagittis sit amet, gravida in, dolor. Nulla consectetuer nibh vitae dolor. Aenean vestibulum, odio a egestas tristique, metus sem vestibulum lacus, suscipit lobortis elit nibh a nisi. Aenean fringilla felis eu nisl. Nullam hendrerit ornare massa. Donec tempor urna in nulla. Duis turpis eros, lobortis sed, convallis non, ultrices et, lacus. </p>
    			<p> Nullam nisi orci, nonummy quis, feugiat ut, dictum eget, tortor. Nullam in est eu nisi gravida porta. Nullam in urna nec ligula condimentum elementum. Suspendisse bibendum libero sed odio. Morbi euismod est vel tellus. Nullam imperdiet, lacus vitae ultrices rhoncus, nibh risus tincidunt metus, eget scelerisque quam lacus sit amet metus. Vivamus congue quam eget justo. Morbi convallis. Fusce non lacus a quam lobortis pulvinar. Nam viverra neque ut sapien. Fusce tincidunt, ante vitae sodales pulvinar, purus lacus venenatis nulla, quis volutpat nisl ante vel dui. Vivamus facilisis turpis non lorem. Maecenas pharetra nibh et mi. In neque nisl, ultricies vel, bibendum ac, sagittis vel, tortor. Nunc adipiscing, massa nec porttitor pellentesque, augue neque gravida nibh, vitae interdum neque nulla in tellus. </p>
    			<p> Duis tincidunt orci non nisi. Proin sagittis rutrum neque. Praesent tellus. Maecenas est quam, tempus sit amet, euismod sit amet, fermentum eu, mauris. Etiam dapibus rutrum libero. Sed malesuada ornare quam. Suspendisse dignissim gravida libero. Proin auctor porta turpis. Etiam sem tortor, iaculis eget, venenatis nec, suscipit eget, mi. Sed non eros. </p>
    			<p> Vestibulum pretium blandit quam. Quisque posuere ultricies urna. Nullam euismod luctus est. Pellentesque ut metus ut est tincidunt tristique. Cras ligula enim, vehicula ac, commodo ac, facilisis id, justo. In eu pede in mi mattis molestie. Quisque facilisis nisl. Nullam imperdiet leo sit amet pede. Proin suscipit, neque eu dignissim ullamcorper, ante libero varius sapien, eget dictum mauris lectus in neque. Etiam augue. </p>
    		</div>
    	</div>
    	<div class="clear">&nbsp;</div>
    </div>
    </body>
    </html>
    Good luck.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks man but Ive been messing around with that code all day and I still cant get it to look good for my new template Im workin on
    http://www.spectiveskate.com/Site2/Spectiveskate.html

    Im making something like that and I want the content box to be able to expand w/o it messing up the links on the left. Any ideas?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You are never going to achieve that layout with the current way you are slicing your images. You are slicing it so it just fits. You don't seem to be thinking how its going to expand. The borders should not be done with images. That should be done in CSS. The smaller the slices the easier it will be to code them. I suggest you actually learn HTML and stop relying on a program to code stuff for you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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