PDA

View Full Version : blog header shifting


titous
08-18-2010, 04:23 PM
Hello all!
I modified a wordpress blog to fit the layout of my website. The blog can be found at: http://www.photocs.net/blog/

(http://www.photocs.net/blog/)
I seem to have some blog pages that line up differently than others, for example compare these two pages:
http://photocs.net/blog/?p=18
http://photocs.net/blog/?cat=3
it seems like in the second URL, the header is shifted downwards.


I'm not sure what other information to give in order to get some help. I used http://www.burnseo.com/blog/2009/10/integrate-wordpress-into-existing-website-tutorial/ to edit the theme and have built the site in Dreamweaver CS3 and hope maybe someone can help me out there?


I appreciate it!

edbr
08-19-2010, 01:19 AM
no warning from the index page but from http://photocs.net/blog/?p=18

Result: 0 errors / 4 warnings

line 6 column 1 - Warning: <meta> element not empty or not closed
line 31 column 147 - Warning: <style> isn't allowed in <div> elements
line 22 column 1 - Info: <div> previously mentioned
line 123 column 4 - Warning: <input> proprietary attribute "aria-required"
line 126 column 4 - Warning: <input> proprietary attribute "aria-required"

]

titous
08-19-2010, 04:34 PM
hello edbr,

i was able to fix warning 1 and 2 (I believe) however didn't know what to do with the last three.

Furthermore, could these warnings really be the source of the header shifting since I found the same code errors in a page that didn't have a shifting header?

Thank you for your continued help, I really hope to fix this!

Result: 0 errors / 4 warnings

line 6 column 1 - Warning: <meta> element not empty or not closed
line 31 column 147 - Warning: <style> isn't allowed in <div> elements
line 22 column 1 - Info: <div> previously mentioned
line 123 column 4 - Warning: <input> proprietary attribute "aria-required"
line 126 column 4 - Warning: <input> proprietary attribute "aria-required"

gentleone
08-19-2010, 06:33 PM
I think the h2 tag on http://photocs.net/blog/?cat=3 is causing the shifting. Did you remove it already to see if it makes a difference?


<h2 class="pagetitle">Archive for the ‘Information’ Category</h2>

titous
08-19-2010, 07:07 PM
I was going to ask about that h2 tag after fixing the header alignment but now I think both problems are one in the same.

I removed the h2 tag but then the title "New Beginnings" shifted up to where "Archive for the 'Information' Category" was while the shifted header remained, so simply removing the h2 tag didn't seem to fix the problem.

How can I adjust the h2 tag so that the title "Archive for the 'Information' Category" is shifted down, aligned left, and on one line instead of how it is now (aligned on the right and on two lines)? Perhaps when we can fix this title, the header will shift to its correct position?



I think the h2 tag on http://photocs.net/blog/?cat=3 is causing the shifting. Did you remove it already to see if it makes a difference?


<h2 class="pagetitle">Archive for the ‘Information’ Category</h2>

DWcourse
08-19-2010, 07:43 PM
Your page structure is pretty confused and your use of divs is excessive. But for the immediate issue try adding one of these two style rules:

#content { clear: both; }

.narrowcolumn { clear: both; }

gentleone
08-19-2010, 08:02 PM
Your page structure is pretty confused and your use of divs is excessive.

Yes, DWcourse is right. I just escaped from your code which is messy.
For navigation you should use an unordered list and try divide your layout in logical sections.

titous
08-19-2010, 09:44 PM
DWcourse,

Thank you! That did the trick. I have no CSS or webdesign experience and built the whole website/blog from tutorials on the web, hence the messy code.

One last detail, how can I now shift the corrected title ("Archive for the 'Information' Category") down to the same height that the other pages are at? See the difference between these two pages:
http://photocs.net/blog/?cat=3
http://photocs.net/blog/?p=18

Thank you all so far for all the help!

Your page structure is pretty confused and your use of divs is excessive. But for the immediate issue try adding one of these two style rules:

#content { clear: both; }

.narrowcolumn { clear: both; }

DWcourse
08-20-2010, 01:59 AM
I applaud you for getting this far. WordPress is a hard place to be learning CSS.

I think it might be a bit of a struggle from this point. You're patching issues as you find them rather than solving the root issues. But for this particular issue, I'd try adding a bit to padding to the top of that style you just create.


#content {
clear: both;
padding-top:4px;
}

adjust the padding as necessary.

titous
08-20-2010, 03:01 AM
DWcourse,

That did the trick, thank you very much for your help, I appreciate it greatly!

I applaud you for getting this far. WordPress is a hard place to be learning CSS.

I think it might be a bit of a struggle from this point. You're patching issues as you find them rather than solving the root issues. But for this particular issue, I'd try adding a bit to padding to the top of that style you just create.


#content {
clear: both;
padding-top:4px;
}

adjust the padding as necessary.

VinPearl
08-21-2010, 11:44 AM
Merci pour ce joli blog, bonne continuation...