Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Expression Web - Standard Templates

Options
  • 23-01-2009 11:58pm
    #1
    DriveSkill
    Registered Users Posts: 757 ✭✭✭


    Hi,

    Anyone familiar with the standard templates that come with Expression Web (they are also available for download).

    My problem is with the 'Small Business 2" template, this is a 2 column layout with masthead and footer. My problem is the footer appears to be positioned relative only to the left hand column - 'content' tag - i.e. if the amount of text increases in that the footer moves down as the column grows. This would work fine if the left hand column is always longer than the right, however, in my case the right hand - 'sidebar' tag' is sometimes longer than the left and when it goes beyond the left column is overwrites the footer - the footer does not move down with it! I've tried just loading the template and then adding text into the sidebar and you can see it extends into the footer so I believe it is an issue with the template rather than changes I've made. I realise it may have been intended to be this way for pages where the left column is always longer than the right but it doesnt suit me :-)

    I've looked at the DWT and at the style sheets but I cant see how the footer is tied to the left column and not the right. If does have a setting for 'clear : both' in the css but to be not sure what that exactly means. I'm still trying to figure out CSS and EW!

    Any help or suggestions appreciated.

    Thanks,
    Declan


Comments

  • Options
    #2
    Adam
    Closed Accounts Posts: 8,866 ✭✭✭Adam


    without a look at the code i can't help much, as i'm not familiar with the template, but here's an example you can work off. it's very sparse obviously, but it does what you want, and will push the footer whether the left or right column is longer:

    css: 
    body {
	text-align: center;
}

#container {
	width: 800px;
	margin: auto;
	text-align: left;
}

#header {
	width:100%;
	height: 100px;
	background:grey;
}

#col1 {
	float:left;
	width:50%;
	background:blue;
}
#col2 {
	float:left;
	width:50%;
	background:red;
}

#footer {
	clear: both;
	width: 100%;
	height: 100px;
	background: green;
}

    html:
    [html]
    <head>
    <link href="default.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="container">

    <div id="header">
    <p>header</p>
    </div>

    <div id="col1">
    <p>My problem is with the 'Small Business 2" template, this is a 2 column layout with masthead and footer. My problem is the footer appears to be positioned relative only to the left hand column - 'content' tag - i.e. if the amount of text increases in that the footer moves down as the column grows. This would work fine if the left hand column is always longer than the right, however, in my case the right hand - 'sidebar' tag' is sometimes longer than the left and when it goes beyond the left column is overwrites the footer - the footer does not move down with it! I've tried just loading the template and then adding text into the sidebar and you can see it extends into the foo relative only to the left hand column - 'content' tag - i.e. if the amount of text increases in that the footer moves down as the column grows. This would work fine if the left hand column is always longer than the right, however, in my case the right hand </p>
    </div>

    <div id="col2">
    <p>My problem is with the 'Small Business 2" template, this is a 2 column layout with masthead and footer. My problem is the footer appears to be positioned relative only to the left hand column - 'content' tag - i.e. if the amount of text increases in that the footer moves down as the cr</p>
    </div>

    <div id="footer">
    <p>footer</p>
    </div>

    </div>

    </body>
    </html>
    [/html]

    hope that helps!


  • Options
    #3
    DriveSkill
    Registered Users Posts: 757 ✭✭✭DriveSkill


    Thanks Mirror,

    The basics of what you have is what is in the template but there is obviously a lot more also. I believe the problem is now related to 'layers' being using but I dont know where (or what to look for) in the CSS or HTML to see how they are defined. I can see in EW itself that the left and right column appear to be as layers but just cant see any reference to the footer 'div'.

    At the moment I've started using another template but I'll probably try and debug this a bit more as its got me interested to figure out how it works.

    Thanks!


Advertisement