Help for a newbie with HTML and CSS.

[Chrissytree]

I've had this Customised Weebly website for years and all of a sudden the menu jumped from the side to the top. So I tried to fix it
To be honest I have no idea what I did with the code at the time except using one of their templates and changing the colours of background and buttons and adding my own image.
This time I've fiddled around with it and got it to do what I wanted but now the page is too long and it jumps up when it reaches the bottom. I also put it into a code checker and it came out with a few errors. The code doesn't seem to start or finish.
I'm so confused!

Would someone who knows what they're doing mind taking a look? It's this one here:
http://christinateejewellery.weebly.com

[Duenia]

I've never used Weebly - but I will gladly take a look at the code when I get home if the issue hasn't been solved.

[Chrissytree]

I've never used Weebly - but I will gladly take a look at the code when I get home if the issue hasn't been solved.

That'd be great, thanks

*edit to add the code, well the code I can change anyway... Apparently Weebly doesn't show all the code, at least that's what someone else commented in the help forum. I've highlighted in red the bits I might have changed... I can't remember what I changed but I think it was a centre to a left.

If you can spot whats making the page too long that'd be great assuming it's something in the code I can access.


*{    margin:0;
    padding:0;
}
body {
  background: transparent url(page2.jpg) repeat-x center top;
  background-color:#ffffff;
  font-family:"lucida sans", arial, sans-serif;
  font-size:.75em;
  color:#333;
  margin:0;
  padding:0;
}
p {
  line-height:1.5;
}
h1, h2, h3{
  line-height:1.5;
}
#wrapper {
  width:100%;
  margin:0pt auto;
}
#contents {
  width:760px;
  margin:0pt auto;
  min-height:450px;
}
#header {
  position:relative;
  float:left;
  width:760px;
  margin:0pt auto;
}
#sitename {
  position:relative;
  float:right;
  font-family:palatino,garamond,"times new roman",serif;
  width:510px;
  height:154px;
  text-align:center;
  margin-top:21px;
  font-size:3em;
  font-style:italic;
}
#sitename, #sitename a {
  color:#fff;
  text-decoration:none;
}
#divider {
  padding-top:5px;
  padding-left:220px;
}
#description {
  font-family:"lucida sans", arial, sans-serif;
  color:#b9cbd3;
  line-height:18px;
  font-size:.30em;
  font-weight:normal;
  font-style:normal;
}

#navigation {
  float:left;
  background-color:#aa9977;
  width:209px;
  font-family:"lucida sans", arial, sans-serif;
  font-size:1em;
  margin-top:65px;
}

#top {
  background: transparent url(navbar_top2.jpg) no-repeat center top;
  width:209px;
  height:32px;
}
#bottom {
  clear: both;
  background: transparent url(navbar_btm2.jpg.jpg) no-repeat center top;
  width:209px;
  height:31px;
}

#navigation ul{
  float:left;
  position:relative;
  margin:0 auto;
  padding:11px 5px 50px 15px;
  list-style-type:none;   
}
#navigation li {
  float:center left;
  background: transparent url(list_background2.jpg) no-repeat center bottom;
  font-size:1em;
  padding:13px 0 0 0;
  margin: 0;
  width:177px;
  height:20px;
}
#navigation a:link {
  color:#3e3625;
  font-weight:normal;
  text-decoration:none;
 
}
#navigation a:hover {
  color:#330033;
  font-weight:normal;
  text-decoration:none;
}
#navigation a:visited {
  color:#6f6142;
  font-weight:normal;
  text-decoration:none;
}
a:link,a:hover,a:visited {
  color:#330033;
  font-weight:normal;
  text-decoration:underline;
}
#right-column {
  float:right;
  padding-top:20px;
  width:530px;
}
img.image-left {
  margin-right:15px;
  float:left;
}
img.image-right {
  margin-left:15px;
  float:right;
}
#footer {
  background: transparent;
  padding-top:20px;
  padding-bottom:20px;
}
#footer-content {
  width:760px;
  margin: 0pt auto;
  font-family:"lucida grande", arial, sans-serif;
  text-align:center;
}
/****************************** flyout menus ******************************/

#weebly-menus .weebly-menu-wrap {
  z-index: 5000;
}

#weebly-menus .weebly-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

#weebly-menus .weebly-menu li {
  float: left;
  clear: left;
  width: 170px;
  text-align: left;
}

#weebly-menus .weebly-menu li a {
  position: relative;
  display: block;
  width: 100%;
  background: #8197a1;
  border-right: 1px solid #8197a1;
  border-left: 1px solid #8197a1;
  border-bottom: 1px dashed #bdd0d8;
  text-decoration: none;
  font-size: 11px;
  font-weight: normal;
  line-height:1;
  padding:5px 5px 6px 5px;
  color: #fff;
}

#weebly-menus .weebly-menu li a:hover {
  border-right: 1px solid #728790;
  border-left: 1px solid #728790;
  background: #728790;
}

#weebly-menus span.weebly-menu-title {
  display: block;
  padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
  background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
  display: block;
  position: absolute;
  right: 5px;
  top: 0;
  font-family: Courier;
  height: 28px;
  line-height: 28px;
  padding:2px 0 3px 0;
}

[Duenia]

I think your automatic jump is in one of the jQuery functions.

Still looking for the height issue.

Your height issue appears to be in #weebly-footer-signup-container, I'm not sure how it gets the value it has but it's being absolute positioned much further down than your page goes.

If you can switch to position:relative; and remove the top value you should be fine.

[Chrissytree]

I think your automatic jump is in one of the jQuery functions.

Still looking for the height issue.

Your height issue appears to be in #weebly-footer-signup-container, I'm not sure how it gets the value it has but it's being absolute positioned much further down than your page goes.

If you can switch to position:relative; and remove the top value you should be fine.

Thanks for that... um... is that in the code I posted? If it's in the code of the website itself I don't have any control over that.

I tried replacing the only one that said absolute to relative and it didn't change anything.

[Duenia]

I think your automatic jump is in one of the jQuery functions.

Still looking for the height issue.

Your height issue appears to be in #weebly-footer-signup-container, I'm not sure how it gets the value it has but it's being absolute positioned much further down than your page goes.

If you can switch to position:relative; and remove the top value you should be fine.

Thanks for that... um... is that in the code I posted? If it's in the code of the website itself I don't have any control over that.

I tried replacing the only one that said absolute to relative and it didn't change anything.

It's not, but you may be able to use specificity to override site code. If not while not generally recommended importants can always help in situations like this.

[Chrissytree]

Ok, thanks very much for your help I'm going to message the site and see if they can fix it.

[Duenia]

No problem, any sites like those tend to have some kind of issue that can be difficult for their users to fix. There could also be something completely unrelated that's making that element become an issue. Unfortunately I can't tell where anything is coming from because it's almost all anonymous functions (so there's no name for the pieces of javascript so I'd know which one to look at).

Fingers crossed it gets fixed. If you need any other help feel free to let me know