Solved

CSS - and DIV Padding

Posted on 2012-12-21
11
471 Views
Last Modified: 2012-12-21
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
0
Comment
Question by:Pete Long
  • 7
  • 4
11 Comments
 
LVL 3

Accepted Solution

by:
Tm-L earned 500 total points
ID: 38712599
This might do what you want.

in your css file you want to add this:
#GSearch {
 position:absolute;
 top:300px;
 left:400px;
}

Open in new window

This code allows you to set a global style linked to an id, this means that when you place a div on a page you can give the div an ID, with this ID it will loop back to your CSS file and look for the corresponding ID to retrieve its style settings. This means you dont have to program div styles on every page but simply set them once in your CSS file and then reference them site wide. A nice simple single point of editing.

You should notice that in the code above i have given the style the ID of GSearch, this is dictated but the # at the top of the code, the text following the # is the ID.

i have then set position:absolute, this remove the div from the page allowing you to place it independently. This means we can specify where we want our div to be placed and it will be placed there no matter what, giving you complete control.

After the position tag just mentioned which has told the browser to place this div where we want it no matter what, we can then dictate the placement of our div. this is done with the top: and the Left: tags in this case. there isn't a need for the Right tag as well because if we have told the div how high low to sit on the page as well as how far in from the left it should sit in the right place and not need to be told how far in from the right to sit.

with the top: and left: tag i normally use px
 top:300px;
 left:400px;

Open in new window

you would simple increase or decrease the amount of px to move the div around. Changing the Top: px will move the div up or down the page (vertical movement) and changing the Left: px will move the div left to right across the page (horizontal movement) .

There are other tags that can be used to achieve different outcomes. the ones in the code so far should be enough to get you moving the div around and positioning where you want as well as get a better understanding of the concept. Here you can find a reference of all the tags that can be used and set within your CSS styles.

With the above code in your CSS file, you need to tell the div containing the search bar to look to the css file for its style information and where it need to look in the file. this is done with the ID previously mentioned.

In the code below you see that i am placing a div but telling it that its ID is GSearch, so it will now look to the css file for any styles that correspond to that ID and then apply those styles to that div:
<div id="GSearch">Place your Google search bar code here!</div>

Open in new window


so at this point it will apply the settings you made in your css file to that div and you will be able to position and modify as you need.

you will need to place the code within your css file and have the div referencing it as just mentioned before you will notice any changed you make to the core css file in regards to the top: and Left: modification.

Does this help you at all?
0
 
LVL 57

Author Comment

by:Pete Long
ID: 38712699
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?
0
 
LVL 57

Author Comment

by:Pete Long
ID: 38712731
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
0
 
LVL 57

Author Comment

by:Pete Long
ID: 38712735
Also If I resize the page it moves about - so I'm guessing at different resolutions it will appear in different places?
0
 
LVL 57

Author Comment

by:Pete Long
ID: 38712750
from the link yo gave me - I've changed it from  absolute to relative, now I'm making progress
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 3

Expert Comment

by:Tm-L
ID: 38712766
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?
0
 
LVL 57

Author Comment

by:Pete Long
ID: 38712770
I've got it nearly there I need to put some padding in the right hand side of the DIV now....
0
 
LVL 3

Expert Comment

by:Tm-L
ID: 38712772
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?
0
 
LVL 57

Author Comment

by:Pete Long
ID: 38712787
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
0
 
LVL 57

Author Closing Comment

by:Pete Long
ID: 38712791
Give this Expert a Cigar!!!!!!!!!!!!!!!!!!!
0
 
LVL 3

Expert Comment

by:Tm-L
ID: 38712807
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!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now