11 Replies Latest reply on Jan 28, 2013 6:24 PM by hcblue

    Please help! n00b w/several questions


      I'm in the process of making several modifications to this site and don't want to update the FTP site until all is good to go, so I've included jpegs for you to see my problems. I hope someone out there will give me some advice. One thing that I realize now that I could've done differently is create an external style sheet for my CSS, instead of having my CSS in my source code. But I feel like I'm too far into it to change it now. Could this be part of my problem with some of these questions? If so, is there an easy fix? Sorry I'm bouncing around here, I feel like I'm way in over my head and the frustrations have gotten me to the point where I think that web coding is just not for me! But I've come so far with this website and don't want to give up on it. Thank you very much for any assisstance anyone can give me. Btw, here is a link to site as is it now in case it helps: http://turtlecell.com



      1) I had to delete a navigation menu item and adjusted the width, but it's leaving this space between the logo and start of the menu, but only on certain pages. I'm at my wits end trying to figure out why this is. The first image shows how it should look. The next 2 are wrong.


      menu 2-wrong.png

      menu 3-wrong.png


      2) For some reason, the footer on my main page only is misaligned.


      footer and pics.png


      3) Also, you'll see in the pic for question 2 that the images I have there (used lightbox) have this white dash between each pic??


      4) My client has asked if I can make the site adjust in size to whatever size monitor someone is using. (He just bought a 30" monitor, so of course the content looks small). I've tried reading up on this and it looks like I need to use percentages to make this work, but I'm having trouble knowing where to start! I tried first making the body tag 100%, then the container div 80%, but it just messes everything up! Do I need to have every div set at 80% (for example)?


      Thanks again,


        • 1. Re: Please help! n00b w/several questions
          Ben M Adobe Community Professional

          1.  You have header1 and header2 as 2 separate divs floated left and right.  They should be contained without one div with either the image floated left or the menu floated right. Both don't need to be floated and they should be in the same container.  Then by making the background of the container grey you don't get that green space in between.


          2.  Footer - it's hard to say now. We would need to see the code that you are changing to figure out what is going on.


          3.  Check the code for spaces in between images, if not check the CSS.


          4.  Again, we need to see the code to offer suggestions.  Tough to say what's going on or where to start.  We could end up discussing respsonive design or working with frameworks like bootstrap or 960gs.

          • 2. Re: Please help! n00b w/several questions
            BenPleysier Adobe Community Professional & MVP

            1. The original menu seems Ok. Hence I would remove the item that you do not want and adjust the width of the items (LI) to 16.6666%

            2. If you keep the footer within the confines of the container div, this should not happen

            3. It looks like a border or spacing problem. Hard to tell without seeing the code

            4. You need a RWD (responsive web design), but even then I would not go past 1200px. It is great having a 1920px monitor, but I would not like to read a web page over the full width. My neck does not need the exercise.


            I recently wrote an article that will assist with RWD http://pleysier.com.au/sass_article.php. The resultant pages can be viewed here http://foundation.zurb.com/templates.php

            1 person found this helpful
            • 3. Re: Please help! n00b w/several questions
              hcblue Level 1

              Thanks for the quick response. Ugh, I can't believe how easy a fix that was for the header! Sometimes I find myself over analyzing stuff.


              As for the footer, I never changed anything with the footer, and it was fine before I had to add more divs to the main page. So maybe after I finish battling with content for that it'll come out correctly. I'll post again if I'm still having problems with it.


              As for the white dash between the images, if you look at the site the way it is now, the dashes are there, and you can check the page source. I used lightbox. The link to the site is in my original question.


              I guess I could say the same for the 4th question because I haven't really changed much, it's just the main page I'm still working on, so the majority of the code is still the same.


              Thanks again! One down, 3 to go...



              • 4. Re: Please help! n00b w/several questions
                hcblue Level 1

                Well, I fixed the header problem based on the response from SnakEyez02, but I have the widths in pixels...is it better to put it in percentages?


                Thanks for the response on the footer! I DID have a closing div tag in the wrong spot. I don't understand why the validator doesn't catch that stuff(?)


                As for the white dash between the images, if you check the site as it is (I put the link to it in my original question), you can check all of the coding. I used lightbox.


                I haven't heard of RWD yet, I had only read about a "liquid" layout (along w/the other names for it). As it is now my site is at 1100px wide. I will check out the articles. Looks like perhaps a lot more work to do this.


                Thanks again!

                • 5. Re: Please help! n00b w/several questions
                  jgrummel Adobe Employee

                  I know this tutorial is a bit long, but it does a really good job of explaining different types of layouts:



                  Hope this helps!


                  • 6. Re: Please help! n00b w/several questions
                    Ben M Adobe Community Professional

                    The validator ( http://validator.w3.org/ ) should catch everything.  Dreamweaver's doesn't always.


                    For the white space, change the .lbGallery ul li rule from "display:inline;" to "display:inline-block;".


                    For the responsive web design, you could, and I use that word with extreme caution, use Dreamweaver's fluid grid, although I've had an easier time explaining the Twitter Bootstrap to newcomers than the DW system.  The code just makes more sense.  They have a few starter pages, but the basics of it are that you layout everything in a grid and the code is already in place to do what you need whether it be fluid or fixed.  Typically in repsonive web design, there is no reason you cannot add extra graphical elements to fill in the whitespace of a design on higher resolutions, but as gramps says, typically users don't want to read, so you it is better not to make your body text stretch the width of the display.



                    1 person found this helpful
                    • 7. Re: Please help! n00b w/several questions
                      hcblue Level 1

                      Ughhh! I'm freaking out right now! I've done (I believe) everything that everyone here has suggested. As I was making these modifications I checked with different browsers (firefox, chrome, safari), checked every file with validator.w3.org, and everything worked fine. Now I re-uploaded everything to Filezilla, and there's something wrong in each browser that I had checked with before! I don't understand and am very frustrated right now. Could somebody please look at my site and offer some suggestions please?




                      Thank you very much in advance!



                      • 8. Re: Please help! n00b w/several questions
                        BenPleysier Adobe Community Professional & MVP

                        Refresh the browsers to get rid of the cache. Works fine for me.

                        • 9. Re: Please help! n00b w/several questions
                          hcblue Level 1

                          Well I obviously freaked out prematurely. When I looked this morning most everything was correct. Guess it takes the FTP site some time. I do have one thing that is not working correctly across browsers. On the main page, just below the "Available soon for..." there is an order now button. It only appears with Safari. I've tried Firefox, Chrome and IE and the image does not appear on any of those. The thing that gets me is that the image was there before and worked fine, all I did was make it bigger and relink it, so I'm confused why all of a sudden it doesn't show up.


                          Thanks in advance for any assistance.

                          • 10. Re: Please help! n00b w/several questions
                            BenPleysier Adobe Community Professional & MVP

                            The original question has been answered correctly. I think it is time to statrt a new discussion

                            • 11. Re: Please help! n00b w/several questions
                              hcblue Level 1

                              Oh ok, thanks, I'll start a new one.