Can I use an image as a border?

[Conor]

I have a new site Im working on and I have image that I would to border my div, is this possible?

[Sam]

you can with CSS3 Border Images (http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image), however its poorly supported. your best bet is to define the images as background images, then pad your div.

[Conor]

what do you mean by pad my div and define them as background images, the images is quite small and I was planning on having it repeat to go up the entire container, can I do this and what div would the image be a bacground image work

[Ben Rogers]

Use an image as a border? No. Make an image look like a border? Yes.
Just use container DIVs (A pain, I know.) and tile the image in the background to the correct aligment in each one, and add padding to keep the text away. I think that CSS3 is going to provide a way to actually use images as a border, though.

[Conor]

I laready have a container div so instead of just using regular borders I would tile the image I want to use. Actually I think it I will need another container I have an idea so I shall try it

[Conor]

figured it out

http://complexfellow.com/newdesign.html

Heres a new design Im working on, although I may never use it or may just make it an alternate choice on my site. Im just trying to decide what kind of menu to use with this design and a type of background to apply.

[Conor]

Im having trouble deciding on some sort of menu to use for the site posted above any ideas?

[Ben Rogers]

Huh.. I kind of like it, even if maybe just for originality :D It does need a top and side border, or at least 0 margins for the top and side, but it still looks good. For the menu, I'd do a banner like one (stretching across the parent... no borders or backgrounds, and maybe the same font as in the header, or something close to it (a use for fantasy font?) that turns darker :hover.

[Conor]

yeah Im starting to actually like it to, I decided to try and float a menu to the left and display content on the right but when I put content in the .nav div it pushes all the content down any idea why


.nav {
float:left:
width:160px;
}
.blog {
width:480px;
float:right;
}


How can I get themn to line up?
also in mozilla the paper bg cuts off after the .nav and doesnt continue over .blog

[Sam]

.nav
{
width:160px;
float:left;
}
.blog
{
margin-left:160px;
}

It may be better to switch their order in your markup (so your content comes first to screen readers, in which case you would use

.nav
{
margin-right:480px;
}
.blog
{
float:right;
width:480px;
}
edit:
and to get rid of the background issue, you'll either have to add a footer with clear:both; applied to it, or make sure that the non-floated element is taller than the floated element.

[Ben Rogers]

Well, you shouldn't set a width for the blog section at all, if I know what I'm talking about (highly unlikely :p) then it'll be easier to edit in the future.

[Sam]

IE may require that you apply a width to your blog div, however I'm not entirely sure.

[Conor]

thank you sam yet I think it looks better with the menu on top so sorry. I have a question I was going to make my menu in with the same font as my header img in Photoshop, would kind of image would I use. I would use a png 24 but that will display terrible in IE

[Ben Rogers]

Sam- Well the best way to make yourself sure is to try.

Conor- Just experiment, find whatever looks best to you. I like sketching it out to find what I want, then worry about doing it.

[Sam]

Like omega said, try all the formats available. Most likely a jpg or a gif will end up suiting best, but if you're gonna use images for navigation, make sure use provide a suitable image replacement (http://www.mezzoblue.com/tests/revised-image-replacement/)

[Conor]

thanks for the links sam Ill definately check it out, Is there anyway to center the images in my nav bar?

[Sam]

could you be more specific? vertically? horizontally?

[Conor]

horizontally so there not all packed in the left there in the center.

[Sam]

Yes, but it will be much easier when you switch to background images rather than image tags. I could solve it like this, but i would strongly recommend switching to an image replacement technique beforehand. Let me know what you decide.

[Conor]

How would I have a different bg image in for home,archive,contact,links all in the .nav ul li etc..

[Sam]

give each a (or span depending on which image replacement technique you use) an id, then reference it in the css with #id

[Sam]

on a moderatly related note, why are you using classes for your containing div's rather than id's when you are only using each once?

[Daniel T]

I like the new layout Conor! But, you should look at it in IE. IE doesn't support transparent PNG's (for some, unexplainable, f***ed up reason). You should use GIFs, instead. Also, it is moving the menu down a pixel or 2, causing the entire page content to move down with it when I hover over a menu item.
-Dan

**EDIT**
For some reason, IE is able to show your title trans-png image properly, but not the navigation ones :rolleyes: Also, the moving of the content in IE is being caused by underlining on hover.

[Conor]

Well before I knew much about Id's I just used and alot of it is packed deep into php code.

Yeah I know about that stuff dan and Im going to fix it,

[Conor]

ok sam I use bg images now, so now how can I center it?

[Sam]

you've got a div with the class menu, along with a ul and li's with the same class. Remove the class attributes from all your ul's and li's within your div.menu before we continue

[Conor]

Ok sam Ive dont that I thought you had to specify it even for the elements inside of it.

[Sam]

also, having h6's within your li's prevents them from displaying inline, and really isn't semantically correct, so you could probably safely remove all your h6's. The h6's on the link i sent you were merely examples, this should work with any element

[Sam]

the way you had it, the 640px was applying to everything with class="menu", including the li's, which is part of your problem.

[Conor]

ah ok, then if I was to remove the h6's where would I aply the id=home etc... to.