User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the Graphics and Multimedia section within the Web Development category of DaniWeb, a massive community of 375,207 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,318 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Graphics and Multimedia advertiser:
Views: 4898 | Replies: 2
Reply
Join Date: Nov 2004
Posts: 35
Reputation: croft is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
croft's Avatar
croft croft is offline Offline
Light Poster

Creating nice borders the same way they have on vbulletin

  #1  
Dec 3rd, 2004
Intro

Well we have always used border color one time or another. Here is a way using css to make it look like the vbulletin forums. This is very easy to use and its very basic.

Getting started

First off we start by creating a new table cellpadding-0 cellspacing-0 any width you want =)

Now we will create the css for the border color.
I call this maintable_bordercolor, you can call it what you want. And be sure to change the color to your liking.

.maintable_bordercolor {
	background-color: #003366;
}

It should look something like this

<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="maintable_bordercolor">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Now apply this css to the table you yust created and you will se the entire table gets a new color.

Within the first table we will now create a second table.
Use these settings to start you off.
Columns-2 rows-2 cellpadding-2 cellspacing-1 .
The cellspacing is a must otherwise you will not be able to se the border =)

Now lets start with the second css for the new table we created.
Lets call the first one alternative1.

.alternative1 {
	background-color: #00468C;
	color: #FFFFFF;
}

Now apply this style to the top row both columns and you will se the border is there =)
Lets do the second css for the new table to.

.alternative2 {
	background-color: #0054A8;
	color: #FFFFFF;
}

Now apply this second css to the second row on the new table we created and you now have 2 rows with different color and a nice border wich will work fine in both explorer and firefox and other clients =)

You are done and it should look something like this.

<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="maintable_bordercolor">
  <tr>
    <td><table width="100%"  border="0" cellspacing="1" cellpadding="2">
      <tr>
        <td class="alternative1">&nbsp;</td>
        <td class="alternative1">&nbsp;</td>
      </tr>
      <tr>
        <td class="alternative2">&nbsp;</td>
        <td class="alternative2">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

Now wasn’t that easy. Now you can experiment with different colors adding the alternative colors to the columns instead of the rows and even add more alternative colors if you want.
Have fun and I hope this helped a bit =)

I have attached a small screenshot of the finished product.
Last edited by happygeek : Oct 28th, 2006 at 8:37 am. Reason: Formatting
Attached Images
File Type: gif border.gif (612 Bytes, 109 views)
I dont even butter my bread. I consider that cooking
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Nov 2004
Location: tiny island in indian ocean
Posts: 138
Reputation: anastacia is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 1
anastacia's Avatar
anastacia anastacia is offline Offline
Junior Poster

Solution Re: Creating nice borders the same way they have on vbulletin

  #2  
Dec 4th, 2004
well thanks croft. :lol: i have been learning html by myself and it is indded a greatb pleasure to learn more of that wonderful language. :p :o
keep it up
:lol: I am not one of those who wait for things to happen, :p but one of those who make things happen ;)
Reply With Quote  
Join Date: Jan 2007
Posts: 28
Reputation: coolvision is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
coolvision coolvision is offline Offline
Light Poster

Re: Creating nice borders the same way they have on vbulletin

  #3  
Jan 16th, 2007
Thanks for sharing,
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb Graphics and Multimedia Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the Graphics and Multimedia Forum

All times are GMT -4. The time now is 2:51 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC