...

View Full Version : Small CSS Brain-Phart. Help Needed.



Psionicsin
04-06-2011, 07:47 PM
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 (http://www.rutholsonphoto.com/rop-build/)

Three things...


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?
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?
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.

teedoff
04-06-2011, 08:05 PM
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.

Psionicsin
04-06-2011, 08:13 PM
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.


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.

teedoff
04-06-2011, 08:37 PM
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.

Psionicsin
04-06-2011, 09:15 PM
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?

Psionicsin
04-06-2011, 10:21 PM
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:

<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:

#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?

Excavator
04-06-2011, 11:00 PM
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 -
<!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>

Excavator
04-06-2011, 11:12 PM
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 (http://www.w3.org/TR/CSS2/box.html). 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 (http://www.apaddedcell.com/div-itis).

Psionicsin
04-06-2011, 11:26 PM
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 (http://www.w3.org/TR/CSS2/box.html). 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 (http://www.apaddedcell.com/div-itis).

I think you MIGHT need to ctrl+F5 your view. This is the current, updated css:


#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?

Psionicsin
04-06-2011, 11:40 PM
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?

Excavator
04-06-2011, 11:54 PM
#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;}

Psionicsin
04-07-2011, 04:43 AM
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.

Psionicsin
04-08-2011, 06:08 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum