Skip navigation
hcblue
Currently Being Moderated

Please help! n00b w/several questions

Jan 13, 2013 6:04 PM

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-correct.png

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,

Holly

 
Replies
  • Currently Being Moderated
    Jan 13, 2013 6:58 PM   in reply to hcblue

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 13, 2013 7:15 PM   in reply to hcblue

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 13, 2013 9:55 PM   in reply to hcblue

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

     

     

    Hope this helps!

    Julia

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 14, 2013 5:55 AM   in reply to hcblue

    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.

     

    http://twitter.github.com/bootstrap/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 27, 2013 9:54 PM   in reply to hcblue

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 28, 2013 5:42 PM   in reply to hcblue

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points