Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts

    Small CSS Brain-Phart. Help Needed.

    Hey CSS people. Having a brain-phart here, and can't seem to remember some things. I'd look it up if I knew the words for it, but those have slipped me lol.

    Here's my build thus far: Current Build

    Three things...

    1. I can't remember how to get the text in the footer to be side-by-side rather than one-after-another vertically as it is now. Do I have to create a call to the p's and float them as well?
    2. I have pixels that are unaccounted for in my planning and design. if you go Display Topographic Information with the Web-Developer plugin, you'll see what appears to be 3-4pixels at the bottom of #main-content, and also #footer. Anyone know what I maybe did wrong, or missed?
    3. How do I remove the bottom margin from the last image in #specials-content? I tried adding a last-child pseudo-class, but it ended up taking it off of all of the images. Tricky, tricky.

    - #1 SOLVED: Added the display:inline attribute to the p selector.
    - #2 SOLVED: CSS for the anchors had to be created in order to float them. Graphics were breaking from the anchors.
    - #3 SOLVED: Added a .btm.margin class to the first 3 images, not the last one. Then applied the margin to just that class.

    NOTE: I only have the css files separated so I can quickly make edits while in development mode. Once I push this out, everything will be housed in one file. Just wanted to put that out there in case anyone thinks to ask.
    Last edited by Psionicsin; 04-08-2011 at 05:08 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Part of the gap you describe in number 2 is coming from the 10px margin you have on #content-group.

    As for the first one, I think you will have to give an id/class to them to target each element and use widths and floats.
    Last edited by teedoff; 04-06-2011 at 07:07 PM.
    Teed

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Part of the gap you describe in number 2 is coming from the 10px margin you have on #content-group.
    No that part I put there purposely. In my way of site design I always separate content from each other with a 10px margin UNLESS specifically told not to.

    But I did ex out the code in firebug, and my 10px gap is gone yes, but there's still a good 3-4 pixels that are there for no reason.

    Quote Originally Posted by teedoff View Post
    As for the first one, I think you will have to give an id/class to them to target each element and use widths and floats.
    I just made a selector for the p's in that div and added a display:inline property to it. UNLESS that was the wrong thing for me to do.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Psionicsin View Post
    No that part I put there purposely. In my way of site design I always separate content from each other with a 10px margin UNLESS specifically told not to.

    But I did ex out the code in firebug, and my 10px gap is gone yes, but there's still a good 3-4 pixels that are there for no reason.



    I just made a selector for the p's in that div and added a display:inline property to it. UNLESS that was the wrong thing for me to do.
    No that works fine as well.

    Not sure about the misailigned gap under the last image on the left. However, when I changed the margin from 5px to 6px it seems to align perfectly. That is assuming your page content will always be this same height.
    Teed

  • #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    No that works fine as well.

    Not sure about the misailigned gap under the last image on the left. However, when I changed the margin from 5px to 6px it seems to align perfectly. That is assuming your page content will always be this same height.
    Nope. The home page and the gallery page will be the only ones that will have a defined height, and that's due to the fact that there will be a slider with a defined height there.

    And I'm guessing you changed the margin on #specials-content img? Because, if so, it does seem to closely (not mathematically) line up but I still haven't figured out how to remove bottom margin on the bottom picture.

    Maybe I could add a .btm-margin class to the links I want to have the margin only? But where do I place the class inside of a inline linked imaged...in the a, or after the img source?
    Last edited by Psionicsin; 04-06-2011 at 08:25 PM.

  • #6
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Ok there seems to be pixel gap problems that I'm not seeing.

    Specials.php (brought in from a php include function) looks like this:
    Code:
    <div id="specials">
    	<a href="#"><img src="./css/images/specials/img1.jpg" alt="This is Special #1" class="btm-margin" /></a>
    	<a href="#"><img src="./css/images/specials/img2.jpg" alt="This is Special #2" class="btm-margin" /></a>
    	<a href="#"><img src="./css/images/specials/img3.jpg" alt="This is Special #3" class="btm-margin" /></a>
    	<a href="#"><img src="./css/images/specials/img4.jpg" alt="This is Special #4" /></a>
    </div>
    the CSS for it looks like this:
    Code:
    #specials-content {
    	float: left;
    	width: 210px;
    	background-color: #ff0ff2;
    	padding: 0px;
    	margin: 0px 0px 0px 10px;
    }
    
    .btm-margin {
        margin-bottom: 5px;
    }
    There should be no spaces in between anything except for what I define, and yet there are places where this rule isn't holding up.

    I changed the background of the specials area so that you can clearly see that a 2-3 pixel spacing is occurring where it shouldn't (ie at the bottom of the specials and attention sections).

    So it's either something that I'm doing, or paragraph and anchor tags have some sort of built-in spacing. Am I going crazy here?
    Last edited by Psionicsin; 04-06-2011 at 09:41 PM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Psionicsin,
    I'm going to assume that Careers and Sitemap are not really seperate paragraphs but are going to be links instead.
    Rather than making a bunch of un-needed floats tryt putting all those anchors into one span, something like this - <p>&copy; Copyright 2003 - 2011 Ruth Olson Photography<span class="pipe">&#124;</span>Careers<span class="pipe">&#124;</span>Sitemap</p>

    That might look like this after you make anchors out of the appropriate text -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	height: 600px;
    	width: 960px;
    	margin: 30px auto;
    	background: #999;
    }
    #footer {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	background: transparent url(http://www.rutholsonphoto.com/rop-build/css/images/bg-footer-x.png) repeat-x;
    }
    #footer-content {
    	line-height: 40px;
    	width: 960px;
    	margin: 0 auto;
    	text-align: center;
    	color: #c1c1c1;
    }
    	#footer-content .pipe {margin: 0 10px;}
    		#footer-content a:link,
    		#footer-content a:visited {
    			margin: 0 5px;
    			color: #c1c1c1;
    			text-decoration: none;
    		}
    		#footer-content a:hover,
    		#footer-content a:active {color: #f00;}
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
        <div id="footer">
        	<div id="footer-content">	
            	<p>
                    &copy; Copyright 2003 - 2011 <a href="#">Ruth Olson Photography</a>
                    <span class="pipe">&#124;</span><a href="#">Careers</a>
                    <span class="pipe">&#124;</span><a href="#">Sitemap</a>
                </p>
            <!--end footer-content--></div>
        <!--end footer--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Psionicsin View Post

    I changed the background of the specials area so that you can clearly see that a 2-3 pixel spacing is occurring where it shouldn't (ie at the bottom of the specials and attention sections).
    There is a 5px space at the bottom of #specials-content caused by your bottom margin on #specials-content img

    The online version has #specials-content set at 120px wide but the images you put in it are 210px wide. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    What is #specials doing? You don't even style it. I think one definition of divitis is and unstyled element is not needed. See divitis here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    There is a 5px space at the bottom of #specials-content caused by your bottom margin on #specials-content img

    The online version has #specials-content set at 120px wide but the images you put in it are 210px wide. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    What is #specials doing? You don't even style it. I think one definition of divitis is and unstyled element is not needed. See divitis here.
    I think you MIGHT need to ctrl+F5 your view. This is the current, updated css:

    Code:
    #specials-content {
    	float: left;
    	width: 210px;
    	background-color: #ff0ff2;
    	padding: 0px;
    	margin: 0px 0px 0px 10px;
    }
    
    .btm-margin {
        margin-bottom: 0.45em;
    }
    
    #footer {
    	padding: 0;
    	margin: 0;
    }
    That 5px bottom margin, which is now 0.45em, has nothing to do with the bottom image as it doesn't have the class applied to it so therefore shouldn't have any kind of margin styling period.

    And the same thing is happening to the #attention div which doesn't have any margins on it, as you can see.

    #specials div houses a php include statement that's importing specials.php into the page. And unless you yourself are specifically talking about the images inside of #specials-content, there is no #specials-content img. Same with #attention.

    So, taking my known measurement of 0.45em & 0.8em for spacing between the images OUT of the equation...what is the cause of the 2-3px tail on the bottoms of #specials and #attention?

  • #10
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    It's not evident from the source as I just checked, but everything on the site is made modular using php include statements so that way I don't have to make multiple changes on every single page by hand.

    So anything I feel might change, and my boss is fickle, I separate into individual php files.

    Do you think that because I'm importing a php file with a div into a div established on the page that that's adding extra pixels for no reason?
    Last edited by Psionicsin; 04-06-2011 at 10:45 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Psionicsin View Post
    #specials div houses a php include statement that's importing specials.php into the page.
    It's still divitis. Your include doesn't necessarily need to be contained in anything since your inserting it into a container, you can include content only.

    Try adding this to your CSS - #specials {line-height: 0;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    It's still divitis. Your include doesn't necessarily need to be contained in anything since your inserting it into a container, you can include content only.

    Try adding this to your CSS - #specials {line-height: 0;}
    That seemed to work for both problems. Now my next question is why did I have to add that? Is that some sort of trick work around for some unexplainable things?

    However when I go into Display Topographic, I still see weird things going on, even though visually I see nothing when the site is viewed regularly. Should I be worrying about this, or could it just be a weird rendering problem with WD and FF? I've never experienced this before and I'm thrown for a loop here.
    Last edited by Psionicsin; 04-07-2011 at 03:48 AM.

  • #13
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    After much exhaustion I found the problem. I needed to create css for the anchors as well so I could float them and have the graphics stop breaking from the anchors.

    That took forever.


  •  

    Posting Permissions

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