[HELP] Website Banner

[MattehCarter]

Okay, well on my website design I am going to have a column that has information about the services the website will offer.

So far I have an image design of what each information section will look like:

The background of this div will stretch along the whole of the page, but I want to code the image shown above in HTML/CSS.

How would I go about creating the HTML for these sections?

 

[s-p-n]

One image for the lock.
One (1 px wide) image for the top2bottom gradient.

The text should be typed up in 2 divs on top of one another... Text in images usually isn't a good thing.. Rare cases like captcha, etc, come into play... Which are kind of tacky, anyway.

 

[MattehCarter]

I've got it working like this so far, is there a way to prevent the text from slipping underneath the image?

 

[TomSOMNIAS]

The way I would do it, splitting it up into three divs. This would also help the text from slipping under your image.

Style:

#secure {width:300px;}
#lock {width:100px;height:70px;background:url('lock.png');float:left}
#text {width:200px;float:left;}
h1 {font-weight:bold;font-size:20px;}

You will need to add the actual dimensions for the lock image, you may also want to apply your font style for the text div.


Code:

<div id="secure">
<div id="lock"></div>
<div id="text"><h1>Secure!</h1>At Carter Media we make sure that all of our scripts are secure before they are released to you.</div>
</div>

Then include s-p-n's gradient advice and it should look nice.

 

[MattehCarter]

Okay, many thanks for the help!

 

[foxx]

Okay, well on my website design I am going to have a column that has information about the services the website will offer.

So far I have an image design of what each information section will look like:

The background of this div will stretch along the whole of the page, but I want to code the image shown above in HTML/CSS.

How would I go about creating the HTML for these sections?

Figured that you made an idiot of yourself so it'd be better to make a new account when you need to ask for help with such a trivial thing?

And if it's just a banner, it's not worth coding, just throw it there as an image. Banners are supposed to be kinda eye candy, and it won't ever look as good coded as if it was an image, due to fonts not being antialiased and stuff. Not to mention that as I said in the other thread, not everyone has trebuchet or whatever you are using there.

 

[MattehCarter]

Okay, I have recreated the banner now using just images. I have structured the divs like so:
<div id="banner_container">
<div id="banner">
<img src="" alt="" />
</div>
</div>

The banner_container stretches 100% of the browser, with a background gradient running through it. The secondary div has a 60% width, and I have then styled the images to have a certain width apart from each other.

Will this format work correctly? Is there a better way to do it?