11 Replies Latest reply on Mar 16, 2010 6:17 AM by Chorale0001

    Header / Div

    Chorale0001

      Hello

       

      I'm making a website that require to have a header and a bottom extended to fit the viewscreen.

       

      While i managed to have my bottom, my header is a little more tricky, because the image is a gradient color, so on the left i need to extend white, and on the right a dark blue.

       

      Any idea ? i tried to create 1 file for the part thast need to be extended. but it resulted in a eyeache...

       

      Thx for any idea.

        • 1. Re: Header / Div
          martcol Level 4

          My eyes are aching trying to work out what you mean.

           

          If your page is live, a link would be really helpful.

           

          If you want your footer to extend accross the page and change colour from left to right that must be possible but will take a little working out.

           

          Martin

          • 2. Re: Header / Div
            Chorale0001 Level 1

            He. sorry about my average english, i'm not english

             

            there is no online page available yet.

             

            I just found how to get my bottom extensible to fit the screen of everyone, my header is the real probleme, because it is a gradient, from left ( white) to right ( dark blue) with a picture in the center.

             

            Is there a way to make the header extend the white to the left and the dark blue to the right ?

             

            I can make a header with 1 color extend without any probleme, but the trick is to have 2 color :S

            • 3. Re: Header / Div
              martcol Level 4

              I don't think it is that straight forward.

               

              However, you might try one huge image that is always going to be wider than any browser.  Make the image as tall as your header.  put the interesting part of the image in the center including the gradient and possibly your other image incorporated in it.  Save the image for web as small a file size you can get and set it as a background image using CSS to your footer div.

               

              In your CSS set the position of the background image center and bottom for the header or center and top for the footer.

               

              Even as I'm typing this I can imagine all kinds of difficulties but, that might work.

               

              Martin

              1 person found this helpful
              • 4. Re: Header / Div
                martcol Level 4

                Here's a sample rule from one of my pages that looks a little bit like the rule that might apply to your header:

                 

                #headinner  {
                    margin: 0 auto;
                    width: 56.25em;
                    height: 11.25em;
                    background: transparent url('../Images/HeaderWaterMarkLg.gif') no-repeat bottom center;
                   }

                • 5. Re: Header / Div
                  Chorale0001 Level 1

                  well Thanks for the help.

                   

                  Even though i didnt fix my probleme, you gave me a way to... go around the probleme. i just enlarged the header up to 2000 pixel. however i am unsure of what will happen on a 1024x768 screen.

                  • 6. Re: Header / Div
                    Nancy OShea Adobe Community Professional & MVP

                    Maybe you want a liquid (%) header and footer like this?

                    http://alt-web.com/TEMPLATES/I-page.shtml

                     

                     

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

                    1 person found this helpful
                    • 7. Re: Header / Div
                      Chorale0001 Level 1

                      Hello Nancy !

                       

                      Great work with the liquid layer, however i have an image like this. with the gradient, as Header, that all my probleme, for i am now able to put any patern, or image and use the liquid layer to duplicate it, then put some image on top of it. However with this one it isn't working nicely.

                       

                      Any idea ?, Also note that i need to have a line at the bottom of the header that need to be repeated at will. I have no probleme at all for my bottom, my only realllll probleme is the gradient. i need to have the White extend on the left and the black on the right.

                       

                      Image link : http://www.episodesoft.com/demo/Header_test.png

                       

                      Thanks a lot

                      • 8. Re: Header / Div
                        osgood_ Level 8

                        Chorale0001 wrote:

                         

                        Hello Nancy !

                         

                        Great work with the liquid layer, however i have an image like this. with the gradient, as Header, that all my probleme, for i am now able to put any patern, or image and use the liquid layer to duplicate it, then put some image on top of it. However with this one it isn't working nicely.

                         

                        Any idea ?, Also note that i need to have a line at the bottom of the header that need to be repeated at will. I have no probleme at all for my bottom, my only realllll probleme is the gradient. i need to have the White extend on the left and the black on the right.

                         

                        Image link : http://www.episodesoft.com/demo/Header_test.png

                         

                        Thanks a lot

                         

                        Just extend the white out to the left and the black out to the right on the image and then centre the image in the browser window (as martcol suggested)

                         

                        The repeating line under the image doesnt need to be an image it can just be applied as a bottom and top border to the <divs> which make up the construction

                        • 9. Re: Header / Div
                          Chorale0001 Level 1

                          Hello Osgood_

                           

                          That was my idea all along, but i can seem to find the command to tell dreamweaver to expand 2 image at the same location, one to the left and the other to the right. If i apply repeat-x it will make me a nice mosaik

                           

                          What is the command ? how do i make it ? Do i need to make 2 small file of white and dark blue ? how do i do it ?

                           

                          Message was edited by: Chorale0001

                          • 10. Re: Header / Div
                            osgood_ Level 8

                            Chorale0001 wrote:

                             


                             

                            What is the command ? how do i make it ? Do i need to make 2 small file of white and dark blue ? how do i do it ?

                             

                             

                             

                            No, just extend the white area and the black area on the image out so you have one single longer image. At one end the will be a lot of white and at the other a lot of black. Then just center the image in the browser window. If the user then widens the viewport they will see more of the white and black area. The part of the image in the middle (which can't be extended otherwise it would distort) will stay in the center of the browser window.

                             

                            You would obviously need to use this as a background image attached to either the <body> tag via css or attached to a <div> via css.

                             

                            To be honest you could also just extend the double line that is under the image out left and right as well instead of applying it as two borders as I suggested in my first post.

                             

                            Will that solution work for you?

                            • 11. Re: Header / Div
                              Chorale0001 Level 1

                              Perfectly ! Thanks !

                               

                              +10