cotonti.com : Expandable height

duck101

Thu, 06 Сер 2009 02:46:38 -0000

Thanks I'll have to try that.

aiwass

Thu, 06 Сер 2009 02:25:25 -0000

duck101:
yes btw that brings up another questions when I expand the right side why does it go out instead of filling in the gap between the left side and right side. I know it has to do with margins and padding and all of that.

That is because your container (class="pspbackround") has a limiter in it. Start by decresing all paddings and margins and look until you find the right spot for it. You can also try adding vertical-align:top; into the .pspbackground class just to see if it has any effect.

duck101

Thu, 06 Сер 2009 00:54:38 -0000

wait your missing it.

yes it looks fine on IE / firefox but that is the psp browser which is "copied from wikipedia"

The PSP Internet Browser is an embedded microbrowser. It is a version of the NetFront browser made by Access Co. Ltd. and was released for free with the 2.00 system software update.[107] The browser supports most common web technologies, such as HTTP cookies, forms, CSS, as well as basic JavaScript capabilities.[123]

The psp screen dimensions are 480x272 so I have to make comprimises

so this is my mobile skin, when the site detects a mobile browser it uses my mobile skin I have set up

thx all my hard work... and it looks like crap jk

yes btw that brings up another questions when I expand the right side why does it go out instead of filling in the gap between the left side and right side. I know it has to do with margins and padding and all of that.

if you look at the pic you can see what I'm talking about

aiwass

Thu, 06 Сер 2009 00:49:59 -0000

Duckie, what web-browser do you use ?
I use Firefox 3.5 and it looks good, but on the picture above it looks like crap.

duck101

Thu, 06 Сер 2009 00:33:58 -0000

all right I'll try using some of these suggestions

I didn't even noticed I used both of those in my index.tpl oooops

thx for all of your help... both of you

Edit: it worked. but like you said it still is about 25 pixels off
heres a screenshot

also adding more items to the recent additions just makes it worse on the psp browser

aiwass

Thu, 06 Сер 2009 00:22:51 -0000

# duck101 : here's my index.tpl


	




	{PHP.skinlang.index.Polls}
	{PLUGIN_INDEXPOLLS}
	
	{PHP.skinlang.index.Recentadditions}
	{PLUGIN_LATESTPAGES}

        PSP Extreme On The Web
        {PHP.cfg.freetext2}	

	



        Welcome
        
         {PHP.cfg.freetext1}
        

	{INDEX_NEWS}

and here's what it looks like on my psp and i colored in to show what it should look like

Why do you use both the
and the

?

Getting the news and rSide to flush with the footer, you can use min-height:100px; inside the id="rSide" class in your CSS or use, if you want, the max-height:550px; statement.

However, after looking at your website with FF3.5, i see that what you are trying to do is a mere impossibility, since you have elements on the LEFT side that are X amounts of pixels in height and on the RIGHT side you have other elements that are X amounts of pixels in height. This means that either way you go, you will still be a few pixels off, around 25px, to be exact.

The easiest solution is however to add 1-2 more items in the RECENT ADDITION box, that will pull the LEFT and RIGHT more flush to the bottom of the page ( http://www.pspextreme.comli.com/ ).

This is very common problem with multiple sections on a page that will be constantly updated etc.

Added 3 minutes later:

# Koradhil : Not easier, but certainly cleaner; it's generally better practice not to use style="".

Personally i think there is too much style="" in both plugins and core of Cotonti, at the moment.
I'm actually thinking about making a framework of commonly used style="" tags inside cotonti, to be able to steer them from 1 file, namely a CSS file, promptly named cotonti.css

I just hate editing 50+ files each time a new version of Cotonti arrives.

duck101

Ср, 05 Сер 2009 23:05:39 -0000

here's my index.tpl


	




	{PHP.skinlang.index.Polls}
	{PLUGIN_INDEXPOLLS}
	
	{PHP.skinlang.index.Recentadditions}
	{PLUGIN_LATESTPAGES}

        PSP Extreme On The Web
        {PHP.cfg.freetext2}	

	



        Welcome
        
         {PHP.cfg.freetext1}
        

	{INDEX_NEWS}

and here's what it looks like on my psp and i colored in to show what it should look like

GHengeveld

Ср, 05 Сер 2009 22:46:32 -0000

Not easier, but certainly cleaner; it's generally better practice not to use style="".

aiwass

Ср, 05 Сер 2009 16:54:10 -0000

Easier and cleaner code then the style="" thing :

HTML

CSS
.clear{clear:both;}

duck101

Ср, 05 Сер 2009 02:31:09 -0000

It sounds like it should work. but it doesn't want to work for me mabey I just put it in the wrong spot but here's my index.tpl (btw. I took out the code you gave me after it didn't work) yeah I now all of my codes are really messy


	


	{PHP.skinlang.index.Polls}
	{PLUGIN_INDEXPOLLS}
	
	{PHP.skinlang.index.Recentadditions}
	{PLUGIN_LATESTPAGES}

        PSP Extreme On The Web
        {PHP.cfg.freetext2}	



        Welcome
        
         {PHP.cfg.freetext1}
        

	{INDEX_NEWS}

and my css (well part of it anyways)

#content { background:#303030 none; padding:0 10px; margin:0; width:460px; }
#content #lSide { float:left; width:318px; }
#content #lSide .lboxHD { color:#AAA; background: url(img/SED-Dark_lBoxHD.gif) no-repeat; width:323px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #lSide .lboxBody { width:313px; background:#222 url(img/SED-Dark_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; } 

#content #rSide { float:right; width:110px; }
#content #rSide .rboxHD { color:#AAA; background: url(img/SED-Dark_rBoxHD.gif) no-repeat; width:100px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #rSide .rboxBody { width:98px; background:#222 url(img/SED-Dark_rBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; } 

#content #lfSide { float:left; width:120px; }
#content #lfSide .lfboxHD { color:#AAA; background: url(img/SED-Dark_rBoxHD.gif) no-repeat; width:115px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #lfSide .lfboxBody { width:108px; background:#222 url(img/SED-Dark_rBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; } 

#content #rfSide { float:right; width:324px; }
#content #rfSide .rfboxHD { color:#AAA; background: url(img/SED-Dark_lBoxHD.gif) no-repeat; width:318px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #rfSide .rfboxBody { width:312px; background:#222 url(img/SED-Dark_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; } 

#content #leftSide { float:right; width:324px; }
#content #leftSide .lboxHD { color:#AAA; background: url(img/SED-Dark_lBoxHD.gif) no-repeat; width:318px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #leftSide .lboxBody { width:312px; background:#222 url(img/SED-Dark_lBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; } 

#content #rightSide { float:left; width:120px; }
#content #rightSide .rboxHD { color:#AAA; background: url(img/SED-Dark_rBoxHD.gif) no-repeat; width:115px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
#content #rightSide .rboxBody { width:108px; background:#222 url(img/SED-Dark_rBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; margin-bottom:10px; } 

.pspbackround { background:#303030 none; padding:0 0px; margin:0; width:460px; height:700px; }

.mboxHD { color:#AAA; background: url(img/SED-Dark_cBoxHD.gif) no-repeat; width:450px; height:35px; line-height:35px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
.mboxBody { width:440px; background:#222 url(img/SED-Dark_cBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; } 
.nboxHD { color:#AAA; background: url(img/SED-Dark_cBoxHD.gif) no-repeat; width:300px; height:25px; line-height:25px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
.nboxBody { width:294px; background:#222 url(img/SED-Dark_cBoxFT.gif) no-repeat bottom; min-height:150px; padding:10px; } 
.fboxHD { color:#AAA; background: url(img/SED-Dark_cBoxHD.gif) no-repeat; width:318px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
.fboxBody { width:312px; background:#222 url(img/SED-Dark_cBoxFT.gif) no-repeat bottom; min-height:150px; padding:10px; } 
.fmboxBody { width:462px; background:#222 url(img/SED-Dark_cBoxFT.gif) no-repeat bottom; min-height:20px; padding:10px; } 
.fgboxHD { color:#AAA; background: url(img/SED-Dark_cBoxHD.gif) no-repeat; width:318px; height:30px; line-height:30px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
.fgboxBody { width:312px; background:#222 url(img/SED-Dark_cBoxFT.gif) no-repeat bottom; min-height:150px; padding:10px; }
.fgmboxHD { color:#AAA; background: url(img/SED-Dark_cBoxHD.gif) no-repeat; width:306px; height:25px; line-height:25px; vertical-align:middle; font-size:.90em; text-transform:uppercase; padding:0 0 0 10px; font-weight:bold; }
.fgmboxBody { width:300px; background:#222 url(img/SED-Dark_cBoxFT.gif) no-repeat bottom; min-height:150px; padding:10px; }
.mboxBody img { vertical-align:middle; }

btw thanks for all of the help you have been to me.

GHengeveld

Ср, 05 Сер 2009 02:17:07 -0000

Try adding this below the floating objects:

duck101

Ср, 05 Сер 2009 02:14:36 -0000

Hey I just found out that for some browsers when you have floating objects that you must put a height for the backround ex. .pspbackround { background:#303030 none; padding:0 0px; margin:0; width:460px; height:700px; }

But then I realized the flaw w/ this..... you have to constantly be changing the css b/c everytime you add a new news on the home page or change anything the backround becomes to small or too large.

so is there anyway to make the backround expand and contract with the floating objects. I tryed using percents eg 100% and it didn't work.

Any suggestions