/    Sign up×
Community /Pin to ProfileBookmark

Best use of CSS

Copy linkTweet thisAlerts:
Aug 03.2006

I am planning to build out a website using CSS. The website template has been built by a graphic designer. Here it is…[url]http://www.texasadvertising.net/tes…yered_bkgrd.jpg[/url].

What is the best way to build out the site using the template? Chop it up and put it together? Or lay it as a background and overlay divs?

Thanks.

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAAug 03.2006 — (FYI - your link doesn't work.)
Copy linkTweet thisAlerts:
@KDLAAug 03.2006 — Looks good, although a good portion of your page (appearing in the initial browser window) will be just the banner....

Depending on the size of the image file, it might be best to use it as a background. You might omit the text from the image, though, because when you optimize the background for web usage, the appearance of the text may be degraded during compression.

KDLA
Copy linkTweet thisAlerts:
@cmelegosSep 01.2006 — KDLA i have a similar question!i have downloaded templates and this is a bit diferrent.it is from www.mastertemplates.com, but if you want i can send it to you with pm. I want to create tables with background image of this template, but when i fill the tables or layers(i do not know the exact diferrence) the borders changes.

Thank you a priori!
Copy linkTweet thisAlerts:
@KDLASep 01.2006 — These templates are not coded well. They use spacer.gifs instead of HTML or CSS to control the spacing. (Spacer gifs are blank images.) It could be that you are deleting these when entering new information, causing the borders to change.

I urge you to visit: http://www.oswd.org/

They have a search capability here: http://www.oswd.org/designs/search/advanced/ which will allow you to specify the type of template you need.

I also encourage you to learn about HTML and/or CSS before designing a website. The best place for tutorials is the W3 Schools website at http://www.w3schools.com/. You need to have at least a basic understanding of the coding you are trying to customize for your design to be successful.

KDLA
Copy linkTweet thisAlerts:
@cmelegosSep 01.2006 — thank you i will try to follow your advices!
Copy linkTweet thisAlerts:
@cmelegosSep 01.2006 — i am sorry to disturb you again!Here is my template

http://www.mastertemplates.com/templates/048.htm

you see what is available. You believe that is not worthy to built a site from this template.It is my favourite template, that's why i insist on it.

Thank you for your patience!
Copy linkTweet thisAlerts:
@SimonWraySep 01.2006 — It looks okay, but it degrades poorly if you resize. Try increasing the text size via your Browser. Even if you increase the text size by one level the layout splits apart with nasty white gashes across it.

Lot's of users increase the size of text they browse at - even if only slightly. Accessabiity issues are worth considering, especially if you're putting together a corporate or organisation site.
Copy linkTweet thisAlerts:
@cmelegosSep 01.2006 — Ok you are right.It is so sad to change this wonderful template. However a lot of thanks.
Copy linkTweet thisAlerts:
@cmelegosSep 01.2006 — a something yet.If i choose another template i must choose something specified for not changing the size?
Copy linkTweet thisAlerts:
@SimonWraySep 01.2006 — It's a bad idea to try and get around the ability to re-size a page.

If a user wants to read your site, the user may want to increase the text size to make their life easier - you should not stop them from doing this! If they are stopped then they might go elsewhere.

Instead, what you want to provide is a design that still looks good when a user increases or decreases the text size, even if it's only a small change up or down.
Copy linkTweet thisAlerts:
@WebJoelSep 02.2006 — a something yet.If i choose another template i must choose something specified for not changing the size?[/QUOTE]

For a 'free' template, chances are you'll have a difficult time finding such a template. Most free templates are, despite maybe looking visually stunning on a 800x600 monitor, degrade quite badly on other sizes and upon other issues. Generally, that is why they are free.

The template you cited doesn't look at all difficult to re-create using some simple CSS to make it resizeable or at the very least, render adequately upon 800x600 and up. Mostly, it is the gradient color that I found pleasing about the site. The rest, merely containers of information. I didn't download it so I can't say for sure, but if it breaks apart on manually re-sizing the browser it is probably built with tables (not that one causes the other, I'm just saying that it would be consistant with my experiences that bad design usually starts from weak coding, vis tables for layout, etc).

A favorite free website place that I used to spend a lot of time is:

http://www.strangebanana.com

Their sites, -mostly ugly skeletons, are resizeable and with some nice gradients and images, can become quite nice. This site programmatically generates a never-before-seen template right before you eyes. 9 of every 10 or so are truly gastly but every once in awhile you'll create a rather nice-looking template and you can save it for yourself, modify, improve, etc. (free for private AND commercial use, btw).
×

Success!

Help @Slickwilly9 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...