10 replies [Last post]
Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Alright so lets get the minority question first as per the moderators requests. I am honestly kind of confused on the whole doctypes thing. I didn't design all of the code for my website but noticed that my html has the doctype at the top of the page however my css doesn't. Is there any way to figure this out? My main question has to with social network buttons. Not like the share buttons on the bottom of every page here at csscreator but buttons that lead directly to our Facebook page. Now I now to get these buttons and put them on our webpage. My question is how to put them next to our footer and get them to stay there. My css and html is listed below. Thank you!

Note: I use Weebly which is a simple editor as I am strapped for time much of the time and it makes it easier to switch things up in a flash although I use the advanced editor much of the time as well. Secondly I'm taking a guess that the code has to be added in the area after /*rounded corners*/ text.

Website: www.rxforjunk.com

CSS

body{
  margin:0px;
  padding:0px;
  background:#3A3A3A url(Background.gif) no-repeat fixed top center;
  text-align:center;
  font:11px Verdana,Arial,Helvetica,sans-serif;
}
#container{
  width:700px;
  margin:auto;
  padding-bottom:20px;
}
 
/* basic styles */
h1,h2,h3,h4,h5,h6{
  font-family:Georgia,Verdana,Arial,Helvetica,sans-serif;
  font-weight:lighter;
  margin:10px 0px 0px 0px;
  color:#222;
}
h1{
  font-size:28px;
}
h2{
  font-size:25px;
  color:#0a294f;
}
h3{
  font-size:22px;
  color:#202f0f;
}
h4{
  font-size:18px;
  color:#911322;
}
h5{
  font-size:16px;
  color:#af3d0a;
}
h6{
  font-size:11px;
  font-weight:bold;
  color:#222;
}
del{
  color:#999;
}
acronym{
  /*border-bottom:1px dotted #222;*/
  border:none;
  background:url(dottedborder_dark.gif) repeat-x bottom center;
  padding-bottom:1px;
  cursor:help;
}
hr{
  width:100%;
  border:0;
  margin:5px 0px;
  margin:2px 0px 5px 0px;
  height:1px;
  color:#777;
  background-color:#777;
}
a{
  color:#af2639;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}
 
p{
  line-height:22px;
  margin:5px 0px 15px 0px;
  /*text-align:justify;*/
}
.noborder{
  border:0;
}
/* I can't get <pre> to display inline very well so just use <span class="pre"> */
#content .pre{
  font:11px "Courier New",Courier,sans-serif;
  color:#af454a;
}
 
img{
  border:none;
}
img.floatright,
img.floatleft,
#left img{
  border:1px solid #222;
}
a:hover img.floatright,
a:hover img.floatleft,
#left a:hover img{
  border:1px solid #af2639;
}
 
/* floats, positioning, and widths */
.floatleft{
  float:left;
}
.floatright{
  float:right;
}
.w50{
  width:50%;
}
.floatleft p{
  padding:0px 10px 0px 0px;
}
.floatright p{
  padding:0px 0px 0px 10px;
}
img.floatleft{
  margin:15px 15px 5px 0px;
}
img.floatright{
  margin:15px 0px 5px 15px;
}
 
/* rounded corners */
.tl{background:#222 url(tl.gif) no-repeat top left;}
.tr{background:transparent url(tr.gif) no-repeat top right;}
.br{background:transparent url(br.gif) no-repeat bottom right;}
.bl{background:transparent url(bl.gif) no-repeat bottom left;}
 
.ltl{background:#efefef url(l_tl.gif) no-repeat top left;}
.ltr{background:transparent url(l_tr.gif) no-repeat top right;}
.lbr{background:transparent url(l_br.gif) no-repeat bottom right;}
.lbl{background:transparent url(l_bl.gif) no-repeat bottom left;}
 
/* blockquotes and code*/
blockquote{
  min-height:35px;
  width:100%;
  display:block;
  margin:10px auto;
  background:transparent url(quote.gif) no-repeat 10px 10px;
}
* html blockquote{
  min-height:35px;
  height:auto !important;
  height:35px;
}
blockquote p{
  margin:0px;
  line-height:17px;
  padding:10px 10px 10px 50px;
}
blockquote span{
  color:#999;
  font-size:9px;
  padding-top:5px;
  display:block;
}
blockquote span a{
  color:#555;
  text-decoration:none;
}
blockquote span a:hover{
  text-decoration:underline;
}
blockquote.go{
  background:transparent url(go.gif) no-repeat 10px 50%;
}
blockquote.stop{
  background:transparent url(stop.gif) no-repeat 11px 50%;
}
blockquote.exclamation{
  background:transparent url(exclamation.gif) no-repeat 23px 50%;
}
code{
  display:block;
  width:92%;
  margin:0px auto 15px auto;
  line-height:17px;
}
code .red{
  color:#af454a;
}
 
/* forms */
form select,
form input,
form textarea{
  font:11px Verdana,Arial,Helvetica,sans-serif;
  border:1px solid #888;
}
form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus,
form select:hover,
form select:focus{
  background-color:#f9f9f9;
  /*border:1px dotted #888;  optional thought */
  border:1px solid #444;
}
form select{
  padding:1px;
}
form input{
  padding:1px;
}
form label{
  display:block;
  color:#777
}
form textarea{
  padding:1px;
  line-height:16px;
}
form p{
  margin:10px 0px;
}
 
/* top section */
#top{
  background:url(contentbg.gif) repeat-y top center;
}
 
/* very bottom curve */
#bottom{
  background:url(container_b.gif) no-repeat bottom center;
  height:9px;
}
* html #bottom{
  margin-top:-4px;
}
 
/* header */
#header{
  font:30px Georgia,Verdana,Arial,Helvetica,sans-serif;
  width:680px;
  height:175px;
  margin:auto;
  background:url(%%HEADERIMG%%) no-repeat top center;
  text-align:left;
}
#title{
  margin-top:130px;
  margin-left:13px;
  position:absolute;
  color:#fff;
  background-color:transparent;
  cursor:default;
}
 
/* menubar */
.nav{
  height:40px;
  background-color:#222;
  color:#fff;
  width:680px;
  margin:auto;
  text-align:right;
  font-size:11px;
  cursor:default;
}
.nav2{
  height:40px;
}
#slogan{
  position:absolute;
  margin:11px 0px 0px 15px;
  font-size:14px;
}
#navdiv{
  float:left;
  text-align:right;
}
#navlist{
  list-style-type:none;
  margin:0px;
  padding:11px 8px 0px 0px;
  width:670px;
}
#navlist li{
  display:inline;
}
#navlist li a{
  color:#999;
  font-weight:bold;
  text-decoration:none;
  height:40px;
  padding:8px 12px 14px 0px;
}
#navlist li a:hover{
  color:#bfbfbf;
  /* other thoughts
  border-top:5px solid #fff;
  color:#df521b;
  */
}
#active a:link {
  color:#fff;
}
#active a:hover {
  color:#fff;
}
#active a:visited {
  color:#fff;
}
 
/* content */
#content{
  min-height:400px;
  width:680px;
  margin:auto;
  color:#222;
  text-align:left;
}
* html #content{
  min-height:400px;
  height:auto !important;
  height:400px;
}
#left{
  float:left;
  padding:10px 10px 20px 10px;
  width: 660px;
}
* html #left{
  padding-top:20px;
}
 
/* sidebar */
#right{
  width:190px;
  float:right;
  padding:20px 10px 20px 20px;
}
* html #right{
  padding-top:30px;
}
#right .sideitem{
  margin-bottom:25px;
}
#right .sideitem h4{
  font:12px Georgia,Arial,Helvetica,sans-serif;
  font-weight:bold;
  color:#222;
  width:100%;
  background:#fff url(dottedborder.gif) repeat-x bottom center;
  padding-bottom:3px;
  margin-bottom:13px;
}
#right .sideitem b{
  /*display:block;*/
}
#right .sideitem p{
  padding:0px 5px;
}
#right .sideitem ul{
  margin-left:-4px;
}
 
/* footer */
.footer{
  height:30px;
  width:680px;
  margin:auto;
  color:#fff;
  text-align:left;
  clear:both;
}
.footer div{
  height:30px;
}
#copyright{
  text-align:left;
  float:left;
  padding:8px;
  margin-top:0px !important;
  margin-bottom:-16px;
}
#designcredit{
  float:right;
  text-align:right;
  padding:8px;
  margin-bottom:-16px;
}
#designcredit a{
  color:#9f9f9f;
}
#designcredit a:hover{
  color:#cf262d;
  text-decoration:none;
}
 
 
/****************************** 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: #505050;
  border-right: 1px solid #666666;
  border-left: 1px solid #666666;
  border-bottom: 1px solid #666666;
  text-decoration: none;
  font-size: 11px;
  font-weight: normal;
  line-height:1;
  padding:3px;
  color: #ccc;
}
 
#weebly-menus .weebly-menu li a:hover {
  background: #878787;
}
 
#weebly-menus span.weebly-menu-title {
  display: block;
  padding: 5px 10px;
}
 
#weebly-menus span.weebly-menu-more {
  background: transparent url(<a href="http://images.weebly.com/weebly/images/submenu_arrow.gif" rel="nofollow">http://images.weebly.com/weebly/images/submenu_arrow.gif</a>) no-repeat center top;
  display: block;
  position: absolute;
  right: 5px;
  top: 0;
  font-family: Courier;
  height: 28px;
  line-height: 28px;
  padding:1px 0 3px 0;
}
<code>
 
HTML
 
<code>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 
  <head>
<title>{title}</title>
<meta name="msvalidate.01" content="3FEE0EB2B31DEB11684CEF63D166A56D" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
 
<body>
   <!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img src="http://www.ie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="" /></a></div> <![endif]--> 
</html>
  <div id="container">
    <div id="top">
      <div id="header" class="wsite-header">
        <div id="title">{title}</div><!-- header text -->
      </div>
 
      <div class="nav bl"><div class="nav2 br">
        <div id="navdiv">
          <ul id="navlist">
            {activeitem}<li id="active"><a href="{activeitemlink}">{activeitemtitle}</a></li>{/activeitem}
            {item}<li><a href="{itemlink}">{itemtitle}</a></li>{/item}
          </ul>
        </div>  
      </div></div>
 
      <div id="content">
        <div id="left">
          {content}
        </div>
      </div>
 
      <div class="footer tl"><div class="tr"><div class="br"><div class="bl">
        <div id="copyright"><span id='weeblyFooter'>{footer}</span></div>
      </div></div></div></div>
    </div>
    <div id="bottom">
    </div>
  </div>
</body>
  <!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img src="http://www.ie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="" /></a></div> <![endif]--> 
</html>
 
<code>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

A DTD is only described for

A DTD is only described for the actual page document not for any external objects such as stylesheets.

Positioning 'next to our footer' is a little vague and hard to give clear advice on, you will need to describe how you would like the icons displayed within your layout with a little more precision then someone may be able to provide example code/styles but bear in mind that we won't be able to help with proprietary apps used for managing sites or site builders as I see appears to have provided the basic site, we can only advise on pure code as such.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

So as I understand, I do not

So as I understand, I do not need a doctype in my css? The way some of the posts I was reading were wrote were making it seems like it was required otherwise w3c would not be able to validate them. For my other question though I made a mock up gif file with icons on the bottom paint.net. Let me know if you need any more info.

Mockup Picture: www.rxforjunk.com/example.gif

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Also, if it helps at all, I

Also, if it helps at all, I believe this is the code that needs to be modified.

 
/* rounded corners */
.tl{background:#222 url(tl.gif) no-repeat top left;}
.tr{background:transparent url(tr.gif) no-repeat top right;}
.br{background:transparent url(br.gif) no-repeat bottom right;}
.bl{background:transparent url(bl.gif) no-repeat bottom left;}
 
.ltl{background:#efefef url(l_tl.gif) no-repeat top left;}
.ltr{background:transparent url(l_tr.gif) no-repeat top right;}
.lbr{background:transparent url(l_br.gif) no-repeat bottom right;}
.lbl{background:transparent url(l_bl.gif) no-repeat bottom left;}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

The markup you describe above

The markup you describe above is the structure to create your rounded corners for the footer element; if you want to add content to the footer it will need to be something along these lines.

<div class="footer tl"><div class="tr"><div class="br"><div class="bl">
 
<ul id="social-icon-links">
  <li class="twitter-icon"><a href=""><img src="/your/image/path" alt="" /></a></li>
  <li class="farcebook-icon"><a href=""><img src="/your/image/path" alt="" /></a></li>
</ul>        
 
<div id="copyright"><span id='weeblyFooter'>{footer}</span></div>
 
</div></div></div></div>
 
/* CSS */
#social-icon-links {
 float: right;
 width: 100px;
 }
#social-icon-links li {
 float: right;
 width: 16px; /* size of image */
 height: 16px; /* size of image */
 margin-left: 5px;
 }
#social-icon-links li a {display: block;}

That's a rough untested example but along the lines of what you'll need to add.

You do validate CSS stylesheets, or can do but no you do not place a DTD in the file, a DTD is a Document definition a schema declaration and only belongs to the markup file.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Alright, so I implemented the

Alright, so I implemented the code and played around with it but the best I could adjust is as seen in the screenshot before adjusting the margin-left and the screenshot after graphic for what actually happened when I upped the margin-left. So I guess my question now is how do I move the twitter logo and the margin-left only seemed to move the facebook logo?
Before:

http://www.rxforjunk.com/before.png

and

After:

http://www.rxforjunk.com/after.png

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Except I don't want borders

I don't want borders around my icons either, so I can't implement that in a table cell most likely.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

I should have added

I should have added properties to control margins and padding for the ul and li items. Play around with zeroing margin and paddings as ul and li elements have default values added and also add list-style: none; to the ul to remove the bullets.

A little padding on the li element could work to force a space but equally margins should work.

Not sure why you would have anything in table cell ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

I just posted that because

I just posted that because someone from another css forum reccomended I put them in a table so I wanted to make note of it on both forums that it was not the type of option I was looking for. But I played around with the paddings and margins for a while yesterday without much luck as it would go outside the footer with a low margin or stack the icons on top of each other with a higher margin. I was also having a problem with the icons centering and I seemed to of cleared that up by putting margin-top -5px; underneath the margin-left. As far as list-style, where do add that? I tried putting it the way shown below and it didn't work. In fact, it jumbled all copyright text.

><list-style: none; ul id="social-icon-links">  
 <li class="yelp-icon"><a href=""><img src="yelp.gif" alt="Yelp" /></a></li>
  <li class="twitter-icon"><a href=""><img src="twitter.gif" alt="Twitter" /></a></li>
  <li class="linkedin-icon"><a href=""><img src="linkedin.gif" alt="Linked In" /></a></li>
    <li class="facebook-icon"><a href=""><img src="facebook.gif" alt="Facebook" /></a></li>
</ul>

I've also attached of how they are appearing with the margin-top -5px; added. Thanks!

AttachmentSize
new.png 19.44 KB
Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Just wanted to give an update

Just wanted to give an update but I played around by adding a padding element as well as some of the other script and a few things happened in a few different scenarios. First, the copyright text got bumped below the footer like it thought there wasn't enough room for the text and icons. Secondly, when I tried moving the icons to the left through the margin-left script and it was like the yelp logo which is all the way to the right was anchored because all the logos moved to the left except that one.

Update: Okay, figured this would be better than creating yet another post. So I was looking into what you said about making the bullet dissapear and I found a piece of script that was supposed to make it do so but instead it seems to of fixed my original problem! Now I just need to find out how to make that bullet dissapear. I'll list the fully updated code below so you can see.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 
  <head>
<title>{title}</title>
<meta name="msvalidate.01" content="3FEE0EB2B31DEB11684CEF63D166A56D" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
 
<body>
   <!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img src="http://www.ie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="" /></a></div> <![endif]--> 
</html>
  <div id="container">
    <div id="top">
      <div id="header" class="wsite-header">
        <div id="title">{title}</div><!-- header text -->
      </div>
 
      <div class="nav bl"><div class="nav2 br">
        <div id="navdiv">
          <ul id="navlist">
            {activeitem}<li id="active"><a href="{activeitemlink}">{activeitemtitle}</a></li>{/activeitem}
            {item}<li><a href="{itemlink}">{itemtitle}</a></li>{/item}
          </ul>
        </div>  
      </div></div>
 
      <div id="content">
        <div id="left">
          {content}
        </div>
      </div>
 
      <div class="footer tl"><div class="tr"><div class="br"><div class="bl">
      <div style="list-style:none; margin: 20px; color: white;" align="center">
 
<ul id="social-icon-links">
 
 <li class="yelp-icon"><a href=""><img src="yelp.gif" alt="Yelp" /></a></li>
 
 <li class="twitter-icon"><a href=""><img src="twitter.gif" alt="Twitter" /></a></li>
 
 <li class="linkedin-icon"><a href=""><img src="linkedin.gif" alt="Linked In" /></a></li>
 
 <li class="facebook-icon"><a href=""><img src="facebook.gif" alt="Facebook" /></a></li>
 
</ul>        
        <div id="copyright"><span id='weeblyFooter'>{footer}</span></div>
      </div></div></div></div>
    </div>
    <div id="bottom">
    </div>
  </div>
</body>
  <!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img src="http://www.ie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="" /></a></div> <![endif]--> 
</html>

CSS:

body{
  margin:0px;
  padding:0px;
  background:#3A3A3A url(Background.gif) no-repeat fixed top center;
  text-align:center;
  font:11px Verdana,Arial,Helvetica,sans-serif;
}
#container{
  width:700px;
  margin:auto;
  padding-bottom:20px;
}
 
/* basic styles */
h1,h2,h3,h4,h5,h6{
  font-family:Georgia,Verdana,Arial,Helvetica,sans-serif;
  font-weight:lighter;
  margin:10px 0px 0px 0px;
  color:#222;
}
h1{
  font-size:28px;
}
h2{
  font-size:25px;
  color:#0a294f;
}
h3{
  font-size:22px;
  color:#202f0f;
}
h4{
  font-size:18px;
  color:#911322;
}
h5{
  font-size:16px;
  color:#af3d0a;
}
h6{
  font-size:11px;
  font-weight:bold;
  color:#222;
}
del{
  color:#999;
}
acronym{
  /*border-bottom:1px dotted #222;*/
  border:none;
  background:url(dottedborder_dark.gif) repeat-x bottom center;
  padding-bottom:1px;
  cursor:help;
}
hr{
  width:100%;
  border:0;
  margin:5px 0px;
  margin:2px 0px 5px 0px;
  height:1px;
  color:#777;
  background-color:#777;
}
a{
  color:#af2639;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}
 
p{
  line-height:22px;
  margin:5px 0px 15px 0px;
  /*text-align:justify;*/
}
.noborder{
  border:0;
}
/* I can't get <pre> to display inline very well so just use <span class="pre"> */
#content .pre{
  font:11px "Courier New",Courier,sans-serif;
  color:#af454a;
}
 
img{
  border:none;
}
img.floatright,
img.floatleft,
#left img{
  border:1px solid #222;
}
a:hover img.floatright,
a:hover img.floatleft,
#left a:hover img{
  border:1px solid #af2639;
}
 
/* floats, positioning, and widths */
.floatleft{
  float:left;
}
.floatright{
  float:right;
}
.w50{
  width:50%;
}
.floatleft p{
  padding:0px 10px 0px 0px;
}
.floatright p{
  padding:0px 0px 0px 10px;
}
img.floatleft{
  margin:15px 15px 5px 0px;
}
img.floatright{
  margin:15px 0px 5px 15px;
}
 
/* rounded corners */
.tl{background:#222 url(tl.gif) no-repeat top left;}
.tr{background:transparent url(tr.gif) no-repeat top right;}
.br{background:transparent url(br.gif) no-repeat bottom right;}
.bl{background:transparent url(bl.gif) no-repeat bottom left;}
 
.ltl{background:#efefef url(l_tl.gif) no-repeat top left;}
.ltr{background:transparent url(l_tr.gif) no-repeat top right;}
.lbr{background:transparent url(l_br.gif) no-repeat bottom right;}
.lbl{background:transparent url(l_bl.gif) no-repeat bottom left;}
 
/* blockquotes and code*/
blockquote{
  min-height:35px;
  width:100%;
  display:block;
  margin:10px auto;
  background:transparent url(quote.gif) no-repeat 10px 10px;
}
* html blockquote{
  min-height:35px;
  height:auto !important;
  height:35px;
}
blockquote p{
  margin:0px;
  line-height:17px;
  padding:10px 10px 10px 50px;
}
blockquote span{
  color:#999;
  font-size:9px;
  padding-top:5px;
  display:block;
}
blockquote span a{
  color:#555;
  text-decoration:none;
}
blockquote span a:hover{
  text-decoration:underline;
}
blockquote.go{
  background:transparent url(go.gif) no-repeat 10px 50%;
}
blockquote.stop{
  background:transparent url(stop.gif) no-repeat 11px 50%;
}
blockquote.exclamation{
  background:transparent url(exclamation.gif) no-repeat 23px 50%;
}
code{
  display:block;
  width:92%;
  margin:0px auto 15px auto;
  line-height:17px;
}
code .red{
  color:#af454a;
}
 
/* forms */
form select,
form input,
form textarea{
  font:11px Verdana,Arial,Helvetica,sans-serif;
  border:1px solid #888;
}
form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus,
form select:hover,
form select:focus{
  background-color:#f9f9f9;
  /*border:1px dotted #888;  optional thought */
  border:1px solid #444;
}
form select{
  padding:1px;
}
form input{
  padding:1px;
}
form label{
  display:block;
  color:#777
}
form textarea{
  padding:1px;
  line-height:16px;
}
form p{
  margin:10px 0px;
}
 
/* top section */
#top{
  background:url(contentbg.gif) repeat-y top center;
}
 
/* very bottom curve */
#bottom{
  background:url(container_b.gif) no-repeat bottom center;
  height:9px;
}
* html #bottom{
  margin-top:-4px;
}
 
/* header */
#header{
  font:30px Georgia,Verdana,Arial,Helvetica,sans-serif;
  width:680px;
  height:175px;
  margin:auto;
  background:url(%%HEADERIMG%%) no-repeat top center;
  text-align:left;
}
#title{
  margin-top:130px;
  margin-left:13px;
  position:absolute;
  color:#fff;
  background-color:transparent;
  cursor:default;
}
 
/* menubar */
.nav{
  height:40px;
  background-color:#222;
  color:#fff;
  width:680px;
  margin:auto;
  text-align:right;
  font-size:11px;
  cursor:default;
}
.nav2{
  height:40px;
}
#slogan{
  position:absolute;
  margin:11px 0px 0px 15px;
  font-size:14px;
}
#navdiv{
  float:left;
  text-align:right;
}
#navlist{
  list-style-type:none;
  margin:0px;
  padding:11px 8px 0px 0px;
  width:670px;
}
#navlist li{
  display:inline;
}
#navlist li a{
  color:#999;
  font-weight:bold;
  text-decoration:none;
  height:40px;
  padding:8px 12px 14px 0px;
}
#navlist li a:hover{
  color:#bfbfbf;
  /* other thoughts
  border-top:5px solid #fff;
  color:#df521b;
  */
}
#active a:link {
  color:#fff;
}
#active a:hover {
  color:#fff;
}
#active a:visited {
  color:#fff;
}
 
/* content */
#content{
  min-height:400px;
  width:680px;
  margin:auto;
  color:#222;
  text-align:left;
}
* html #content{
  min-height:400px;
  height:auto !important;
  height:400px;
}
#left{
  float:left;
  padding:10px 10px 20px 10px;
  width: 660px;
}
* html #left{
  padding-top:20px;
}
 
/* sidebar */
#right{
  width:190px;
  float:right;
  padding:20px 10px 20px 20px;
}
* html #right{
  padding-top:30px;
}
#right .sideitem{
  margin-bottom:25px;
}
#right .sideitem h4{
  font:12px Georgia,Arial,Helvetica,sans-serif;
  font-weight:bold;
  color:#222;
  width:100%;
  background:#fff url(dottedborder.gif) repeat-x bottom center;
  padding-bottom:3px;
  margin-bottom:13px;
}
#right .sideitem b{
  /*display:block;*/
}
#right .sideitem p{
  padding:0px 5px;
}
#right .sideitem ul{
  margin-left:-4px;
}
 
/* footer */
.footer{
  height:30px;
  width:680px;
  margin:auto;
  color:#fff;
  text-align:left;
  clear:both;
}
.footer div{
  height:30px;
}
#copyright{
  text-align:left;
  float:left;
  padding:8px;
  margin-top:0px !important;
  margin-bottom:-16px;
}
#designcredit{
  float:right;
  text-align:right;
  padding:8px;
  margin-bottom:-16px;
}
#designcredit a{
  color:#9f9f9f;
}
#designcredit a:hover{
  color:#cf262d;
  text-decoration:none;
}
#social-icon-links {
 float: right;
 width: 100px;
 }
#social-icon-links li {
 float: right;
 width: 16px; /* size of image */
 height: 16px; /* size of image */
 margin-left: 5px;
 margin-top: -5px;
 }
#social-icon-links li a {display: block;}
 
/****************************** 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: #505050;
  border-right: 1px solid #666666;
  border-left: 1px solid #666666;
  border-bottom: 1px solid #666666;
  text-decoration: none;
  font-size: 11px;
  font-weight: normal;
  line-height:1;
  padding:3px;
  color: #ccc;
}
 
#weebly-menus .weebly-menu li a:hover {
  background: #878787;
}
 
#weebly-menus span.weebly-menu-title {
  display: block;
  padding: 5px 10px;
}
 
#weebly-menus span.weebly-menu-more {
  background: transparent url(<a href="http://images.weebly.com/weebly/images/submenu_arrow.gif" rel="nofollow">http://images.weebly.com/weebly/images/submenu_arrow.gif</a>) no-repeat center top;
  display: block;
  position: absolute;
  right: 5px;
  top: 0;
  font-family: Courier;
  height: 28px;
  line-height: 28px;
  padding:1px 0 3px 0;
}

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 25 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Any MOD, please close thread

Any MOD, please close thread as it is getting to long and I figured out my initial problem, thank you.