Adobe Community: having problems placing slider on my webpage (please help)

anish240990 Calculating status...

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

965 Views 15 Replies Latest reply: anish240990, Apr 21, 2012 9:49 AM

Replies

Currently Being Moderated

1. Nancy O.,

Apr 19, 2012 2:16 PM in reply to anish240990

Report

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

2. anish240990,

Apr 19, 2012 3:47 PM in reply to Nancy O.

Report

hi thanks for your reply, i kind of get what you are saying. but the thing is i want my navigation bar to be at the top and seperate bits of information in each box, here is a picture of the photoshop version of how i want my webpage to look like :

im not very well taught on website as my course is absoute shite.

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Apr 19, 2012 5:15 PM in reply to anish240990

Report

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.

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

4. anish240990,

Apr 20, 2012 12:07 AM in reply to Nancy O.

Report

ahh thankyou nancy this has been so much help, i will try this once i get back from work and get back to you. cant thank you enough. legend
cheers

|
Mark as:
Currently Being Moderated

5. anish240990,

Apr 20, 2012 3:10 AM in reply to anish240990

Report

hello nancy i was just wondering how to change the size of the boxes on the page?

|
Mark as:
Currently Being Moderated

6. anish240990,

Apr 20, 2012 7:05 AM in reply to anish240990

Report

also how can i add boxes like you have done ?

|
Mark as:
Currently Being Moderated

7. osgood_,

Apr 20, 2012 7:11 AM in reply to anish240990

Report

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

8. anish240990,

Apr 20, 2012 7:12 AM in reply to anish240990

Report

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?

|
Mark as:
Currently Being Moderated

9. osgood_,

Apr 20, 2012 7:17 AM in reply to anish240990

Report

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

10. anish240990,

Apr 20, 2012 7:22 AM in reply to osgood_

Report

yeah im using this one http://alt-web.com/TEST/2-column-test.html

and i want to add another full length box like the slideshow box underneath the content box

|
Mark as:
Currently Being Moderated

11. osgood_,

Apr 20, 2012 7:36 AM in reply to anish240990

Report

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>
</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>
</div>


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

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

<div id="bottomContent">
<h2>Bottom content goes here</h2>
</div>


<div id="footer">
your footer goes here
</div>

</div>

</body>
</html>

|
Mark as:
Currently Being Moderated

12. anish240990,

Apr 20, 2012 7:39 AM in reply to osgood_

Report

thankyou mate!! much appreciated

|
Mark as:
Currently Being Moderated

13. anish240990,

Apr 21, 2012 8:35 AM in reply to anish240990

Report

quick question how do i change the size of the boxes on the css?

|
Mark as:
Currently Being Moderated

14. Nancy O.,

Apr 21, 2012 9:12 AM in reply to anish240990

Report

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:
Currently Being Moderated

15. anish240990,

Apr 21, 2012 9:49 AM in reply to Nancy O.

Report

thanks

|
Mark as: