|
Width; I changed the topic since after 24 hrs I finally worked it out MYSELF
|
|
Topic Started: Jul 4 2009, 07:25 AM (853 Views)
|
|
abro
|
Jul 4 2009, 07:25 AM
Post #1
|
- Posts:
- 18
- Group:
- Members
- Member
- #178,814
- Joined:
- January 6, 2009
|
BOARD URL: http://z3.invisionfree.com/melbournewf/index.php
I've merged my submenu and userlink thing together. Now I need them the width of the entire page but the same height to modify my board a bit. How do I do this?
Edited by abro, Jul 5 2009, 07:45 AM.
|
|
|
| |
|
abro
|
Jul 5 2009, 07:27 AM
Post #2
|
- Posts:
- 18
- Group:
- Members
- Member
- #178,814
- Joined:
- January 6, 2009
|
That's odd? 24 Hours and not a single reply... BUMP! The time at the bottom says 6:26am and I originally posted this at 6:25am the night before.
|
|
|
| |
|
Pete B
|
Jul 5 2009, 10:51 AM
Post #3
|
- Posts:
- 9,532
- Group:
- Members
- Member
- #77,320
- Joined:
- October 29, 2005
- I'm Browsing With
- Chrome
- My Board URL
- http://www.bartiforums.com
|
Hi,
Well, your entire forum has a margin set around it. If you remove it you'll force the combined submenu to cover the width of the entire page, but everything else will expand.
To do this, replace the BODY part of your css with this:
- Code:
-
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:10px 0; background-color:#FFFFFF }
|
|
|
| |
|
abro
|
Jul 5 2009, 11:07 PM
Post #4
|
- Posts:
- 18
- Group:
- Members
- Member
- #178,814
- Joined:
- January 6, 2009
|
Sorry but it also changes the width of the forums and maintitles and info centers. I only need the submenu the same size as the screen. Also, my modified submenu has both the userlinks and submenu things. I installed a code for that but currently, some of the text is cutting off the screen, how do I place it back on the bar?
|
|
|
| |
|
Pete B
|
Jul 7 2009, 10:25 AM
Post #5
|
- Posts:
- 9,532
- Group:
- Members
- Member
- #77,320
- Joined:
- October 29, 2005
- I'm Browsing With
- Chrome
- My Board URL
- http://www.bartiforums.com
|
Hey,
Firstly, I've wrapped the contents of your forum below the submenu in a div (#main_content) with a percentage width set on it. I added the relevent code at the end of your CSS. You can increase or decrease the percentage value to make that part of your forum wider or narrower. There is also a percentage width set on the #logostrip which holds your forum's banner which can be editted in a similar fashion to the #main_content.
Regarding the background image of the submenu, the image in the css is too small in height to cover the now taller submenu. So what I've done is set the image to appear at the top and filled the bottom gap in with a solid colour (which is a continuation of the bottom colour of the gradient image).
So here's the code: CSS
- Code:
-
html { overflow-x: auto; } form { display:inline; } img { vertical-align:middle; border:0px } BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:10px 0px;background-color:#FFFFFF } 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: #6F5D5D } a:hover { color: #4B3F3F; 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% } .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:#777;background-color:#DFE6EF;padding:4px;margin:0px }
.warngood { color:green } .warnbad { color:red }
#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: #F5F9FD } #ucpmenu p { padding:2px 5px 6px 9px;margin:0px; } #ucpcontent { background-color: #F5F9FD; border:1px solid #345487;line-height:150%; width:auto } #ucpcontent p { padding:10px;margin:0px; }
#ipsbanner { position:absolute;top:1px;right:5%; } #logostrip { border:1px solid #ffffff;background-color: #FFFFFF; padding:0px;margin:0px auto;width:90%;text-align:center; }
#submenu { background: url(http://img37.imageshack.us/img37/6284/51324994.png) top repeat-x #A5A5A5;font-size:10px;margin:3px 0px 3px 0px;color:#3A4F6C;font-weight:bold;} #submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #6F5D5D; }
#userlinks { border:1px solid #BFBFBF; background-image: url(http://img37.imageshack.us/img37/6284/51324994.png) }
#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }
.activeuserstrip { background-color:#BCD0ED; padding:6px }
.pformstrip { background-color: #FFFFFF ; color:#000000;font-weight:bold;padding:7px;margin-top:1px } .pformleft { background-color: #F5F9FD; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; } .pformleftw { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; } .pformright { background-color: #F5F9FD; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; }
.post1 { background-color: #F5F9FD } .post2 { background-color: #EEF2F7 } .postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://i1.ifrm.com/style_images/1/tile_sub.gif) }
.row1 { background-color: #FFFFFF } .row2 { background-color: #FFFFFF } .row3 { background-color: #FFFFFF } .row4 { background-color: #FFFFFF }
.darkrow1 { background-image: url(http://img156.imageshack.us/img156/2540/34351998.png); color:#FFFFFF; } .darkrow2 { background-color: #FFFFFF; color:#3A4F6C; } .darkrow3 { background-color: #D1DCEB; color:#3A4F6C; }
.hlight { background-color: #DFE6EF } .dlight { background-color: #EEF2F7 }
.titlemedium { font-weight:bold; color:#000000; padding:7px; margin:0px; background-COLOR: #FFFFFF } .titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #3A4F6C }
.maintitle { background-image: url(http://img16.imageshack.us/img16/7940/75566502.png); vertical-align:middle;font-weight:bold; color:#FFFFFF; letter-spacing:1px; padding:8px 0px 8px 5px; } .maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #FFFFFF } .maintitle a:hover { text-decoration: none }
.plainborder { border:1px solid #BFBFBF;background-color:#BFBFBF } .tableborder { border:1px solid #AAAAAA; } .tablefill { border:1px solid #BFBFBF;background-color:#BFBFBF;padding:6px; } .tablepad { background-color:#BFBFBF;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 }
#main_content { width:90%; margin:0px auto; }
Header & Body
- Code:
-
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000"> <% BOARD HEADER %> <div id="main_content"> <% NAVIGATION %> <% BOARD %> </div>
Footer
- Code:
-
<script> // Merge User/Main Menu - Leave Copyright Intact Wherever Used // Created For Invision Free // Author: Zero Tolerance © Game Zone | Evolution 2004 [http://gzevolution.net]
UserMenuA = document.getElementById('userlinks').getElementsByTagName('td')[0].innerHTML UserMenuB = document.getElementById('userlinks').getElementsByTagName('td')[1].innerHTML
Row = document.getElementById('submenu').insertRow(-1) Cell = Row.insertCell(-1) Cell.innerHTML = UserMenuA CellB = Row.insertCell(-1) CellB.innerHTML = UserMenuB CellB.align = 'right'
document.getElementById('userlinks').parentNode.removeChild(document.getElementById('userlinks')) </script>
|
|
|
| |
|
abro
|
Jul 7 2009, 09:30 PM
Post #6
|
- Posts:
- 18
- Group:
- Members
- Member
- #178,814
- Joined:
- January 6, 2009
|
Two problems...
A) The below forums and info center aren't centered anymore.
B) The two bars are no longer merged.
I've removed the codes and replaced them with my own. Please change the codes again to go with these settings.
|
|
|
| |
|
Pete B
|
Jul 8 2009, 09:40 AM
Post #7
|
- Posts:
- 9,532
- Group:
- Members
- Member
- #77,320
- Joined:
- October 29, 2005
- I'm Browsing With
- Chrome
- My Board URL
- http://www.bartiforums.com
|
Ah, I overlooked something with IE.
Navigate to your board wrappers and in the top input box titled Document Type, paste in this:
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The submenu appears to be merged on my test board, http://z9.invisionfree.com/bartiforumstest, had you applied the code to the footers?
Pete
|
|
|
| |
|
abro
|
Jul 8 2009, 10:05 PM
Post #8
|
- Posts:
- 18
- Group:
- Members
- Member
- #178,814
- Joined:
- January 6, 2009
|
Thanks, that's exactly how I wanted it. I modified it so the banner would be at the left... is that alright? Or do I have to put another copyright or should I have a permission slip or something? O_o
|
|
|
| |
|
Pete B
|
Jul 9 2009, 02:11 PM
Post #9
|
- Posts:
- 9,532
- Group:
- Members
- Member
- #77,320
- Joined:
- October 29, 2005
- I'm Browsing With
- Chrome
- My Board URL
- http://www.bartiforums.com
|
Thats fine.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|