I’ve chosen to eat my elephant one tiny bite at a time, so I’m going to try to attack the deets containers first. My intention is to have the H3 sit above all three containers, then deetsLeft, deetsMid and deetsRight side by side. Currently, Left, sits above mid and right, which are beside each other. Why is this happening? It seems like maybe it’s some kind of width restriction is bumping them down, but I don’t see anywhere in the css I’ve written that it would be restricting it.
hello schwim, am confused. to you wish to replicate the older page exactly?
when I opened up your new page and and took a couple of screenshots. you can see that the lenght of the dives if preventing some of the alignment you want. Also the positioning.
also it seems that you have the table at the bottom for the navigation. But i would think that it would be un necessary to have a table for this?
perhaps a div positioned next the “leftContent” div would work?
also not sure if the size of “leftContent” is constant. if it is, it is taking up a lot of real estate space. give it a size that in not 100% of the screen and the nav div set up next to it should take the space?
another suggestion is to create a very simple codepen, at codepen.io with the very basic layout so we can work on it.
D
I am sorry for not explaining my goal better. I am trying to create the screenshot I posted, which was GIMPed together from the current page layout. My reasons for this:
HTML 5 validation
replacement of tables with divs
more responsive layout
My screenshot gets rid of the left/right content/details split and attempts to put them in the left container. The reason for topFullwidth and rightSkyscraper exists is for future advertising. I have temporarily added colored borders to the divs to make it easier to understand.
Here’s is a screenie which shows what I was hoping to achieve with the containers.
For some reason, the poster details and navigation buttons are going under the owner’s avatar. deetsLeft, deetsMid and deetsRight were supposed to sit side by side inside leftDeets and it looks like Mid and Right are outside the leftDeets container. What have I done that is causing that?
Also, the table for navigation is a remnant of the old layout. I will remove it.
I’m unfortunately unable to edit the previous post, due to age, I guess, so I’m posting to report that I managed to solve the deets container. It was a missing singlequote causing the issue.
After reading some more at W3Schools, I think I’ve managed to get the very basic layout achieved. Now I just need to fine tune it.
If you look at the current layout now(refreshing for CSS change), you can see that deetsLeft, deetsMid and deetsRight are in line finally. The issue I have now is that I would like deetsRight to be at the far right of leftDeets container, and deetsMid should stretch to fill the space. I’m thinking it’s a combination of float and size, but I haven’t figured it out yet.
More progress, leading to a question. The page looks right, roughly, but there’s something I just don’t understand about the divs leftDeets, deetsLeft, deetsMid and deetsRIght
My intention was to have leftDeets be a container for the three child deets divs So, in my mind I was building something like this:
But if you look at my page, the leftDeets only has the H3 element inside it. The three intended subcontainers are actually below it.
I think this is how I would start to approach it. normally you have a wrap containing your divs.
I am thinking you want the left sidebar for ads.
you could have a large div & in it put your video & content. and the side bar div next to it.
What are you using for a platform. wp, drupal.static?
D
aside from header and breadcrumbs, which are outside of any other div, I have a leftContent side, in which I want the content and a rightSkyscraper that I want to place advertising into eventually.
In your opinion, do I need to create a parent div for the whole page(which you labaled the main wrap)? Once that’s done, aside from the issue I mentioned right above your posts, I only need to set the widths to duplicate your image. Is that a correct estimation?
I would like to suggest that you give your page a good run through the HTML validator. There are a few missing/mismatched tags on your page. http://validator.w3.org/
Fix those and styles can be applied more reliably.
I don’t remember if I’ve asked which browser you use, but most or all include developer tools nowadays. If you use Firefox, you can get an HTML validator add-on that is a bit easier to read than the W3.org validator. Same rules, just clearer descriptions.
An FYI: Since you have changed to an HTML5 doctype, it’s probably OK to mention that the empty tags, img, meta, etc, do not require the closing slash. That is an XHTML requirement, not an HTML thing.
Hi there everyone and thank you all for your help!
I installed the validator addon and have fixed all the errors. Thank you very much for that. It’s much easier for me to understand than the W3C validation service.
I will begin work on that. There’s gonna be toooons
thank you sherpa. I’ve never used Codepen before. I’ll look at your outline and see what I need to change.
If you check the page now(refreshing the css), you can see what I had intended and why I need deetsLeft, deetsMid and deetsRight to sit inside leftDeets container.
I’m attempting to visually group those three elements by putting a design on the parent container, but for some reason my three sub containers are sitting below what I intended them to sit inside.
What have I don’t wrong that’s causing this to happen?
Would you mind making an annotated image using your faviorite graphics program that shows how the page should look? I’m having a problem putting the pieces together in my imagination. Can’t tell what is supposed to be inside of what nor what is below what.
What are the fluid/responsive width expectations of the page? From how wide to how wide?
This is what I was hoping to do. And an odd story:
To make a screenshot to modify, I placed a blank gif into leftDeets 100px tall so I would have a big enough box to copy and paste the elements into. Simply placing the image into leftDeets to stretch it open caused it to include the elements. I didn’t have to alter the image.
Here’s what it looks like if I don’t have that image in the container to stretch it:
Hopefully, that explains what I’m hoping to achieve.
I’m hoping that this design works well in tablets in portrait. I’m using this site to test my pages to make sure it scales properly: http://mobiletest.me
On the PHP side of things, I’ve written a function to determine phone, tablet or PC as well as allowing the visitor the ability to force a particular view. Once I’ve nailed the template for this, I will design an alternate template for smaller than tablets that will provide less detailed content to allow for a stripped down version of the page.
I don’t think I have a desire to make it any wider for larger screens. There is a div on the right that will contain advertising of some sort, so the page will be wider at some point.
Floats are removed from the flow which means that a parent element that only has floats for children in fact has no content and the height of the parent will be zero. You need to contain your floats (google clearfix) which can be done in a number of ways depending on circumstance.
If you don’t need visible overflow then simply adding overflow:hidden to .leftDeets will contain the child floats because overflow other than visible is one of the properties that creates a new “block formatting context” and in this context floated children are contained automatically (display:inline-block;display:table-cell and absolute elements also establish new block formatting contexts and will contain child floats).
If you do need visible overflow then using the revised clearfix method would be a good solution:
The vid, link(s), “deets” avatar, info and nav buttons, look to me like one or more PHP generated elements inserted into a “template” page. If that is the case, then I can work with your page as being an HTML page with foreground images and/or vids, etc.
Paul just posted the point I was leading up to with the “deets” content. I am in the process of putting it in a {display:table} structure, though, so the full width of the middle “column” is accountable. Can be done both ways, so it boils down to your preferences or design nuances.
<FYI>
A useful “FYI” (in the form of a recommendation): replace the single quotes that you are using in most of your HTML with double quotes. The reason is has to do with the “strength” or “weight” of quote marks. A single quote “outweighs” a double-quote.
Two examples:
(1) one can nest double quotes inside single quotes but the reverse will not work.
(2) Remember yesterday when you found the missing single quote mark near the top of the page? The effect of that missing single quote mark was greater than it would have been had you used double quotes around your classes. The missing single quote caused the code to include all of the HTML that it found before the next single quote mark within the “class” that it was supposed to be surrounding. Needless to say, the page “broke” obviously. Had you been using double quotes, only the class in the element with the missing quote mark would have been missing and the rest of the page would not likely have been as badly “damaged”.
Single quotes outweigh double quotes. This is a common programming convention.
There are a few places where I find myself using single quotes, too. Old habit that can bite.
Does “If you do need visible overflow” mean if I need it to grow to allow the content inside to expand in height? I’ve looked up overflow on W3Cs but I still don’t fully understand the property.
I would like to ask a question, if I may. All my reading about utilizing divs has led me to believe that the design community for the large part believes that tables have almost completely outlived their usefulness and that there’s a very rare instance in which you should use them. Some people are even more against them and will go to any length necessary to keep them out of their code.
Can I ask your opinions on this? I’m not looking to take a shortcut but I seem to just understand tables so much better. The more I read about divs and CSS, the less I seem to understand.
The simplest way of understanding the reason why ‘most’ are against using tables, is that they are not a tool for establishing page layout. They are only intended as a means of presenting tabular data. Here with your page, there is no tabular data, therefore no reason to use a table.
This is indeed the case. Every page is run through a template file at the end of each PHP script. menu, video, poster details, comments and navigation are all generated on the fly.
I look forward to seeing your suggestion. My grasp of the fluid design is tenuous right now at best. Actually, my grasp of design is pretty terrible, truth be told.
Oof. The whole reason I’ve taught myself to utilize single quotes in the html is so I wouldn’t have to escape all quotes in my php files. Luckily, I already bond my vars to work with single quotes:
echo($var1." is the current way I include ".$var2." into my <a href='/'>html</a>.");
so it would be a case of reversing my quote style in both php and html.
I will get started on it right away. I do understand your real world example of my broken page.
