Footer Organization

HTML & CSS
1

Hi this is a site from printfection, I’m stuck at how to make another line separate from the 4 columns that already exist. I want to make a separate line at the bottom of the 4 columns and centered for copyright and such.

Is there a way to make the top part of the website not have a big space from the banner?

http://www.koreanswag.com/

Thanks.

#logo{padding-left:20px; padding-top:20px; padding-bottom:2px; text-align:left}


body { background-color:#b7e6f0; center top }

#logo {background: transparent !important; text-align: left; padding-top: 115px;  margin-bottom: -5px;  border-bottom: 0px solid #000}
#header {background-image:url('https://lh3.googleusercontent.com/-4682m_Djpfc/UWDeNgtoHBI/AAAAAAAAAK4/k0D5-_1e_zU/s960/Korean_Swag_Banner.png'); transparent !important; height: 300px; border-bottom: 0px solid #000; margin-top:-30px}
#topbar {background-color:#4199ac; top center !important; margin-top: -35px; margin-bottom: -220px; display: none;}


.store-bar-wrapper {background-image:none; display: none; border: 0px; margin-top:-30px}
.store-placehold {display: none; border: 0px; margin-top:-30px}
.store-placeholder {display: none; border: 0px;}
#store-bar {background-image:none; display: none; border: 0px; margin-top:-30px}
#store-bar .logo {background-image:none; display: none}


#breadcrumb{background:#b7e6f0; background-image:url(); color:#000}
.breadcrumbLink {}

.productImage {border: 2px solid #000000;}
a:hover img.productImage{border: 2px dotted red;}

.sectionsTD1, .sectionsTable2 {padding-top: 0px; vertical-align: top}

.sectionsTD1{padding: 0px; border: 1px solid #b3b3b3;}



#navcontainer{margin-top:0;padding:0;text-align:center}
#navcontainer ul{background:#00a4bc;border-bottom:7px solid #fff;color:#333;height:30px;line-height:30px;margin:0px !

important;padding-left:26%;padding-right:15%}
#navcontainer ul #active a{border-left:1px solid #fff}
#navcontainer ul li{display:inline;font-size:13px;font-weight:bold;margin:0px}
#navcontainer ul li a{background:#00a4b8;border-right:1px solid #fff;color:#fff;float:left;text-align:center;text-

decoration:none;width:20%}
#navcontainer ul li a:hover{background:#00c4d5;color:#fff}


.h4 {color:#585858;}

#menucol{background-color:#fff; background-color:; padding-left: 15px}
 .menuLink {width: 177px; padding-left: 15px;}
.menuTable {}
.menuSelectedText {}
.menuLevel1 {}
.menuLevel2 {}
#menucol, .menuTable, .menuTable td{width:15%}


#maincol {border-left: 1px dotted#b3b3b3!important; padding-right:20px; padding-left: 20px; padding-bottom: 20px}

.sectionTitleText{display: none}

.footer {display:none}
#footer{height:50px; width: 100%}
#footer{background-color:#ffffff; background-image:url()}

#footer {background: #dff4ff; width: 960px; height: 200px; margin: 0 auto; padding: 40px 0px 40px 70px; border: 1px dotted

#b3b3b3}
.wrap {width: 212px; float: left;}

#footer ul {margin: 0; padding: 0 0 0 10px; list-style: none; color: #52a5ce}
#footer li, #footer p {font: 1.0em/1.4 sans-serif; }
#footer a {color: #52a5ce; text-decoration: none;}
#footer h2 {margin: 0 0 12px 0; color:#51799f; font: 1.2em verdana, sans-serif; text-transform: uppercase; font-weight: normal;}
#footer p {width: 160px; float: left; padding-left:10px; color: white; margin: 0;}

#footerBarLinks {background-image:none; display: none; text-decoration:none;}
#footerVerticalBar {background-image:none; display: none; text-decoration:none;}
.footerBarLinks:link {display: none}
.footerVerticalBar {display: none}

#content{clear:both; margin-top:0px; padding:5px; _padding:0px; margin-bottom:20px; text-align:left; border-bottom: 2px dotted

#000000}
#cImage{margin-left:auto; margin-right:auto; float: right; border: 2px solid #000000; padding:5px}
#cDesc{margin-top:20px; margin-left: 50px; font-size:12pt}
#cName {font-size: 20pt}

.grayText {background-image:none; display: none}
.footerLinks {background-image:none; display: none}

.sendLink {font-weight: bold, font-size: 18px}
.sendDiv {text-align: center}

#contentwrap{display: block; width: 99%;  text-align: right; padding-top: 0; margin-bottom: 0; }

#copyright{
float:none;
text-align:center;
}

<link rel="icon" type="image/jpeg" href="https://lh3.googleusercontent.com/-d_8mz-

y2yAs/UWDeGDjmwcI/AAAAAAAAAKw/csVoBGUi6Zc/s16/favicon.jpg" />
<link href="https://lh3.googleusercontent.com/-d_8mz-y2yAs/UWDeGDjmwcI/AAAAAAAAAKw/csVoBGUi6Zc/s16/favicon.jpg" rel="shortcut icon" />


<table id="page" cellSpacing=0 cellPadding=0 width=960 border=0>   <tbody>
    <tr>
      <td id="header" vAlign="center" colSpan=2><div id="logo"><a  title="##storename##"

href="##storeurl##">##logo##</a></div></td>
<!-- for horizontal panel -->
<TR>
<TD id="navcontainer" colSpan=2>
<ul id="navlist2">
<li id="active"><a href="http://www.koreanswag.com" title="">Home</a></li>
<li><a href="http://www.koreanswag.com/About-Us/_s_559079" title="">About Us</a></li>
<li><a href="http://www.koreanswag.com/help/store_help/" title="">Help</a></li>
<li><a href="https://www.printfection.com/krswag?store_page=cart" title="">Shopping Cart</a></li>
</ul>
</TD></TR>

    </td>
    </tr>
    <tr>
     <td id="breadcrumb" colSpan=2>##breadcrumb##</td>
    </tr>
    <tr>
      <td id="menucol" vAlign="top">##menuwrapper##
        <h4>Store Categories:</h4>
        ##menu## ##menuwrapper##
        <h4>Store Menu: </h4>
        <table width="100%" cellpadding="0" style='border-collapse:collapse' class='menuTable'>
          <tr>
            <td><a href="##storeurl##" class="menuLink menuLevel1">Store Home</a></td>
          </tr>
          <tr>
            <td><a href="##shoppingcarturl##" class="menuLink menuLevel1">Shopping Cart</a></td>
          </tr>
          <tr>
            <td><a href="##storehelpurl##" class="menuLink menuLevel1">Store Help</a></td>
          </tr>
        </table>
        ##pricingmenuwrapper##
        <h4>Shop by price:</h4>
        ##pricingmenu## ##pricingmenuwrapper##
        <div id="prop"></div></td>
      <td id="maincol" vAlign="top">##content##
        <div id="prop1"></div></td>
    </tr>
    <tr>
      <td id="footer" colSpan=2>
<div class="wrap">
<h2>Our Products</h2>
<ul class="menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>

<div class="wrap">
<h2>krS Useful Links</h2>
<ul class="menu">
<li><a href="http://www.koreanswag.com/FAQ/_s_559279">FAQ</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=12">Payment Options</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=3">Shipping & Handling</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=3">Shipping & Handling</a></li>
<li><a href="http://www.koreanswag.com/About-Us/_s_559079">About Us</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>

<div class="wrap">
<h2>Our Services</h2>
<ul class="menu">
<li><a href="http://www.printfection.com/">Printfection</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>

<div class="wrap">
<h2>Sponsors</h2>
<ul class="menu">
<li><a href="http://www.printfection.com/">Printfection</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>



</td>
    </tr>

  </tbody>
</table>





<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-39855415-1', 'koreanswag.com');
  ga('send', 'pageview');

</script>

<SCRIPT src="http://www.australele.com/usw/js/tp-jq.js" type=text/javascript> </script>
<SCRIPT src="http://www.australele.com/usw/js/showback.js" type=text/javascript> </script>	





<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript">
</script>
<script type="text/javascript">
var headtext = "This design also available on:";
var newsize = 60;
</script>
<script src="http://www.australele.com/usw/js/minilist.js" type="text/javascript">
</script>


<script src="http://www.australele.com/usw/js/tp-jq.js" type=text/javascript></script>
<script>
var eMessage = "Hey Buddy, \
\
I found this really cool shirt at Korean Swag that I thought you might like. Check it out: ";
var eSubject = "Cool Shirts at Korean Swag";
var eText = "Tell a friend about this shirt";
</script>
<script src="http://www.australele.com/usw/js/sendfriend.js"></script>
2

Hi lovekr. Welcome to the forums. :slight_smile:

It should be easy enough to add/change things, but it’s not clear what you want to do. Can you explain more, or provide an image of how you want it to look?

Are you able to edit the code?

3

Hi ralph,

I am able to edit the code for html and css.

I have an image here to be more specific.

I want to have a place on the footer below all the columns where I can have a place for copyright and such.

Also in the corner on the bottom right I would like to be able to put twitter/facebook icons.

Thanks.

4

Thanks, that image helps, although it’s still not clear what you were asking about the header.

Anyhow, for the footer, the first thing would be to place a div at the bottom of the page. Give it a class of “footer” or similar, and then you can start to organize content within that.

5

So far for the CSS i have:

.footer {display:none}
#footer{height:50px; width: 100%}
#footer{background-color:#ffffff; background-image:url()}

#footer {background: #dff4ff; width: 960px; height: 200px; margin: 0 auto; padding: 40px 0px 40px 70px; border: 1px dotted

#b3b3b3}
.wrap {width: 212px; float: left;}

#footer ul {margin: 0; padding: 0 0 0 10px; list-style: none; color: #52a5ce}
#footer li, #footer p {font: 1.0em/1.4 sans-serif; }
#footer a {color: #52a5ce; text-decoration: none;}
#footer h2 {margin: 0 0 12px 0; color:#51799f; font: 1.2em verdana, sans-serif; text-transform: uppercase; font-weight: normal;}
#footer p {width: 160px; float: left; padding-left:10px; color: white; margin: 0;}

#footerBarLinks {background-image:none; display: none; text-decoration:none;}
#footerVerticalBar {background-image:none; display: none; text-decoration:none;}
.footerBarLinks:link {display: none}
.footerVerticalBar {display: none}

For the HTML i have:

 <tr>
      <td id="footer" colSpan=2>
<div class="wrap">
<h2>Our Products</h2>
<ul class="menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>

<div class="wrap">
<h2>krS Useful Links</h2>
<ul class="menu">
<li><a href="http://www.koreanswag.com/FAQ/_s_559279">FAQ</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=12">Payment Options</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=3">Shipping & Handling</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=3">Shipping & Handling</a></li>
<li><a href="http://www.koreanswag.com/About-Us/_s_559079">About Us</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>

<div class="wrap">
<h2>Our Services</h2>
<ul class="menu">
<li><a href="http://www.printfection.com/">Printfection</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>

<div class="wrap">
<h2>Sponsors</h2>
<ul class="menu">
<li><a href="http://www.printfection.com/">Printfection</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>



</td>
    </tr>

  </tbody>
</table>

When I try to make something for the copyright it doesn’t go where I want it as shown in the picture above.

6

OK, that’s a good start. Make sure to update your link so we can have a look.

[edit]O, sorry, I see you have, though I don’t see the bits you are having trouble with.

It’s a bit of a shame to be using tables, but never mind. You could just create a new table, or table row after table row above, and then add in some cells where you want them. You’ll just want to reduce some of the lage padding on the #footer section.[/edit]

7

Now I added:

<tr><td><center>hello world</center></td></tr>

it shows up as shown in http://www.koreanswag.com/

So right now its not centered and also the text is outside the footer and I want it still inside the footer.

Full footer HTML code:

  <tr>
      <td id="footer" colSpan=2>
<div class="wrap">
<h2>Our Products</h2>
<ul class="menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>

<div class="wrap">
<h2>krS Useful Links</h2>
<ul class="menu">
<li><a href="http://www.koreanswag.com/FAQ/_s_559279">FAQ</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=12">Payment Options</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=3">Shipping & Handling</a></li>
<li><a href="http://www.koreanswag.com/help/article.php?articleid=3">Shipping & Handling</a></li>
<li><a href="http://www.koreanswag.com/About-Us/_s_559079">About Us</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>

<div class="wrap">
<h2>Our Services</h2>
<ul class="menu">
<li><a href="http://www.printfection.com/">Printfection</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>

<div class="wrap">
<h2>Sponsors</h2>
<ul class="menu">
<li><a href="http://www.printfection.com/">Printfection</a></li>
<li><a href="#">Printing Process</a></li>
<li><a href="#">DTG vs Screen-Print</a></li>
<li><a href="#">Got an idea?</a></li>
<li><a href="#">Order in Bulk</a></li>
</ul>
</div>

<tr><td><center>hello world</center></td></tr>

</td>
    </tr>

  </tbody>
</table>

Thanks

8

You can do something like this in the HTML

<tr class="extra">
<td>© 2013</td>
<td>Twitter sstuff</td>
</tr>

and then in your CSS, start with this:


.extra {background: #dff4ff;}

It’s all a bit messy, but that’s tables for you. Reduce the bottom padding on #footer to remove the big gap, and then you can either set widths on those new cessls to position the content, or maybe put some padding on each cell.

9

Ok, I added the new code. How Can I get the copyright text to align to the center I’m still having trouble with that part =|.

Thanks.

10

If i just add

<tr class=“extra”>
<td>© 2013</td>
</tr>

Then the text is situated near the right and the background doesn’t cover the whole footer.