Sloppy JavaScript/CSS2/HTML4 and Headache

AoN

AoN

Internet Programmer
Joined
Aug 1, 2012
Posts
114
Alright, got another annoyance that I'd rather just not deal with, but Cx gets what Cx wants.

Here's the template I'm working on: William A. Hunton William YMCA

The current issue is with the tables for the main content. To best explain the issue, feel free to take a look at the mock-up: http://www.zrift.com/CIS480/Mock-Up v2.pdf

As is most obvious from the homepage to the next two included in the mock-up, the page content may contain 1 or more columns. What I need to do is be able to specify for them to resize to fill the full width of the main area while maintaining a 15px spacing between each column, and allowing for easy addition of more columns. I tried playing with <DIV> to make it work, but it didn't want to cooperate with maintain the outer border.

The request of the Cx is to have the extra space evenly distributed across all three, but not make all three the same size, instead making it dynamic to the content of each column.

Here's the REAL kicker: HTML4 and CSS2 ONLY! I know, horrible, but it isn't my call.

Any suggestions?

I'm going to get some sleep. Hopefully, I'll dream up the solution, but, should that not work out, I hope to see a reply. ^^'
 
AceInfinity said:
If you're using old web traditions, why not use a <table> and use the cell padding to fit the gap size?
Click to expand...

+1, could easily be done with divs and min-width but, not sure if thats CSS2 or not :lolg:

Tables and table-width/padding is probably your best bet
 
AceInfinity said:
If you're using old web traditions, why not use a <table> and use the cell padding to fit the gap size?
Click to expand...

I am using tables for the content columns. The problem is with making them dynamically expandable. Quite frankly, they kept changing what they wanted for 4 weeks so that I only just got the "final" mock-up approved today, yet I'm supposed to hand them a completed site (HTML/CSS/JavaScript only) by Thursday. Right now, I'm working on getting the content into the template, which is done, and if no one can figure it out by then, I'll just say that there wasn't enough time with how much they made me waste.

It's not like they're paying me for this anyways. I'd put more direct effort into it were they to be paying me, but I had to do something as my senior project. I'll get an "A" for doing everything I could, since all the communication went through the instructor, she can't hold the lack of progress against me.

So, just to clarify, this request will not be aiding my grade of the "senior project" in anyway. I've already spoken to my instructor about the lack of progress due to their constantly changing design requirements. This will only help to provide our Cx with what they want. Despite this reassurance, I understand if you still don't wish to help.

Laxer said:
AceInfinity said:
If you're using old web traditions, why not use a <table> and use the cell padding to fit the gap size?
Click to expand...

+1, could easily be done with divs and min-width but, not sure if thats CSS2 or not :lolg:

Tables and table-width/padding is probably your best bet
Click to expand...

min-width wouldn't allow me to dynamically size it based upon the content. Basically, column 1 has enough to fill 10%, column 2 has enough for 30%, and column 3 could have 20%. That's a total of 60%, leaving 40% to be distributed evenly across all three columns. If I were to use min-width without being able to dynamically define its value, then the columns may all be 10% with the remaining 70% untouched.
 
"dynamically expandable" - explain what you mean here in more detail. The width CSS property has the option to use a percentage, and same with height, along with 'auto' if you don't know.
 
Sorry, AceInfinity. I went back and edited my post when I saw Laxer had posted. It explains it a bit more. Let me know if that isn't good enough, I can try explaining it differently, though I'm not sure how, at the moment. ^^'
 
AoN said:
Sorry, AceInfinity. I went back and edited my post when I saw Laxer had posted. It explains it a bit more. Let me know if that isn't good enough, I can try explaining it differently, though I'm not sure how, at the moment. ^^'
Click to expand...

Like I said, play around with 'auto' and percentages in your CSS.
 
Well, using the percentages isn't a viable solution as it is dynamic only to the size of the parent tag. As for auto, if only it were so simple. Something to remember, when a width isn't specified, the browser will automatically use "width: auto;" to define the width of a container. As such, it is already using auto, which will only resize the container, in this case the table cell, to the needed width to fit the contents of the cell. What would be needed is to go a step past this, subtracting the width of all the columns on the page from the container and then adding an equal portion of that extra width to the individual columns. Thus, all the columns combined would equal 100% while maintaining ratio of content-to-column width.
 
min-width as in set each column to say 200px, then set them up so they expand with text,(overflow:hidden) and set a fixed height so it expands horizontally not vertically.

This will set each column to the width of the max element in it.

Not expanding a whole 100% of the page but you could easily center it and it should look fine I would imagine.
 
Laxer, I probably don't understand what it is you were thinking, but a min-width kinda doesn't do what is wanted, since it prevents a column from being smaller than 200px.

Anyways, I worked around it using a single table with 11 columns to manage the content columns. I'll just have to leave "detailed" instructions for the Cx on how to add or remove columns of content. This method does make the height bit ignore-able.

I considering writing it with JavaScript to make it easier on the Cx, but they haven't made this project easy on me, why shouldn't I return the favor? xD

Thank you for your assistance. ^^
 
Laxer said:
You're right, I think I was answering the wrong question... :lol:
Click to expand...

Aren't we all? Last I knew, the question was: To be, or not to be?

Anyways, the table bit I did does exactly as needed, it's just troublesome to add/remove columns. Again, why shouldn't I return the favor to them? ^^
 

Has Sysnative Forums helped you? Please consider donating to help us support the site!

Back
Top