Really nice borders on this game...

[Callan S.]

I really like the borders on the table of this game

http://kingdoms-game.com/

I've looked at the source and since I'm not very good at html or css, I'm not really seeing how it's done. If it sounds to simple a question, oh well, but any help on the actual html or CSS to do it is appreciated. It's a really nice border!

[hallsofvallhalla]

yes nice border

Code: Select all

<div id="border-top"><div id="border-left"><div id="border-bottom"><div id="border-right" style="position: relative;">
	<div style="right:0px; top: 0px; position: absolute">
		<img src="/static/images/layout/corner.png">
	</div>
	<div style="left:0px; top: 0px; position: absolute">
		<img src="/static/images/layout/corner.png">
	</div>	
	<div style="bottom:0px; left: 0px; position: absolute">
		<img src="/static/images/layout/corner.png">
	</div>		
	<div style="bottom:0px; right:0px; position: absolute">

		<img src="/static/images/layout/corner.png">
	</div>		
	
	<div id="content-inner">

[Callan S.]

Hi Halls,

I spotted that bit, but couldn't make heads nor tails of it - it only seems to refer to the corner pieces for the graphics? Is there some sort of CSS connection that I'm not getting? With those divs?

[Chris]

CSS3 is coming with border-image. Most browsers already support it:
http://www.css3.info/preview/border-image/

[Callan S.]

Thanks Chris,

The thing is there, that game shows the nice border in internet explorer and that CSS3 border doesn't work in IE. Though I grant that CSS3 will likely become the standard, I'm still wondering how they do that nice border in IE as well.

[Ravinos]

When I need need to to border backgrounds i do the <div> method Halls posted. If you really want a low tech way you can use tables to make them lol

I can't wait for CSS3 to become standard on all browsers. It's about time they had a border-image option.

[Callan S.]

Ah, I think I get how it works now - had to go investigating for a bit...

CSS, something like

Code: Select all

#content-outer {
	width: 83%;
	height: auto;
	min-height: 250px;
	float: left;
	margin-left: 15px;	
	background-image:url('bggrey.png');			
}
#content-inner {
	padding: 25px;
	height: auto;
	min-height: 250px;
}
#border-left {
	background: 
		url(bordleft.png) 
   		top left repeat-y;
}
#border-right {
	background: 
		url(bordright.png) 
    	        top right repeat-y;
}
#border-bottom {
	background: 
		url(bordtop.png) 
    	bottom left repeat-x;
}
#border-top {	
	background:		 
		url(bordtop.png) 
   		top left repeat-x;

HTML something like

Code: Select all

<link href="style.css" rel="stylesheet" type="text/css" />



<div id="content-outer" class="main" style="">

<div id="border-top"><div id="border-left"><div id="border-bottom"><div id="border-right" style="position: relative;">
   <div style="right:0px; top: 0px; position: absolute">
      <img src="corner.png">
   </div>
   <div style="left:0px; top: 0px; position: absolute">
      <img src="corner.png">
   </div>
   <div style="bottom:0px; left: 0px; position: absolute">
      <img src="corner.png">
   </div>
   <div style="bottom:0px; right:0px; position: absolute">

      <img src="corner.png">
   </div>

<div id="content-inner">

<font color='white'>Here is some text! Here's some text!</font><br><br><br><br>
</div>
</div>

Is that worth a quick tutorial? I know for Halls, Jack and Chris you probably know it off the back of your hand, but to me it's a nice effect I didn't understand - probably worth me making a post in the tutes section...

[Chris]

Yeah.. Always handy for anyone else who wants to make it.