Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 23, 2018 14:02:38 GMT -8
Not at all! We'd have to go back in and adjust the widths of the individual boxes, which might require some trial and error. For now, let's leave it uniform and see how we end up.
Let's make a little addition to the previous CSS, marked in RED below, so that the contents of each box are in proper upper and lower case:
.box-1.inside, .box-2.inside, .box-3.inside { min-height: 145px; max-height: 145px; background-color: #555555; padding: 10px; overflow-y: scroll; margin-top: 2px; text-transform: none; }
And that should basically be it! You'll need to change the colours where appropriate to match the theme you've created. The contents of each text box on your example site are just plain text with a date added to it and the date itself in bold.
Do you think you can manage that bit without assistance? Or are there any other modifications you'd like to make that we haven't already?
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 2:15:05 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 14:11:23 GMT -8
I think that's it, for now. Thank you. If I have any more issues or questions I have I'll let you know.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 23, 2018 14:30:13 GMT -8
You're welcome! Make sure to @ tag me if you need me -- depending on when you come back, if you do, this thread might disappear from my participated list and I won't get a notification.
@ tag: @kamiyakaoru
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 2:15:05 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 14:32:54 GMT -8
Okay, no problem. Thank you so much for the help, I'm glad you managed to explain it all step-by-step, rather than all together otherwise I would have been completely lost.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 23, 2018 14:38:30 GMT -8
You're very welcome! I thought that might be the case, which is why I asked you how familiar you were with HTML before I began (:
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 2:15:05 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 27, 2018 12:36:42 GMT -8
Quick question, sorry. I am going to be using the same table for the affiliates section. I would want the first to be Listings and Voting, the second Static and the third Scrolling. How do I remove the scroll bar from the first two boxes? and allow it to have 3 affiliates on a single line, rather than two? somnum-metus.boards.net/I have the code posted in Main Footer.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 27, 2018 13:06:30 GMT -8
Well, duplicating all the class names like this is not going to work, because then whatever changes you make to accommodate for your needs for the bottom table would be reflected into the top table. We can use this as a framework, but we'd have to change a few things. Are you OK with that?
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 2:15:05 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 27, 2018 13:12:09 GMT -8
Yeah, that's fine.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 27, 2018 13:47:47 GMT -8
I'll get back to you after I'm done with my work then, sorry for the wait (:
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 2:15:05 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 27, 2018 14:27:34 GMT -8
Not a problem I'm British so it's 11:30pm for me.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 27, 2018 16:09:00 GMT -8
OK so first things first! We're going to change the class names on the divs in your footer to something else.
Basically, what I want you to do is to change anything that's a 1 to a 4, anything that's a 2 to a 5, and anything that's a 3 to a 6. You will lose all styling when you do this but that's okay because we will add it back in the next step.
Let me know when that's done!
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 2:15:05 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 28, 2018 3:12:59 GMT -8
Okay, done.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 28, 2018 19:40:49 GMT -8
Great! Now, the problem with the affiliates being displayed in two lines is because of the width of the box. You have two options here: a) make one box narrow and two boxes equally wide, or b) make one box rather wide and two boxes narrow. If you want both affiliates types (static and scrolling) to be three to one line, then you'd likely want the first option but I'll leave that up to you.
For option A, use the following CSS to determine the width:
.box-4.title, .box-5.title { width: 40%; float: left; }
.box-6.title { width: 15%; float: left; }
Let me know how that looks width-wise.
If I may make a suggestion, keep the scrollbar for your "scrolling" affiliates instead of using a marquee as the marquee tag is deprecated and fails to meet standards for web accessibility for people with disabilities. You could use a script instead of the marquee tags, but imo the same problem occurs. With a scrollbar, individuals with disabilities who are capable of browsing the internet can peruse the content within the box(es) at their leisure rather than having to be subject to the whims of the automated scroll.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 2:15:05 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 29, 2018 6:18:38 GMT -8
Yeah that looks fine, if box 4&5 show 3 on a row and 6 can hold two, that should be okay. As for the scrolling bar, I agree as I don't think may people use Marquee any longer.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 29, 2018 8:35:37 GMT -8
OK so let's make a few other edits.
First, go to your bottom containers (I think you said they were in the footers?) And change <div class="infotable"> to <div class="infotable2">
That's going to break things, but we'll fix them right away!
Immediately following that, go to the Stylesheet, and find the CSS that starts .infotable { and change it to: .infotable, .infotable2 {
Then, after the closing } bracket for that CSS, add this:
.infotable2 { min-height: 120px; max-height: 120px; }
This should make the bottom boxes shorter than the top boxes. You may need to adjust the values to something you like better if 120px is too much or little, but be sure to change BOTH values at the same time.
Next, in the Stylsheet, add this in at the bottom:
.box-4.title, .box-5.title, .box-6.title { background-color: #333333; color: #ffffff; padding: 10px; min-height: 100px; }
This should restore the colours / padding and such of the top box; the margins will be a little bit off, but we'll address those as soon as I can see what's going on haha.</div></div>
|
|