New Layout Issues

classic Classic list List threaded Threaded
54 messages Options
123
Reply | Threaded
Open this post in threaded view
|

New Layout Issues

GodlyPerfection
Administrator
This post was updated on .
Blog Post about the New Layout

Alright so as you can see the new layout is up and running I still have to do a lot of tweaks to make it perfect. So use this thread to point out all of the shit that I still need to work on. I'll use this as a checklist to make sure I get everything fixed up. I know about most of it, but you may find something that I did not realize.


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

Dj7291993
Administrator
This post was updated on .
Hmmm, I like it.  The font seemed a little bit small in the sidebar at first, but it's just smaller than what I'm used to.  It looks good.  As for bugs, I'm sure we'll find some.

Edit:  I think it made the forum space wider.  This could be nice.

~Josh Hollinrake, Dj7291993

Email Me - Admin Message Box - My Portfolio

"Dreamers Dream, Doers Do, Achievers Achieve, But Champions Do It ALL." ~The Goads

"A man cannot directly choose his circumstances, but he can choose his thoughts, and so indirectly, yet surely, shape his circumstances." ~James Allen (As a Man Thinketh)

Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

GodlyPerfection
Administrator
Yeah I plan on changing the sidebar font to be a little bit bigger and to get rid of some of the space between the lines in the recent comments.


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

Dj7291993
Administrator
ok, one thing I don't like.  I don't know if you can change it, but the quotes in posts (see here for example) have a quotation mark behind them.  This is only a problem because it is very similar to the color of the text in front of them, making them a little bit hard to read.

~Josh Hollinrake, Dj7291993

Email Me - Admin Message Box - My Portfolio

"Dreamers Dream, Doers Do, Achievers Achieve, But Champions Do It ALL." ~The Goads

"A man cannot directly choose his circumstances, but he can choose his thoughts, and so indirectly, yet surely, shape his circumstances." ~James Allen (As a Man Thinketh)

Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

Dj7291993
Administrator
Sidebar glitch

~Josh Hollinrake, Dj7291993

Email Me - Admin Message Box - My Portfolio

"Dreamers Dream, Doers Do, Achievers Achieve, But Champions Do It ALL." ~The Goads

"A man cannot directly choose his circumstances, but he can choose his thoughts, and so indirectly, yet surely, shape his circumstances." ~James Allen (As a Man Thinketh)

Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

DavidJCobb
Administrator
In reply to this post by GodlyPerfection

These fixes are only tested for Firefox 3.6.12; I've tested them both on the forums and on the blog page for the new layout. Each fix is to be applied successively (so don't apply the navbar fix until you apply the header fix, for example).

Making the header and tagline look good

#page
Change margin from 20px auto to 0 auto. Change padding from 0 to 20px 0 0 0.
#headerarea #header h1
Change float to none. Remove the border-right.
#header .description
Change float to none. Change the margin to 0 0 0 15px (removing the top margin, so that the tagline sits just below the header).

Placing the navbar on top of the actual slot on the background

#headerarea #header h1
Remove the element's margin; we will transfer it to a different element.
#header div.titlewrapper
Set the element's padding (not margin!) to 44px 0 0 10px (this used to be the H1's margin).
#menu
Increase the element's height by one pixel (result: 31px). Remove the background. Set the line-height to match the height (31px) and set vertical-align to middle.
#menu li
Remove float:left and set display to inline-block. Remove the background.
#menu a
Remove vertical padding. (Final value: 0 1em.)
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

GodlyPerfection
Administrator
In reply to this post by Dj7291993
Cobb I just want you to know that I love you... lol. Much appreciated.

And DJ I am aware about the sidebar glitch. I think I'm going to change the sidebar follow me and subscribe via email code to a widget so it falls under the same CSS as the rest of the widgets in the sidebar.


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

DavidJCobb
Administrator
No prob. BTW you can fix the headers on the top part of the sidebar pretty easily as well. Remove overflow:hidden from #subscribe to stop them from being clipped; change the padding on #subscribe h2 to 0 0 0 -21px to fix how the protruding labels meet the borders. Removing vertical padding from those same H2s will get the text alignment inside of them to match that of the H2s lower on the sidebar.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

GodlyPerfection
Administrator
Your numbers are slightly off good sir. :P And which two numbers are vertical padding? The first one is bottom, which one is top?


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

DavidJCobb
Administrator
GodlyPerfection wrote
Your numbers are slightly off good sir. :P And which two numbers are vertical padding? The first one is bottom, which one is top?
Off? Hm, could be a browser-specific quirk or something then.

Top right bottom left, that's the order for all multi-sided properties (border-width, padding, margin, etc.). If there's only two numbers then it's top-and-bottom, right-and-left.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

III Tribal
Wow. I was gonna jump in here with a load of CSS modifications, but I'm glad to see that Cobb beat me to it. (Nice work, Cobb.) If you do need any more help and can't get hold of Cobb feel free to send me a message as I do this stuff every day.

Btw, new template looks great with Cobb's CSS fixes.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

DavidJCobb
Administrator
This post was updated on .
In reply to this post by GodlyPerfection

I don't know if the columns on the blog are sizing properly. They're not filling the page's 1000px width, causing the whole page to be off-center and resulting in asymmetric margins; however, the sidebar lies directly beneath the hand, which could be coincidence or intentional.

There are three ways to handle this; I'm providing CSS fixes for each.

  1. Make the content column fluid, so that it expands to fill any unused space.
  2. Make the sidebar column fluid, so that it expands to fill any unused space.
  3. Make the content column fluid, but reduce page width to 830px and offset it to the left.
    (This would produce no visible change in FF3.6.12 and the sidebar would remain beneath the hand. If you ever need to change page width later, however, you will only have to edit one value (on #page) rather than multiple (on #page, #content, and #sidebar).)

First two fixes are in this post; they are mutually exclusive. Third fix will be in my next post. As before, all fixes are only tested in Firefox 3.6.12, though I don't see why they'd break in other browsers (TEST ANYWAY).


I've supplied a screenshot of each fix. For reference, here's what the layout looks like right now. (Note the asymmetric margins; the columns' fixed widths don't add up to fill the whole content area.)

Blog: fluid content, fixed sidebar

This fix requires a prior HTML modification: div#sidebar must be moved to come immediately before div#content. If this modification is not possible, do not make these CSS changes.

#menu, #menu ul
Remove the float property (which isn't even really doing anything right now -- not in FF3.6.12, anyway).
#sidebar
Remove the margin-right.
#content
Remove float and width. Set the margin-right to the width of #sidebar plus any desired spacing; for now, that would be a value of 240px.
#content .transparency
Set the width to 100%.
#post
Set overflow to hidden, to fix float bugs. To prevent the protruding date label from being clipped, also set this element's margin-left to -33px (negative!) and its padding-left to 33px (positive!).
#comments
Set overflow to hidden, to fix float bugs.

Blog: fixed content, fluid sidebar

This fix requires that the background on the sidebar be altered so that the sidebar can stretch. If this modification is not possible, do not make these CSS changes.

Preview 1. Wider sidebar, unchanged background.
Preview 2. Wider sidebar, (simulated) wider background.

#menu, #menu ul
Remove the float property (which isn't even really doing anything right now -- not in FF3.6.12, anyway).
#sidebar
Remove the float, margin-right, and width. Set the margin-left to 600px. Set overflow to hidden to fix float bugs.
#subscribe
Remove the height and width so that this part of the sidebar can expand.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

DavidJCobb
Administrator

Here's fix number three -- fluid content column, but all elements sized so that the sidebar still lies beneath the hand. (No visible change, but future changes become a bit simpler.)

Blog: fluid content, fixed sidebar, with sidebar below hand

These instructions assume that the "fluid content, fixed sidebar" fix above was already applied.

#page
Set width to 830px. Set padding-right to 170px.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

Nikatorus
Administrator
Cobb, you are a freaking beast. I cannot express how awesome a person you are.
Currently: Temporarily Active
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

GodlyPerfection
Administrator
In reply to this post by DavidJCobb
Cobb you are pretty damn awesome I must say. However if you read the blog post about the new layout, you would know that the reason there is space on the right is because that is where I am putting the user submitted ads. it will basically be a 3 column page at that point. But for now I will most likely tweak the background of the sidebar to be wider or if you have a solution to create a black transparency background for the sidebar instead of needing a background img that would be much better. Cuz I believe the content section is using it with color... not an actual background because I have been able to resized the content background, but not the sidebar background.

I would like to go with the fixed sidebar, fixed user ads, and fluid content section.


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

DavidJCobb
Administrator
The content section ghetto-rigged its background. (Absolutely-positioned DIV inside the content DIV, behind its text, with a background color and CSS opacity.)

For the sidebar BG, I'd recommend using a 1x1px semi-transparent black PNG as the background image and having it repeat. You'll have to redo the borders if you take that approach, though.

To get a three-column layout... I'd have to experiment to know for sure, but it *should* be as easy as applying the fluid content tweak, and then adding a second float:right column (for ads) to the HTML. (So the source order for the columns would be #adbar, #sidebar, #content, to get the adbar all the way to the right.) You'd then change #content's margin-right to (sidebar width + space between sidebar and adbar + adbar width + space between adbar and content) pixels.

A rough test I just did in Firebug shows that if you keep all current widths, then #content's margin-right would need to be changed to 424px, and #adbar's width would be 164px (with a 3px border and a 17px margin-left, to separate it from #sidebar).
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

GodlyPerfection
Administrator
So Cobb now that you have admin powers do you think you would be able to have the sidebar nicely resized to fit the "follow me" stuff? Also feel free to apply your fixes to center the content/sidebar stuff until we setup the user ads as a third column. Oh and if you are wondering which fix use the fixed sidebar width with the fluid content width. Enjoy your new position as RP Coding Admin. ;)

EDIT: I would love for you to try to address this today before the Forge Lesson gets front paged tomorrow. Also if you find the time and are able to can you move the "share buttons" to be right aligned and at the same level as the "Read More" on the front page?


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

GodlyPerfection
Administrator
The layout looks great broski. ;) Keep up the great work behind the scenes bro. I appreciate you getting this cleaned up so quickly.

EDIT: Not sure if you noticed this, but the characters on the far right of the front page of the content section are all being cut off on my screen. Is this just me?


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

DavidJCobb
Administrator
In reply to this post by GodlyPerfection
GodlyPerfection wrote
So Cobb now that you have admin powers do you think you would be able to have the sidebar nicely resized to fit the "follow me" stuff? Also feel free to apply your fixes to center the content/sidebar stuff until we setup the user ads as a third column. Oh and if you are wondering which fix use the fixed sidebar width with the fluid content width. Enjoy your new position as RP Coding Admin. ;) EDIT: I would love for you to try to address this today before the Forge Lesson gets front paged tomorrow. Also if you find the time and are able to can you move the "share buttons" to be right aligned and at the same level as the "Read More" on the front page?

Content is now fluid, sidebar is fixed. Shuffled the CSS for the sidebar to make its width alterable; widened it to 240px. Share buttons on articles are now right-aligned. All fixes tested in Firefox 3.6.12, Internet Explorer 8, and Google Chrome 10.0.648.204. About to test in Safari and Opera.

EDIT: Just remembered to test for IE7 (using IE8 Compatibility View). Issues found with the nav and with parts of the sidebar. Testing fixes now.

Reply | Threaded
Open this post in threaded view
|

Re: New Layout Issues

GodlyPerfection
Administrator
DavidJCobb wrote
GodlyPerfection wrote
So Cobb now that you have admin powers do you think you would be able to have the sidebar nicely resized to fit the "follow me" stuff? Also feel free to apply your fixes to center the content/sidebar stuff until we setup the user ads as a third column. Oh and if you are wondering which fix use the fixed sidebar width with the fluid content width. Enjoy your new position as RP Coding Admin. ;)

EDIT: I would love for you to try to address this today before the Forge Lesson gets front paged tomorrow. Also if you find the time and are able to can you move the "share buttons" to be right aligned and at the same level as the "Read More" on the front page?
Content is now fluid, sidebar is fixed. Shuffled the CSS for the sidebar to make its width alterable; widened it to 240px. Share buttons on articles are now right-aligned. All fixes tested in Firefox 3.6.12, Internet Explorer 8, and Google Chrome 10.0.648.204. About to test in Safari and Opera.
It all looks gorgeous bro. Also the right side of the content box is being cut off by a pixel or two. It is most noticeable with italics on the front page and on the forge lesson page. Mind looking into that? Noklu and I are both experiencing this issue. You rock bro and I gave a shout out to you in today's lesson congratulating you on your new promotion. ;)


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
123