Div problem

timmytots · #1 Sep 8th, 2007, 19:44

I can't get my 'wrap' (the div with all the main stuff in) to go 80px from top and 300px from bottom.

http://www.timothy-clark.com/store/

Any help?

alexgeek · #2 Sep 9th, 2007, 04:03

what have you tried so far?
i have to say it's looks amazing!

timmytots · #3 Sep 9th, 2007, 10:55

thanks very much.

i've tried just the 300 from bottom (without the top) and it goes correct but the top is right at the top over the header. i've tried most things. for some reason, i can't get both the top and bottom where i want.

alexgeek · #4 Sep 9th, 2007, 14:56

have you tried stuff like:
margin-top: 100px;
and
margin-bottom: 300px;

?

timmytots · #5 Sep 9th, 2007, 15:39

its ok, ive done something else.

karinne · #6 Sep 10th, 2007, 14:16

Please post the solution for all to see. Someone else might be having the same problem as you

timmytots · #7 Sep 10th, 2007, 14:55

there was no solution, i couldnt do it.

i have a new problem now. for some reason the div "bottom" doesnt go directly under the div "wrap". as youll see, the images of me are covered partially by the bottom div. why is this?

timmytots · #8 Sep 10th, 2007, 18:32

anyone?

Rakuli · #9 Sep 10th, 2007, 19:47

you could try adding

clear: both;

to the #bottom div so it clears the floated divs you have inside the #wrap.

timmytots · #10 Sep 10th, 2007, 20:30

that didnt do anything.

my two problems now are:

1/. the image of the red sun doesn't touch the top of the bottom image. They should touch and theyre both just divs. why dont they?

2/. The bottom image doesnt go to the bottom.

timmytots · #11 Sep 11th, 2007, 20:18

please help!!!

Lchad · #12 Sep 12th, 2007, 12:29

In the #footer take out the position: relative and the footer will drop to the bottom.

In the #content you have a top margin added so the sun is not touching that div.
change the margin code to:
margin: 0px 0px 25px 0px

timmytots · #13 Sep 12th, 2007, 13:42

i took the footer out completely in the html file and i altered the content, but the red sun is still a milimeter above the base image and the base image hasnt dropped to the bottom.

Lchad · #14 Sep 12th, 2007, 14:14

Is there relative positioning set for the base image too?

timmytots · #15 Sep 12th, 2007, 14:45

yeah, but taking that out hasn't done anything either.

welshstew · #16 Sep 12th, 2007, 15:41

If you change your css for the 3 columns to the following it should work:

Code: Select all

#leftcolumn {
position:relative;
float:left;
width:230px;
text-align:left;
padding-top:20px;
margin-left:10px;
}

#middlecolumn {
position:relative;
width:230px;
float:left;
text-align:left;
padding-top:20px;
margin-left:10px;
}

#rightcolumn {
position:relative;
width:130px;
float:left;
text-align:left;
padding-top:20px;
margin-left:10px;
}

let me know if that helps

Stew

welshstew · #17 Sep 12th, 2007, 15:54

also if you add margin-top: -5px; to you bottom div id then it should move it up to line up with the 'sun image'

i.e.

Code: Select all

#bottom {
    position: relative;
    margin: 0 auto;
    padding: 0;
    margin-top: -5px;
      width: 100%;
    height: 510px;
     clear: both;
      background: url('http://www.timothy-clark.com/store/bottom.jpg') no-repeat;
    }

welshstew · #18 Sep 12th, 2007, 16:07

also, your top nav is a bit screwy in IE. you'll need to wrap that in a floated left div for it to look nice across platforms:

Code: Select all

<div style="float:left; ">
<ul id="nav">
nav list code
</ul>

<ul id="nav2">
nav list code
</ul>
</div>

you'll probably need to do the smae to the 'checkout' pretty pink thing, as it now floats in the middle of the screen

Code: Select all

<div style="float:left; ">
<div id="checkout">
</div></div>

let me know how you get on

welshstew · #19 Sep 12th, 2007, 16:10

sorry, probably confused the bejesus out of you, so here is the fully amended code. works in ie7 ie6 & ff.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>Timothy Clark&trade; | Home &amp; Garden | Fitness Furniture, clothing, accessories, equipment</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content="fitness furniture, equipment, fashion accessories, clothing, apparel, yoga, tai chi, furniture, fitness, health, timothy, timothy clark, tim clark, modern,
vases, tables, chairs, punchbags, mats, sparring, sports, candles, t-shirts, trousers, accessories, lamps, exercise ball, weights, dumbbells,
swiss ball, bats, gloves, bench, press, contemporary, design, interior, feng shui, detox, wellbeing, environment, holistic, martial arts, kung fu, pilates, united kingdom"/>
<meta name="description" content="The official Timothy Clark website - contemporary Fitness Furniture, clothing and accessories."/>
<link rel="SHORTCUT ICON" href="favicon.ico"/>
    
    <style type="text/css">
    /* CSS Sheet */

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 1.5em;
    color: #333;
    height: 100%;
    width: 100%;
    background : #101010;
    }

#side {
position:absolute;
height: 870px;
width: 220px;
left: 0px;
top: 360px;
background : #101010 url('http://www.timothy-clark.com/store/sides.jpg') no-repeat;
}

#side2 {
position:absolute;
right: 0px;
top: 120px;
}

/* links */

a:link {
    color: #00FF00;
    text-decoration: none;
    border-bottom: 1px dotted #bbb;
    
    }
a:visited {
    color: #99CC00;
    text-decoration: none;
    border-bottom: 1px dotted #bbb;
    }
a:hover {
    color: #fff;
    background: #00FF00;
    border-bottom-style: solid;
    }

#header {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background : #101010 url('http://www.timothy-clark.com/store/header.jpg') no-repeat;
    }
    
/* entries */

#home #content h3 {
    margin: 0;
    padding: 0;
    border: none;
    }
#content dl.entries {
    margin: 0;
    padding: 0;
    }
#content dl.entries dt {
    font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    line-height: 1.5em;
    font-weight: normal;
    color: #99CC00;
    }

#content dl.entries dd {
    font-family: Verdana, sans-serif;
    margin: 0;
    paddin

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Div problem