Foren / Cotonti / Skins / Expandable height

duck101
#1 5. August 2009, 02:14
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
GHengeveld
#2 5. August 2009, 02:17
Try adding this below the floating objects:
<br style="clear:both" />
duck101
#3 5. August 2009, 02:31
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 :)
<!-- BEGIN: MAIN -->
	<div class="pspbackround">
<div id="rSide">

	<div class="rboxHD">{PHP.skinlang.index.Polls}</div>
	<div class="rboxBody">{PLUGIN_INDEXPOLLS}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Recentadditions}</div>
	<div class="rboxBody">{PLUGIN_LATESTPAGES}</div>

        <div class="rboxHD">PSP Extreme On The Web</div>
        <div class="rboxBody">{PHP.cfg.freetext2}</div>	
</div>
<div id="lSide">

        <div class="lboxHD">Welcome</div>
        <div class="lboxBody">
         {PHP.cfg.freetext1}
        </div>

	{INDEX_NEWS}
</div>
</div>
<!-- END: MAIN -->

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.
aiwass
#4 5. August 2009, 16:54
Easier and cleaner code then the style="" thing :

HTML
<div class="clear"></div>

CSS
.clear{clear:both;}
Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks

https://evlear.com
GHengeveld
#5 5. August 2009, 22:46
Not easier, but certainly cleaner; it's generally better practice not to use style="".
duck101
#6 5. August 2009, 23:05
here's my index.tpl
<!-- BEGIN: MAIN -->
	<div class="pspbackround">
<div class="clear">

<div id="rSide">

	<div class="rboxHD">{PHP.skinlang.index.Polls}</div>
	<div class="rboxBody">{PLUGIN_INDEXPOLLS}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Recentadditions}</div>
	<div class="rboxBody">{PLUGIN_LATESTPAGES}</div>

        <div class="rboxHD">PSP Extreme On The Web</div>
        <div class="rboxBody">{PHP.cfg.freetext2}</div>	
<br style="clear:both" />	
</div>
<div id="lSide">

        <div class="lboxHD">Welcome</div>
        <div class="lboxBody">
         {PHP.cfg.freetext1}
        </div>

	{INDEX_NEWS}
<br style="clear:both" />
</div>
</div>
</div>
<!-- END: MAIN -->

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

aiwass
#7 6. August 2009, 00:22
# duck101 : here's my index.tpl
<!-- BEGIN: MAIN -->
	<div class="pspbackround">
<div class="clear">

<div id="rSide">

	<div class="rboxHD">{PHP.skinlang.index.Polls}</div>
	<div class="rboxBody">{PLUGIN_INDEXPOLLS}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Recentadditions}</div>
	<div class="rboxBody">{PLUGIN_LATESTPAGES}</div>

        <div class="rboxHD">PSP Extreme On The Web</div>
        <div class="rboxBody">{PHP.cfg.freetext2}</div>	
<br style="clear:both" />	
</div>
<div id="lSide">

        <div class="lboxHD">Welcome</div>
        <div class="lboxBody">
         {PHP.cfg.freetext1}
        </div>

	{INDEX_NEWS}
<br style="clear:both" />
</div>
</div>
</div>
<!-- END: MAIN -->

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 <br style="clear:both" /> and the <div class="clear"> ?

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.
Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks

https://evlear.com
duck101
#8 6. August 2009, 00:33
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

Dieser Beitrag wurde von duck101 (am 6. August 2009, 00:51, vor 14 Jahre) bearbeitet
aiwass
#9 6. August 2009, 00:49
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.
Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks

https://evlear.com
duck101
#10 6. August 2009, 00:54
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
#11 6. August 2009, 02:25
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.
Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks

https://evlear.com
duck101
#12 6. August 2009, 02:46
Thanks I'll have to try that.