CSS and Coding Help?!

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I'm trying to design my site with a blank template. Using html and CSS I have gotten rid of the lines on the clean template, but while changing a few more of the codes the footer line came back. I can't seem to get rid of it. Can anyone take a look at it to see what's going on? http://outsourcesupplies.yolasite.com/
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
  • frustrated

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Jessica.

Also, if you want to make the footer line go away, just add in this code:

<style type="text/css">
#sys_footer, .sys_footer {
border-top:0;
border:0;
}
</style>

I hope this helps.

Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Jessica

I hope to be of assistance to you. To remove the footer line, please try this code:

<style type="text/css">
.sys_footer{
border-top: none;
}
</style>

I hope that does the trick!
Photo of Shaun O'Connell

Shaun O'Connell

  • 5 Posts
  • 1 Reply Like
Hi Jessica,

It looks like the large site-wide background image you're using has a white line at the bottom too.
You'll have to open said image in an image editor and remove the white line from it by cropping or painting over it.

Cheers,
Shaun
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
The image actually doesn't have a line in it. It was created in Adobe Illustrator. The line was gone until I messed something up in the code and now my code to make the line disappear won't work. I think if I use the code in Nathan's response it might work though because it references both the #sys_footer and the .sys_footer.

Thanks.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I just viewed your page source and there isn't any code that you have to hide the footer line, so I think you may have deleted it out by accident. Also, another idea would be to put !important at the end of border-top:0; like this:

<style type="text/css">
#sys_footer, .sys_footer {
border-top:0 !important;
border:0 !important;
</style>

That might make it work better.

Hopefully it works.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Jessica's background image is located at this URL: www.outsourcesupplies.yolasite.com/re...
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
Right, that is only how big the image is. but the background of the site is black so it should blend in... right?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yes, it will blend in, and it is blending in, so thats all good. :)
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
Thanks for your help! If I put that code at the bottom of my code it should work right?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You're welcome! Yes, it will work if you put it at the bottom, and you can actually just drag over another HTML widget to wherever you want it to me on your page if you want and paste the code in to it.

If the code doesn't work let me know and I will investigate further.

Nathan
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
It's still not working.... This is the code I currently have in there. What is making it not work?

#sys_banner {
height:0;
width: 0;
padding:1px 0 0;
}

a:link {
color:#000;
}

a:visited {
color:#000;
}

.sys_txt a:link {
color:#000;
text-decoration: none;
}

.sys_txt a:visited {
color:#000;
text-decoration: none;
}

#content {
float:left;
margin-left:75px;
margin-top:120px;
background-color:white;
padding:10px, 10px, 0, 5px;
width:760px;
}

#menu {
border-bottom:0px solid #CCCCCC;
margin:0 5px;
}
#menu ul {
float:right;
list-style:none outside none;
margin-left:0;
padding:10px;
}
#menu ul li {
display:inline;
font-size:larger;
padding-right:20px;
}
#menu ul li a {
font-size:16px;
text-decoration:none;
color:white;
}

.sys_txt h3 {
font-family: "Lucida Grande","Arial Unicode MS",sans-serif;
font-size: 10px;
color: white;
font-weight: normal;
background-color: black;
padding:5px;
}

h3 {
font-family: "Lucida Grande","Arial Unicode MS",sans-serif;
font-size: 10px;
color: white;
font-weight: normal;
background-color: black;
background-color:#E7F1D4;
padding:5px;
}

div#I5_sys_txt{
background-color:#E7F1D4;
padding:0;
margin:0;
}

#sys_footer, .sys_footer {
border-top:0 !important;
border:0 !important;
}
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm sorry that this isn't working. Did you preview it in the Preview of the site builder or are you seeing it in the site builder? Click on Publish to the Web and then go to your site and see if that works.

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also try changing 0 in both of them to none and see if that works.
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
I was publishing the site to view it because the previewer hardly ever works. However, I completely redid my background image and that seemed to have fixed it...?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, the line isn't there anymore, but now your whole custom your footer is gone.
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
Yeah unfortunately the client didn't want it so... it's gone... But the line is gone too, so that's happy :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Okay, I am glad you're happy and that it is fixed! If you need any more help let me know.
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
Thanks Nathan! I love Yola! I have just signed up to be a Yola Expert actually. Are there any tips you wold give me?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm not an expert but are you talking about CSS tips? I know CSS and CSS3 and HTML so you can ask me anything about it! :)
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
Well if you just had any comments on the site design or ways I could improve. Where did you learn CSS3?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Well, I just use it and some how I just learn it. I don't have CSS3 all the way down but I do knows lots of CSS3 features. Such as border-radius, box-shadow, text-shadow, and much more. I hope all browsers are equipped with CSS3 someday so everyone can get the cool CSS 3 features!

Also they have lots of stuff about CSS3 on www.css3.info

Sincerely,
Nathan
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
thanks!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem!