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 ;)
 
Your website is using tables for layout. :(

That said, in the CSS class .alientable is your problem. Change that from 87% to 900px and it should solve your resizing issues.
 
Just had a very quick look.

The choice is yours

To make the banner stretch and look decent you will need to edit the graphic, photoshop etc...

To restrict the width change this chunk of code
.alientable {

margin:0px auto;

padding: 0px;

width: 87%;

}
to
.alientable {

margin:0px auto;

padding: 0px;

width: 935px;

}

The width can be anything you like.
That should do it as I said this is just after a very quick look. So let us know.
 
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.
 
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?
 
The site seems to be very wide now; wider than a 1024 res anyway.
You could check out the 960 grid system and also 'responsive web design' if you want it resizeable.
 
Last edited:
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:
Looking through the source I see the template was done in 2005 which would explain the odd looking code when compared to modern web design. Things have moved on a hell of a lot since then.

935px fits most popular stuff comfortably and allows the page background to show a little apart from some of the mobile devices and that's a whole different ball game.

You may find you can go bigger as most visitors to your site would be pretty tech savvy and have reasonable computer specs.

The best way to learn is to try things out, but then you have to understand why it broke!

Doing a flexible page layout that works can be a real headache especially when you are new. I wouldn't recommend it if you want the site up pretty quick. You can always tweak/change/mess with it after to suit you.
 
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
 
Min size: 935 or similar, after a search online it doesnt look like anybody uses below 1024
Click to expand...

A lot of sites run below that, the most popular css framework is 960px and is used as the basis for some very popular themes, layouts both free and paid for.

It is possible to do what you want, but for a non coder then I would suggest fixed width to get it online. Then maybe find someone with the time to either do it for you or to show/help you do it. It all depends on how quick you want the site online and how much time you can put towards learning.

Maybe someone on here would.
 
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