1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Advise on site layout

Discussion in 'HTML & Website Design' started by joeboy, Jul 30, 2013.

  1. #1
    Hi,

    Advise needed here please.

    My layout is as follows. My actual page is around 800px wide. But rather than it being centered it is aligned to the left, with one small difference. There is an image running all the way up the left side of the page.

    Now I want this image running down the left to be around 200-300px wide when the browser has room for this.

    But if this doesn't reduce in size then anything under a 1000-1100px wide browser will not show the full page.

    So I need the image down the left to reduce in size. Not too sure how to do this so looking for some expert advise from this forum

    I hope someone can be so kind to help me

    Thanks
     
    joeboy, Jul 30, 2013 IP
  2. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #2
    Stop using fixed px widths and the content will scale down with the browser size? Have a look at responsive design.
     
    scottlpool2003, Jul 30, 2013 IP
    deathshadow likes this.
  3. envira

    envira Member

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #3
    Use these tools for making the website :
    BootStrap : http://twitter.github.io/bootstrap/
    Foundation by Zurb : http://foundation.zurb.com/
    here you an find lots of frames works so you can use it as base : http://mashable.com/2013/04/26/css-boilerplates-frameworks/
     
    envira, Aug 2, 2013 IP
  4. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #4
    You can avoid the bloat of using bootstrap by just using percentages rather than px values in your css. Your math is very simple for this since you have 800px and 200px as your starting widths:
    #main{
    width:80%;
    float:right;
    }
    #leftColumn{
    width:20%;
    float:left;
    }
    #leftColumn img{
    width:100%;
    }
    
    <div id="main">
    <h1>Main content</h1>
    <p>Main content here</p>
    </div>
    <div id="leftColumn">
    <img src="long-image.jpg">
    </div>
    Code (markup):
     
    ekim941, Aug 4, 2013 IP
  5. Md.Shihab Uddin

    Md.Shihab Uddin Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    you must be used different div and fixed this div height and weight, just divide the div aware page padding , margin then you must be good result.
    Thanks
    Good by
     
    Md.Shihab Uddin, Aug 5, 2013 IP