News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Design Guidance / Items Overflowing Off The Page

Started by S_EEk_ER, August 28, 2015, 02:08:03 PM

Previous topic - Next topic
Print
Go Down Pages1 2 All
User actions

S_EEk_ER

August 28, 2015, 02:08:03 PM
I've started learning CSS and a bit of PHP over the last few weeks and will be the first to admit I know enough to be dangerous!   :o

That said, I have managed to figure out how to add many sections to the bottom of our forum (they are not boards!), but they do inherit the same properties of the boards so that everything has the same look and feel.

Attached is a screenshot from my phone and as you can see, all the headings are fine, but the way I have defined the content within obviously isn't right.  An image blasts over the right side of the page and the names of people in the "Dedicated Members" section is not legible because they overflow each other.

I think I need them to scale by percentage depending on the screen width of the desktop/tablet/device?

Right or wrong, I have most of the content within these sections defined in HTML tables that pull the CSS from the defaults in our theme.  The only additional custom CSS I have written (and I'm sure it's ugly!) is included below.

Can you provide some design tips on how I should go about cleaning this up?  Key files I should look at, CSS recommendations, how I should try to display these in the index.template.php file would be very helpful.

Thank-you!


Code Select
/* The lower section above copyright links etc. The lower_section did not exist at all, added 23-Aug-2015 */
#lower_section
{
/* width: 500px; */
width: auto;
border-style:none;
min-height: 200px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color:#FFFFFF;
}


#lower_section table
{
table-layout: fixed;
width: 90%;
/* width:800px; */
margin-left:auto;
margin-right:auto;
}

#lower_section td
{
        color: #000080;
        /* border: 1px solid black; */
        text-align:center;
        vertical-align:top;
}

Antes

#1
August 28, 2015, 02:11:38 PM
Can you add #lower_section img {max-height: 100%; max-width: 100%;} and try again?

S_EEk_ER

#2
August 28, 2015, 02:18:11 PM
Quote from: Antes on August 28, 2015, 02:11:38 PM
Can you add #lower_section img {max-height: 100%; max-width: 100%;} and try again?

Forgive me if I got this wrong, but is this how you add it as #lower_section img?

That corrected the one image from shooting over the edge, but now the entire top portion of the entire forum looks off on my phone.


Code Select
/* The lower section above copyright links etc. The lower_section did not exist at all, added by Rubens on 23-Aug-2015 */
#lower_section
{
/* width: 500px; */
width: auto;
border-style:none;
min-height: 200px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color:#FFFFFF;
}

#lower_section img
{
max-height: 100%;
max-width: 100%;
}

Antes

#3
August 28, 2015, 02:19:57 PM
I actually need a demo (or you can try with #lower_section > img).

S_EEk_ER

#4
August 28, 2015, 02:29:21 PM
This didn't seem to work.

Code Select
#lower_section > img
{
max-height: 100%;
max-width: 100%;
}


When I use this:

Code Select
#lower_section img
{
max-height: 100%;
max-width: 100%;
}


The image on the bottom looks better - overflow 1 screenshot.

The rest of the forum is off though - overflow 2 screenshot.

The forum looks fine in Firefox on a Desktop, but out of whack just on my phone.

URL: www.tmlforum.net

Antes

#5
August 28, 2015, 02:54:52 PM
actually I noticed your forum missing "<meta name="viewport" content="width=device-width, initial-scale=1" />".

S_EEk_ER

#6
August 28, 2015, 03:02:17 PM
Quote from: Antes on August 28, 2015, 02:54:52 PM
actually I noticed your forum missing "<meta name="viewport" content="width=device-width, initial-scale=1" />".

Okay, so that needs to be added somewhere I'm guessing?  I do apologize, I have no idea what that means or where it should go. 

Antes

#7
August 28, 2015, 04:39:31 PM
Well if you are trying to make your forum mobile friendly (responsive) yes, it should go to somewhere between <head> tags. You can take a look at our responsive modification, it probably give you bigger / better idea (http://custom.simplemachines.org/mods/index.php?mod=4040).

Also a small reminder since you have custom theme mod probably won't work (or does not work properly) so I don't recommend you to install it. But since the modification does not do any source edit, your forum won't broken down, so its pretty safe to install (for trying your luck).

Antechinus

#8
August 28, 2015, 05:09:35 PM
Quote from: S_EEk_ER on August 28, 2015, 02:08:03 PM
I've started learning CSS and a bit of PHP over the last few weeks and will be the first to admit I know enough to be dangerous! :o
Cool. The team will want you as a dev. :D

Tables will blow out on small screens. Try using table-layout: fixed in the CSS for them. This often helps.

S_EEk_ER

#9
August 28, 2015, 10:12:10 PM
Quote from: Antes on August 28, 2015, 04:39:31 PM
Well if you are trying to make your forum mobile friendly (responsive) yes, it should go to somewhere between <head> tags. You can take a look at our responsive modification, it probably give you bigger / better idea (http://custom.simplemachines.org/mods/index.php?mod=4040).

Also a small reminder since you have custom theme mod probably won't work (or does not work properly) so I don't recommend you to install it. But since the modification does not do any source edit, your forum won't broken down, so its pretty safe to install (for trying your luck).

About 10 years ago my father started this forum and customized the heck out of it, modifying man of the of main php files with hard-coded HTML.  Very impressive considering his age and barely new how to turn on a computer at the time.  That said, I'm starting to realize how wrong this is and how difficult a spot it now puts us in if we wanted to implement something like this mod.

That said, I do want to get to a point where it's optimal on mobile devices.  I have a long way to go but this mod is a good reference point.

I'm going to try and understand the code then incorporate it into our own theme.

Feeling a bit discouraged because it's quite a mountain to climb, but it is what it is.

Thanks for your help!

S_EEk_ER

#10
August 28, 2015, 10:14:21 PM
Quote from: Antechinus on August 28, 2015, 05:09:35 PM
Quote from: S_EEk_ER on August 28, 2015, 02:08:03 PM
I've started learning CSS and a bit of PHP over the last few weeks and will be the first to admit I know enough to be dangerous! :o
Cool. The team will want you as a dev. :D

Tables will blow out on small screens. Try using table-layout: fixed in the CSS for them. This often helps.

Well one thing is for sure, I don't get a chance to do much development and I have a lot to learn, but I absolutely love doing it and that's the best way to become good at something.   :)

Sounds good, on the table-layout: fixed recommendation.  I'll start playing around with that now.

S_EEk_ER

#11
August 28, 2015, 10:18:20 PM
Quote from: S_EEk_ER on August 28, 2015, 10:14:21 PM
Quote from: Antechinus on August 28, 2015, 05:09:35 PM
Quote from: S_EEk_ER on August 28, 2015, 02:08:03 PM
I've started learning CSS and a bit of PHP over the last few weeks and will be the first to admit I know enough to be dangerous! :o
Cool. The team will want you as a dev. :D

Tables will blow out on small screens. Try using table-layout: fixed in the CSS for them. This often helps.

Well one thing is for sure, I don't get a chance to do much development and I have a lot to learn, but I absolutely love doing it and that's the best way to become good at something.   :)

Sounds good, on the table-layout: fixed recommendation.  I'll start playing around with that now.


Bummer, I already have that in there.   :-\

Code Select
/* The lower section above copyright links etc. The lower_section did not exist at all, added by Rubens on 23-Aug-2015 */
#lower_section
{
/* width: 500px; */
width: auto;
border-style:none;
min-height: 200px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color:#FFFFFF;
}

#lower_section table
{
table-layout: fixed;
width: 90%;
/* width:800px; */
margin-left:auto;
margin-right:auto;
}

#lower_section td
{
        color: #000080;
        /* border: 1px solid black; */
        text-align:center;
        vertical-align:top;
}

Antechinus

#12
August 29, 2015, 12:19:58 AM
Ok, I can see some of the problem. The large images you have in the lower section are too big and are pushing out the table cells. Tables are rubbery like that.

First thing to do:

Code Select
#lower_section .table_list img {max-width: 95%; max-height: auto;}

You may want to change the max-width limit, depending on your cell padding.

Then you have other tables that have a long row of cells, each filled with an image. This sort of stuff is why people go bonkers trying to use tables for responsive layouts. A long row of table cells is as responsive as a frozen mullet. If the image scaling isn't enough, you'll have to start dropping cells.

S_EEk_ER

#13
August 29, 2015, 08:08:51 AM
Quote from: Antechinus on August 29, 2015, 12:19:58 AM
Ok, I can see some of the problem. The large images you have in the lower section are too big and are pushing out the table cells. Tables are rubbery like that.

First thing to do:

Code Select
#lower_section .table_list img {max-width: 95%; max-height: auto;}

You may want to change the max-width limit, depending on your cell padding.

Then you have other tables that have a long row of cells, each filled with an image. This sort of stuff is why people go bonkers trying to use tables for responsive layouts. A long row of table cells is as responsive as a frozen mullet. If the image scaling isn't enough, you'll have to start dropping cells.

;D ;D ;D Your mullet comment has to be one of the best lines ever!   ;D ;D ;D

I added that snippet of code and that fixed all the images at the bottom.  However, the rest of the forum above it goes off again like my previous screenshots, so I had to remove it temporarily.

It created a bigger problem that is likely my own design fault.

Below I have stripped out the content and left just the div and table statements so you can see how I am building each custom section.

The "lower_section" is entirely my CSS.  I don't know any better, so I found adding the cat_bar / catbg / entry-content / table_list classes gave me the headers I was looking for so it looks like the rest of the forum.


Code Select
<div id="lower_section">
<div class="cat_bar">
<h3 class="catbg">The Evolution Of The Toronto Maple Leafs Logo</h3>
</div>
<br />

<br />
<div class="entry-content">
<table class="table_list">

<tr.windowbg>
<td></td>
<td></td>
<td></td>
</tr>

<tr.windowbg>
<td></td>
<td></td>
<td></td>
</tr>

</table>
<br /><br />
</div>


With all that said, all I want is the headers to match the rest of the forum board and then to place a little bit of content in each section.  I don't care if I have to rewrite this section entirely to do it right.

Any guidance you can provide on where I can start would be helpful (perhaps a template of code I can start with).  It also sounds like I need to get rid of the tables altogether.  They were only there because I know a little HTML and figured that would be the easiest way for me to space everything out.

Antechinus

#14
August 29, 2015, 08:47:35 AM
I honestly can't see anything there that you would need tables for. Should be able to do it all with divs, lists, whatever. I get why you would want to start with tables. Lots of people here used to feel the same way. They're stable and predictable with little or no CSS required. However, they're very limiting.

Basically, if you want the thing to end up kosher for phones, tables are only going to screw you over big time. The only thing you can do with them is start dropping cells with media queries once screen width reduces. There's no other flexibility available with tables, because everything is locked into the rows and locked into the order within the rows. Great if you just want a spreadsheet and have the space, but a real PITA for anything else. :)

If you want a brief example of something that is pretty much as stable, but allows you to radically shunt things around just by CSS tweaks, you could start by playing with this.

Code Select
<div class="the_big_one">
    <div class="the_little_ones">Stuff goes in here</div>
    <div class="the_little_ones">Stuff goes in here</div>
    <div class="the_little_ones">Stuff goes in here</div>
</div>

With CSS like this:

Code Select
.the_big_one {anything you like, doesn't matter much}
.the_little_ones{ display: inline-block; max-width: 33%; min-width: 33%; -moz-box-sizing: border-box; box-sizing: border-box;}

That will give you three divs in a row, with equal width. More or less like a table row. There are other ways of getting the same result. You can use floats, or display: table-cell; and all have good points and bad points.

Code (Doing it with CSS fake tables) Select
.the_big_one {display: table; table-layout: fixed;}
.the_little_ones{display: table-cell; max-width: 34%; min-width: 34%;}

Code (Doing it with floated divs) Select
.the_big_one {overflow: auto;}
.the_little_ones{float: left; max-width: 33%; min-width: 33%; -moz-box-sizing: border-box; box-sizing: border-box;}

S_EEk_ER

#15
August 29, 2015, 09:03:42 AM
Those are great guidelines Antechinus, thank-you.

And now I have to really think this through because if I define the code through any of the three methods you mentioned, I'm going to handcuff myself in having to create custom code for each section (i.e. some tables may have 10 columns by 2 rows and others may have 4 columns with 3 rows etc.).


If I have three rows per your example, the code you provided works.

Code Select
.the_little_ones{ display: inline-block; max-width: 33%; min-width: 33%; -moz-box-sizing: border-box; box-sizing: border-box;}


If I'm understanding correctly, to add a 4th column, I'd need an additional CSS block that reads something like:

Code Select
.the_little_ones_4{ display: inline-block; max-width: 25%; min-width: 25%; -moz-box-sizing: border-box; box-sizing: border-box;}


10 columns?

Code Select
.the_little_ones_10{ display: inline-block; max-width: 10%; min-width: 10%; -moz-box-sizing: border-box; box-sizing: border-box;}


So I'm thinking I should try to create a solution that would apply to the entire lower_section.

Antechinus

#16
August 29, 2015, 09:10:43 AM
Yep, you have the idea. You can pre-define classes that do different "cell" widths. This is a common way of handling it.

.10_percent {width: 10%;}
.20_percent {width: 20%}

Etc. Name them anything you like.

Then to save CSS you can just define the basics (float, or display, and any eye candy) on .the_little_ones and chain that class with whatever width class you want to use.

Code Select
<div class="the_big_one">
    <div class="the_little_ones 10_percent"> and nine more of those to make a row
</div>

Use whatever width-defining class you like in any particular section.

Antechinus

#17
August 29, 2015, 09:15:12 AM
Actually, grab Bloc's latest theme and have a look at the guts of it. He's done pretty much what I just described above. The CSS file is nice and brief too, so it's easy to find the relevant bits (look for classes like bwcell33 etc).

http://www.simplemachines.org/community/index.php?topic=539060.0

S_EEk_ER

#18
August 29, 2015, 09:33:18 AM
Interesting, so you basically form a grid in 10% sections (or whatever you want to define) then pick that class depending on how wide you think your elements will be.  I just read about the 960 grid system this week - is that still valid and essentially describes what you are saying here as well?

http://960.gs/


Silly question... the code below, is that saying "apply everything in 'the_little_ones' class first, then apply additional styles from the '10_percent' class", thus combining the two styles?  I've had a hard time wrapping my head around that.

Code Select
<div class="the_little_ones 10_percent"> and nine more of those to make a row



To make sure I have this right, my code would look something like this:

CSS

Code Select

.lower_section {anything you like, doesn't matter much}

.grid_content{ display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box;}

.10_percent { width: 10%; }
.20_percent { width: 20%; }
.30_percent { width: 30%; }
.40_percent { width: 40%; }
.50_percent { width: 50%; }
.60_percent { width: 60%; }
.70_percent { width: 70%; }
.80_percent { width: 80%; }
.90_percent { width: 90%; }
.95_percent { width: 95%; }



In index.template.php file

Code Select
<div class="lower_section">

    <div class="grid_content 20_percent">

        <small img 1 with hyperlink here>
        <small img 2 with hyperlink here>
        <small img 3 with hyperlink here>
        <small img 4 with hyperlink here>
        <small img 5 with hyperlink here>

    </div>

    <div class="grid_content 30_percent">

        <p>paragraph 1</p>
        <p>paragraph 2</p>
        <p>paragraph 3</p>

    </div>

    <div class="grid_content 95_percent">

        <img banner stretching full page>

    </div>

</div>

S_EEk_ER

#19
August 29, 2015, 09:34:08 AM
Quote from: Antechinus on August 29, 2015, 09:15:12 AM
Actually, grab Bloc's latest theme and have a look at the guts of it. He's done pretty much what I just described above. The CSS file is nice and brief too, so it's easy to find the relevant bits (look for classes like bwcell33 etc).

http://www.simplemachines.org/community/index.php?topic=539060.0

I was typing a long response when you posted this, will check it out now.  Thanks!   :D
Print
Go Up Pages1 2 All
User actions
Advertisement: