12 Replies Latest reply on Feb 7, 2010 6:42 AM by samanthahhi

    Unable to create a container div in WP

    samanthahhi

      I have added a WordPress blog onto my dreamweaver website. I want my blog to look as seamlessly integrated as possible with my website. The page background is a deep gray. The body of the content is white. I am new to PHP and have hit a brick wall here. (Though impressed with what I have done so far!)

       

      My challenge is that I cannot seem to encompass the header, both side bars, the body content and the footer into a single working div that would have a white background. I have created a div called "container" in the CSS, but can't seem to get it to apply to the WP template correctly. I am concerned I will screw up the PHP coding as I don't know whether the div can come before or after, etc. Though, I have bravely tried...with no results.

       

      Here is the website link: http://kaufmanphotography.com/blog/

       

      Thank you!

       

      Samantha

        • 1. Re: Unable to create a container div in WP
          osgood_ Level 8

          chameleonhhi wrote:

           

          I have added a WordPress blog onto my dreamweaver website. I want my blog to look as seamlessly integrated as possible with my website. The page background is a deep gray. The body of the content is white. I am new to PHP and have hit a brick wall here. (Though impressed with what I have done so far!)

           

          My challenge is that I cannot seem to encompass the header, both side bars, the body content and the footer into a single working div that would have a white background. I have created a div called "container" in the CSS, but can't seem to get it to apply to the WP template correctly. I am concerned I will screw up the PHP coding as I don't know whether the div can come before or after, etc. Though, I have bravely tried...with no results.

           

          Here is the website link: http://kaufmanphotography.com/blog/

           

          Thank you!

           

          Samantha

           

          Just enclose the whole html code in a 'wrapper' <div>

           

          Insert the opening 'wrapper' <div> tag in the code as shown below:

           

          </head>
          <body>


          <div id="wrapper">


          <a name="top"></a>
          <div id="header">

           

           

           

          Insert the closing 'wrapper' </div> tag in the code as shown below:

           

           

           

          Powered by <a href="http://www.wordpress.org" target="_blank">WordPress</a></small>

          </div>


          </div><!-- closing 'wrapper' -->

           

          </body>
          </html></div><!-- this closing div tag should not be here????? -->

           

           

          Add the css to your style sheet:

           

          #wrapper {
          background-color:#FFF;
          overflow: hidden;
          }

           

          Incidentally, as shown in the html code above, you have a closing </div> tag after your closing </html> tag at the foot of the page, it shouldn't be there.

          1 person found this helpful
          • 2. Re: Unable to create a container div in WP
            samanthahhi Level 1

            Thanks..I removed that extra </div> tag.

             

            Here's the thing that is perplexing me. I have NO HTML code. It is all built in PHP. This is the Page Template code below. I have tried placing the wrapper before the <?php... and I've tried placing it before "content"

             

                        
                                 
                           

                                                      
                                       
                   

             

            Then there is the Main Template index, which I assume I must add the div to both.

             

                           
                                 
                           

                           

            Filed In:
                                                          
            Tags:
                      
                                 
                                      
                 
                 

            Any ideas?

            • 3. Re: Unable to create a container div in WP
              samanthahhi Level 1

              No wonder no one is saying anything...my code did not show up. It was there when I inserted it? hmmmm...let me try again.

               

                             
                                   
                             

                             

              Filed In:
                                                            
              Tags:
                        
                                   
                                        
                   
                   
              • 4. Re: Unable to create a container div in WP
                samanthahhi Level 1

                Why isn't my code showing???? here we go.... How to I wrap divs around PHP stuff

                 

                <?php get_header();?>
                    <?php include ('sidebar1.php'); ?>
                        <div id="content">
                        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <div class="post" id="post-<?php the_ID(); ?>">
                            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                            <div class="postmetadata-top"><small><?php the_date('M d Y'); ?> <?php edit_post_link(); ?><br />Filed In: <?php the_category(', '); ?></small></div>
                            <?php the_content('Read more &rsaquo;'); ?>
                            <div class="backtotop"><a href="#top">Back to Top</a> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>
                            <div class="postmetadata-bottom"><small>Tags: <?php the_tags('', ', '); ?></small></div>
                        </div>
                        <?php endwhile; endif ?>
                        <div id="navlink">
                            <?php posts_nav_link(' &mdash; ', '&lsaquo; Newer Posts', 'Older Posts &rsaquo;'); ?>
                        </div>
                    </div>
                    <?php include ('sidebar2.php'); ?>
                <?php get_footer();?>

                • 5. Re: Unable to create a container div in WP
                  osgood_ Level 8

                  Can you enclose the whole php code as below?

                   

                   

                  <div id="wrapper">

                   

                  <?php get_header();?>
                      <?php include ('sidebar1.php'); ?>
                          <div id="content">
                          <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                          <div class="post" id="post-<?php the_ID(); ?>">
                              <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                              <div class="postmetadata-top"><small><?php the_date('M d Y'); ?> <?php edit_post_link(); ?><br />Filed In: <?php the_category(', '); ?></small></div>
                              <?php the_content('Read more &rsaquo;'); ?>
                              <div class="backtotop"><a href="#top">Back to Top</a> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>
                              <div class="postmetadata-bottom"><small>Tags: <?php the_tags('', ', '); ?></small></div>
                          </div>
                          <?php endwhile; endif ?>
                          <div id="navlink">
                              <?php posts_nav_link(' &mdash; ', '&lsaquo; Newer Posts', 'Older Posts &rsaquo;'); ?>
                          </div>
                      </div>
                      <?php include ('sidebar2.php'); ?>
                  <?php get_footer();?>

                   

                  </div><!-- end wrapper -->

                  • 6. Re: Unable to create a container div in WP
                    Nancy OShea Adobe Community Professional & MVP

                    Maybe this tutorial will help:

                    Creating a Word Press Theme in Dreamweaver - Part 1, Learning the basics
                    http://www.adobe.com/devnet/dreamweaver/articles/creating_wordpress_theme_with_dreamweaver _pt1.html


                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    www.alt-web.com/
                    www.twitter.com/altweb
                    www.alt-web.blogspot.com

                    1 person found this helpful
                    • 7. Re: Unable to create a container div in WP
                      martcol Level 4

                      chameleonhhi wrote:


                      Here's the thing that is perplexing me. I have NO HTML code. It is all built in PHP.

                       

                      Acutally, you do have HTML, it's just served up with PHP.

                       

                      The tricky part with WP is the fact that it is put together in a quite complex way in comparison to static pages.  Sometimes, the opening tag of an element can be served up in one PHP file and that element's closing tag might be in another PHP file.  If you want to add some HTML and enclose content in that element you will need to locate the start and beginning of the content you want to wrap in the structure of your site and then, track back to that in your code.

                       

                      My experience of WP support sites is they are nowhere near as responsive as this one.  However, you might go to the support site for your theme and ask how to do what you are doing.  If that's available to you, you might find people to help who know the theme very well.

                       

                      If you don't feel like it's giving up, there's a theme called Thematic which is very customisable and it has really good support.

                       

                      All the blurb abaout WP tells you that it's easy.  It isn't.  It might be, if you just want to fire up a blog but not if you want to customise it.

                       

                      Martin

                      • 8. Re: Unable to create a container div in WP
                        EagerBob Level 2

                        My challenge is that I cannot seem to encompass the header, both side bars, the body content and the footer into a single working div that would have a white background. I have created a div called "container" in the CSS, but can't seem to get it to apply to the WP template correctly.

                         

                        The solution that osgood gave should work. Just make sure you are working on the right file. There are so many files in your WP installation that it can get confusing at first. You should be working on the index.php page that is inside your theme folder. So that will be wp-content/themes/yourtheme/index.php

                         

                        Note that there are different page template for different type of pages, for instance a page with a single post is handled by the single.php template in the same folder. So you might need to mod several pages. Your CSS file is to be found in the same place.

                         

                        I am concerned I will screw up the PHP coding as I don't know whether the div can come before or after, etc. Though, I have bravely tried...with no results.

                         

                        Keep a copy of the original file in case you screw the file. Better yet, make a child theme so that you can work on that, keeping the original theme (which becomes the parent theme) intact. It may sound complicated but it is not, it will make your work much easier and it will also protect your theme against upgrades

                        • 9. Re: Unable to create a container div in WP
                          samanthahhi Level 1

                          I'm telling you....I tried, I really did. But I did exactly what you said. I had been calling it "container" (though I can't imagine that makes a difference), so I changed it to wrapper, typed it in slowly, saved and lo and behold...it worked! Then i discovered I would ahve to do it for a bunch of other scripts I didn't think required it, but do.

                           

                          Thanks!

                          • 10. Re: Unable to create a container div in WP
                            samanthahhi Level 1

                            I should have thought to look this up. Thanks Nancy. But, you know how it is...spend three days working on a task that should take less than one and you end up learning an awful lot!

                            • 11. Re: Unable to create a container div in WP
                              samanthahhi Level 1

                              Thanks Martin...I'll look that theme up for backup. It's nice to get some validation. I think I chose

                              one of the more complex themes...three columns and all.But I figured I was just adjusting some colors and that would all be in CSS...which I am still a veritable Newbie, but moving right along nonetheless.

                              • 12. Re: Unable to create a container div in WP
                                samanthahhi Level 1

                                Thanks for the advice! I think you hit the nail on the head of what was confusing me. There are so many pieces being served up and I am not up on PHP. I have 14 php elements (including that single.php you mentioned and would never have occurred to me to check over), Yes, at least there is only one CSS...thank God!