Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 10:24:07 GMT -8
|
|
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 10:54:25 GMT -8
for the sake of keeping your CSS neat, I recommend putting the "float: left;" on a new line, like the others are.
Do me a favour and change this line:
.box-1 .title, .box-2 .title, .box-3 .title {
to this:
.box-1.title, .box-2.title, .box-3.title {
Let me know if that makes the three boxes appear side-by-side. (Note: there may be a little weird result that mashes the forum up to one side -- ignore this if this happens, as we will address that in the next step if so_.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 11:44:10 GMT -8
Fixed that and yeah it has made the first category shift up.
|
|
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 11:51:42 GMT -8
Okay, thank you!
So can you try something for me? If you go back to wherever you put the HTML, can you add this line that I've marked here in RED:
<div class="infotable"> <!--- Start Box 1 ---> <div class="box-1 title"> Box 1 Title <div class="box-1 inside"> This is your content for Box 1 </div> </div> <!--- End Box 1 --->
<!--- Start Box 2 ---> <div class="box-2 title"> Box 2 Title <div class="box-2 inside"> This is your content for Box 2 </div> </div> <!--- End Box 2 --->
<!--- Start Box 3 ---> <div class="box-3 title"> Box 3 Title <div class="box-3 inside"> This is your content for Box 3 </div> </div> <!--- End Box 3 ---> </div> <div style="clear:both;"></div>
Let me know if that fixes the shifting.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 11:56:51 GMT -8
That has moved the category back down, but removed the buffer between the /infotable and category and 2/3 sections of the infotable are on one line and the other below; prnt.sc/ivh7wp
|
|
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 12:03:54 GMT -8
Ah, my mistake. I forgot to account for the padding in the CSS when I designated the width of the three columns.
Navigate back to the stylesheet and find the width: 33%; that I had you add. Try changing that to width: 30%; instead and see if they fit and the margin returns.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 12:07:26 GMT -8
|
|
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 12:12:58 GMT -8
OK, try this. In the infotable CSS, add in the following on a new line, right above the closing curly bracket:
min-height: 200px;
Note: You can change that 200px to whatever minimum height you wish the overal container to have.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 12:14:52 GMT -8
Yup, that has worked.
|
|
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 12:32:01 GMT -8
Great! Okay, so lets start adding in some other aesthetic tweaks so we can get the overall layout looking good. First, in the infotable CSS, add this on a new line just above the closing bracket: padding-top: 10px; padding-bottom: 10px;Next, go ahead and change the colour of the three columns from #333333; to #ff0000; (this will NOT stay this way -- I just need to be sure I can see the individual boxes). Next, add this new CSS after the most recent } closing bracket: .box-1.title { margin-left: 1% margin-right: 1% }
.box-2.title { margin-right: 1% }This shouldn't cause any misalignment, so let me know it does. Let me know when you're done with that! When you're finished, it should look like this:
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 12:42:01 GMT -8
|
|
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 12:43:45 GMT -8
Yes, though it's my fault. Please put a semicolon after each of those percentages so it reads: 1%;
(I've marked it in RED in this post so you can see it)
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 12:45:10 GMT -8
Fixed and it looks as you pictured.
|
|
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 12:56:33 GMT -8
Hooray! So now, let's add a few more lines to the CSS that starts .box-1.title, .box-2.title, .box-3.title {Above the closing bracket } add the following lines: font-family: "Arial Narrow", sans-serif; text-transform: uppercase;A note: I've put in "Arial Narrow" because it's the closest web-safe font, but it appears from your screenshot that the forum you're modelling this after is using a Google font. If you'd like to use a Google font too, you can, but that will have to wait until the very end because it can be a little tricky. Next, we're going to want to add the following CSS, all the way at the bottom, after the last } you added. .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; }Again, the colours are not final, this is just so we can see more clearly where the boundaries of each box are. Let me know how this turns out! All the boxes should look like this: Now, before we continue, I need to know: did you want the exact same layout as your example? As in, did you want the first and second boxes to be wider than the third? Or do you want them all even sizes like they currently are? The above instructions make each box uniform, but if you want them more like the example we'll have to tweak what we've done so far. (I do apologise, I should have asked this much sooner).
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 13:34:27 GMT -8
prntscr.com/ivilns At the moment I am not entirely sure how I want the sizes of the boxes to look. I don't think I will know until I have the site completed. Is that an issue?
|
|