Hi all!

I have a website http://www.evsoft.pk/js3 and I am having a bit of a problem. Where the picture of the map is now, I want to add a textbox by css with a rectangular shape. I also want to ad a h1 title in the textbox but I want to change the size of it to make the title smaller..

I suck at html and css and just wondered if anyone would be able to help me out?

Thanks a ton in advance!

By a 'textbox' do you mean adding a form element text box or just a <div> with text inside it ?

I have the same question. I'm also not completely clear on what you want to do. I'm thinking you want to have things so the map image is still there and then have text sitting on top of the image. Is that right?

If you could describe a little more what you're looking to do I'm sure we could help.

Making the size of the h1 text is fairly simple. The css might look like:

h1 {font-size:12px}

or

h1 {font-size:0.75em}

The size I picked is arbitrary and you could use any size you want until it looks the way you want.

hi and thank you for your replies!

I am talking about a div with text inside, but I want to completely control it with css. I want to be able to put the code in the top of the source code due to SEO-reasons since the whole purpose of this text is to be able to repeat some of my most important key-words.

basically,

1. I want to have text with a frame around it where the map is now.

2. I want to be able to set the border color, thickness aswell as the font color

3. I want to be able to use h1 and h2 within the text but I want it to be smaller than it usually are.

4. I want to use overflow (is that the correct name?) so that all different webbrowsers can handle the size of the text contra borders properly

5. I want to be able to handle the size of the border

6. I want to position the text in the frame exactly where I want it, i.e. just where the map is now.

Thanks a ton for helping me out, I really appreciate it!

1. Create a div and put a border around it, any color and width you choose.

<div id="textFrame"></div>
#textFrame{
border: 2px solid #666666; /*gives you a 2px wide gray "frame" */
width: xxxxpx;
color: #000000; /* sets font color inside the div */
float:left; /* to position the frame */
margin: 20px 10px 10px 120px; /*sets top, right, bottom and left margins to put the frame where you want it to be. Adjust as needed.

To squash an IE bug that will double the floated margin, add:
display: inline; - put this in a separate css file for IE only and call it using conditional comments.

For the text inside the box:
#textFrame p{
padding: 5px 5px 5px 5px; /*makes space around the paragraphs inside the div - adjust as needed */

Your HTML would look like:
<div id="textFrame">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>

You style headings like anything else:
h1{
font-size: 120%;
color: green;
font-style: bold;
} -- change as desired.

Wonderful!!!!! Thanks a lot!!!