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

Antechinus

Oh there's another option. If you use CSS to force divs and lists to display as tables, that makes for more flexibility in some ways. It will allow you to just add extra cells in without having to worry about defining widths, providing you don't have so much rigid content in the cells that they blow the table out. You can use hidden overflow on them as a safeguard if you want to.

You can then use media queries to change the CSS on smaller screens, so things stack down the page. Check the pictures here: http://www.simplemachines.org/community/index.php?topic=524324.msg3713408#msg3713408

CSS controlling it is only this, most of which is eye candy:

#footer_content, .smf_footer_links {
list-style: none;
border: 1px solid #222;
border-top: 3px solid #222;
border-top-left-radius: 200px 15px;
border-top-right-radius: 200px 15px;
}
#footer_content {
margin: 0 auto -30px auto;
padding: 20px 0 40px 0;
display: table;
table-layout: fixed;
background: #111;
box-shadow: 0 3px 10px #000 inset;
}
.footer_column {
display: table-cell;
vertical-align: top;
border-left: 1px solid #222;
padding: 0 15px;
}


Markup is a basic ul.

<ul id="footer_content" class="wrapper" ', empty($options['collapse_footer']) ? '' : 'style="display: none;"', '>';

if(!empty($settings['footer_column_1']))
echo ' <li id="footer_1" class="footer_column">'.$settings['footer_column_1'].'</li>';

if(!empty($settings['footer_column_2']))
echo ' <li id="footer_2" class="footer_column">'.$settings['footer_column_2'].'</li>';

if(!empty($settings['footer_column_3']))
echo ' <li id="footer_3" class="footer_column">'.$settings['footer_column_3'].'</li>';

if(!empty($settings['footer_column_4']))
echo ' <li id="footer_4" class="footer_column">'.$settings['footer_column_4'].'</li>';

echo '
</ul>';




Antechinus

Quote from: S_EEk_ER on 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.

Yep. That's how it works. You can just chain classes up, or use them in combination with id's if necessary. Look up the OOCSS guys if you want a real headspin on classes. They go nuts on them. :D

The 960 grid isn't so important these days. It was designed for dealing with 1024 screens back when they were the default size on the web. These days there is no default size. Anything goes from 240 up to 2560 or whatever, and everything in between. It's a real PITA these days.

S_EEk_ER

Okay, not going to lie, my head is  :o :o :o ??? :o ??? :o :o :o :o ???

I'm going to try to start really small with this, looking at the ShelfLife theme to get an idea then try to build my code from the ground up again.

I think the thing that is causing me the most grief right now is looking at your forum, seeing a header you want, knowing the content you want, then trying to figure out how to pull in the correct styles for it.

I have no idea how you guys get your head around looking at an element and know all the styles that apply from a big page of CSS code.  I even downloaded the Web Developer toolbar using the "Display CSS" option as well as Firefox's Inspect Element feature to see how each element gets their styles.

They are very useful, but trying to piece it all together and say "this heading gets this style from here" and "this image gets all it's styles from there" is something I just can't seem to do.

Feeling pretty discouraged, but I'll keep at it.

Antechinus

Don't worry about it. You have the right approach. It's just a matter of practice. After a while you get the hang of picking the bits out. It helps once you learn what most of the basics mean, so instead of gobbledegook it's information. :)

Starting with simple stuff and building up from there is the way to go. Also pulling apart themes that have features you like the look of. Then there's just trying examples out and seeing how and where they break when you change things. I could give you all sorts of info on that too, but it'd probably do you head in even more at the moment. Best to play around with some stuff and get the feel of it, then ask specific questions when you have a specific problem you need to solve.

S_EEk_ER

I really can't thank-you enough.  As overwhelming as some of this information is, it's invaluable to me and will be come in very handy.

I am going to dig up an old post where someone gave me a link on how to download your site to work locally.

Right now it's pretty awful how I am doing this - Notepad++ when on a PC and Wrangler when on a Mac.  That or modifying the files directly while viewing them through our provider.

So off-topic, what would you call the "essential" tools I should be using here, ideally free?  I do have Adobe CS5 on my Mac which includes Dreamweaver, although I never use it.

Antechinus

Never used Dreamweaver. Notepad++ rocks for code editing. Best local host package I've found is Vertrigo, but it only runs on Windoze. http://sourceforge.net/projects/vertrigo/

Apart from that you just need some good browser tools. A combination of the built-in ones, plus the Firefox/Pale Moon/Chrome Web Developer add-on, along with ColorZilla and MeasureIt, will cover a lot of things. Some people like Firebug but I'm not keen on it.

Not much else you need, apart from knowing how to validate your HTML so you don't get borked markup throwing things for a loop, and learning some basic PHP syntax so you won't drive yourself nuts with parse errors so often.

S_EEk_ER

Thanks for the tool recommendations, I'll check them all out!

I made some progress removing the tables but the images are just bouncing around and not positioning where I want them to.  With my first example (all the code below), I was able to get everything in the right area but I can't:


  • Ensure there is 8 images per row - no more, no less.  They are basically not scaling correctly on my phone.
  • Get both rows to center.
  • I don't know how to separate the rows other than to enter a <br />, which I'm sure isn't right.


CSS

#lower_section
{
overflow: hidden;
/* width: 500px; */
width: auto;
/* border-style:none; */
/* min-height: 200px; */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
/* padding-top: 0px; */
/* padding-right: 0px; */
/* padding-bottom: 0px; */
/* padding-left: 0px; */
background-color:#FFFFFF;
border-bottom: 1px solid #000000;
}
.tmlforum_custom_content
{
float: left;
/* overflow: hidden; */
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
}



PHP file (note: actual content removed for ease of seeing what I'm trying to do

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

<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>
<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>
<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>
<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>

<br /><br /><br /><br /><br /><br /><br />

<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>
<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>
<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>
<div class="tmlforum_custom_content">
<a href=""><img src=""/></a>
</div>

</div>


Antechinus

You don't have any width defined on your content divs, so if they're floated they will just collapse in width until they fit whatever you put inside them. If you have widths specified, and they all add up to a bit under 100%, then the next block after that will automatically break to a new row.

Just be aware that using margins or horizontal paddings set in pixels is not conducive to stability when you change the screen width. The problem is that is you have everything sitting nicely and filling up one row, when the screen gets narrower the paddings and margins will be a greater percentage of the overall width. This can trip the total over 100%, so it all goes haywire. To get around this you can use several methods:

1/ Set horizontal paddings and margins in %, so they scale with screen width.
2/ Use table-cell display, which will handle it automatically (margins are discarded, and cells just deal with padding like a standard HTML table).
3. Use box-sizing: border-box. Look it up. ;)

Also, rather than using <br /> you can put in another wrapper div where you want to split rows, effectively using each wrapper div as a table row. If the wrapper div is set to text-align: center; and the divs inside the wrapper are set to display: inline-block; then they will be centred and their content will be centred within them.

You might also want to ask yourself f you really need 8 images per row, or if some other presentation might be better. ;) For instance, if you join them all into one long banner you only have to position one image, and you only have one http request instead of 8. 

Antes

or you can create a one big sprite to contain all images :P

Antechinus

I'm trying to make him less confused at the moment. :D

Antes

I think now on, people should learn making sprite & using them as basics of Web and creating sprite is so easy, only thing you need to do is go http://draeton.github.io/stitches/ and put images and get the output. Yes it may seem bit confusing but web switching to this and CSS is cooler than HTML :D :D

S_EEk_ER

Quote from: Antes on August 30, 2015, 03:14:09 AM
or you can create a one big sprite to contain all images :P

:o :o :o :laugh:


Quote from: Antechinus on August 30, 2015, 03:36:51 AM
I'm trying to make him less confused at the moment. :D

Me thinks me needs less confusion, so thank-you!


Well, here is the deal.  I tried so hard yesterday to piece everything together and do things the right way.  To do that, we are going to simplify and that began with changing those first 16 images to one solid banner.  I've made some progress with how that looks on a mobile device and while it's far from perfect, it's better.

I think at this point I'm going to take a step back and do some reading.  In piecing together what everyone is saying, the 960 Grid System appears to be dated but it sounds like I should focus on something called Responsive Web Design.

I found these two resources where I'm going to start:  http://www.w3schools.com/html/html_responsive.asp

and http://www.w3schools.com/w3css/default.asp


Once I have a solid understanding there, I'm going to read this book:  Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics Fourth Edition


If there is one thing I've learned in working in IT it's that you do not want to build things off of a poor foundation.

I really appreciate all the guidance and time you guys have taken in helping me out here - it has been extremely helpful and I've learned a lot.  Thank-you!

Antechinus

"...it sounds like I should focus on something called Responsive Web Design."

Umm, yeah. :D

S_EEk_ER

Quote from: Antechinus on August 30, 2015, 05:37:11 PM
"...it sounds like I should focus on something called Responsive Web Design."

Umm, yeah. :D

I only first heard about it last week!!!   ;D ???

Thanks for all the help, much appreciated.   :)

Advertisement: