SimplePortal
Customization => Themes and Graphics => Topic started by: Nick on August 10, 2010, 10:39:17 AM
-
Ok so i have finally reached the end of perfecting my portal and i'm stuck on the last part! Heres how my portal looks at the moment.
http://www.profifaleagues.net/index.php
If you scroll near the bottom you will see a big gap and then the users online section. I want that moved up (To see view the attached images). I figure it will need to be a right block with a custom size. I have tried adding it to the right and custom sizing it but all ways i have tried fails. I have worked out the block will come to a size of 860px, but like i said all ways i try fails.
Would be very grateful for help on this and thankyou very much for reading.
-
You have put this block outside of the row where the left, center, and right sp_blocks go.
It cannot float up to fill any spaces inside this row.
Even if you made this a left, center, or right block, the float you are attempting to achieve would be hampered by the fact that the blocks are within left, center, and right columns within the row.
SimplePortal uses tables to keep center, left, and right blocks where they belong.
And floating divs are not going to float the way you want them to between different cells of the table. This behavior may even be browser-dependant.
If you could put the block at the bottom of the right blocks, and used some absolute positioning to move it as far left as you like, you might achieve the effect you are looking for. I imagine this could be a frustrating exercise, and may be browser dependant.
-
Well i did change the size of all right blocks to allow up to 860px then pust custom sizes of 250px for each right block then put the online block as 860 (on the right aswell) but even though i tried to add 590px to the center blocks so they wernt all squashed up and like 50px as they were, they didnt change. Thats the closest i got then i ran out of ideas. I used the following code;
float:right; width:860px;
or
float:left; width:860px;
-
Float will not work in this case.
This is because the left, center, and right blocks are in one table row and the "Forum Stats" are in a table row that comes AFTER all of those things.
Float cannot force it to start higher on the page than the bottom of the lowest-reaching part of the previous row.
You can look at the HTML of the page to see the table structure of the page.
If you put that Forum Stats block in a right block, you could get it to start right under the Top Managers block.
What you need is absolute positioning. This can allow an element to overlap other elements without affecting their flow. Then, you can set the block's width however you want, and it should not affect the width of the right column. At least in browsers that follow this rule! You need to give the block a non-static parent element, which you might do using block-within-a-block. Absolute blocks are always positioned relative to their nearest non-static parent. That means the parent must be absolute, relative, or fixed. Relative positioning is probably what you want for the parent element. http://www.w3schools.com/css/css_positioning.asp (http://www.w3schools.com/css/css_positioning.asp)
Getting the effect you want here could be very time-consuming. You will learn a little bit about CSS positioning in the process, which will be valuable if you want to do other types of fancy CSS layout in the future. But you might also wind up concluding the reward is not worth the effort you have put in.
-
Well i tried to use CSS to change the block size with help from Nathaniel but nothing happened when i added css.
http://simpleportal.net/index.php?topic=6025.0
-
Thankyou followed what you said and it worked. At least on my screen it looks like it has;
http://www.profifaleagues.net/index.php
Thanks :)
-
It does work -- if the screen width is just right.
In IE8, if you make the screen more narrow, the block is now too wide.
If you make the div with id="wrapper" to be a fixed width, this may work out more reliably for you.
-
I tried various ways use the div wrapper but had no luck, i know what you mean about resolution though. The current formatting that block uses at the moment is;
width:53%; position:absolute; top:1140px;
Tried adding the <div id="wrapper"></div> but it moved the block up and changed the width.
-
You have to give your <div id="wrapper"> a fixed width. Your website will scale with anybody's resolution right now which will screw up your layout. You want to control this by giving your website a fixed width and then readjusting the positioning of your block correctly. That way everyone will be viewing it the same way.
-
So where should i be adding this? Display.template ?
-
I use FF on a 17-19" screen (Not sure on the size exactly)
-
Yup, it appears to be in your index.template.php.
Change
<div id="wrapper" style="width: 81%;">
to
<div id="wrapper" style="width: ...px">
with ... being whatever size you'd think would be best of course :)
-
<div id="wrapper" style="width: 78%;"><div id="wrapper" style="width: 1000px;">Ought to be about right for the content you currently have.
You migh consider doing this in the CSS file instead of in the template file, however. It's easier
<div id="wrapper" style="width: 78%;"><div id="wrapper">
http://www.profifaleagues.net/Themes/ISkin/css/index.css?rc2[/url]]
DIV#wrapper
{
margin : 0px auto
}
DIV#wrapper
{
margin : 0px auto
width: 1000px
}
-
Isn't everthing your suggesting Angelina just to alter the width of the forum? I set it to 78% myself via the AdminCP
-
Yes.
If you set the width to a percentage, then the appearance will change depending on the size of the window used to view it.
If you make the width fixed, you can control the appearance, so it still looks right no matter how wide the user makes the browser window.
But that might not be important, since you've changed the blocks around a bit...
Is there any way I can help you any more with your original question?
-
Nope everything is ok now thankyou.