Website resizing issue:

ToejaM

ToejaM

ToejaM

Soldato
Joined
12 Jul 2011
Posts
2,510
Location
Funkotron
My problem is, when you adjust the size of your browser it adjusts the size of the website which means that the banner in the middle at the top gets adjusted over rather than that resizing aswell.

Is there anyway to:

1) Stop the website from re-adjusting with the browser?

or

2) Make the banner readjust in size aswell?

3) Your suggestion to stop this happening!

Using an e107 install with a custom theme. I'm a total noob when it comes to coding websites :(

Style.css
/*

+---------------------------------------------------------------+

| e107 website system

|

| ©William Moffett 2001-2005

| http://e107.net

| [email protected]

|

| Released under the terms and conditions of the

| GNU General Public License (http://gnu.org).

+---------------------------------------------------------------+

*/



* {

margin: 0px;

padding: 0px;

}



/* CORE STYLES */



body {

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

color: #cbcbcb;

background-repeat: repeat-x; background-color:#333333; margin:0px 0px; padding:0px; text-align: center;

}



a {

color: #fff;

text-decoration:none;

}



a:hover {

color: #ccc;

text-decoration: underline;

}



p {}



h1, h2, h3, h4, h5, h6{

font-size: 10px;

color: #FFF;

background-color:#000;

border: 1px solid #000;

margin:2px;

padding:4px;

background: url(images/menuline.png) top left no-repeat;



}



table {

margin: 0px;

padding: 0px;

border: none;

border-collapse: collapse;

}



td {

text-align:left;

vertical-align:top;

padding-left:2px;

padding-right:2px;

}



blockquote {}



ul, ol {}



form { }



input{

margin:2px;

}



hr {

margin-top:2px;

height:1px;

border:none;

background-color:#3f3f3f;

}



/* MAIN TABLE */



.alientable {

margin:0px auto;

padding: 0px;

width: 87%;

}



/* GFX LAYOUT */



.header_left {

padding:0px;

background-image: url(images/header_left.png);

background-repeat: no-repeat;

height: 225px;

width: 45px;

}



.header_center {

padding:0px;

background-image: url(images/header_tile.png);

background-repeat: repeat-x;

height: 225px;

}



.headcenter_left{

padding:0px;

height: 225px;

width:100%;

background: url(images/header_center_left.png) top center no-repeat;

}



.headcenter_right{

position:relative;

padding:0px;

height: 225px;

width:100%;

background: url(images/header_center_right.png) top right no-repeat;

}



#sitename{

display:none;

}



#sitetag{

display:none;

}



#logo span{

display:none;

}



.header_right {

padding:0px;

background-image: url(images/header_right.png);

background-repeat: no-repeat;

height: 225px;

width: 42px;

}



.content_left {

padding:0px;

background-image: url(images/left_tile.png);

width: 45px;

background-repeat: repeat-y;

vertical-align: top;

}



.content_center {

padding:0px;

background-color: #0B0B0B;

font-size: 12px;

color: #cbcbcb;

vertical-align: top;

}



.content_right {

padding:0px;

background-image: url(images/right_tile.png);

width: 42px;

background-repeat: repeat-y;

vertical-align: top;

}



.left_menu {

padding:0px;

width: 15%;

vertical-align:top;

border-right: 1px solid #1f1f1f;

}



.content {

padding:0px;

width: auto;

vertical-align:top;

}



.right_menu {

padding:0px;

width: 15%;

vertical-align:top;

border-left: 1px solid #1f1f1f;

}



.footer_left {

padding:0px;

background-image: url(images/footer_left.png);

background-repeat: no-repeat;

width: 45px;

height: 79px;

}



.footer_center {

padding:0px;

background-image: url(images/footer_tile.png);

height: 93px;

}



.footer_right {

padding:0px;

background-image: url(images/footer_right.png);

height: 93px;

width: 42px;

}



.fc_left {

padding:0px;

background-image: url(images/footer_center_left.png);

width: 154px;

text-align:left;

padding-top:20px;

}



.fc_center {

padding:0px;

background-image: url(images/footer_center_center.png);

background-repeat: no-repeat;

background-position: center top;

height: 93px;

width: auto;

text-align:center;



}



#fc_center{



padding-top:30px;

}



.fc_right {

padding:0px;

background-image: url(images/footer_center_right.png);

width: 156px;

text-align:right;

}



.fc_right span{

display:none;



}



/* NAVIGATION */



#navigation{

height: 21px;

position: absolute;

left: 5px;

top: 190px;

text-align: center;



}



#navigation li{

list-style: none;

float: left;

height: 21px;

list-style-type: none;

}



#navigation a{

width: 104px;

height: 21px;

font-size: 10px;

color: #fff;

line-height: 20px;

text-decoration: none;

background: url(images/nav_button.gif) no-repeat;

background-position: 0px -50px;

display: block;



}



#navigation a:hover{

color: #ccc;

background-position: 0px -25px;

}



#navigation a.onpage {

color: #fff;

background-position: 0px 0px;

}



#navigation a:hover.onpage {

color: #ccc;

background-position: 0px 0px;

}



/* E107 STYLES */



.bodytable {

padding: 8px;

font: 10px verdana, tahoma, arial, helvetica, sans-serif;

color: #929293;

}



.indent{

background-color:#1f1f1f;

border: 1px solid #3f3f3f;

margin:2px;

padding:4px;

}

.indentchat{

background-color:#282828;

border: 1px solid #282828;

margin:2px;

padding:4px;

display:block;

text-decoration:none;

font-weight:bold;

color: #cbcbcb;

background: url(images/chatblock.jpg) top left no-repeat;

}



.mediumtext {

font: 10px verdana, tahoma, arial, sans-serif;

color: #ffffff;

}



.smalltext {

font: 10px verdana, tahoma, arial, helvetica, sans-serif;

color: #cbcbcb;

}



.tbox {

background-color: #1f1f1f;

border: #39393b 1px solid;

color: #fff;

font: 10px verdana, tahoma, arial, helvetica, sans-serif;

background-image: url(images/chatbg.png);

}



.helpbox {

background-color: #1f1f1f;

border: #39393b 1px solid;

color: #fff;

font: 9px tahoma, verdana, arial, helvetica, sans-serif;



}



.small {

background-color: #0B0B0B;

border: #0B0B0B 1px solid;

color: #999999;

font: 8px tahoma, verdana, arial, helvetica, sans-serif;

}



.button{

margin:2px 2px;

background-color: #1f1f1f;

border: #39393b 1px solid;

color: #cbcbcb;

font: 9px verdana, tahoma, arial, helvetica, sans-serif;

text-align:center;

}



/* FORUM STYLES */



.fcaption {

padding:0px 4px;

height:21px;

line-height:21px;

background: #282828 url(images/ncbg.png) top left repeat-x;

border-left: 1px solid #000;

border-right: 1px solid #000;

color: #fff;

font-weight:bold;

}



.fcaption span.smalltext{

color: #ccc;

}



.fcaption span.smalltext a:hover{

color: #fff;

}



.fcaption a {

color: #fff;

text-decoration: none;

}



.fcaption a:hover {

color: #0B6394;

}



a.forumlink{

color: #0B6394;

text-decoration: none;

}



a.forumlink:hover{

color: #fff;

}



.fborder {

border: #000 1px solid;

background-color: transparent;

}



.forumheader{

background-color: #000;

padding:0px 4px;

height:20px;

line-height:16px;

font-weight:bold;

background-image : url(images/ncbg.png);

color: #d9d9d9;

border-left: 1px solid #000;

border-right: 1px solid #000;

}



.forumheader2{

background-color: #000;

color: #cbcbcb;

padding: 4px;

border: #000 1px solid;

background-image: url(images/chatbg.png);

}

.forumheader3{

background-color: #000;

color: #cbcbcb;

padding: 4px;

border: #000 1px solid;

background-image: url(images/chatbg.png);

}

.forumheader4{

background-color: #000;

font: 10px verdana, tahoma, arial, sans-serif;

color: #fff;

padding: 4px;

border: #000 1px solid;

background-image: url(images/chatbg.png);

}



.finfobar{

color: #cbcbcb;

padding: 4px;

border: #252525 1px solid;

background: #1f1f1f;

}

I thought it may have been to do with "position: absolute" but changing that to the other values I found online does nothing!

www.frequency-guild.co.uk - apologies if linking my guild website isnt allowed!

The banner is temporary while we work out this problem so please, don't judge us ;)
 
That is legendary! Thanks gord/Staffy.

My mate is the one doing the image so he just threw something together, I think the final design will be entirely different after a little chat it was just thrown up to see if we could fix this resizing issue.

I think the only problem now is, setting it to a size that will cater for 99% of the browsing population and then editting in a banner to fit that.. as I dont think I'll be able to make the website auto resize to proportions.. unless the % thing works fine on all elements though I'm not quite sure how I'd go about getting a balance for that lol

I could see me setting the percentages and ending up with one element being completely out of proportion to something else heh

Thanks a lot guys, if you have a suggestion to fix this now much more minor problem, I'd appreciate it!


Spunkey said:
You could set it to a fixed width in CSS as the above replies state, or you could leave it fluid, and set min-width to stop the columns becoming too small to fit more than 2 words in, and max-width to prevent the table going wider than the header.

Also, I'd check over the HTML. I'm not sure if it's a template or something but it's a bit oddly written.
Click to expand...

Yeah its a template, I guess that above addresses my problem now :) Not quite sure how I'd go about writing the min/max codes in though. Is it as simple as: min-width: 120px; max-width: 1200px; - on one line?
 
I just tried it with:
.alientable {

margin:0px auto;

padding: 0px;

min-width: 900px;

max-width: 1200px;
Click to expand...

As a random stab in the dark as in notepad++ it seemed to colour the commands the same as the other.. it didnt work so the website went huge haha! I like to try things :P

Well I think I exhausted my guesses as to how to set it to being auto but then only resizing down to a certain size. Do you think 1200 will be too wide?

I also think unless I can get the image to scaledown automatically in size I think I'm going to have to just have it as a static website size?
 
Last edited:
Aye its a wee bit dated but its the only one I could find that I liked (tis from my guild in EQ2 actually, though modded the menuline files to be green to fit with a green banner).

I think I'm gunna leave it at 1200 for now, maybe might go bigger but I think it'll be ok like that. My only concern is people with smaller resolutions might get raged at having to scroll the website from left to right though I'm sure for the guild regulars I'll find out soon enough.

It'd just be nice if I could make it:

Max size: 1920 (I run 1680x1050)
Min size: 935 or similar, after a search online it doesnt look like anybody uses below 1024

and then at the same time, have the website auto adjust between the min/max but the major problem is having a banner that fits inside that area at the top and adjusts its self between the website elements changing size.. naturally it'd be best to make the image at 1920 so that it looks fine at the biggest resolution but then scales down well.

I fear my request is a little too complicated for a non-coder like me :D
 
I think I'm going to stick to a static website unless I get too many people complaining about the size :)

the e107 templates arent that flexible from the admin panel, infact there is very little you can change from there, I was kind of expecting drag drop/auto resizing loving and if I wanted to edit a webpage (the links for example on the menu on the main page) then I have to edit a file (which I havnt found, not looked yet.. as the contact us doesnt need to be there, nor the downloads but thats a minor thing ;))

Thanks for the help peoples!
 
You must log in or register to reply here.
Back
Top Bottom