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)

    How can I make the logo overlap & how can I contain these floats?

    URL: http://goo.gl/uBf63x

    Hello,

    Can someone help me figure out how to make this logo overlap the .site-inner container? As you can see, I have it overlapping, but the whole logo isn't showing.

    Also, to make those notched corners, I used this code:

    Code:
    .site-inner {
    	background: #fff;
    	border: 1px solid #cbcbcb;
    	clear: both;
    	margin-top: -30px;
    	margin-top: -3rem;
    	position: relative;
    	z-index: 2;
    }
    
    .site-inner:before, .site-inner:after {
      display: block;
      height: 14px;
      font-size: 0;
    }
    
    .site-inner:before {
    	content: url(images/tl.png);
    	background: url(images/tr.png) no-repeat 100% 0;
    	left: -1px;
    	right: -1px;
    	position: absolute;
    	top: -1px;
    }
    
    .site-inner:after {
    	content: url(images/bl.png);
    	background: url(images/br.png) no-repeat 100% 0;
    	left: -1px;
    	right: -1px;
    	position: absolute;
    	bottom: -1px;
    }
    As a result, the .content and .sidebar-primary div floats weren't being contained and the .site-inner div didn't extend down the page as needed. So, I removed the floats from those divs and added display: inline-block. Well, now I can't figure out why the .site-inner div still isn't behaving.

    Ideas?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That header is a little awkward with that construction as the html isn't quite logical and starts with a negative margin rather than a nice logical structure. You could do something like this but will need to test it doesn't cause issues later

    Code:
    .site-header {
    height:274px;
    overflow:visible;
    }
    .header-image .site-title a {
     height: 361px;
    }
    .site-inner{clear:left}
    I would have floated the image first and as a background to the h1 and not the wrap and then you could just drag the content up with a negative bottom margin.

    Your content isn't contained because you used the :after element for something else and it was already being utilised as a float clearer.
    e.g.This is what would have contained the floats before you over-rode it.

    Code:
    .archive-pagination:after, .clearfix:after, .entry:after, .entry-pagination:after, .footer-widgets:after, .nav-primary:after, .nav-secondary:after, .site-container:after, .site-footer:after, .site-header:after, .site-inner:after, .wrap:after {
        clear: both;
        content: " ";
        display: table;
    }
    It can't do both.

    You can't use overflow:hidden either as a float container because you need visible overflow for those corners.

    You can either nest an inner element inside site-inner and around your columns and apply the :after clearer styles to it as shown above or just put an empty clearer div (div style="clear:both"></div>) after the floated columns.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much, Paul. I really appreciate your help!


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
  •