Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question about layout

    Hey guys I'm having a problem with how my website looks. I'm not sure what it is but for some reason on several of the pages my header increases in size by about 30 pixels. What confuses me is that all of the pages share the same style sheet. I dont understand why the layout should change if they are all referenced to the same css.

    Here is the site, so please navigate through it and let me know if you see anything that could be causing this problem. Thanks guys I would really appreciate the help....

    http://www.apluspowder.com/test/index.html

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You have two id's named headerLogo. Not sure if thats whats going on, but you should fix that.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello scurti130,
    You should validate your code first, there are some simple errors that need corrected. See the links about validation in my signature line below.

    After you validate, you should re-think about floating full width elements like your #header. We float things to put other things beside them. If they're full width, there is no room beside them for anything so no need to float them.

    You also put position: relative; on a lot things. Most of those could go away too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    scurti130 (12-15-2010)

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the responses guys im gonna try that out and see if it helps

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK I figured out what was wrong before. There was a space in between paragraphs tabs. I am having another issue now though. For some reason some of the pictures on the Gallery page wont load. It will display the title of the picture as a link instead of showing the picture. Anyone have a clue why this is, because the coding looks alright to me.

    http://www.apluspowder.com/test/gallery.html

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    CHeck to make sure the image file still exists and is in the correct folder. When I debug with Firebug, it doesnt shoe the 3tanks.png being an image. To me that suggests that maybe the file is gone, moved, or corrupt.

    btw, you should download firebug for firefox and use it. You can spot things like this with it, and its free.

  • #7
    New Coder
    Join Date
    Dec 2010
    Location
    Orlando, FL
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by scurti130 View Post
    OK I figured out what was wrong before. There was a space in between paragraphs tabs. I am having another issue now though. For some reason some of the pictures on the Gallery page wont load. It will display the title of the picture as a link instead of showing the picture. Anyone have a clue why this is, because the coding looks alright to me.

    http://www.apluspowder.com/test/gallery.html
    Like the poster above me said you should ALWAYS use firebug. I don't care who you are or how much you know about HTML and CSS. If i could create a signature i would put in big letters

    "DOWNLOAD FIREFOX AND INSTALL FIREBUG THEN ASK YOUR QUESTION"

    In my designing tool box it is my most used tool.

    Your problem is you named the file 3Tanks.png when it's really 3tanks.png. It IS case sensitive!

    You should also think about creating thumbnail photos instead of resizing that huge image for a thumbnail...anybody with a slow internet connection will hate your website.

  • #8
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    I prefer the Web Developer plugin, it helps me identify the CSS issues easier because I can just click on the section I'm working on. Though I also have Firebug but don't use it as much.

  • #9
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks so much for the help guys it is much appreciated!!!

  • #10
    New Coder
    Join Date
    Dec 2010
    Location
    Orlando, FL
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by scurti130 View Post
    Thanks so much for the help guys it is much appreciated!!!
    no problem brotha!

    Make sure you change those thumbnails, maybe even think about using some type of jquery gallery, that would look really nice.

    Here are some really nice examples:
    http://www.1stwebdesigner.com/design...lay-solutions/

  • #11
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey guys back with another question about the layout of my page...

    I wanted to add a side navigation for the pages that use a drop down tab on the menu. These pages would include Powder>General Info, Powder>Process, Powder>Systems, Contact>Directions, Contact>Quote, and Contact>Phone & FAX. If you look at this page:
    http://www.apluspowder.com/test/powderinfo.html

    You will see that the side navigation bar does not go all the way to the bottom of the page. I want the gray area to reach all the way down to the footer like the text area does on the right side. I have been changing values in my style sheet(navstyles.css) but I cannot seem to figure it out. If anyone has a clue what I have to do please let me know.

    Once again your help is greatly appreciated!!

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Well, this is a partial fix anyway.
    Instead of floating your full width #footer (we float things to put other things beside them) get rid of that float and use #footer to clear the floats in #layout.

    Like this -
    Code:
    #footer {
    width:100%;
    height : 60px;
    border-top : 5px solid #000;
    background-color : #333;
    padding-top : 5px;
    font-size: 14px;
    /*float:left;*/
    clear: both;
    position:relative;
    }
    Once you do that though, you'll see the gray still doesn't extend the full height of containing #layout. To fix that you could use faux columns.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Dec 2010
    Posts
    33
    Thanks
    0
    Thanked 1 Time in 1 Post
    Remember one most important issue faced by several css coders that they use several classes in one div and keep separate fonts in both so that also creates problem. See if this is the issue then you must correct it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •