...

View Full Version : issues with one page



cyborg360
10-31-2011, 12:30 AM
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

Excavator
10-31-2011, 01:59 AM
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 (http://www.w3.org/TR/CSS2/box.html). 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 (http://www.apaddedcell.com/div-itis-what-it-and-how-avoid-it) 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 -

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

cyborg360
11-01-2011, 01:44 AM
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 (http://www.w3.org/TR/CSS2/box.html). 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 (http://www.apaddedcell.com/div-itis-what-it-and-how-avoid-it) 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 -

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum