7 Replies Latest reply on Mar 30, 2010 10:16 AM by osgood_

    Newbie Question! Header and Main Wrapper now Seperated! Please Help

    ajcarpy2005

      Hi. I am really, really new to web design. I started out with a free template and have made some changes. I was messing around with the spry menu bars and I don't think I'm going to use that right now. Somehow I have accidentally created a space between the header part with the nav-bar and the main wrapper. It was not like this before. I'm not sure if this is a CSS error or HTML. Any help would be appreciated! Thanks.

       

       

      The following is a link to two comparison images on my Flickr Acount:

      http://www.flickr.com/photos/53308815@N00/sets/

       

      Any help is much appreciated!! 

        • 1. Re: Newbie Question! Header and Main Wrapper now Seperated! Please Help
          osgood_ Level 8

          Images don't help. You need to upload the page so someone can look at the code. The answers nearly always will lie within the code.

          • 2. Re: Newbie Question! Header and Main Wrapper now Seperated! Please Help
            ajcarpy2005 Level 1

            CSS:

            /*
            Design by Free CSS Templates
            http://www.freecsstemplates.org
            Released for free under a Creative Commons Attribution 2.5 License
            */

            body {
            margin: 0;
            padding: 0;
            background: #544C40 url(images/img01.jpg) repeat left top;
            font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            font-size: 13px;
            color: #FFFFFF;
            }

            h1, h2, h3 {
            margin-top: 0;
            }

            h1 {
            font-size: 1.6em;
            font-weight: normal;
            }

            h2 {
            font-size: 1.6em;
            }

            h3 {
            font-size: 1em;
            }

            ul {
            }

            a {
            text-decoration: none;
            color: #AF9371;
            }

            a:hover {
            border-bottom: none;
            }

            a img {
            border: none;
            }

            img.left {
            float: left;
            margin: 0 20px 0 0;
            }

            img.right {
            float: right;
            margin: 0 0 0 20px;
            }

            #header {
            width: 1000px;
            margin: 0 auto;
            height: 193px;
            background: url(images/img02.jpg) repeat-x left top;
            }

            /* Header */

            #logo {
            width: 970px;
            height: 150px;
            margin: 0 auto;
            padding: 0 10px;
            }

            #logo h1, #logo p {
            float: left;
            margin: 0;
            color: #FFFFFF;
            }

            #logo h1 {
            padding: 50px 0 0 0;
            text-transform: lowercase;
            font-weight: normal;
            font-size: 3em;
            }

            #logo p {
            text-transform: uppercase;
            padding: 72px 0 0 3px;
            font-size: 10px;
            color: #110E0F;
            }

            #logo a {
            border: none;
            text-decoration: none;
            color: #FFFFFF;
            }

            /* Menu */

            #menu {
            width: 1000px;
            margin: 0 auto;
            padding: 10px 0;
            height: 30px;
            }

            #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            }

            #menu li {
            display: inline;
            text-align: center;
            }

            #menu a {
            display: block;
            float: left;
            margin: 0 3px 0 0;
            padding: 6px 15px 10px 20px;
            border-right: 1px #000000 solid;
            text-decoration: none;
            text-transform: uppercase;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10px;
            color: #FFFFFF;
            }

            #menu a:hover {
            margin: 0 3px 0 0;
            color: #FFFFFF;
            text-align: center;
            }

            #menu .current_page_item a {
            margin: 0 3px 0 0;
            color: #FFFFFF;
            text-align: center;
            }

            /* Wrapper */

            #wrapper {width : 1000px;
            margin: 70px auto 10px auto; //will center div on the page.
            text-align: justify;
            text-transform: lowercase;
            line-height: 25px;
            }

            /* Page */

            #page {
            width: 1000px;
            margin: 0 auto;
            padding: 20px 0 0 0;
            background: #110E0F;
            }

            #page-bg {
            }

            /* Latest Post */

            #latest-post {
            padding: 20px;
            border: 1px solid #E7E7E7;
            }

            /* Content */

            #content {
            width : 545px;
            margin: 70px auto 10px auto;
            //will center div on the page.
            text-align: justify;
            text-transform: lowercase;
            line-height: 25px;
            float: none;
            }

            .post {
            padding-bottom: 15px;
            line-height: 200%;
            text-align: left;
            }

            .post h1 {
            font-weight: normal;
            }

            .title {
            margin: 0;
            padding: 10px 0 0 20px;
            font-weight: normal;
            }

            .title a {
            border-bottom: none;
            color: #FFFFFF;
            }

            .title a:hover {
            border-bottom: 1px dotted #000000;
            }

            .byline {
            border-bottom: 2px solid #000000;
            margin: -10px 20px 20px 20px;
            }

            .tag {
            padding: 0 15px;
            }

            .entry {
            padding: 0 20px;
            }

            .links {
            padding: 4px 20px;
            text-align: left;
            font-weight: bold;
            background: #000000;
            color: #AF9371;
            }

            .links a {
            border: none;
            }

            .links a:hover {
            }

            /* Sidebars */

            #sidebar1 {
            float: left;
            }

            #sidebar2 {
            float: right;
            }

            .sidebar {
            float: left;
            width: 220px;
            padding: 0;
            font-size: 12px;
            }

            .sidebar ul {
            margin: 0;
            padding: 0;
            list-style: none;
            }

            .sidebar li {
            padding: 0 0 20px 0;
            }

            .sidebar li ul {
            }

            .sidebar li li {
            margin: 0 20px 0 15px;
            padding: 8px 0px;
            border-bottom: 1px #423525 dashed;
            }


            .sidebar li h2 {
            margin: 0 0 0 0;
            padding: 10px 15px;
            background: #000000;
            font-size: 13px;
            color: #AF9371;
            }

            .sidebar a {
            color: #FFFFFF;
            }

            /* Search */

            #searchform {
            margin: 0;
            padding: 0 0 0 0;
            }

            #searchform br {
            display: none;
            }

            #searchform h2 {
            }

            #s {
            margin: 10px 0px 0 15px;
            padding: 2px 2px;
            width: 110px;
            height: 18px;
            border: 1px solid #423525;
            background: #000000;
            font-size: 10px;
            color: #CCCCCC;
            }

            #x {
            margin: 0;
            padding: 2px 5px;
            height: 25px;
            background: #000000;
            border: 1px solid #423525;
            text-decoration: none;
            text-transform: uppercase;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10px;
            color: #CCCCCC;
            }
            /* Calendar */

            #calendar_wrap {
            padding: 0 15px;
            text-align: center;
            }

            #calendar_wrap table {
            width: 100%;
            }

            #calendar_wrap th {
            }

            #calendar_wrap td {
            }

            #calendar_wrap tfoot td {
            border: none;
            }

            #calendar_wrap tfoot td#prev {
            text-align: left;
            font-weight: bold;
            border: none;
            }


            #calendar_wrap tfoot td#prev a {
            border: none;
            }

            #calendar_wrap tfoot td#next {
            text-align: right;
            font-weight: bold;
            border: none;
            }

            #calendar_wrap tfoot td#next a {
            border: none;
            }

            /* Footer */

            #footer {
            width: 1000px;
            height: 55px;
            margin: 0 auto;
            background: #514334;
            border-top: 2px solid #423525;
            }

            #footer p {
            margin: 0;
            padding: 15px 0 0 0;
            text-align: center;
            font-size: smaller;
            color: #FFFFFF;
            }

            #footer a {
            color: #FFFFFF;
            }

            #footer p #link {
            color: #AF9371;
            }

            HTML:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <!--
            Design by Free CSS Templates(Template) - Andrew Carpenter(Admin)
            http://www.freecsstemplates.org
            Released for free under a Creative Commons Attribution 2.5 License

            Name       : Pocahontas Regular Baptist Church - Pocahontas, Iowa
            Description: PRBC - Pocahontas Regular Baptist Church - Pastor Tim Kuhn - Assistant Pastor Mike Ryan - Youth Leader Lauren Carpenter
            Version    : 1.0
            Released   : 04/20/2010

            -->
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>PRBC - Pocahontas Regular Baptist Church - Pastor Tim Kuhn</title>
            <meta name="description" content="Pocahontas Regular Baptist Church - Pocahontas, IA - Pastor Tim Kuhn - Assistant Pastor Mike Ryan - Youth Leader Lauren Carpenter - Come join us as we seek to worship God and encourage believers to live by Faith."
            <meta name="keywords" content="PRBC, pocahontas baptist church, pocahontas regular baptist church, pocahontas church, pastor tim kuhn, pastor kuhn, tim kuhn, pastor mike ryan, pastor ryan, mike ryan, youth leader, youth group, lauren carpenter, andrew carpenter" />
            <link href="default.css" rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
            <!--
            #header #logo h1 {
            font-family: Verdana, Geneva, sans-serif;
            }
            #header #logo h1 {
            font-family: Verdana, Geneva, sans-serif;
            }
            #wrapper #page #content .post .byline small {
            color: #AF9371;
            }
            #link {
            color: #AF9371;
            }
            -->
            </style>
            </head>
            <body>
            <!-- start header -->
            <div id="header">
            <div id="logo">
              <h1>Pocahontas Regular Baptist Church</h1>
              <p> </p>
            </div>
            <div id="menu">
              <ul id="main">
               <li class="current_page_item"><a href="index.html" title="Home">Home</a></li>
               <li><a href="#">map</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">links</a></li>
               <li><a href="#">Contact Us</a></li>
              </ul>
              <ul id="feed">
                 <li><a href="#">plan of salvation</a></li>
               <li></li>
              </ul>
            </div>

            </div>
            <!-- end header -->
            <div id="wrapper">
            <!-- start page -->
            <div id="page">
               <!-- start content -->
               <div id="content">
               <div class="post">
                <h1 class="title"><a href="#">Welcome to Our Website!</a><span class="links"><img src="../../../../Documents/PRBC/Church_Web.jpg" alt="" width="310" height="207" /></span></h1>
                   <p class="byline"><small>Posted on October 1st, 2009</small></p>
               </div>
               <div class="post">
                  <h2 class="title"><a href="#">Lorem Ipsum Dolor </a></h2>
                <p class="byline"><small>Posted on October 1st, 2009 by <a href="#">Free CSS Templates</a></small></p>
               </div>
               </div>
              <!-- end content -->
              <!-- start sidebars -->
              <!-- end sidebars -->
               <div style="clear: both;"> </div>
              </div>
            <!-- end page -->
            </div>
            <div id="footer">
            <p>&copy;2010 All Rights Reserved.  &bull; Pocahontas Regular Baptist Church<br />
            Please direct questions/Comments to Admin: <a href="mailto:ajcarpy2005@gmail.com" id="link"> Message</a></p>
            </div>
            </body>
            </html>

            • 3. Re: Newbie Question! Header and Main Wrapper now Seperated! Please Help
              osgood_ Level 8

              Where did you get that template from? It looks well f__ked up sh_t to me.

               

              Anyway change the #wrapper css - margin: 70px auto 10px auto;

               

              to

               

              margin: 0px auto 10px auto;

               

               

              #wrapper {width : 1000px;
              margin: 70px auto 10px auto; //will center div on the page.
              text-align: justify;
              text-transform: lowercase;
              line-height: 25px;
              }

               

               

              plus a css comment is more appropriately written as

               

              /* will center div on the page */

               

              Not

               

              //will center div on the page.

              • 4. Re: Newbie Question! Header and Main Wrapper now Seperated! Please Help
                ajcarpy2005 Level 1

                Thanks!

                 

                http://www.freelayouts.com/templates/-Blend#download

                 

                The above link is where I got the template.

                It''s actually a 3-column template designed for a blog but I'm coverting it to a 1 column for now, as I really don't have a need for 3 columns.

                On a side-note, would you advise the use of a seperate column for Google AdSense? (I'm actually thinking of placing Google Adsense on the bottom of the pages.

                 

                Thanks alot for your help!

                • 5. Re: Newbie Question! Header and Main Wrapper now Seperated! Please Help
                  osgood_ Level 8

                  ajcarpy2005 wrote:

                   

                  Thanks!

                   

                  http://www.freelayouts.com/templates/-Blend#download

                   

                  The above link is where I got the template.

                  It''s actually a 3-column template designed for a blog but I'm coverting it to a 1 column for now, as I really don't have a need for 3 columns.

                   

                  Yeah.....I was probably a bit hasty in my comments. It gives me cause for a large intake of breath when I see 'unatural' usage in code/css.

                   

                  On a side-note, would you advise the use of a seperate column for Google AdSense? (I'm actually thinking of placing Google Adsense on the bottom of the pages.

                   

                   

                  I don't really know how Google Adsense works so my comments would not be based on any past experience but I guess if you want to formulate a look for the website where they are included at the foot instead of the side then give it a go. If it works for you then you have your answer. Design is purely in the eye of the beholder.

                  • 6. Re: Newbie Question! Header and Main Wrapper now Seperated! Please Help
                    ajcarpy2005 Level 1

                    Could you also explain to me how I could get rid of the black lines and square on the page? I'm assuming that's some kind of formatting in CSS that is "left over" from the template.

                     

                    I probably went about this the "wrong way" and I assume I need to clean up the code a little bit. I basically want  to keep the top part and color scheme, but everything else can go until I format my own div's and arrange the content for my own design.

                     

                    EDIT: I've found the CSS that needed to be chopped out. I'm going to use the bare minimum from the template that I wanted and then kind of start "from scratch."

                     

                    Would you happen to know how I would be able to easily create a dropdown/flyout menu?

                     

                    I'm not sure if I want to go with flash or javascript or what? I'm not extremely experienced with programming but I've done enough to know the basics. Maybe I should start a new thread for this topic.

                    • 7. Re: Newbie Question! Header and Main Wrapper now Seperated! Please Help
                      osgood_ Level 8

                      ajcarpy2005 wrote:

                       

                       

                      Would you happen to know how I would be able to easily create a dropdown/flyout menu?

                       

                       

                       

                      Look at the spry menu bar that ships with Dreamweaver>Insert>Spry>Spry Menu Bar

                      1 person found this helpful