Jump to content

General Advice for Content Boxes


dabwm

Recommended Posts

Hello everyone, beginner here. I was hoping to gauge some opinion on the best way to create these content boxes. The first image below shows two boxes (and their contents) which I am aiming to create in HTML/CSS. Usually I would set up the appropriate divs, and use images to avoid having to set colours, text font, border weights and the like. Then add anchors, and text as necessary. example1c.pngIs this such a good idea? Should I look to avoid using images and create the same effects (as created in Fireworks) using syntax inside the HTML/CSS? Or should I continue to use images to my hearts content? I know there is no 'correct way' to do this as both systems work, to some degree, but which do you guys think is more efficient, professional and worthwhile? After reading this back I figured it may confuse people so here's the question: To create the two boxes above would you use images, pure HTML/CSS properties to create the boxes, or a mixture of the two? As an example here's what I would usually do for Box 1: I'd create a div and add the image (below), setting the divs height and width properties to those of the image. I would then add the anchors along side the image inside the div and position them using CSS to give the 'Box 1' as on the image above. example2a.png What do we think? If you need code I'll more than happily provide. Thank you in advance. Edit: I'm asking this as it will apply to all the content boxes I deal with in the future that have a similar layout and so want to streamline how I deal with them.

Edited by dabwm
Link to comment
Share on other sites

I personally use CSS as opposed to images wherever possible. Something like this code might help get you started:

<html><head> <style> .orangeBox { display: inline-block; padding: 1%; width: 48%; background-color: #ffaa00; } </style></head><body> <div class="orangeBox"> Box 1 </div> <div class="orangeBox"> Box 2 </div></body></html>

Have a play around with it and see if it helps you.

Edited by WebFerret
Link to comment
Share on other sites

Images are a much worse alternative. Images have to be downloaded, and that requires one more HTTP request for each one. Viewers will see your page appearing in bits and pieces until it has fully loaded and it will take much longer.If you can avoid using images, it must be done, which is why CSS has been given all the properties to set borders and backgrounds. CSS3 even allows for gradients though it's not implemented in all browsers yet.

Link to comment
Share on other sites

I see, thank you, both of you. Besides CSS3 is there way to accommodate gradients without resorting to an image? As you can see in the examples provided the orange 'title bars' do use gradients so I was wondering if I could implement said gradient without an image? Also, how would you two go about creating those boxes? Simple divs with the correct properties applied? Tables? Etc.

Link to comment
Share on other sites

For maximum compatibility, gradients are typically done with small images that are 1px wide (or tall depending on the orientation of the gradient) and then repeated horizontally (or vertically, again depending on the orientation).

Link to comment
Share on other sites

A 1px image is acceptable for gradients. But if you just want a solid border (or dotted, double, groove or other style) or solid background colors and other things you should use CSS properties.

Link to comment
Share on other sites

  • 3 weeks later...

Hello again guys. I'm struggling to create the following using divs and the like. Could someone possibly help me or set down the foundations for it? example2a.png Note: Would a table work? Or is using tables considered a dated method and a thing of the past nowadays?

Edited by dabwm
Link to comment
Share on other sites

what have you tried so far? i would start with a container element, a top bar, then maybe a list for the gray boxes, floated left with a width, and then an image on the right,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...