SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict sdamos's Avatar
    Join Date
    Sep 2003
    Location
    Arizona
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help with Wordpress CSS

    All, I run a website for Don Mattingly and have for years now. Only problem is that I do not have much experience in design. I am trying to bring up a blog for Donnie and am using Wordpress. I am having a terrible time with it. I have used CSS in the past and other management systems of this size, but something is eluding me.

    I have merged styles from my original file, globalcss.css. I call that file out just below the meta information at the top of my pages. It is built into my template. Well, for Wordpress I took my header and my footer, placed them in the header.php and footer.php files without issue. I replace all code in those files with my own. Now, the center, and the footer of the blog, is wider than my header and footer. I cannot find the source for this and it is also pulling the text in the blog and text from my header over to the side. Also, the search box for the blog has been forced down. I have not mucked with too much of the style.css. I did copy all of my globalcss.css and place it inside the style.css, so that may have caused some issue.

    Can someone take a look at the link below and the files I have attached? The style.css is the Blog css coupled with some of my own css from the Globalcss.css file, which runs all the other pages of my site. This has become very frustrating and I am hoping someone with more experience can help me fix this.

    Here is the blog and the css files are attached:
    http://www.donmattingly.com/blog/

    Thank you in advance.

    Shannon
    Attached Files Attached Files

  2. #2
    SitePoint Member animaye's Avatar
    Join Date
    Jul 2006
    Location
    Ohio
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm not sure what the problem is honestly but i did spot an extra
    Code:
    </head><link href="http://www.donmattingly.com/blog/wp-content/themes/default/style.css" rel="stylesheet" type="text/css">
    ... just above
    Code:
    <div id="content" class="narrowcolumn">
    about halfway through your html...
    all this aggravation ain't satisfation' me

  3. #3
    SitePoint Member animaye's Avatar
    Join Date
    Jul 2006
    Location
    Ohio
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (more specifically)
    Code:
    <td width="700" align="center" valign="top" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="maincontent" -->
                <div align="center">
                  <table width="695" border="0" cellspacing="0" cellpadding="8">
                    <tr>
                      <td align="left" valign="top">
    				  </head><link href="http://www.donmattingly.com/blog/wp-content/themes/default/style.css" rel="stylesheet" type="text/css">
    
    
    	<div id="content" class="narrowcolumn">
    
    			
    						
    			<div class="post" id="post-2">
    all this aggravation ain't satisfation' me

  4. #4
    SitePoint Addict sdamos's Avatar
    Join Date
    Sep 2003
    Location
    Arizona
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, does anyone else have any ideas?

  5. #5
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that ending head tag and the link to css is a major issue.

    Another thing, after that fix, is that it looks like you are trying to wrap a table around the main part of your page... I think you should ditch tables altogether (unless tablular data... or use very minimal tables) and use css for layout/positioning. It also looks like you are working with a pre-existing WP template... What I would do is find a theme that is close to what you have design-wise, ditch your tables, and retro-fit the template to look like your old site. Things may not look precisely like your old site, but I think doing this will save you a lot of headache.

    Sometimes when I am working on templates (header, footer, sidebars) I just build those specific elements in a new html doc... (dtd, head, body tags... basically a full html doc, with styles included)... Once I get my (for example) footer all worked-out in this doc, I then cut just the footer (from footer opening div to closing footer div, or in your case <table> ... footer content </table>) and paste it into the template include via the CMS.

    Sh*&, sorry, that probably is not too clear...

    For you I would take your header, build it in an html doc with your linked style sheet, make sure everything validates... get it just right - and then plug-it-in to your WP cms template.

    Heck, I am almost tempted to just do it for you! Lol.

    On top of that head tag, and style call... Looks like you are specifying a specific static width on your tables... maybe they are a bit smaller than the template?

    Ridding yourself of tables for layout will probably be your best bet.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I didn't have time to sort through all the broken code (please validate your page before posting as this may eliminate any silly errors as a single missing tag can cause major problems.)

    It looks to me as though you have inserted the footer:
    Code:
    #footer {
     padding: 0 0 0 1px;
     margin: 0 auto;
     width:700px;
     clear: both;
     }
    Inside this parent table:
    Code:
      <table width="695" border="0" cellspacing="0" cellpadding="8">
       <tr>
    Therefore you have a 700px footer inside a table that is 695px wide and has 8px padding on the cells. As tables will stretch to accomodate their content (because thats what they do) then the footer will push the td size to 700px +8px + 8px = 716px wide. As the rest of the layout was 700px wide then this throws everything out.

    Reduce the width of the footer or remove the width altogether abd see if that fixes some issues.

    You probably have other issues going on in there also as you have added padding and borders to elements with 700px width in a number of other places.

    You can't afford to be sloppy with css and you must make sure everything adds up in the first place


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
  •