SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with background positioning using :before

    URL: http://goo.gl/QDfnhh

    I'm using this code to add the background images to the entry titles on this blog:

    Code:
    .entry-title:before {
    	content: " ";
    	background: url(images/swirl-left.png) no-repeat 0 5px;
    	height: 20px;
    	position: absolute;
    	width: 45px;
    	top: 0;
    }
    
    .entry-title:after {
    	content: " ";
    	background: url(images/swirl-right.png) no-repeat 5px 5px;
    	height: 20px;
    	position: absolute;
    	width: 45px;
    	top: 0;
    }
    The .entry-title:after is working just fine, but not the .entry-title:before. How can I get the background image on the left to be next to the title instead of on top of it?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Absolute positioning takes an element out of the normal flow. This means that your generated content is not affecting the positioning of the other content around it, as such it appears to be "on top" of your headline text.

    You could:

    Add
    Code:
    .entry-title { padding-left : 45px;}
    .entry-title:before {left:0;}

    It may be better to rethink your entire strategy:

    Code:
    .entry-title:before, .entry-title:after ,.entry-title a {        
    
            vertical-align:middle; 
    }
    .entry-title:before, .entry-title:after {
    	content: "";
    	background: url(images/swirl-left.png) no-repeat 0 5px;
    	height: 20px;
    	width: 45px;
            display: inline-block;
    }
    
    .entry-title:after {
    	background: url(images/swirl-right.png) no-repeat 5px 5px;
    }

    or even:


    Code:
    .entry-title:before, .entry-title:after ,.entry-title a {        
             vertical-align:middle;
             display: inline-block;
    	 word-spacing: normal;
    	 letter-spacing: normal;
    }
    .entry-title:before, .entry-title:after {
    	content: "";
    	background: url(images/swirl-left.png) no-repeat 0 5px;
    	height: 20px;
    	width: 45px;
            margin-right:  -45px ; 
    }
    
    .entry-title:after {
    	background: url(images/swirl-right.png) no-repeat 5px 5px;
            margin: 0 0 0  -45px ; 
    }
    .entry-title a{padding: 0 45px;}
    .entry-title{ display: table;
    	word-spacing: -1em;
    	letter-spacing: -.5em;
    }
    In this way your flourishes would actually FLOW around your headline

    hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. That helps a ton. I'm new to using the :before and :after stuff so I'm trying to learn as much as I can.

    Thanks again!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •