Skip navigation
anish240990
Currently Being Moderated

having problems placing slider on my webpage (please help)

Apr 19, 2012 1:31 PM

im not that good at web desigin and in my final year at uni creating a website.

 

basically i have a jquery slideshow on the homepage of my website. i have placed in into my html but everything has seemed to moved and i don't know how to move the actual slider either with the css.

 

this is the site so far: http://anishjoshi.net23.net/

 

could someone be grateful to tell me why everything has moved and how to fix it back. and also move the slideshow down to fit the box.

 

cheers in advance

 
Replies
  • Currently Being Moderated
    Apr 19, 2012 2:16 PM   in reply to anish240990

    There's a lot wrong with this design approach. Designing web pages is totally different from print design.  In print, everything is static and unchanging.  On the web everything changes based on the end user's browser settings, their display & preferred text sizes... none of which you control.

     

    This background image is OK for an inital design comp.

    http://anishjoshi.net23.net/images/container.png

     

    But you'll never get everything on your page to fit precisely over the various boxes in that image.  And even if you do, it won't look the same for everybody. 

    You need to break things apart.

     

    As a rough example, I built this 2-column layout without any images. 

    It's all done with CSS background-colors applied to individual areas.

    http://alt-web.com/TEMPLATES/2-col-custom.shtml

     

    If you Zoom - Text Only, the layout flexes to hold content.  You can replace background-colors with small repeating background-images or CSS background-gradients if you wish.  The main idea here is to divide and conquer.  Keep your layout flexible.

     

    Hope this helps,

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 5:15 PM   in reply to anish240990

    Try this (view source to see the code)

    http://alt-web.com/TEST/2-column-test.html

     

    The body background-color is #222222. This is the repeating background-image I'm using (100 x 100 px tile) in the 4 main regions.

    http://alt-web.com/Images/BG/bluslate.gif

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     


     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:11 AM   in reply to anish240990

    You've lost me....but everything is driven by the embeded css at the top of the file below. So you would change the sizes in that section.

     

    http://alt-web.com/TEST/2-column-test.html

     

     

    <style type="text/css">

    body {

    margin:0;

    padding:0;

    font-size: 100%;

    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

    background: #222;

    }

     

    #wrapper {

    width: 990px;

    margin:0 auto; /**centered**/

    padding:0;

    color: #FFF;

    overflow:hidden; /**to contain floats**/

    }

     

    /**background for main regions**/

    #header, #slideshow, #content, .rightBox {

    background: #4F5972 url(../Images/BG/bluslate.gif) repeat}

     

    #header {min-height: 100px;}

    #header h1 {text-align:center}

     

    #nav {text-align:left}

     

    #slideshow {

    min-height: 175px;

    margin-top: 1.5em;

    }

     

     

    #content {

    float:left;

    width: 700px;

    min-height: 300px;

    margin-top: 1.75em;

    }

     

    #right_col {

    float:right;

    width: 220px;

    margin-top:3.5em;

    padding:0;

    }

     

    .rightBox {min-height: 100px;}

     

    #footer {

    clear:both;

    font-size:x-small;

    }

     

    /**re-usable classes**/

    .floatLt {

    float:left;

    width: 31%;

    border: 2px dotted #FFF;

    margin: 2px;

    padding: 4px;

    }

    .floatRt {

    float:right;

    width:auto;

    border: 2px dotted #FFF;

    }

     

     

     

    </style>

     

     

    Adding boxes again is a bit of a basic question to be honest. You add them to the html code.

     

    I realise you are a beginner but unless you know some simple basic procedures it may be impossible for you to get very far.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:17 AM   in reply to anish240990

    anish240990 wrote:

     

    yeah i understand everything with the css etc... but im not sure which part of the CSS is the box and how to add an extra one? i know its the right box left box etc... but im not sure how to add another and position them?

    Which template are you using? this one http://alt-web.com/TEST/2-column-test.html

     

    If so where do you want a box added?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:36 AM   in reply to anish240990

    See 'bottomContent' <div> has been added plus css for 'bottomContent' and 'bottomContent h2'.

     

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Untitled Document</title>

     

    <style type="text/css">

    body {

    margin:0;

    padding:0;

    font-size: 100%;

    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

    background: #222;

    }

     

    #wrapper {

    width: 990px;

    margin:0 auto; /**centered**/

    padding:0;

    color: #FFF;

    overflow:hidden; /**to contain floats**/

    }

     

    /**background for main regions**/

    #header, #slideshow, #content, .rightBox, #bottomContent {

    background: #4F5972 url(../Images/BG/bluslate.gif) repeat}

     

    #header {min-height: 100px;}

    #header h1 {text-align:center}

     

    #nav {text-align:left}

     

    #slideshow {

    min-height: 175px;

    margin-top: 1.5em;

    }

     

     

    #content {

    float:left;

    width: 700px;

    min-height: 300px;

    margin: 1.75em 0;

    }

     

    #right_col {

    float:right;

    width: 220px;

    margin-top:1.5em;

    padding:0;

    }

     

    .rightBox {min-height: 100px;}

     

    #bottomContent {

        clear: both;

        min-height: 300px;

    }

    #bottomContent h2 {

    padding-top: 20px;

    }

     

    #footer {

    font-size:x-small;

    }

     

    /**re-usable classes**/

    .floatLt {

    float:left;

    width: 31%;

    border: 2px dotted #FFF;

    margin: 2px;

    padding: 4px;

    }

    .floatRt {

    float:right;

    width:auto;

    border: 2px dotted #FFF;

    }

     

     

     

    </style>

    </head>

     

    <body>

    <div id="wrapper">

    <div id="header">

    <div class="floatRt">

    some other links

    </div>

     

    <h1>Site Name goes here...</h1>

     

    <div class="floatRt">

    social icons

    </div>

    <div id="nav">

    Some Link | Some Link | Some Link

    </div>

    <!--end header --></div>

     

    <div id="slideshow">Slideshow</div>

     

    <div id="content">

    <h2>Content goes here</h2>

     

    <div class="floatLt">

    float left

    </div>

     

    <div class="floatLt">

    float left

    </div>

     

    <div class="floatLt">

    float left

    </div>

    <!--end content --></div>

     

    <!--begin right_column -->

    <div id="right_col">

    <div class="rightBox">box one here</div>

     

    <p> </p>

    <div class="rightBox">box two here </div>

    <!--end right_column --></div>

     

    <div id="bottomContent">

    <h2>Bottom content goes here</h2>

    </div>

    <!-- end bottomContent -->

     

    <div id="footer">

    your footer goes here

    </div>

     

    <!--end wrapper --></div>

     

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 9:12 AM   in reply to anish240990

    Look at CSS widths.

     

    #wrapper

    width: 990px  /**adjust to fit your overall page size**/

     

    #content {

    width: 700px;

     

    #right_col {

    width: 220px;

     

    Review CSS Box Model:

    http://www.w3schools.com/css/css_boxmodel.asp

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points