Advanced Search

Return to Snippet

Revision: 65809
at January 22, 2014 03:09 by bitsculptor
Initial Code 
// HTML
<p class="introline"><span class="titleline start"></span><span class="headline">Conferences</span><span class="titleline fin"></span></p>


// CSS
.introline {
	text-transform:uppercase;
	color: #a3a3a3;
	letter-spacing: .5px;
	font-size: 14px;
	text-align:center;
	width:100%;
	position:relative;
	margin:0;
	padding:20px 0;
}
.titleline {
	border-bottom:1px solid #ddd;
	position:absolute;
	width:30%;
	height:1px;
	top:50%;
	display:block;
}
.titleline.start {
	left:0;
}
.titleline.fin {
	right:0;
}

// jQuery
$("p.introline").each(function(){
    headline_width = $(this).find(".headline").width();
    container_width = $(this).width();
    headline_padding = 20;
    $(this).find(".titleline").width(((container_width-headline_width)/2)-headline_padding);
});
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Full Width Headline with simple bars to fill the white space

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery