Making boxes on my sites homepage
#1
Posted 30 June 2009 - 05:24 AM
#2
Posted 30 June 2009 - 07:09 AM
#3
Posted 12 July 2009 - 08:50 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.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
#4
Posted 12 July 2009 - 05:06 PM
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.
#5
Posted 12 July 2009 - 05:32 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.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
#6
Posted 12 July 2009 - 05:51 PM
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.
#7
Posted 12 July 2009 - 05:53 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
#8
Posted 12 July 2009 - 06:00 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
Oh and quick thing, where do I put the code for the 3 borders, in the css?
#9
Posted 13 July 2009 - 12:55 AM
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.
Similar Topics
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users