Need a geek? Geeks to Go offers free, quality tech support -- in terms anyone can understand. Volunteers are waiting to help, friendly, technology experts who have knowledge to share, and enjoy helping others. Feel free to browse the site as a guest. However, you must log in to reply to existing topics, or to start a new topic. Other benefits of joining include richer forum features, and removal of all advertising. Learn more in our Welcome Guide Infected? Malware and Spyware Cleaning Guide. What are you waiting for? Click here to join for free today!
   
 
 Reply to this topicStart new topic
Making boxes on my sites homepage, HOW DO YOU DO IT D:
Brian25199425
post Jun 30 2009, 05:24 AM
Post #1


New Member
*
Posts: 9
OS: Windows XP
I use invisionfree.com because I think it is very reliable and I'm currently in a clan that uses it also for their website. So I decided to make a website for my other clan for a different game. *IMPORTANT DETAILS* I wanted to make my homepage have boxes of different sizes, 3 columns, and i didn't know where or how to put that in my codes. *IMPORTANT DETAILS* Hope you reply soon. Thank you in advance!
Go to the top of the page
 
+Quote Post
Major Payne
post Jun 30 2009, 07:09 AM
Post #2


Trusted Techie
Group Icon
Posts: 5,228
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



1) CSS Fixed 3-column

2) CSS Fixed 3-column

3) CSS Fixed 3-column with Header

4) Fixed 3-column with Header and Footer
Go to the top of the page
 
+Quote Post
Brian25199425
post Jul 12 2009, 08:50 AM
Post #3


New Member
*
Posts: 9
OS: Windows XP
QUOTE (Major Payne @ Jun 30 2009, 08:09 AM) *
1) CSS Fixed 3-column

2) CSS Fixed 3-column

3) CSS Fixed 3-column with Header

4) Fixed 3-column with Header and Footer



Hey thanks, but do I put this in my css? Because I have alot of stuff in there that I used. Heres the site http://s3.invisionfree.com/sexyFEAR/ and then the portal http://z3.invisionfree.com/sexyFEAR/index.php?act=site . Can you tell me what to do with it. This is the CC
CODE

html { overflow-x: auto; overflow-y: auto; }

form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:0px 10px 0px 10px;background-color:#FFFFFF;background-attachment: fixed ;background-image: url(http://i25.tinypic.com/2janf43.gif);background-repeat;}
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; }
a:link, a:visited, a:active { text-decoration: none; color: #000 }
a:hover { color: #000000; text-decoration:underline }

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer; }

img.attach { border:2px outset #EEF2F7;padding:2px }

.googleroot { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googleparent { padding:6px; margin-left:30px; line-height:130%; color:#19547 }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#555 }
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#000000;background-color:#67A1C9;padding:4px;margin:0px }

.warngood { color:green }
.warnbad { color:red }

</style><center>This skin was created by <b>Cortez</b> of the <B><A HREF="http://forums.ifskinzone.net" TARGET="_BLANK">IF Skin Zone</A></B></center><style type="text/css">

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg { text-align:center; margin-top:15px }

#ucpmenu { line-height:150%;width:22%; border:1px solid #345487;background-color: #67A1C9}
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #67A1C9; border:1px solid #345487;line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:0px solid #35729E;background-color: #35729E;padding:0px;margin:0px; }
#submenu { border:1px solid #BCD0ED;background-color: #67A1C9;font-size:10px;margin:3px 0px 3px 0px;color:#000000;font-weight:bold;}
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #000000; }a:hover { color: #000000; text-decoration:underline }
#userlinks { border:1px solid #C2CFDF; background-color: #67A1C9}

#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }

.activeuserstrip { background-color:#67A1C9;background-image: url(http://209.85.12.231/565/103/upload/p450262.jpg); padding:6px }

.pformstrip { background-color: #67A1C9;background-image: url(http://209.85.12.231/565/103/upload/p450227.jpg); color:#000000;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #67A1C9; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
.pformleftw { background-color: #67A1C9; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
.pformright { background-color: #67A1C9; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; }

.post1 { background-color: #67A1C9; background-image: url(http://209.85.12.231/565/103/upload/p450243.jpg) }
.post2 { background-color: #67A1C9; background-image: url(http://209.85.12.231/565/103/upload/p450243.jpg) }
.postlinksbar { background-color:#67A1C9;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://209.85.12.231/565/103/upload/p450227.jpg) }

.row1 { background-color: #67A1C9 }
.row2 { background-color: #67A1C9; background-image: url(http://209.85.12.231/565/103/upload/p450243.jpg) }
.row3 { background-color: #67A1C9 }
.row4 { background-color: #67A1C9; background-image: url(http://209.85.12.231/565/103/upload/p450243.jpg) }

.darkrow1 { background-color: #67A1C9; color:#000000; }
.darkrow2 { background-color: #428BC2;background-image: url(http://209.85.12.231/565/103/upload/p450262.jpg); color:#000000; }
.darkrow3 { background-color: #67A1C9;background-image: url(http://209.85.12.231/565/103/upload/p450325.jpg);; color:#000000; }

.hlight { background-color: #DFE6EF }
.dlight { background-color: #EEF2F7 }

.titlemedium { font-weight:bold; color:#000000; padding:7px; margin:0px; background-image: url(http://209.85.12.231/565/103/upload/p450227.jpg) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #000000 }

.maintitle { text-align:center;vertical-align:middle;font-weight:bold; color:#000000; letter-spacing:1px; padding:8px 0px 8px 5px; background-image: url(http://209.85.12.231/565/103/upload/p450163.jpg) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #000000 }
.maintitle a:hover { text-decoration: underline;color: #2A485E }

.plainborder { border:1px solid #000000;background-color:#35729E }
.tableborder { border:1px solid #35729E;background-color:#35729E; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #000000;background-color:#67A1C9;padding:6px; }
.tablepad { background-color:#67A1C9;padding:6px }
.tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

.wrapmini { float:left;line-height:1.5em;width:25% }
.pagelinks { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#434951 }
.edit { font-size: 9px }

.signature { font-size: 10px; color: #339 }
.postdetails { font-size: 10px }
.postcolor { font-size: 12px; line-height: 160% }

.normalname { font-size: 12px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #900 }

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

.codebuttons { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #FFF;border-bottom:1px solid #FFF }

.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }
Thank you in advance
Go to the top of the page
 
+Quote Post
Major Payne
post Jul 12 2009, 05:06 PM
Post #4


Trusted Techie
Group Icon
Posts: 5,228
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



Sorry. Misunderstood when you said "decided to make a website for my other clan for a different game". Didn't know you were planning to use current forum pages for that. Those "different sizes, 3 columns" layouts I gave can be used as guidelines to modify your forum pages as long as you have access to editing all pages and don't mess up the code used by InvisionFree for normal forum functions.

I don't use nor ever have used InvisionFree so I am not familiar with their Admin Panel for styling the pages as you want.

Now I am confused as to what you want to exactly do.
Go to the top of the page
 
+Quote Post
Brian25199425
post Jul 12 2009, 05:32 PM
Post #5


New Member
*
Posts: 9
OS: Windows XP
QUOTE (Major Payne @ Jul 12 2009, 06:06 PM) *
Sorry. Misunderstood when you said "decided to make a website for my other clan for a different game". Didn't know you were planning to use current forum pages for that. Those "different sizes, 3 columns" layouts I gave can be used as guidelines to modify your forum pages as long as you have access to editing all pages and don't mess up the code used by InvisionFree for normal forum functions.

I don't use nor ever have used InvisionFree so I am not familiar with their Admin Panel for styling the pages as you want.

Now I am confused as to what you want to exactly do.


I have access to editing all the pages. I know that when you're not used to something it's hard to use, but I belong to a clan: http://z15.invisionfree.com/Korlash/index.php?act=site and I like their website layout (the 3 column stuff) but I wanted to make another website for a different game just like it with the layout (columns). If you need anything else clarified, just let me know
Go to the top of the page
 
+Quote Post
Major Payne
post Jul 12 2009, 05:51 PM
Post #6


Trusted Techie
Group Icon
Posts: 5,228
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



If you are opening a new InvisionFree forum, then you can look at the source code for the 3-column layout with header and footer. That code plus the code needed for the forum function can be used to get you started with the layout you want. Then you can add the images for the header, footer and three columns as needed. That site has about 53 different lay outs that would save you time in coding (fingers crossed). You would just set up the colors, images and forum modules in the column(s)you want by editing the CSS part that generates the 3-column look.

I would suggest doing the basic layout with all colors and images locally using your own web editor. It's always best to mirror the exact directory structure you'll have on line and have ALL files on your hard drive. Including backing those files up to an external drive. That way, if you make a mistake on line, you will have a last known working site backed up.
Go to the top of the page
 
+Quote Post
Brian25199425
post Jul 12 2009, 05:53 PM
Post #7


New Member
*
Posts: 9
OS: Windows XP
QUOTE (Major Payne @ Jul 12 2009, 06:51 PM) *
If you are opening a new InvisionFree forum, then you can look at the source code for the 3-column layout with header and footer. That code plus the code needed for the forum function can be used to get you started with the layout you want. Then you can add the images for the header, footer and three columns as needed. That site has about 53 different lay outs that would save you time in coding (fingers crossed). You would just set up the colors, images and forum modules in the column(s)you want by editing the CSS part that generates the 3-column look.

I would suggest doing the basic layout with all colors and images locally using your own web editor. It's always best to mirror the exact directory structure you'll have on line and have ALL files on your hard drive. Including backing those files up to an external drive. That way, if you make a mistake on line, you will have a last known working site backed up.


ok thank you so much, Ill give it a go and reply when I get it working biggrin.gif
Go to the top of the page
 
+Quote Post
Brian25199425
post Jul 12 2009, 06:00 PM
Post #8


New Member
*
Posts: 9
OS: Windows XP
QUOTE (Brian25199425 @ Jul 12 2009, 06:53 PM) *
QUOTE (Major Payne @ Jul 12 2009, 06:51 PM) *
If you are opening a new InvisionFree forum, then you can look at the source code for the 3-column layout with header and footer. That code plus the code needed for the forum function can be used to get you started with the layout you want. Then you can add the images for the header, footer and three columns as needed. That site has about 53 different lay outs that would save you time in coding (fingers crossed). You would just set up the colors, images and forum modules in the column(s)you want by editing the CSS part that generates the 3-column look.

I would suggest doing the basic layout with all colors and images locally using your own web editor. It's always best to mirror the exact directory structure you'll have on line and have ALL files on your hard drive. Including backing those files up to an external drive. That way, if you make a mistake on line, you will have a last known working site backed up.


ok thank you so much, Ill give it a go and reply when I get it working biggrin.gif


Oh and quick thing, where do I put the code for the 3 borders, in the css?
Go to the top of the page
 
+Quote Post
Major Payne
post Jul 13 2009, 12:55 AM
Post #9


Trusted Techie
Group Icon
Posts: 5,228
From: Now in a MEMA (Katrina) Cottage
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



The CSS file for the 3-column layout is:

http://www.code-sucks.com/css%20layouts/fi...-3-col/main.css

It's link on the page is:
CODE
<link rel="stylesheet" type="text/css" href="main.css" />


The page is coded using a "XHTML 1.0 Strict" doctype. If that is not what InvisionFree uses, then remove the space and the "/"s in all tags.

The body code is:
CODE
<!-- Begin Wrapper -->
   <div id="wrapper">
  
         <!-- Begin Header -->

         <div id="header">
        
               This is the Header        
              
         </div>
         <!-- End Header -->
        
         <!-- Begin Left Column -->
         <div id="leftcolumn">
        
               Left Column
        
         </div>
         <!-- End Left Column -->
        
         <!-- Begin Content Column -->

         <div id="content">
              
              <a href="fw-35-3-col.zip">Download this CSS Layout</a>         </div>
         <!-- End Content Column -->
        
         <!-- Begin Right Column -->
         <div id="rightcolumn">
        
               Right Column
        
         </div>
         <!-- End Right Column -->

        
         <!-- Begin Footer -->
         <div id="footer">
              
               This is the Footer        
                
         </div>
         <!-- End Footer -->
        
   </div>
   <!-- End Wrapper -->
That is styled with the CSS file. Your InvisionFree code you need to use, must be added in where you want it and styled as needed.

This is a big project and I would do most of this locally with a good HTML Editor so you can look at it in your browser from time to time.

This post has been edited by Major Payne: Jul 13 2009, 12:56 AM
Go to the top of the page
 
+Quote Post
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 
RSS Time is now: 7th November 2009 - 06:29 PM

Advertisements do not imply our endorsement of that product or service. The forum is run by volunteers who donate their time and expertise. We make every attempt to ensure that the help and advice posted is accurate and will not cause harm to your computer. However, we do not guarantee that they are accurate and they are to be used at your own risk. All trademarks mentioned on this page are the property of their respective owners.

© Geeks to Go, Inc. | All Rights Reserved | Privacy Policy | Advertising
Powered By IP.Board © 2009  IPS, Inc.