Extendable Panels

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Extendable Panels

Post by vitinho444 »

Hello guys :D

So, now that i got pretty much the base for my browser based game i want to start working on the GFX.
Ok so i got a menu panel, that will have a fixed size and stuff so a simple bg image can work, then i got another panel that can have various sizes depending on the content of the panel, and that panel is for the current page being showed.

So what i want is to make like a basic panel image for that, lets call it changing panel, and i want it to resize as it goes bigger or smaller... Of course having a limit, just one note is that the panel just needs to get bigger from up to bottom, the sides are the same.

Here's the .css configuration of those panels:

Changing panel:

Code: Select all

#igactivemenu { /** menu selecionado (aquele que aparece quando escolhes aldeia ou mundo, etc..) **/
	outline-color:#000;
	height:auto;
	outline-style:solid;
	outline-width:thin;
	text-align:justify;
	background:#666;
	padding:10px;
	position:absolute;
	left:28%; 
	right:28%;
	top:230px;
}
Fixed Panel: (Menu)

Code: Select all

#igmainmenu { /** menu principal (Aldeia,Mundo,ect...) **/
	outline-color:#000;
	outline-style:solid;
	outline-width:thin;
	font-size:15px;
	text-align:center;
	background:#666;
	padding:10px;
	position:absolute;
	left:8%; /** isto é para ficar no centro tipo mesmo se puseres 20% ou outro valor qualquer fica centrado **/
	right:80%;
	top:230px;
	height:350px; /** vai aumentando/diminuindo conforme as cenas que tens po menu **/
}
Anyone got any idea on how to make it?
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Extendable Panels

Post by Xaleph »

First of, my Portugese sucks ( or spanish.. i dont even know what language it is.. ) so comments are hard to read, however, I think I know what you mean. You want a base panel that is easily resizable. You want some images to be displayed as well, so depending on the ammount of images, it could be hard ( lots of divs) or quite easy.

Consider the following:

your panel
x x x
x x x
x x x

These are the properties you can use, topleft, topcenter, topright, centerleft, center, centerright, bottomleft, bottomcenter, bottomright. You can make them variable by size, however I would recommend using fixed sizes for the corners, this makes it easier to maintain and doesn`t restrict you in sizes for the whole panel. So let`s consider that the corners have a fixed width and height of 30x30, the only thing you have to calculate is the height and width of the center pieces so the horizontal axis in the center, and the the width of the vertical axis in the middle. If you make the topcenter repeatable, the bottomcenter, the centerleft and the centerright, you`re done.

So the code looks like this:

<div class="panel">

<div class="panel-top-left"></div>
<div class="panel-top-center"></div>
<div class="panel-top-right"></div>

<div class="panel-center-left"></div>
<div class="panel-center">

<!-- this is where the main content goes -->

</div>
<div class="panel-center-right"></div>

<div class="panel-bottom-left"></div>
<div class="panel-bottom-center"></div>
<div class="panel-bottom-right"></div>

</div>


and the css


.panel {
width: 800px;
height: 800px;
}

.panel .panel-top-left,
.panel .panel-top-center,
.panel .panel-top-right,
.panel .panel-center-left,
.panel .panel-center,
.panel .panel-center-right,
.panel .panel-bottom-left,
.panel .panel-bottom-center,
.panel .panel-bottom-right
{
position: relative;
float: left;
height: 30px;
width: 30px;
margin:0;
padding:0;
}

/**
* Center pieces ( top to bottom )
*/

.panel .panel-bottom-center,
.panel .panel-center,
.panel .panel-top-center {
width: 740px;
}


/**
* Center pieces ( left to right )
*/

.panel .panel-center-left,
.panel .panel-center,
.panel .panel-center-right {
height: 740px;
}

/**
* Some random styling
*/

.panel .panel-top-left { background-color: blue;}
.panel .panel-top-center { background-color: aqua;}
.panel .panel-top-right { background-color: green;}
.panel .panel-center-left { background-color: yellow;}
.panel .panel-center { background-color: orange;}
.panel .panel-center-right { background-color: red;}
.panel .panel-bottom-left { background-color: purple;}
.panel .panel-bottom-center { background-color: pink;}
.panel .panel-bottom-right { background-color: limegreen;}
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Extendable Panels

Post by vitinho444 »

Well, its portuguese and i was about to change the comments, but i forgot,

/** menu selecionado (aquele que aparece quando escolhes aldeia ou mundo, etc..) **/
Selected menu (that one where the main content appears)

/** menu principal (Aldeia,Mundo,ect...) **/
Main menu (Where you choose village, messages, etc)

Omg seriously, im not a fan of css, i know some things but this is extraordinary
heres the result of your code: Image

Its working fine, but as you can see it has 3 lines of text and the panel is still big..

I want to make a "simple" change that is that area in grey, change it for an image and using php image functions i can resize it to the correct size..

If it's too hard just tell me xD I dont want to get that much deep.

I could do like an 700x600 panel base, then just resize it in the y axis, to make it 700x30 or 700x1000 you know?

Again, thank you so much for your help so far.
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Extendable Panels

Post by Xaleph »

Well, you said you had some fixed-size panels you wanted, if you want them scrollable and dynamic in height, you are bound by 3 horizontal divs. top, center, bottom. Where the center is a repeatable image.

On the css thing in my previous post:

As you can see, the .panel has a 800 width and 800 height, if you change them, you should also change to horizontal and vertical axis ( the ones with 740px). Maybe that helps?
Post Reply

Return to “Advanced Help and Support”