Having Troubles with CSS on my Blog

bradchristopher · 03-19-2013, 02:20 AM

Hey everyone! I am kinda new to CSS so I apologize if my questions seem a bit silly. On my blog I am having two problems, that I cannot seem to solve for the life of me. Here is a link to my blog. #1 One issue is having to do with when I post a picture to my blog. As of right now now I am only posting pictures as entries but in the future there will be both text and pictures. I wanted the images to show up on the main blog page the way they are right now (that size). Now, when I just post a picture as an entry with no text, I am wondering how I can make it so when you click on the blog entry, and it it takes you to its own separate page, the photo shows up much larger (full size maybe or by setting a dimension). Also, I am trying to figure out that if in the same scenario but with text involved. The stand-alone page with the blog entry we are speaking of shows the picture the same size with the story but when you click on the picture from that page, the photo attachment shows up at full resolution or bigger or whatever. It would be nice to have options but I cannot figure it out. I have one code it seems set for all of the pictures involved with the blog and that is

Code:

.entry-content img{
   height: 450px;
   width: auto;

The other problem (Problem #2) I am having with my blog is that I can't figure out how to move my content (blog entries, etc) more towards the center. I don't want them to be right in the middle because I am also trying to figure out how to add a widget area on the right but I am using a theme based on hybrid core frameworks. I don't think that problem will get solved in this forum and that is ok. If you look at my blog now, it is just really boring looking. I love the way the rest of the site is looking because I just want thinks really simple but unfortunately I would really like the blog page to be quite a bit more dynamic.

I appreciate any help anyone could lend! Feel free if you have any other suggestions about what I could do on the blog page. When I say that, keep in mind that unless it i something explained to me I probably won't be able to figure it out unfortunately. I am starting to have a better understanding but somehow this CSS seems different then what I have learned about in the past. I have pulled it up on Firebug like a million times and I have gotten nowhere. Thanks again for your time everyone. I know a newbie in anything can be a nuisance but I am trying to learn!

jerry62704 · 03-19-2013, 03:16 AM

I stopped counting after your page had a couple of million bytes. It took a VERY long time to load and I have a screaming connection.

Suggestion
1) reduce all your images to under 70K with a link if someone wants to see the monster size.
2) find the error in your script (line 2 char 1196)
3) find the 32 errors in the html
4) find the 6 errors in the CSS

bradchristopher · 03-19-2013, 07:29 AM

Perfect! Now I am completely lost! I was using the W3C html Validator on the main page and I guess I didn't run it on the blog. I don't know what any of the errors meant really or how that happened. What a day! Looks like this site is a mess.

As for the pictures, I didn't realize it was running slow. I had tested that with a couple outside resources and everything seemed fine but I certainly trust it is not. There are some large files on there. I am a photographer and having the high quality images on the site is one of the ways I get hired. I'm not sure I understand how to get around it.

Thanks for the help by the way! I warned you most of it will go over my head. Pretty bummed out. I appreciate your time jerry62704!

jerry62704 · 03-19-2013, 05:43 PM

The validation errors are fairly easy to solve. The time it takes to load isn't hard either, but requires an editorial decision (long long long load times v. requirement to have the full sized pictures on the web page).

I'll post some of the errors and corrections tonight. On my lunch hour and have to get back to the office.

bradchristopher · 03-19-2013, 07:35 PM

Wow! Well thanks a bunch jerry62704! It's greatly appreciated! I really want to learn how all of this stuff is done correctly! Thank you!

jerry62704 · 03-20-2013, 03:54 AM

Going to this link (validator) I find 32 errors. Clicking "show source" in the options check boxes I run it again, but can now see what the errors are.

For example, line 21, the value you put in the "name" isn't a valid name. Below it are three links to explain what are good values.

Line 137 shows a bogas link tag (the "rel" stuff) and the links explaining it. BTW, the line number is a link to the exact code, but there is no exact way back.

Then fix 169 with the same error (and 185 and 201 and 217 and 233 and so on.

Kudos for including a nice title, but you should also include an "alt" entry as well. 508 stuff you know.

The last error is "img#wpstats..." If it is "#wpstats" then it is unique and you don't need the img element preceding it. IAC, move it to the head section.

The CSS stuff (other than the above) is fixed, but you have 4 warnings about background and border colors (that may be intended) at lines 127, 155, 339 and 695.

bradchristopher · 03-20-2013, 06:14 AM

Thanks jerry62704! I have been spending quite a bit of time just trying to figure out how I can fix this stuff. I am not familiar with where I go to do any of it so I am digging through it. I appreciate your time

bradchristopher · 03-26-2013, 03:03 AM

Hey jerry62704! I have been still working on all sorts of issues with the site. I keep trying to figure out the whole 'bogus link tag thing' that validator is pointing out like 15 times. I am having troubles seeing the difference between what it is and then when validator shows the Cleanup Markup with HTML-Tidy. I also looked at the other half of the blog entries that were done the exact same way but have no errors. Maybe because I am new at this but I am not catching the difference. Any ideas? When I read the explanations it is like a foreign language to me.

I still haven't gotten anywhere on the original problem I posted about on here either. I have increased the speed quite a bit I believe. Google Developers PageSpeed Insights rated me at 98 out of 100. I was happy to see that! The page still looks nothing like how I want it unfortunately. Thanks again jerry62704!

jerry62704 · 03-26-2013, 08:17 PM

You got it down to 17 error so there is progress. The number one thing to do is remove the style at line 444 and put it in the head section if you need it at all.