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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts

    issues with one page

    Hi, would someone take a look at this site and tell me how to resolve the following issues:

    1. i am trying to move the search bar into the top navigation bar (to the left of "home"). when i move it, the LI's fall underneath it. What is the way to insert it properly?

    2. I am trying to remove the search bar from the very top of the screen. WHen i remove it, a lot of things shift horizontally. What is the method to remove it properly?

    site is at

    Thanks
    Last edited by cyborg360; 10-31-2011 at 04:27 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cyborg360,
    I think learning the box model and observing it's rules will be a big help for you.
    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    Just for example, You have 340px wide #headerleft containing 340px wide .logo which contains 382px wide gl_logo.png.

    I think you have a little divitis there too.

    Your request #1 is another example of not being familiar with the box model. On FF8 and IE9 the login all looks centered under 'Members Area' for me. Not sure if maybe you've already fixed that...
    But if you put a background color on .login_sec that contains the login form you will see it is smaller than what you've put in it.
    Like this -
    Code:
    .login_sec {
        background: #00f;
        float: left;
        height: 50px;
        margin-left: 50px;
        margin-right: 0;
        padding: 0;
    }
    Now remove the height: 50px; and look at it again.

    Request #2 is just a matter of making sure there is room for all the elements you want to float beside each other. Float them and, if needed, nudge them around with some margin to get them in the right spot

    Request #3 might be a little more difficult since it's part of your menu and moving it out of your menu will likely remove most of the styling that makes it look the way it does. I did not look into moving this...

    #4 is mabye not so difficult, just edit out the containing .header_innerright and all it's contents.
    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:

    cyborg360 (10-31-2011)

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello cyborg360,
    I think learning the box model and observing it's rules will be a big help for you.
    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    Just for example, You have 340px wide #headerleft containing 340px wide .logo which contains 382px wide gl_logo.png.

    I think you have a little divitis there too.

    Your request #1 is another example of not being familiar with the box model. On FF8 and IE9 the login all looks centered under 'Members Area' for me. Not sure if maybe you've already fixed that...
    But if you put a background color on .login_sec that contains the login form you will see it is smaller than what you've put in it.
    Like this -
    Code:
    .login_sec {
        background: #00f;
        float: left;
        height: 50px;
        margin-left: 50px;
        margin-right: 0;
        padding: 0;
    }
    Now remove the height: 50px; and look at it again.

    Request #2 is just a matter of making sure there is room for all the elements you want to float beside each other. Float them and, if needed, nudge them around with some margin to get them in the right spot

    Request #3 might be a little more difficult since it's part of your menu and moving it out of your menu will likely remove most of the styling that makes it look the way it does. I did not look into moving this...

    #4 is mabye not so difficult, just edit out the containing .header_innerright and all it's contents.
    wow, im glad youre still here, Excavator, posting useful responses. I remember you helping me out a couple years back.


  •  

    Posting Permissions

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