locked
How can I lower the photo in a column and add a logo on top RRS feed

  • Question

  • On falsterfarm. com, the left column needs a logo .jpg added to the top of that existing photo. If possible I'd like that picture to replicate itself as the viewer scrolls down the page. How can I do that?

     

    Saturday, July 27, 2013 5:35 PM

All replies

  • On falsterfarm. com, the left column needs a logo .jpg added to the top of that existing photo. If possible I'd like that picture to replicate itself as the viewer scrolls down the page. How can I do that?

     

    You will be better off changing your code slightly so that it looks something like this:

    <div id="masthead">
    	<div id="logo">Logo Goes Here</div>
    	<div id="header">Header Goes Here</div>
    </div>
    <div id="container">
    	<div id="left_col">Left Column Stuff Goes Here</div>
    	<div id="right_col">Right Column Stuff Goes Here</div>
    	<div id="page_content">Main Content Goes Here</div>
    </div>
    <div id="footer">Footer Goes Here</div>

    Now you need to have appropriate CSS like this:

    body {
    	margin: 0;
    	padding: 0;
    }
    
    #masthead {
    	min-width: 600px;
    }
    
    #logo {
    	float: left;
    	width: 200px;
    }
    
    #header {
    	margin-left:200px;
    }
    
    #container {
    	clear: both;
    	min-width: 600px;
    }
    
    #left_col {
    	float: left;
    	width: 200px;
    }
    
    #right_col {
    	float: right;
    	width: 200px;
    }
    
    #page_content {
    	margin-left: 200px;
    	margin-right: 200px;
    }
    
    #footer {
    	clear: both;
    }

    This code block creates a three column layout with a logo on the left.  this is what you want.  When you have done it, you need to fix the header and footer so that they remain in situ even if the content scrolls up or down.  this is a technique called Sticky header/footer.  You can post back when you have got your logo in place and somebody will guide you how to position the header and footer as desired.

    The above code is straight from the standard template given with EW4.

    Good luck.


    Prolific Computer user

    Sunday, July 28, 2013 2:45 AM