23 replies to this topic

[Misapoes]

hey,i'll go righ tto the point
#nav_mid{
background-color: #3d3d3d;
border: 1px solid #181818;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #C1C4C6;

this is for a navigation box with a stroke as borders
but what if you have images as borders?

[softLearner]

I thinkyou can't use the border property in CSS for images.

The only way is to create one main dive to rap around three sub divs top make the top middle and botton of the border. So the top div will have the border image for the top of the box, the middle box will have a repeating bacground image for the left and right border and the bottom will have the bottom border image.

So with the top, middle and botton divs mergerded should form a seamless border. Hope you understood what I was saying there.

[Misapoes]

ok,i did the top and bottom thingy(twas already included in the tut:p),but don't know how to make teh repeating borders (i have a piece of the border,but don't know how to include it in the code)

[greg]

I don't understand what exactly you're trying to do. Can you be more specific, and maybe show an example?

[Misapoes]

well,i have a coded layout in CSS and DIVS ,without tables
i have a navigation box with a header pic and footer
i know how to do this because it's all in the tutorial of tables to css,divs
only thing is,i have custom borders for the nav boxes,and i don't want a simple 1 px stroke,but a streching image

background-color: #202020;
border: 1px solid #000000;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #808080;

that's in the css,as you see it's a 1 px border (directly token from the tutorial)

hope that helps

[coolaid]

background-image properties arn't suppose to be able to be put on borders. if you want to change the border, just "solid" to "dashed" or change the hex number or thickness, thats all you can edit.

[Misapoes]

what about in the index instead of the style.css ?

<!--BANNER PART-->
	<div id="banner"><img  src="images/header.jpg" width="800" height="128" alt="Banner" /></div>


<!--NAVIGATION PART-->
	<div id="left">
<!--NAVIGATION TOP-->
	<div id="nav_top"><img src="images/navigation.gif" width="145" height="25" alt="Navi Top" /></div>

<!--NAVIGATION MID (CONTENT)-->
	<div id="nav_mid">

:: <a href="#">Home</a><br />
:: <a href="#">Downloads</a><br />
:: <a href="#">Forum</a><br />
:: <a href="#">Members</a><br />
:: <a href="#">Staff</a><br />
:: <a href="#">Contact us</a><br />

:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a>
	</div>

<!--NAVIGATION BOTTOM-->
	<div id="nav_btm"><img src="images/footer.gif" width="145" height="16" alt="Footer" /></div>
	</div>
<!--END LEFT FLOAT-->

this is a piece of the index.html

can i do anything here to have a strechable border?

[softLearner]

Guys! he dosn't want to have a normal boarder with a 1px solid border or nay other style of border. Instead he wants a background image. as he has custom borders ie a shadow eround his box.

In #nav_mid us this:

#nav_mid{
background: url(path/to/your/image/for/background.gif) repeat-y #3d3d3d;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #C1C4C6;
}

NOTE: your background image needs to be the same size in width fo your #nav-mid box. So set a default size for your#nav_mid box an you should get your background image repeating down wards.

Edited by softLearner, 30 July 2005 - 01:03 PM.

[raenef]

I believe repeat-y; (vertical) is to be used instead of repeat-x; (horizontal) but yep thats the code. Also as a side-note dont forget your closing } bracket.

[softLearner]

Ha! Thanks for that raenef, editted my post and fixed it up. I always seem to get my X ad Y mixed up, dunno why.

[Misapoes]

k,got it working exept for *newb question ahead*
the border on the right side of the box? it streches perfectly without bugs at the left side,how do i also make the border appear on the right side?

oh and also,the text overlaps the border? how do i fix that? with a margin or something?

(ya i know,very new to coding )

[raenef]

As for the text-part; that would be padding.
Example:
padding-left: 5px;
padding-right: 5px;

As for the border, why isnt it showing up? does your new background overlap it? A screenshot and/or link may help us review the issue at hand.

[Misapoes]

it is showing up,but only at one side

[raenef]

I see interesting, try defining a width on your css. Such as
width: 150px;

(changing it of course to your nav's width)

[Misapoes]

I did that,but nothing changed ?

[raenef]

hmmm very strange indeed, are you sure you're not closing the div early? I'd recheck all the div tags in the html file.
I've tested this out real quick and I dont seem to have a problem with the border like this x_x

perhaps if I show what I did for the quick test:

<html>
	<head>
	<title>border_test</title>
	<style type="text/css">
#nav_mid{
width: 150px;
background: url(path/to/your/image/for/background.gif) repeat-y #3d3d3d;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #C1C4C6;
border: 1px solid #ff00ff;
}
	</style>
	</head>

	<body>
<div id="nav_mid">

:: <a href="#">Home</a><br />
:: <a href="#">Downloads</a><br />
:: <a href="#">Forum</a><br />
:: <a href="#">Members</a><br />
:: <a href="#">Staff</a><br />
:: <a href="#">Contact us</a><br />

:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a>
</div>
	</body>
	</html>

Also as a bit of a sidenote, if for some reason or another the border still refuses to co-operate. As an idea you could draw a 1px border like that on your background image itself

[Misapoes]

#nav_mid{
width: 145px;
background: url(images/border.gif) repeat-y #202020;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #808080;

that's the the css for the nav_mid :\


<!--NAVIGATION MID (CONTENT)-->
<div id="nav_mid">


:: <a href="#">Homez</a><br />
:: <a href="#">Downloads</a><br />
:: <a href="#">Forum</a><br />
:: <a href="#">Members</a><br />
:: <a href="#">Staff</a><br />
:: <a href="#">Contact us</a><br />

:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a>
</div>

that's the html that redirects to the nav_mid

it looks like i just included one pic of the border as a background?
wouldn't the solution be that i include 2 pics of it (my original idea wasn't even as a background,but then again i'm a newb:P)

[raenef]

ah I see I see, I dont even see a border property in your css, but I do see you're using the background-image to produce your border effect in which I say this:

make your background image as wide as your nav_bar (aka 145px;) then on the left side-make the left border, and on the right side of it make the right border.
I hope that was understood easily, but yea the background-image has to be the same width of the div you're trying to use it on.
Also sidenote: dont forget the closing css } bracket.

[Misapoes]

! now i see what you mean

your saying that i have to create a |border|bgcolor|border| pic myself and use that as a bg,and paddings so it looks like a border but is actually one pic?

[raenef]

Yep that would work, and just as an example:
(blown up for example purposes)
Good Luck