JustMike Posted September 29, 2013 Share Posted September 29, 2013 (edited) Hi!I am working at a wordpress theme and I have a problem that I can't figure out.This is the the HTML code I have: <!-- this is in the header.php file --> <div class="logo"> <div class="logo-inner"> <a href="<?php echo get_option('home'); ?>"><img src="LOGO_HERE" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a> <span><a href="AD_URL" target="_blank"><img src="AD_IMG"/></a></span> </div> </div><div id="page-wrap"> <div class="content"><!-- this is in index.php, single.php, page.php and so on --><div class="leftside-content"><!-- the loop here --></div><!-- and this is in the footer.php file --></div><?php get_sidebar(); ?> <div id="footer"> <center>©<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/> <?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center> </div></div> And here is my CSS code: #page-wrap { width: 960px;margin: 20px auto;}.logo{width: 100%;position: absolute;z-index: 999;}.logo-inner{width: 1050px;margin: auto;}.logo-inner span{float: right;z-index: -999;}.content{margin-top: 90px;padding-top: 30px;margin-bottom: 10px;width: 960px;background: white;outline:rgba(0, 0, 0, 0.1) solid 6px;position: absolute;z-index: 8;}.leftside-content{width: 620px;margin-top: 10px;margin-left: 5px;float: left;z-index: -1;}#sidebar{margin-top: 110px;margin-right: -25px;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;background: url('images/scribble_light.png');outline:rgba(0, 0, 0, 0.1) solid 6px;width: 280px;float: right;position: relative;z-index: 9;}#footer{background: url('images/footer_bg.png') repeat-x;width: 900px;height: 25px;top:100%;clear: both;position: absolute;z-index: 10;} I can't figure out how to make the footer to stay under the page-wrap div, on the bottom of the page.The clear property clear doesn't work, I also tried with overflow: auto in the page-wrap, positioning the footer, :after for the page-wrap and :before for the footer, I also put the footer div after the page-wrap div.Here is a picture of the design with the current code: Thanks in advance for your help! Edited September 29, 2013 by JustMike Link to comment Share on other sites More sharing options...
davej Posted September 29, 2013 Share Posted September 29, 2013 OK, I don't know how this works at all because you have //comments mixed into your HTML. The comments in HTML are different than in Php or Javascript codeblocks. http://www.w3schools.com/tags/tag_comment.asp Link to comment Share on other sites More sharing options...
JustMike Posted September 29, 2013 Author Share Posted September 29, 2013 Sorry for the comments, I copied the code from the wordpress theme files (wich are php files) and paste it here. Link to comment Share on other sites More sharing options...
davej Posted September 29, 2013 Share Posted September 29, 2013 (edited) You have position absolute on the footer. Delete that. After removing the Php (which is useless to me) I end up with the following... but I need you to add some lorem ipsum content so that it will make more sense. <!DOCTYPE><html><meta charset="utf-8"><head><title>title</title><style>#page-wrap { width: 960px;margin: 20px auto;}.logo{width: 100%;position: absolute;z-index: 999;}.logo-inner{width: 1050px;margin: auto;}.logo-inner span{float: right;z-index: -999;}.content{margin-top: 90px;padding-top: 30px;margin-bottom: 10px;width: 960px;background: white;outline:rgba(0, 0, 0, 0.1) solid 6px;position: absolute;z-index: 8;}.leftside-content{width: 620px;margin-top: 10px;margin-left: 5px;float: left;z-index: -1;}#sidebar{margin-top: 110px;margin-right: -25px;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;background: url('images/scribble_light.png');outline:rgba(0, 0, 0, 0.1) solid 6px;width: 280px;float: right;position: relative;z-index: 9;}#footer{background: url('images/footer_bg.png') repeat-x;width: 900px;height: 25px;/*top:100%;*/clear: both;/*position: absolute;*/z-index: 10;}</style></head><body><div class="logo"><div class="logo-inner"><a href="#"><img src="LOGO_HERE" alt="LOGO_HERE" title="TITLE"/></a><span><a href="#" target="_blank"><img src="#"/></a></span></div></div><div id="page-wrap"><div class="content"><div class="leftside-content"></div></div><p>php get_sidebar</p><div id="footer"><center>©bloginfo_name year <br/>bloginfo_name* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center></div></div></body></html> You shouldn't need to use z-index except rarely. <center> is an obsolete tag. Images don't have title attributes. Oh, also position absolute on the content div must be deleted. Edited September 29, 2013 by davej Link to comment Share on other sites More sharing options...
JustMike Posted September 29, 2013 Author Share Posted September 29, 2013 It's still not working properly. I think that the position from the content div and the position from the sidebar div is messing up de clear property from the footer. Here is a html version of this: theme_work_html.zip Link to comment Share on other sites More sharing options...
davej Posted September 29, 2013 Share Posted September 29, 2013 (edited) OK, let me look at this zipped file. Was this your starting point or is this what you wrote? Edited September 29, 2013 by davej Link to comment Share on other sites More sharing options...
dsonesuk Posted September 29, 2013 Share Posted September 29, 2013 (edited) The title attribute is used on most element except for very few, in fact it used to be the case (don't know if it still applies) that FF would not show the alt attribute text when you hover over a image, only the title text. edit: it still applies. Edited September 29, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
JustMike Posted September 29, 2013 Author Share Posted September 29, 2013 The code is wrote by me, and I got stuck at the footer section. Link to comment Share on other sites More sharing options...
davej Posted September 29, 2013 Share Posted September 29, 2013 (edited) Ok, I'm not sure what your intent is regarding left-side content. Are you also going to have a right-side content? Here is something to look at... * { margin: 0; padding: 0;}html,body{ height: 100%; min-height: 450px; /* height of page content */}body{ background: url('images/60degree_gray.png');}#mainwrapper{ min-height: 100%; margin: 0 0 -40px 0; /* negative equal to footer height+padding */}#page-wrap { width: 960px; margin: 20px auto; height: 100%;}.tmenu{ width: 100%; background-color: rgba(75, 73, 71, 0.7); height: 24px; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; /*position: relative; */ /*border-bottom: 1px solid #4b4947; */ color: #fff;}.tmenu a{ color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; /* text-shadow: 1px 1px 0px #283744; */ font-family: Philosopher;}.tmenu ul{ padding: 0; margin: 0 auto; width: 600px; height: 60px; color: #fff; }.tmenu li{ display: inline; float: left; color: #fff; }.tmenu li:hover{ background-color: orange;}.logo{ width: 100%; position: absolute; z-index: 999;}.logo-inner{ width: 1050px; margin: auto;}.logo-inner span{ float: right; z-index: -999;}.content{ margin-top: 90px; padding-top: 30px; margin-bottom: 10px; width: 960px; background: white; outline:rgba(0, 0, 0, 0.1) solid 6px; /*position: absolute;*/ z-index: 8; overflow:hidden;}.leftside-content{ width: 600px; margin: 10px 10px; float: left; z-index: -1;/*border:1px dotted red;*/}#sidebar{ margin-top: 10px; margin-right: 20px; padding: 10px 10px; background: url('images/scribble_light.png'); outline:rgba(0, 0, 0, 0.1) solid 6px; width: 280px; float: right; position: absolute; right:10px; top: 150px; z-index: 999;}#sidebar h2{ margin-top: 3px; font-family: Lobster; font-weight: 500; /*border-bottom: 1px solid #d85c30;*/ color: #d85c30;}#sidebar ul li { list-style: none;}#social a{ text-decoration: none;}#social a:hover { background-color: transparent; opacity:0.7; text-decoration: none;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}#footer{ background: url('images/footer_bg.png') repeat-x; /*width: 100%;*/ height: 25px; clear: both; text-align: center; padding-top:15px; } and <!DOCTYPE html><html><head><title>Page Title</title><link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/><link href='style.css' rel='stylesheet' type='text/css'/> </head><body><div id="mainwrapper"><!-- Top Menu START --><div class="tmenu"> <ul> <li><a href="">Home</a></li> <li><a href="">Forums</a></li> <li><a href="">Snippets</a></li> <li><a href="">Reference</a></li> <li><a href="">Download</a></li> </ul></div><!-- Top Menu END --> <!-- Logo and Ad START --><div class="logo"><div class="logo-inner"> <a href="index.html"><img src="images/logo.png" title="SITE_NAME"/></a> <span><a href="AD_LINK" target="_blank"><img src="images/lf_ad.png" title="AD_NAME"/></a></span></div></div><!-- Logo and Ad END --> <!-- Page content START --><div id="page-wrap"><div class="content"><div class="leftside-content"> <h2><a href="ARTICLE_PAGE">Lorem ipsum</a></h2><p><b>leftside-content</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dolor metus. Nulla tincidunt blandit nibh. Morbi consequat, risus sed tristique dignissim, velit mi pulvinar ligula, id commodo eros lorem quis nibh. Maecenas vehicula nec quam quis vehicula. Fusce ac purus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quam purus, pretium et porta id, pretium at velit. Proin in mi diam. Ut porttitor et turpis non ultricies.Fusce pellentesque, mi id mollis condimentum, augue ligula ultrices nisl, sit amet gravida metus odio nec nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ornare id felis a interdum. Nullam imperdiet blandit accumsan. Ut vulputate magna nulla, vitae placerat nulla varius ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et ipsum a neque volutpat posuere.</p></div><div id="sidebar"><div id="social"> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"> <img border="0" src="images/social/rss.png" style="margin-right:1px;" alt="Icon"/> </a> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"> <img border="0" src="images/social/rss-email.png" style="margin-right:1px;" alt="Icon"/> </a> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"> <img border="0" src="images/social/facebook.png" style="margin-right:1px;" alt="Icon"/> </a> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"> <img border="0" src="images/social/twitter.png" style="margin-right:1px;" alt="Icon"/> </a> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"> <img style="margin-right:1px;" src="images/social/google-plus.png"/> </a> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"> <img style="margin-right:1px;" src="images/social/pinterest.png" alt="Follow Me on Pinterest" /> </a> </div> <br/> <h2>First Menu</h2> <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul></div></div></div></div></div><!-- Page Content END --> <!-- Footer Area START --><div id="footer"> © SITE_NAME | 2013</div> <!-- Footer Area END --></body> </html> --EDIT-- I have updated the code above once again. Edited October 1, 2013 by davej Link to comment Share on other sites More sharing options...
JustMike Posted September 29, 2013 Author Share Posted September 29, 2013 I was thinking that I need the leftside-column div to make the content to stay in the leftsite of the content div or it will go under the sidebar div. Yes, the problem is that I can't make the sidebar to hang over the right border and the sticky footer to stay in his place. Link to comment Share on other sites More sharing options...
davej Posted September 29, 2013 Share Posted September 29, 2013 (edited) Well, what I don't understand about a sticky footer is whether you can make the content height auto-adjusting. Maybe that is accomplished when you have a "push" div? Edited September 29, 2013 by davej Link to comment Share on other sites More sharing options...
JustMike Posted September 30, 2013 Author Share Posted September 30, 2013 The sticky footer stay at the bottom of the page either if you have ten paragraphs either you have one paragraph. Link to comment Share on other sites More sharing options...
davej Posted September 30, 2013 Share Posted September 30, 2013 (edited) In my code above you have to set the height of the content to protect the content from the sticky-footer. It won't auto-adjust if you add content. To make it auto-adjust I think you have to add a "push" div at the bottom of the page. Edited September 30, 2013 by davej Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2013 Share Posted September 30, 2013 The push div, is primarily used to prevent overlap of content by footer, the height of footer and push div are usually set together, but you have used minus bottom margin on #mainwrapper so you don't need push, BUT! you have not allowed for border-width, this allows 12px of overlap to occur, well in FF anyway. Link to comment Share on other sites More sharing options...
davej Posted September 30, 2013 Share Posted September 30, 2013 Where does this extra 12px go? Adding it to the negative margin doesn't work. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2013 Share Posted September 30, 2013 You have two misplaced closing div tags, using minus bottom margin does not seem to work how it should, i've never done it this way, i have used the minus top margin of height of footer to position the footer. Yours seem to work correctly, if you use margin-bottom: -25px; same height as footer on mainwrapper, and remove top padding from footer, which seems to correct the overlapping problem (and removed extra closing divs), not checked in other browsers mind you. Link to comment Share on other sites More sharing options...
davej Posted October 1, 2013 Share Posted October 1, 2013 Oh heck, somehow I left those two divs. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 1, 2013 Share Posted October 1, 2013 I changed it to what i know works, yours with #mainwrapper minus margin-bottom: looks like it should work, but you are not working with full height of browser screen, which throws up problems getting the footer to show correctly without jumping up and down, also the padding on footer, caused overlap problem as well, overflow-y is added to html to prevent page jumping right to left when scrollbar appears. * { margin: 0; padding: 0;}html,body{ height: 100%; min-height: 450px; /* height of page content */}body{ background: url('images/60degree_gray.png'); }html{overflow-y: scroll;}#mainwrapper{ min-height: 100%; min-width:1062px; position:relative;}#page-wrap { width: 960px; margin: 14px auto; height: 100%;}.tmenu{ width: 100%; background-color: rgba(75, 73, 71, 0.7); height: 24px; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; color: #fff;}.tmenu a{ color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; /* text-shadow: 1px 1px 0px #283744; */ font-family: Philosopher;}.tmenu ul{ padding: 0; margin: 0 auto; width: 600px; height: 60px; color: #fff; }.tmenu li{ display: inline; float: left; color: #fff; }.tmenu li:hover{ background-color: orange;}.logo{ width: 100%; position: absolute; z-index: 999;}.logo-inner{ width: 1050px; margin: auto;}.logo-inner span{ float: right; z-index: -999;}.content{ margin-top: 90px; padding-top: 30px; margin-bottom: 10px; width: 960px; background: white; outline:rgba(0, 0, 0, 0.1) solid 6px; /*position: absolute;*/ z-index: 8; overflow:hidden;}.leftside-content{ width: 600px; margin: 10px 10px; float: left; z-index: -1;/*border:1px dotted red;*/}#sidebar{ margin-top: 10px; margin-right: 20px; padding: 10px 10px; background: url('images/scribble_light.png'); outline:rgba(0, 0, 0, 0.1) solid 6px; width: 280px; float: right; position: absolute; right:10px; top: 150px; z-index: 999;}#sidebar h2{ margin-top: 3px; font-family: Lobster; font-weight: 500; /*border-bottom: 1px solid #d85c30;*/ color: #d85c30;}#sidebar ul li { list-style: none;}#social a{ text-decoration: none;}#social a:hover { background-color: transparent; opacity:0.7; text-decoration: none;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}#footer{ background: url('images/footer_bg.png') repeat-x; text-align: center; overflow:hidden; margin-top: -40px; } #footer, #push {height: 40px; clear: both;} p, h1, h2, h3, h4, h5, h6 {margin: 0.9em 0;} <!DOCTYPE html><html><head><title>Page Title</title><link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/><link href='styleDavej.css' rel='stylesheet' type='text/css'/> </head><body><div id="mainwrapper"><!-- Top Menu START --><div class="tmenu"> <ul> <li><a href="">Home</a></li> <li><a href="">Forums</a></li> <li><a href="">Snippets</a></li> <li><a href="">Reference</a></li> <li><a href="">Download</a></li> </ul></div><!-- Top Menu END --> <!-- Logo and Ad START --><div class="logo"><div class="logo-inner"> <a href="index.html"><img src="images/logo.png" title="SITE_NAME"/></a> <span><a href="AD_LINK" target="_blank"><img src="images/lf_ad.png" title="AD_NAME"/></a></span></div></div><!-- Logo and Ad END --> <!-- Page content START --><div id="page-wrap"><div class="content"><div class="leftside-content"> <h2><a href="ARTICLE_PAGE">Lorem ipsum</a></h2><p><b>leftside-content</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dolor metus. Nulla tincidunt blandit nibh. Morbi consequat, risus sed tristique dignissim, velit mi pulvinar ligula, id commodo eros lorem quis nibh. Maecenas vehicula nec quam quis vehicula. Fusce ac purus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quam purus, pretium et porta id, pretium at velit. Proin in mi diam. Ut porttitor et turpis non ultricies.Fusce pellentesque, mi id mollis condimentum, augue ligula ultrices nisl, sit amet gravida metus odio nec nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ornare id felis a interdum. Nullam imperdiet blandit accumsan. Ut vulputate magna nulla, vitae placerat nulla varius ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et ipsum a neque volutpat posuere.</p></div></div> </div> <div id="push"> </div><div id="sidebar"><div id="social"> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"> <img border="0" src="images/social/rss.png" style="margin-right:1px;" alt="Icon"/> </a> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"> <img border="0" src="images/social/rss-email.png" style="margin-right:1px;" alt="Icon"/> </a> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"> <img border="0" src="images/social/facebook.png" style="margin-right:1px;" alt="Icon"/> </a> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"> <img border="0" src="images/social/twitter.png" style="margin-right:1px;" alt="Icon"/> </a> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"> <img style="margin-right:1px;" src="images/social/google-plus.png"/> </a> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"> <img style="margin-right:1px;" src="images/social/pinterest.png" alt="Follow Me on Pinterest" /> </a> </div> <br/> <h2>First Menu</h2> <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul></div></div><!-- Page Content END --> <!-- Footer Area START --><div id="footer"> <p>© SITE_NAME | 2013</p></div> <!-- Footer Area END --></body> </html> Link to comment Share on other sites More sharing options...
JustMike Posted October 1, 2013 Author Share Posted October 1, 2013 Thank you! Now it is working how I wanted it to work. Link to comment Share on other sites More sharing options...
davej Posted October 1, 2013 Share Posted October 1, 2013 Yes, I like the automatic sticky footer better than my hack. I think you still need to style your image links to avoid the blue border in IE. Link to comment Share on other sites More sharing options...
JustMike Posted October 1, 2013 Author Share Posted October 1, 2013 Yes, in IE the logo and the ad have a blue border and the outline doesn't show, but in Firefox, Opera and Chrome works great. Right now I'm searching a solution for the border and for the outline. Link to comment Share on other sites More sharing options...
davej Posted October 1, 2013 Share Posted October 1, 2013 I think you just style the anchor image to have a border of none. Link to comment Share on other sites More sharing options...
JustMike Posted October 1, 2013 Author Share Posted October 1, 2013 Yes, it's working with the border: none; for the images. Thank you! Link to comment Share on other sites More sharing options...
dsonesuk Posted October 1, 2013 Share Posted October 1, 2013 Heres al side panel that will merge with text content when page width reduced. Theres a problem in opera using outline it will show through overlapping elements, so i had to use semi-transparent background instead. * { margin: 0; padding: 0;}html{ height: 100%;}body{ background: url('images/60degree_gray.png'); height: 100%;}html{overflow-y: scroll;}p, h1, h2, h3, h4, h5, h6 {margin: 0.9em 0;}img {border: none;}#page-wrap { margin: 84px auto 12px; padding: 1px; position: relative; width: 90%;}.tmenu{ width: 100%; background-color: rgba(75, 73, 71, 0.7); height: 24px; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; position: relative; border-bottom: 1px solid #4b4947; color: #fff;}.tmenu a{ color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; text-shadow: 1px 1px 0px #283744; font-family: Philosopher;}.tmenu ul{ padding: 0; margin: 0 auto; width: 600px; height: 60px; color: #fff; }.tmenu li{ display: inline; float: left; color: #fff; }.tmenu li:hover{ background-color: orange;}.logo{ width: 100%; position: absolute; z-index: 999; }.logo-inner{ width: 1050px; margin: auto;}.logo-inner span{ float: right; z-index: -999;}.content { background: none repeat scroll 0 0 white; margin: 5px;}.leftside-content { padding: 30px 8px 1px; text-align: justify;}#sidebar{ background: url("images/scribble_light.png") repeat scroll 0 0 #ffffff; float: right; margin: 80px -33px 6px 14px; outline: 6px solid rgba(0, 0, 0, 0.1); padding: 10px; width: 280px; position: relative;}#sidebar h2{ margin-top: 3px; font-family: Lobster; font-weight: 500; border-bottom: 1px solid #d85c30; color: #d85c30;}#sidebar ul li { list-style: none;}#social a{ text-decoration: none;}#social a:hover { background-color: transparent; opacity:0.7; text-decoration: none;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}#footer{ background: url('images/footer_bg.png') repeat-x; text-align: center; overflow:hidden; margin-top: -40px; } #footer, #push {height: 40px; clear: both;} #wrapper {min-height: 100%; } #wrapper, .logo {min-width:1095px;}#page-wrap-inner { background-color: rgba(0, 0, 0, 0.1); margin: 0 auto; padding: 1px; width: 972px;} <!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Page Title</title> <link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/> <link rel="stylesheet" href="styleb.css" type="text/css" /> </head> <body> <div id="wrapper"> <!-- Top Menu START --> <div class="tmenu"> <ul> <li><a href="">Home</a></li> <li><a href="">Forums</a></li> <li><a href="">Snippets</a></li> <li><a href="">Reference</a></li> <li><a href="">Download</a></li> </ul> </div> <!-- Top Menu END --> <!-- Logo and Ad START --> <div class="logo"> <div class="logo-inner"> <a href="index.html"><img src="images/logo.png" title="SITE_NAME" alt="SITE_NAME"/></a> <span><a href="AD_LINK" target="_blank"><img src="images/lf_ad.png" title="AD_NAME" alt="AD_NAME" /></a></span> </div> </div> <!-- Logo and Ad END --> <!-- Page content START --> <div id="page-wrap"> <div id="sidebar"><div id="social"> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img src="images/social/rss.png" style="margin-right:1px;" alt="Icon"/></a> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img src="images/social/rss-email.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img src="images/social/facebook.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img src="images/social/twitter.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="images/social/google-plus.png" alt="Icon"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="images/social/pinterest.png" alt="Follow Me on Pinterest" /></a> </div><br/><h2>First Menu</h2><ul><li>First Item</li><li>Second Item</li><li>Third Item</li></ul> </div> <div id="page-wrap-inner"> <div class="content"> <div class="leftside-content"> <h2><a href="ARTICLE_PAGE">Lorem ipsum</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dolor metus. Nulla tincidunt blandit nibh. Morbi consequat, risus sed tristique dignissim, velit mi pulvinar ligula, id commodo eros lorem quis nibh. Maecenas vehicula nec quam quis vehicula. Fusce ac purus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quam purus, pretium et porta id, pretium at velit. Proin in mi diam. Ut porttitor et turpis non ultricies.Fusce pellentesque, mi id mollis condimentum, augue ligula ultrices nisl, sit amet gravida metus odio nec nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ornare id felis a interdum. Nullam imperdiet blandit accumsan. Ut vulputate magna nulla, vitae placerat nulla varius ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et ipsum a neque volutpat posuere.Aliquam vestibulum tortor nec posuere tincidunt. Etiam vestibulum, nibh non adipiscing mollis, turpis dolor mollis nunc, non posuere orci risus in sapien. Vivamus eros risus, ultrices et tristique non, lacinia et ipsum. Etiam semper, ligula et tempor tincidunt, magna sapien porta quam, sed tempor diam turpis in eros. Sed sed magna nisl. Vestibulum egestas, dui nec bibendum dictum, ligula velit commodo magna, a luctus eros lacus sit amet libero. Aenean placerat sed tortor quis volutpat. Etiam id massa quis nisl eleifend pretium id sit amet leo.Phasellus pretium rutrum nibh sit amet vulputate. In diam lectus, aliquet eu ligula in, laoreet cursus mauris. Aenean a odio velit. Maecenas eu dui aliquet, convallis dui eleifend, volutpat nulla. Nunc sed est sodales, mollis mi at, pretium sapien. Etiam convallis eleifend ante sed volutpat. Aliquam erat volutpat. Etiam egestas nulla vitae arcu condimentum, vel venenatis leo egestas. Curabitur tellus neque, venenatis non iaculis quis, auctor sit amet tellus. Mauris orci odio, lacinia id neque quis, congue dignissim orci. Nullam velit turpis, interdum non facilisis pretium, suscipit quis lectus. Curabitur consequat fermentum ultrices. Praesent vitae massa sollicitudin, dapibus tortor elementum, tincidunt sem. Phasellus venenatis enim leo, at sodales felis ullamcorper ac. Nullam venenatis libero ligula, vel tincidunt sem euismod at.Suspendisse tempus odio sed nulla sodales, sit amet malesuada ligula mattis. Praesent tincidunt nunc nisl, ullamcorper laoreet turpis ultricies eu. Sed at quam rhoncus, imperdiet metus in, facilisis orci. Mauris sed justo eget sapien placerat molestie. Morbi faucibus leo quis augue suscipit laoreet. Vivamus sed elit at neque elementum ullamcorper et ut felis. Donec feugiat auctor ultrices. Praesent vulputate dui ligula, ullamcorper eleifend quam fringilla ac. Sed mollis neque non nisi sagittis elementum. Duis faucibus ut orci ac placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> </div> </div> </div><div id="push"> </div> <!-- Page Content END --> </div> <!-- Footer Area START --> <div id="footer"><p>© SITE_NAME | 2013</p></div> <!-- Footer Area END --> </body> </html> 1 Link to comment Share on other sites More sharing options...
davej Posted October 2, 2013 Share Posted October 2, 2013 (edited) Dsonesuk was right about the title attribute on the image. It does work and provides a little "tooltip" text bubble. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title Edited October 2, 2013 by davej 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now