/    Sign up×
Community /Pin to ProfileBookmark

Merry Christmas and Help for the CSS younglings

Copy linkTweet thisAlerts:
Dec 23.2005

Hi All,

This is my first post to this forum. First off, I’d like to wish everyone a merry xmas in advance (in case this thread dies off early ? ).

I am trying to update my site before the year ends as a gift to myself (seriously).

what I ultimately would like to achieve is probably best illustrated in this crude picture [URL=http://www.stevelim.com/cssdream.jpg]cssdream.jpg[/URL]

I am going to try to explain it as best I can, but I’ll probably end up mumbling..

I am trying to get a few wrappers(?) all centered nicely but with images as borders around each of them. ie. I want to design my own borders for the main document and also different borders for like each post (like blog entries can have borders around each daily post).

The borders are colored Orange in my example.

I hope this makes sense. Can anyone offer some Christmas Cheer? ?

Merry Christmas All!
Steve.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@supersteve3dauthorDec 23.2005 — Aerospace,

The page seems to be mentioning wrapping images with borders. Would this work with block of text?

I also neglected to mention that I have seen cases where the code fails to work in IE.

Here is a site from a friend [URL=http://www.eggdropper.com/links.html]http://www.eggdropper.com/links.html[/URL]

What I want to do is almost exactly like his. However his site does NOT work with IE.

Thanks,

Steve.
Copy linkTweet thisAlerts:
@nodaa90Dec 23.2005 — first off, just looking at your original posts pic, if you just want solid orange borders, y cant u just use:

[CODE]
border:3px solid #orangecolorhere;
background:#graycolorhere;
[/CODE]

the picture is blurred so i dont know if those are normal solid borders or some sort of gradient

IF they are gradients then here is another way to do it.

set the background to the div as a repeating background of just the left and right borders

| |

| |

| |

| |

^an image like that

then, just use an image at the top and bottom of your div for the top and bottom borders

sorry if it is unclear, to sum up:

use a repeating background for the side borders

use individual images for the top and bottom borders
Copy linkTweet thisAlerts:
@supersteve3dauthorDec 23.2005 — Yes. This is exactly what I am trying to learn.

I am sorry, my example was just a solid for simplicity.. but I want to use custom borders. I am trying to cook up a simple example that could perhaps one day be used as a tutorial for others who my follow in my footsteps.

I am making a dummy page for illustrating this exercise and learning how to do it.

Hope that with some final handholding, it will work out. ?
Copy linkTweet thisAlerts:
@supersteve3dauthorDec 23.2005 — Friends,

This is what I have. Its a tutorial to teach others _as_ I learn ?

http://www.stevelim.com/web/imageborder.html

I do not understand how I should deal with the right border..

Back in the days of tables.. you could have 3 elements on a row. <TR> then 3 cells in that row. How do nested DIVs work in this manner?

Thanks.
Copy linkTweet thisAlerts:
@ray326Dec 23.2005 — A list may be the answer rather than nested divs. Your link above is broken, BTW. Looking a the real page I see you have a lot of "presentational" markup that needs to be factored out of the HTML into the CSS. Also, you may want to explore A List Apart for border information and tactics.
Copy linkTweet thisAlerts:
@supersteve3dauthorDec 24.2005 — Hi Ray,

Apologies.. the link has moved to here.

[URL=http://www.stevelim.com/web/test/imageborder.html]http://www.stevelim.com/web/test/imageborder.html[/URL]

I am not sure what you mean by using lists instead of nested divs. It sounds good though although I have not seen example of what you mention.

Also, regarding what you mention about presentational markup. Do you mean my pages still use alot of embeded html tags that could be sent out into a linked CSS file?

Thanks.
Copy linkTweet thisAlerts:
@ray326Dec 24.2005 — Forget everything I said. I must have skipped my meds this morning. Re the presentational comment, there are usually better ways to handle things rather than using hrs and a lot of brs. The former probably ought to be a top or bottom border for an appropriate element. The latter usually (but not always) are better done by adjusting margins appropriately.
×

Success!

Help @supersteve3d 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...