11 Replies Latest reply on Apr 11, 2010 7:45 PM by John Waller

    Getting my hands wet

    William-01 Level 1

      I am designing my first website using Dreamweaver and CSS but hit a wall that I don't understand. My inexperience prevents me from knowing how to troubleshoot the cause of my problem.

       

      Do I post the CSS and HTML code here for help? If not, how do I go about showing my problem without having a live site?

       

      Regards,

      william-01

        • 1. Re: Getting my hands wet
          John Waller Adobe Community Professional & MVP

          A link to a live site is best. Quicker and easier to troubleshoot accurately.

           

          Failing that, please describe the issue as succinctly you can (what you're trying to achieve, how and what problems you're hitting) and paste your code in the post.

          • 2. Re: Getting my hands wet
            William-01 Level 1

            Thanks for the quick response. How do I post the source code and CSS to the forum to where it will show up as actual code?

            • 3. Re: Getting my hands wet
              John Waller Adobe Community Professional & MVP

              Just cut from Dreamweaver Code View and paste into your post.

              • 4. Re: Getting my hands wet
                William-01 Level 1

                Ok, here are my issues.

                 

                Issue 1:

                My logo is placed where I want it. The background of my header is #000 and looks right in design view. But in live view, a white block shows up.

                 

                Issue 2:

                Where my navigation bar is going to be, the default copy is indendeted. This only happens on this line and I don't know why.

                 

                Goal:

                My goal is to have the logo stay where it is at, with solid black running across the entire site (page content at 1000px, centered). Same with the navigation bar where I will try and center my buttons within the 1000px, but have the navigation bar image repeat "x" direciton so it runs all the way left and right of the page.

                 

                From there, I will add a gradient starting below the navigation bar, running down to the footer. Again, the gradient will repeat in the "x" direction with my page content above the gradient.

                 

                Anyway, I am trying to understand everything as I go before the site becomes too complex.  Below, is my attempt to past the souce code and CSS.

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>My Site</title>
                <link href="my_site.css" rel="stylesheet" type="text/css" />
                </head>
                
                <body>
                <div id="container">
                  <div id="header_wrap">
                    <div id="header">Content for  id "header" Goes Here</div>
                  </div>
                  <div id="nav_bar">Content for  id "nav_bar" Goes Here</div>
                  <div id="top_row">Content for  id "top_row" Goes Here</div>
                  <div id="bottom_row">Content for  id "bottom_row" Goes Here</div>
                  <div id="footer">Content for  id "footer" Goes Here</div>
                </div>
                </body>
                </html>
                
                @charset "utf-8";
                /* CSS Document */
                
                #container {
                     width: 1000px;
                     background: #ffffff;
                     margin: 0 auto;
                     padding-left: 10px;
                     padding-right: 10px;
                     overflow: hidden;
                }
                
                #header_wrap {
                     margin: 0;
                     padding: 20px 0px 0px 0px;
                     width: 100%;
                     float: left;
                     background-color: #000;
                }
                
                #header {
                     background-color: #000;
                     background-image: url(images/logo.jpg);
                     position: fixed;
                     height: 155px;
                     width: 400px;
                }
                
                • 5. Re: Getting my hands wet
                  osgood_ Level 8

                  William-01 wrote:

                   

                  Ok, here are my issues.

                   

                  Issue 1:

                  My logo is placed where I want it. The background of my header is #000 and looks right in design view. But in live view, a white block shows up.

                   

                   

                  Get rid of position: fixed; from the below css selector:

                   

                  #header {
                       background-color: #000;
                       background-image: url(images/logo.jpg);
                       position: fixed;
                       height: 155px;
                       width: 400px;
                  }

                   

                  Issue 2:

                  Where my navigation bar is going to be, the default copy is indendeted. This only happens on this line and I don't know why.

                   

                   

                  Get rid of float: left; from the below css selector:

                   

                  #header_wrap {
                       margin: 0;
                       padding: 20px 0px 0px 0px;
                       width: 100%;
                       float: left;
                       background-color: #000;
                  }

                  • 6. Re: Getting my hands wet
                    William-01 Level 1

                    Wow! Thanks Osgood! You are the best!

                     

                    I appreciate it.

                     

                    william-01

                    • 7. Re: Getting my hands wet
                      William-01 Level 1

                      Things are coming along nicely. Howver, I would like to undestand what his happening with the height of my navigation bar.

                       

                      The code below shows where I am at currently. My nav bar bg image is 1px wide by 40px high. It repeats as I would like it to, but the height is not correct. When I add height with a value of 40px, it looks right. But according to the CSS school, there is no height value or position for BG.

                       

                      What am I missing?

                       

                       

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
                      <title>My Site</title>
                      <link href="css/my_site.css" rel="stylesheet" type="text/css"  />
                      </head>

                       

                      <body>
                      <div id="container">

                       

                        <div id="header_wrap">
                           <div id="header"><img src="images/brd_logo.jpg" width="400"  height="155" alt="Billy Raygun Design" /></div>
                         </div>
                        
                         <div id="nav_wrap">
                           <div id="nav_bar">About Us</div>
                         </div>
                        
                         <div id="top_row">Content for  id "top_row" Goes  Here</div>
                         <div id="bottom_row">Content for  id "bottom_row" Goes  Here</div>
                         <div id="footer">Content for  id "footer" Goes Here</div>
                      </div>
                      </body>
                      </html>

                       

                      @charset "utf-8";
                      /* CSS Document */

                       

                      #container {
                          width: 1000px;
                          background: #fff;
                          margin: 0 auto;
                          padding-left: 0px;
                          padding-right: 0px;
                          overflow: hidden;
                      }

                       

                      #header_wrap {
                          margin: 0;
                          padding: 20px 0px 0px 0px;
                          width: 100%;
                          background-color: #000;
                      }

                       

                      #header {
                          background-color: #000;
                          height: 155px;
                          width: 400px;
                      }

                       

                      #nav_wrap {
                          background-image: url(/images/nav_bar.jpg);
                          background-position: left bottom;
                          background-repeat: repeat-x;
                      }

                      • 8. Re: Getting my hands wet
                        osgood_ Level 8

                        William-01 wrote:

                         

                        Things are coming along nicely. Howver, I would like to undestand what his happening with the height of my navigation bar.

                         

                        The code below shows where I am at currently. My nav bar bg image is 1px wide by 40px high. It repeats as I would like it to, but the height is not correct. When I add height with a value of 40px, it looks right. But according to the CSS school, there is no height value or position for BG.

                         


                         

                        You cannot set the height of the background image using css neither can you set its width. You can however set its position.

                         

                        http://www.w3schools.com/css/css_background.asp

                        1 person found this helpful
                        • 9. Re: Getting my hands wet
                          William-01 Level 1

                          Thanks for the help and link Osgood. I'm making progess but slowly.

                           

                          I have my gradient navbar background working properly now. When I add my buttons i.e. home, about etc. they stack vertically on my page rather than run horizontally as I would prefer. My CSS has the navbar set with display: inline;.

                           

                          In Dreamweaver, my navbar background is visible, but pushed down under the vertical stack of buttons. When I switch to live view, my navbar background disapears completely.

                           

                          I don't understand why this is happening. Can anyone tell from looking at my code below?

                           

                          Thanks in advance!

                          william-01

                           

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                          <html xmlns="http://www.w3.org/1999/xhtml">
                          <head>
                          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                          <title>My Site</title>
                          <link href="css/billy_raygun.css" rel="stylesheet" type="text/css" />
                          </head>

                           

                          <body>
                          <div id="container">

                           

                            <div id="header_wrap">
                              <div id="header"><img src="images/brd_logo.jpg" width="400" height="155" alt="My Site" /></div>
                            </div>
                           
                            <div id="nav_wrap">
                              <div id="nav_bar">
                                <ul id="mainNav">
                                <li><a href="index.html"><img src="images/home.png" alt="home"/></a></li>
                                <li><a href="about_us.html"><img src="images/about_us.png" alt="about_us"/></a></li>
                                <li><a href="whatwedo.html"><img src="images/whatwedo.png" alt="what we do"/></a></li>
                                <li><a href="portfolio.html"><img src="images/portfolio.png" alt="portfolio"/></a></li>
                                <li><a href="testimonials.html"><img src="images/testimonials.png" alt="testimonials"/></a></li>
                                <li><a href="contact_us.html"><img src="images/contact.png" alt="contact_us"/></a></li>
                                </ul>
                              </div>
                            </div>
                           
                            <div id="top_row">Content for  id "top_row" Goes Here</div>
                            <div id="bottom_row">Content for  id "bottom_row" Goes Here</div>
                            <div id="footer">Content for  id "footer" Goes Here</div>
                          </div>
                          </body>
                          </html>

                           

                          @charset "utf-8";
                          /* CSS Document */

                           

                          #container {
                              width: 960px;
                              background: #fff;
                              margin: 0 auto;
                              padding-left: 0px;
                              padding-right: 0px;
                              overflow: hidden;
                          }

                           

                          /* HEADER */

                           

                          #header_wrap {
                              margin: 0;
                              padding: 20px 0px 0px 0px;
                              background-color: #000;
                          }

                           

                          #header {
                              background-color: #000;
                          }

                           

                          /* NAVIGATION BAR */

                           

                          #nav_wrap {
                              background-image: url(/images/nav_bar.jpg);
                              background-position: left bottom;
                              background-repeat: repeat-x;
                          }

                           

                          #mainNav {
                              margin: 0;
                              display: inline;
                          }

                          • 10. Re: Getting my hands wet
                            John Waller Adobe Community Professional & MVP

                            Hi William,

                             

                            This thread has previously been marked an answered (the yellow icon).

                             

                            Suggest you start a new (unanswered) thread with a descriptive subject line (e.g. CSS - navbar background disappears in Live View) to get more feedback.

                             

                            Would also help if you could upload your files so we can see the live site online.

                            • 11. Re: Getting my hands wet
                              JTP5000 Level 1

                              instead of

                                    <ul id="mainNav">
                                    <li><a href="index.html"><img src="images/home.png" alt="home"/></a></li>
                                    <li><a href="about_us.html"><img src="images/about_us.png" alt="about_us"/></a></li>
                                    <li><a href="whatwedo.html"><img src="images/whatwedo.png" alt="what we do"/></a></li>
                                    <li><a href="portfolio.html"><img src="images/portfolio.png" alt="portfolio"/></a></li>
                                    <li><a href="testimonials.html"><img src="images/testimonials.png" alt="testimonials"/></a></li>
                                    <li><a href="contact_us.html"><img src="images/contact.png" alt="contact_us"/></a></li>
                                    </ul>
                                  </div>
                                </div> 


                               

                              maybe try

                               

                              <div id="mainNav">

                              <ul>

                              <li><a href="index.html"><img src="images/home.png"  alt="home"/></a></li>
                              <li><a  href="about_us.html"><img src="images/about_us.png"  alt="about_us"/></a></li>
                              <li><a  href="whatwedo.html"><img src="images/whatwedo.png" alt="what we  do"/></a></li>
                              <li><a  href="portfolio.html"><img src="images/portfolio.png"  alt="portfolio"/></a></li>
                              <li><a  href="testimonials.html"><img src="images/testimonials.png"  alt="testimonials"/></a></li>
                              <li><a  href="contact_us.html"><img src="images/contact.png"  alt="contact_us"/></a></li>

                              </ul>
                              </div>