Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Making boxes on my sites homepage


  • Please log in to reply

#1
Brian25199425

Brian25199425

    Member

  • Member
  • PipPip
  • 11 posts
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!
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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
  • 0

#3
Brian25199425

Brian25199425

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts

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.invisionfr...ex.php?act=site . Can you tell me what to do with it. This is the CC
[img]http://i25.tinypic.com/2janf43.gifhtml { 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
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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.
  • 0

#5
Brian25199425

Brian25199425

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts

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.invisionf...ex.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
  • 0

#6
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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.
  • 0

#7
Brian25199425

Brian25199425

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts

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 :)
  • 0

#8
Brian25199425

Brian25199425

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts

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 :)


Oh and quick thing, where do I put the code for the 3 borders, in the css?
  • 0

#9
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
The CSS file for the 3-column layout is:

http://www.code-suck...-3-col/main.css

It's link on the page is:
<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:
<!-- 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.

Edited by Major Payne, 13 July 2009 - 12:56 AM.

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP