Link to home
Create AccountLog in
Avatar of Pete Long
Pete LongFlag for United Kingdom of Great Britain and Northern Ireland

asked on

CSS - and DIV Padding

Hi All

I've done some Google searching and cant really find an answer that I'm happy with.

I have a site that is controlled by a couple of CSS files. I want to add a search box on the site (that's fine I just paste in the code for the search).

But I want to put it in a <div> and set the padding etc. on it so i can squeeze/push it so it lines up neatly with other elements on the site.

I know I can declare a DIV ID in the CSS, then reference that on each on my pages, but I don't know the syntax, nor can I work out what I need to do (I'm not a web developer, I do my best to struggle along.)

Here http://www.petenetlive.com/KB/Article/concept.html you can see the search box (the one below all the header/buttons, I need to pop it in a <DIV>, apply padding to the left/Right/Top

My CSS is here http://www.petenetlive.com/PNL-CSS-2-Column.css

What do I need to put in the CSS, and what do I need to put on the page?
If you could explain what the code is doing so I can learn something, that would also be a bonus.

Thanks in advance.

Pete
ASKER CERTIFIED SOLUTION
Avatar of Tm-L
Tm-L
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Pete Long

ASKER

Thank you for the detailed and well written response!

The search bar at the moment is constrained (length wise) because its in a table (actually I think its in a container not a table).  If I make the div independent of the page will it still be constrained in the same way?
Like this, Can I set the dimensions of the DIV?
I might even consider placing it over the main logo at the top if I can place it this accurately!
oops.PNG
Also If I resize the page it moves about - so I'm guessing at different resolutions it will appear in different places?
from the link yo gave me - I've changed it from  absolute to relative, now I'm making progress
I would stay store a copy of the code currently displaying the search box, and then perform the adjustment as detailed.

from this you will be able to see whats happening now you have placed the search bar in its own independent container. Then you can modify the styles defined in the CSS file for the GSearch ID to mimic the constraints currently in place on the search bar.

Looking at your CSS i think there is a 200px margin acting on your main content area and padding on either side of that div of 20px per side, this is where search bar is contained and this div is within  another div which looks to be set to a width of 1000px.

so.. with the CSS file you would want to mimic this behavior to act upon the div id that relates to the div id used with the search bar (GSearch)

I think first you want to change the Position: tag to relative, and then possible remove the Top and Left tags and replace them with
 margin: 0 0 0 200px; 
 padding: 0 20px;

Open in new window


possibly. Slightly lost with where we are. try the above and let me know how its looking?
I've got it nearly there I need to put some padding in the right hand side of the DIV now....
From your CSS i think you had the setting of
padding: 0 20px;

Open in new window

give that a whirl as a place to start?
Cracked it!

#GSearch {
 position:relative;
 top:4px;
 left:7px;
 padding-right:7px;
}

Thank you Very Much, you gave me enough information and the right link so I could adapt it to work,

Best Wishes

Pete
Give this Expert a Cigar!!!!!!!!!!!!!!!!!!!
I just checked your CSS and page source to see your settings. It looks like you've got it right and hopefully a better understanding of DIVs, IDs, etc. and what can be achieved.

this could've all been done inline (with the html) but you'd have to do it on every page now you can just reference the ID to use the same positioning on any item you wish.

The position tag is very handy, you can double wrap divs so the outer div is static and filling the web page area and then the inner div is relative to the first DIV. Of course you can place as many div inside of each other as you like and have them interacting in different ways.

This is what you have happening at the moment with your site, if you trace back which DIVS are inside which you will see a Matryoshka doll kind of pattern. Which is why setting the position to relative worked for the GSearch DIV position.

I'm happy to help, there are some very cool things you can do with CSS definitely something worth investing time in when it comes to websites!