SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast Dreeass's Avatar
    Join Date
    Sep 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Border-width screwing up content

    So I recently changed my border source and width to 38x38 which is relatively large and it screws up the content. The background of the border is transparent of course and it looks like it's padding. Is there a way to get negative padding as it is not possible, is there a workaround?

  2. #2
    SitePoint Enthusiast Dreeass's Avatar
    Join Date
    Sep 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a proper solution selecting every div inside and giving it a negative margin.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    That was NOT a "proper" solution.
    Bad band-aid.
    Look forward to more problems.

  4. #4
    SitePoint Enthusiast Dreeass's Avatar
    Join Date
    Sep 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then tell me a proper one.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Please post a URL to the site so we can look at the html and css. That will be a huge help.

    If you still have a copy of the css without the negative margins, that would be ideal!

  6. #6
    SitePoint Enthusiast Dreeass's Avatar
    Join Date
    Sep 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Please post a URL to the site so we can look at the html and css. That will be a huge help.
    Site is locked with a password, it isn't hard to try it yourself. Just make a border-image.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Assuming this border goes around the entire page, why not use:
    Code:
    border-right:38px solid transparent;
    border-bottom:38px solid transparent;
    border-left:38px solid transparent;
    Are transparent images necessary?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Why not just use padding or margin? We really need to see this in context. You could post example code if you can't post a link, so that we can see this in context.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If you us outline instead of border it will not affect your layout.

  10. #10
    SitePoint Enthusiast Dreeass's Avatar
    Join Date
    Sep 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Assuming this border goes around the entire page, why not use:
    Code:
    border-right:38px solid transparent;
    border-bottom:38px solid transparent;
    border-left:38px solid transparent;
    Are transparent images necessary?
    The border is for parts in the container.

    Quote Originally Posted by ralph.m View Post
    Why not just use padding or margin? We really need to see this in context. You could post example code if you can't post a link, so that we can see this in context.
    Here's the CSS code, the margins and HTML example I use atm:
    HTML:
    Code:
    <div id="container">
    	<div id="left">
    		<div id="something">
    			Hello world!
    		</div>
    	<div id="right></div>
    </div>
    CSS:
    Code:
    #container {
    	color: #B8B8B8;
    	font-family: MuseoSans500, Arial, 'Times New Roman', serif;
    	width: 1047px;
    	height: auto;
    	margin: 10px auto;
    	
    	-webkit-transition: all .1s linear;
    	-moz-transition: all .1s linear;
    	-o-transition: all .1s linear;
    	transition: all .1s linear;
    }
    	#container #left, #container #right {	
    		border-width: 38px;
    		
    		-webkit-border-image: url("../img/borders/container.png") 38 38 repeat;
    		-moz-border-image: url("../img/borders/container.png") 38 38 repeat;
    		-o-border-image: url("../img/borders/container.png") 38 38 repeat;
    		border-image: url("../img/borders/container.png") 38 38 repeat;
    		
    		background-color: #1c1913;
    	}
    	#container #left > div, #container #right > div {
    		margin: -20px -20px;
    		-webkit-box-sizing: border-box;
    		-moz-box-sizing: border-box;
    		box-sizing: border-box;
    
    	}
    Image:
    Qt01v.png

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, given what you've osted. could you explain what you are trying to do here? I still can't work out what the issue is. Could you post the background image too?

  12. #12
    SitePoint Enthusiast Dreeass's Avatar
    Join Date
    Sep 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, given what you've osted. could you explain what you are trying to do here? I still can't work out what the issue is. Could you post the background image too?
    I solved it, thanks anyway.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Would you mind telling us how you solved it? in case we see the same situation 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
  •