Advanced Search

Full Width Headline with simple bars to fill the white space

/ Published in: jQuery
Save to your folder(s)
This is a combination of html, css, and jQuery to create a neat little effect that gives a full width headline where the text is surrounded by 1px bars that fill the white space.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // HTML
  2. <p class="introline"><span class="titleline start"></span><span class="headline">Conferences</span><span class="titleline fin"></span></p>
  3.  
  4.  
  5. // CSS
  6. .introline {
  7. 	text-transform:uppercase;
  8. 	color: #a3a3a3;
  9. 	letter-spacing: .5px;
  10. 	font-size: 14px;
  11. 	text-align:center;
  12. 	width:100%;
  13. 	position:relative;
  14. 	margin:0;
  15. 	padding:20px 0;
  16. }
  17. .titleline {
  18. 	border-bottom:1px solid #ddd;
  19. 	position:absolute;
  20. 	width:30%;
  21. 	height:1px;
  22. 	top:50%;
  23. 	display:block;
  24. }
  25. .titleline.start {
  26. 	left:0;
  27. }
  28. .titleline.fin {
  29. 	right:0;
  30. }
  31.  
  32. // jQuery
  33. $("p.introline").each(function(){
  34.     headline_width = $(this).find(".headline").width();
  35.     container_width = $(this).width();
  36.     headline_padding = 20;
  37.     $(this).find(".titleline").width(((container_width-headline_width)/2)-headline_padding);
  38. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.