# How to fix my template



## CortneyDW (Mar 12, 2014)

*Hi, i need help in fixing a new social media site am creating. Am using Dreamweaver. i need to my sign up/ log in and my menu bars which are in the wrong place. They suppose to be on top in a neat way. i give you a sample pic. My bottom footer is also not working right. its not going across the whole page. Thanks people*.

Here is the URL http://myworlddomain.net/

-President Of World Domain Social Media

Cortney D. Wilson


----------



## colinsp (Sep 5, 2007)

Your CSS doesn't seem to be loading. Make sure your css file is in the location specified in your page link.


----------



## CortneyDW (Mar 12, 2014)

body { margin: 0px; font-family:"Times New Roman", Times, serif; font-size: 16px }
#pageTop {
background:url(headerSliver.png) repeat-x;
height: 110px;
}
#pageTop > #pageTopWrap {
width: 1300px;
margin: 0px auto;
height: 110px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
float: left;
height: 110px;
width: 645px;
}
#pageTop > #pageTopWrap > #pageTopRest {
float: left;
height: 110px;
width: 1992px;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu1 {
height: 48px;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu1 > div {
margin-top: 8px;
padding: 4px;
text-align:right;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu1 > div > a {
color: #000;
text-decoration: none;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu1 > div > a:hover {
color: #E7C029;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu2 {
height: 48px;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu2 > div {
margin: 12px;
padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu2 > div > a {
display: block;
float: left;
color:#000;
text-decoration: none;
margin: 0px 24px;
}
#pageTop > #pageTopWrap > #pageTopRest> #menu2 > div > a:hover {
color:#E7C029;
}
#pageMiddle{
width: 1300px;
margin: 0px auto;
height: 900px;
}
pageBottom{
height: 146px auto;
background: url(../my-image.jpg/boarder.png) repeat-x;
padding: 24px;
}


----------



## colinsp (Sep 5, 2007)

Yes but you have that in the load statement of the page not as a standalone CSS file which is also specified in your html page by the look of it.


----------



## colinsp (Sep 5, 2007)

Also see these errors

http://validator.w3.org/check?verbose=1&uri=http://myworlddomain.net/

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http://myworlddomain.net/

They need to be fixed.


----------



## CortneyDW (Mar 12, 2014)

Sign Up / Login




Menu_item_1
Menu_item_2


----------



## CortneyDW (Mar 12, 2014)

what has to be in a stand alone a standalone CSS?


----------



## colinsp (Sep 5, 2007)

All your css code should be in a file called style.css and that file should be located in the sub-folder called style.

This is the code in your head statement


```
<link href="style/style.css" rel="stylesheet">
```
A CSS file is just a plain text file with a css extension.

If you don't want a separate css file then you can just have it within style tags.


----------



## CortneyDW (Mar 12, 2014)

My style is correct. It was already right.


----------



## CortneyDW (Mar 12, 2014)

This is my page bottom code here


----------



## CortneyDW (Mar 12, 2014)

When i go and try the sign up page its not working right. Its suppose to check to see if the user name is available but its not doing it. Can you see if it lets you sign up. Thanks C. You been a big help. Am in the process of hiring a Tech team. But for right now this site and my help from 1and1.com will do.


----------



## colinsp (Sep 5, 2007)

No it doesn't it just hangs.

I think that your CSS is broken as it is only loading the body definitions. This looks to be incorrect


```
#pageTop {
background:url(headerSliver.png) repeat-x;
height: 110px;
}
```
Try changing it to


```
#pageTop {
background:url([COLOR="Red"]'[/COLOR]headerSliver.png[COLOR="Red"]'[/COLOR]) repeat-x;
height: 110px;
}
```


----------



## CortneyDW (Mar 12, 2014)

still not fixed. haha. i notice it was acting funny to because i when you put the mouse on the menu it suppose to light up. Everything is looking funny.


----------



## colinsp (Sep 5, 2007)

Try the code below as your css.


```
body { margin: 0px; font-family:"Times New Roman", Times, serif; font-size: 16px }
#pageTop {background:url('headerSliver.png') repeat-x;height: 110px;}
#pageTopWrap {width: 1300px;margin: 0px auto;height: 110px;}
#pageTopLogo {float: left;height: 110px;width: 645px;}
#pageTopRest {float: left;height: 110px;width: 1992px;}
#menu1 {height: 48px;margin-top: 8px;padding: 4px;text-align:right;}
#menu1 a {color: #000;text-decoration: none;}
#menu1 a:hover {color: #E7C029;}
#menu2 {height: 48px;margin: 12px;padding: 4px;}
#menu2 a {display: block;float: left;color:#000;text-decoration: none;margin: 0px 24px;}
#menu2 a:hover {color:#E7C029;}
#pageMiddle{width: 1300px;margin: 0px auto;height: 900px;}
pageBottom{height: 146px auto;background: url('../my-image.jpg/boarder.png') repeat-x;padding: 24px;}
```
Copy it and paste it as say style2.css, change the link in your html to reflect this new style sheet.

See how it is then.

BTW you page looks horrible on a wide screen monitor as it is fixed sizes and everything is left aligned. Your footer is an image where you would be better off having this as text as there is no logo in it. You could just have a simple small image for the top border that makes use of the repeat property..


----------



## JiminSA (Dec 15, 2011)

Hi there! Your html code needs sorting ... You've not got your divs filled in correctly

```
<body>
<div id="pageTop"><a href="http://www.myworlddomain.net"><img src="my-image.jpg/logo.png" alt="logo" title="World Domain Social Media"></a></div>
<div id="pageTopWrap"></div>
<div id="pageTopLogo"></div>
<div id="pageTopRest">
	<div id="menu1">
	</div>
	<a href="http://myworlddomain.net/signup">Sign Up / Login</a>
</div>
<div id="menu2">
	<div>
		<a href="http://www.myworlddomain.net">
		<img src="my-image.jpg/Home.png" alt="home" title="Home">
		</a>
		<a href="#">Menu_item_1</a>
		<a href="#">Menu_item_2</a>
	</div>
</div>

<div id="pageMiddle">
	&nbsp;
</div>
<div id="pageBottom"><img src="my-image.jpg/boarder.png" alt="boarder" ></div>
</body>
```
Should read ...

```
<body>
<div id="pageTop"><a href="http://www.myworlddomain.net"><img src="my-image.jpg/logo.png" alt="logo" title="World Domain Social Media"></a></div>
<div id="pageTopWrap"></div>
<div id="pageTopLogo"></div>
<div id="pageTopRest">
[COLOR="Red"]	<div id="menu1">
		<a href="http://myworlddomain.net/signup">Sign Up / Login</a>
	</div>[/COLOR]
</div>
<div id="menu2">
	<div>
		<a href="http://www.myworlddomain.net"><img src="my-image.jpg/Home.png" alt="home" title="Home"></a>
		<a href="#">Menu_item_1</a>
		<a href="#">Menu_item_2</a>
	</div>
</div>

<div id="pageMiddle">
	&nbsp;
</div>
<div id="pageBottom"><img src="my-image.jpg/boarder.png" alt="boarder" ></div>
</body>
```


----------



## CortneyDW (Mar 12, 2014)

You all have been a big help. Am going to try your tips in about an hour. Thanks.


----------

