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

CSS Help


  • Please log in to reply

#1
Alexa

Alexa

    Member

  • Member
  • PipPip
  • 11 posts
Is it posible to resize the tables on the forums? My board is so wide and I'd like to shrink the size down some.

This is my style sheet:

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

form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { text-align: center; font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 14px; color: #B5C7D3; margin: 0px 10px 0px 10px; background-color:#000000; background-image: url(http://img83.imagesh...3/6803/8sc4.jpg); no-repeat fixed top left; }
TABLE, TR, TD { font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 14px; color: #B5C7D3; }
a:link, a:visited, a:active { text-decoration: underline; color: #FAF0E6}
a:hover { color: #B5C7D3; text-decoration:none }

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:#14075; }
.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:#B5C7D3;background-color:#1E78B5; background-image: url(http://mywebpage.net...21/negrad1b.gif);padding:6px;margin:0px }
</style>
<center>Skin created by AgnosticAngel of the <a href=http://invisionfree.com/forums/ifskinzone>IF Skin Zone</a></center>
<style type="text/css">
.warngood { color:green }
.warnbad { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }
#board, #ipbwrapper { width: 750px; text-align: left; margin-left:auto; margin-right:auto; }

#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 #104567;background-color: #000000; background-image: url(http://) }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #000000; background-image: url(http://); border:1px solid #104567;line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #104567;background-color: #104567;background-image:url(http://);padding:0px;margin:0px; }
#submenu { border:1px solid #104567;background-color: #1E78B5; background-image: url(http://img167.images...negrad1bwg9.gif); font-size:10px;margin:4px 0px 4px 0px;color:#B5C7D3;font-weight:bold;}
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #CFDBE2; }
#userlinks { border:1px solid #104567; background-color: #1E78B5; background-image: url(http://img77.imagesh...negrad1bki9.gif) }

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

.activeuserstrip { background-color:#104567; background-image: url(http://mywebpage.net...121/negrad3.gif); padding:6px }

.pformstrip { background-color: #1E78B5; background-image: url(http://mywebpage.net...121/negrad3.gif); color:#B5C7D3;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #000; background-image: url(http://); padding:6px; margin-top:1px;width:25%; border-top:1px solid #104567; border-right:1px solid #104567; }
.pformleftw { background-color: #000; background-image: url(http://); padding:6px; margin-top:1px;width:40%; border-top:1px solid #104567; border-right:1px solid #104567; }
.pformright { background-color: #000; background-image: url(http://); padding:6px; margin-top:1px;border-top:1px solid #104567; }

.post1 { background-color: #000000; background-image: url(http://) }
.post2 { background-color: #000000; background-image: url(http://) }
.postlinksbar { background-color:#104567;padding:7px;margin-top:1px;font-size:14px; background-image: url(http://) }

.row1 { background-color: #000000; background-image: url(http://) }
.row2 { background-color: #000000; background-image: url(http://) }
.row3 { background-color: #000000; background-image: url(http://) }
.row4 { background-color: #000000; background-image: url(http://) }

.darkrow1 { background-color: #104567; background-image: url(http://); color:#B5C7D3; }
.darkrow2 { background-color: #104567; background-image: url(http://img77.imagesh...negrad1bki9.gif); color:#B5C7D3; }
.darkrow3 { background-color: #104567; background-image: url(http://); color:#B5C7D3; }

.hlight { background-color: #000000; background-image: url(http://) }
.dlight { background-color: #000000; background-image: url(http://) }

.titlemedium { font-weight:bold; color:#B5C7D3; padding:7px; margin:0px; background-color: #104567; background-image: url(http://mywebpage.net...121/negrad3.gif) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #B5C7D3 }

.maintitle { vertical-align:middle;font-weight:bold; color:#104567; letter-spacing:1px; padding:8px 0px 8px 5px; background-color: #1E78B5; background-image: url(http://img77.imagesh...negrad1bki9.gif) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #104567 }
.maintitle a:hover { color: #000; text-decoration: none }

.plainborder { border:1px solid transparent;background-color:transparent }
.tableborder { border:1px solid #104567;background-color:#104567; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #104567;background-color:#000; background-image: url(http://);padding:6px; }
.tablepad { background-color:#000; background-image: url(http://);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:#B5C7D3 }
.edit { font-size: 9px }

.signature { font-size: 10px; color: #339 }
.postdetails { font-size: 10px }
.postcolor { font-size: 14px; 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: #B5C7D3; background-color: #000000; background-image: url(http://); border: 1px solid #104567; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #B5C7D3; background-color: #000000; background-image: url(http://); border: 1px solid #104567; 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 #104567;border-bottom:1px solid #104567 }

.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 }

This is my Header & Body

<% BOARD HEADER %>


<div style="text-align:center">
<table width="100%" align="center" border="0"><tr><td>
<div class="tableborder">
<div class="maintitle" align="left" style="text-align:left"><img src="http://209.85.48.8/s...es/1/nav_m.gif" border="0" alt=">" width="8" height="8" />
<b><font color=#ff3300>SITE NEWS </Color></B>

</div>
<table width="100%" border="0" cellspacing="1" cellpadding="4"><tr><td class="row1">

<font face="Arial" size="1" color=#FF92BB>A new edition of the Quibbler has been posted. Remember that it has been moved to the portal bar. We are still looking for writers so if you're interested please PM me.
</br>
</br>
I will be trying to improve the site over the next few weeks so please bear with me all of you... </br></div>
</br>
I've moved some items on the site, <font face="verdana" size="2" color=#FFFFFF>The Grounds, Administrative Offices, Heads of Houses Offices, The Ministry, Quibbler and other London Landmarks can now be found in the category APPARATE TO FIND.</font>
</br>
</br>
PLEASE READ THE NOTICE BOARD AS MORE CHANGES WILL BE MADE. THANK YOU.
</br></div></font>

</td>
</tr>
</table>
</div>
</td></tr></table>
</div>
<br />
<script type='text/javascript'>
<!--
// add link on the portal side of the submenu
// code by ticlo/Stefan
function addSubmenuLink(url, text, blank) {
var e
e = document.getElementById('submenu')

if (e && e.nodeName == 'TABLE') {
e.rows[0].cells[0].innerHTML += ' · <a href="' + url + '"' + (blank ? ' target="_blank"' : '') + '>' + text + '</a>'
}}
addSubmenuLink('http://www.myspace.com' 'Visit myspace.com')
addSubmenuLink('http://s15.invisionf...m/siggiemachine' 'Get Siggies Here')
addSubmenuLink('http://s14.invisionf.../index.php?c=10' 'Administrative Offices')
addSubmenuLink('http://s14.invisionf...e/index.php?c=9' 'Heads of Houses Offices')
addSubmenuLink('http://s14.invisionf.../index.php?c=11' 'Archived Topics')
addSubmenuLink('http://www.freewebs....xi310/index.htm' 'QUIBBLER')
addSubmenuLink
('http://z14.invisionf...p?showforum=157' 'Apparate to Find')
addSubmenuLink('http://z10.invisionf...dex.php?act=idx' 'Magic and Mystery Ministry Site')
// -->
</script>

<script type='text/javascript'>
<!--
// change forum markers for specific forums
// code by Stefan
ifspFMarkers = []

// add markers here, using this format
// ifspFMarkers[Forum Number] = ["No new posts marker URL", "New posts marker URL"]
// more than one can be added, each on a seperate line

ifspFMarkers[2] = ["http://images.barnes...arrypotter.gif", "http://images.barnes...rrypotter.gif"]

// no editing after this line

e = document.getElementsByTagName('TD')
for (n = 0; n < e.length; n++) {
if (e[n].className == 'row4') {
l = e[n].getElementsByTagName('A')
if (l && l.length) {
fn = l[0].search.match(/showforum=([0-9]+)$/)
if (fn && ifspFMarkers[fn[1]]) {
fmc = e[n].offsetParent.rows[e[n].parentNode.rowIndex].cells[e[n].cellIndex - 1]
ni = fmc.getElementsByTagName('IMG')
if (ni.length) {
if (ni[0].parentNode.nodeName == 'A')
ni[0].src = ifspFMarkers[fn[1]][1];
else
ni[0].src = ifspFMarkers[fn[1]][0];
}}}}}
// -->
</script>

<center>
<div class="maintitle" style="width: 100%; height: 25px;" align="left">
<p align="center"><font color=white><font size="1"><b><u>WELCOME TO THE HARRY POTTER SITE</U> </b></font></p>

</div></center>
<center>
<table style="border-collapse: collapse;" border="3" bordercolor="#ffffff" cellpadding="4" cellspacing="0" height="74" width="100%">

<tbody><tr>
<td class="row4" valign="top" height="100" width="100"><center><b><u>~Advertise~</br>
<b><font size=2><font color=ffff00></br>Check out these other great sites:</br></b></size></color></div>
</div></br></div>
</br></U></b></center>

<td class="row2" height="100" valign="top" width="*">
<center><b><u>~Announcements~</U><marquee scrollamount=3 onMouseover="this.scrollAmount=0" onMouseout="this.scrollAmount=3" direction= "up"><b><CENTER><font face="verdana" size="0" color=#66ccff>
We need Quidditch Players, fifty points to those who join. </br>
<br><font face="arial" size="1" color=#CC99FF>
People please keep voting...We still need votes...</br>
<br><font face="verdana" size="0" color=#ffe000>
TOP MONTHLY POSTERS...If you are the poster of the month your house will win 50 points.
</font></b></center>

</marquee>
</td>
<td class="row2" height="100" valign="top" width="150">

<p align="center"><b><u>~The Admins~</U></b>
<br><br><b> <a href=http://z14.invisionfree.com/TheHPsite/index.php?act=Msg&CODE=4&MID=1 >Alexandra Heart</a></br>
<br> <a href=http://z14.invisionfree.com/TheHPsite/index.php?act=Msg&CODE=4&MID=2>Amanda Mortensen</a></br>
<br><a href=http://z14.invisionfree.com/TheHPsite/index.php?act=Msg&CODE=4&MID=61>Angelique Bove</a></b>
<p></p>
</td>
<td class="row2" valign="top" width="175">
<p align="center">
<b>~Chat Room~
<div><EMBED src="http://myhpgroup.cha...ango.com/group" bgcolor="#FFFFFF" width="250" height="360" wmode="transparent" type="application/x-shockwave-flash" flashvars = "b=60&l=999999&q=999999&r=100&s=1"></EMBED><br>[ <a href="http://myhpgroup.cha...lonegroup">Copy this</a> | <a href="http://chatango.com/...ategroup">Start New</a> | <a href="http://myhpgroup.cha...tango.com">Full Size</a> ]</div>
</b>


</p>
</td>
<td class="row2" valign="top" width="150">
<p align="center"><b><u>~HOUSE POINTS and What's New?~</div><font face="geneva" size="0" color=#66ccff>
<font color=333ff><b>Ravenclaw:
550</color></b></div>
<font color=009966><b>Slytherin:
435</color></b></div>
<font color=FFFF00><b>Hufflepuff:
105</color></b></div>
<font color=cc0033><b>Gryffindor:
20</color></b></div></U></b></td>

</tr>
<tr>
<td class="darkrow2" colspan="5">&nbsp;</td>
</tr>
</tbody></table>

<center><a href=http://z14.invisionfree.com/TheHPsite/index.php?><img src=http://img154.imageshack.us/img154/807/thehpsitejs7.jpg></a></center>

<% NAVIGATION %>

</center>
</td>
</tr>
</table>
</div>
</td></tr></table>
</div>

<div id='pageContent'>
</div>
<% BOARD %>


<% STATS %>
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Is this your own forum? The code you have is not something I would even begin to use or try to straighten out as it is not structured properly. Way too many errors.

Ron
  • 0

#3
Alexa

Alexa

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts
Yes this is my own forum.
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Do you have a link to the page(s) you are having problems getting to layout properly?

Ron
  • 0

#5
Alexa

Alexa

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts
Sure here it is

http://z14.invisionf...Psite/index.php?
  • 0

#6
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
OK. Thanks. Will take a look as soon as I can. Working on some web pages and should be finished soon.

Ron

P.S. Any one else that can help before I get back, please jump in.
  • 0

#7
Alexa

Alexa

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts
Well thanks any help I can get would be great.
  • 0

#8
Ax238

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Haha, Major hasn't scolded you for using tables yet? Anyways, welcome to Geeks to Go!

One problem I see is that your table widths are set to 100%. This means it will take up the whole width of the page. You could also shrink down the CSS width for board, unless you want it to be almost as wide as the screen.

Ax
  • 0

#9
Alexa

Alexa

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts
I don't want it that wide lol it's just so huge.
  • 0

#10
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Forum looks just fine in Firefox at 1024 x 768 resolution. Since this is code generated by PHP, are you familiar enough to edit a PHP original page? Plus, it looks like a pre-made forum page. Especially considering the page link has over 227 coding errors (178 by W3C.org's Validator). The CSS also has some problems. This is the usual problem with pre-packaged forums and lots of templates found on the 'Net. Code is so out dated and improperly written that newer browsers have a hard time parsing the pages.

With no document type, all browsers will go into Quirks Mode and will display your page the best they can. IE will probably be more forgiving of the bad code even in Quirks Mode.

If you know where to edit the PHP file, you could try setting your main table (ugh :)) width to less then 100%, but you may need to trim some of the other table widths to compensate for change.

Ron

*** Ron rushes off to wash his fingers and hands after typing table. :)

Edited by Major Payne, 16 December 2007 - 02:05 PM.

  • 0

Advertisements


#11
Alexa

Alexa

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts
Honestly that all just went over my head, I have like no idea what you said.
  • 0

#12
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Then we're in trouble. :) You must have access to your site, preferably via FTP, know HTML/PHP coding to make the necessary changes or able to use your online Editor to view source code of pages you need to edit. Are you at all familiar with this?

I will not be able to do much for you if you can not do any of this. You said my board, my stylesheet so I took it that you were familiar enough with the coding to do these changes and were able to edit. It looks like visionfree.com provided the forum, but nowhere in the features do I see where you can edit the basic code for the pages.

Ron

Edited by Major Payne, 16 December 2007 - 02:32 PM.

  • 0

#13
Alexa

Alexa

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts
I am the admin of the sites yes, if you tell me what to change fine but I'm not all that familiar with HTML the code was one I got off an invisionfree site and I just added my pics other than that I'm not one for making skins or things like that.

Any changes to an invivisionfree forum had to be done by the admin of said site. I'm not really sure what features your referring to.
  • 0

#14
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Sorry for delay on getting back to you. Checked and saw that as admin you have a File Manager to use online for your forum. Does it generate the code in only HTML or does it allow you to edit the PHP too?

There are so many coding errors in the code for the page link you gave that I hesitate to try to make suggestions other then to go through the code and where every table tag has the width set to 100%, to set it to a lesser percentage (maybe 90%), save changes, and check if it worked by viewing your site after a good refresh (Ctrl+F5).

All the CSS is embedded in the page and I do see some width value set:

#board, #ipbwrapper { width: 750px; text-align: left; margin-left: auto; margin-right: auto; }
.tableborder { border: 1px solid rgb(16, 69, 103); margin: 0px; padding: 0px; background-color: rgb(16, 69, 103); width: 100%; }
.tablebasic { border: 0px none ; margin: 0px; padding: 0px; width: 100%; }

I would change these widths first in the CSS and see if that fixes the problem for you before trying the table tags themselves between the <body></body> tags.

Ron
  • 0

#15
Alexa

Alexa

    Member

  • Topic Starter
  • Member
  • PipPip
  • 11 posts
I tried what you suggested and it did shrink parts of the board but it all moved to the right and now it just looks retarded.
  • 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