inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 26, 2017 17:33:13 GMT -8
...*facepalm* I thought I had fixed that. Thank you for that. So, what I could do is make one class and put that there for the centering and such, right? Would that be the easiest route? I just saw that Chris had posted thatafter you said it (thanks, Chris. Sorry about that!), and I commented out the 140px and it does display it as intended, you're right. So, no height should be on it, but a width should be, and by doing that, doesn't it change the height automatically to fit the width specified? Thank you for that explanation! I think I've experienced both issues you're describing, but not in this particular case. The Stand-Alone and Series-Books divs not being able to move with padding or anything like that really perplexes me, though. I'm unsure what's wrong with it, even after looking back into the HTML and CSS... Unless I messed up somewhere that I cannot see (maybe by putting classes and in-line styles?) I don't see what's wrong with it.
|
|
Kami
Forum Cat
Posts: 40,038
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,038
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 26, 2017 17:35:53 GMT -8
All right, let's do this one step at a time.
First things first, let's only deal with three boxes, ok? Open up notepad and put the additional side-by-side box coding there, so that all we have is the top-most box with your introduction, and ONE box on the left and ONE box on the right.
What we'll be doing is building the positioning of the subsequent boxes based on these three. Let me know when that's done. (:
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 26, 2017 19:39:21 GMT -8
I don't have Notepad, so I just moved it to Notes (since I'm on a Mac). I think that I did it correctly. This is what you mean, right?
PS: i apologize for replying so late. I inadvertently dozed off. I had to get up at 5am today.
|
|
Kami
Forum Cat
Posts: 40,038
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,038
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 27, 2017 9:58:26 GMT -8
Yes, that's what I mean. And no worries I was already asleep lol. OK so it looks like you have a second thread about this issue. I'm not really comfortable helping while there are two threads for the same topic going on, so if you could wrap up the previous topic before we get started that would be great (:
|
|
#e61919
Support Staff
224482
0
1
May 3, 2024 17:46:43 GMT -8
Scott
23,343
August 2015
socalso
|
Post by Scott on Oct 27, 2017 13:18:54 GMT -8
OK so working off of this page, the first things that are standing out to me is that you're mixing inline styles with classes. Not necessarily bad, of course, but I'd advise to choose one or the other (barring like, throwing in some quick inline to make sure it works before popping it into the stylesheet). As Chris pointed out, the reason that you're experiencing the cutoff is that you have specified the height of the class Book-Note to be 140px. Removing this then displays the margin as intended. I would advise, when dictating the size of your containers, to include a thought for how you'd like the margins to display. So, for instance, if you want a container that's 150px wide with a 5px padding on either side of your text, you'll only have about 140px of text space to actually work with. Otherwise you get issues like the one you've experienced, or another common issue where the div winds up X amount of pixels larger than you want due to the padding. Ahem, Kami I believe someone else zero'd in on that initially... just saying ^up there^
|
|
Kami
Forum Cat
Posts: 40,038
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,038
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 27, 2017 13:52:10 GMT -8
OK so working off of this page, the first things that are standing out to me is that you're mixing inline styles with classes. Not necessarily bad, of course, but I'd advise to choose one or the other (barring like, throwing in some quick inline to make sure it works before popping it into the stylesheet). As Chris pointed out, the reason that you're experiencing the cutoff is that you have specified the height of the class Book-Note to be 140px. Removing this then displays the margin as intended. I would advise, when dictating the size of your containers, to include a thought for how you'd like the margins to display. So, for instance, if you want a container that's 150px wide with a 5px padding on either side of your text, you'll only have about 140px of text space to actually work with. Otherwise you get issues like the one you've experienced, or another common issue where the div winds up X amount of pixels larger than you want due to the padding. Ahem, Kami I believe someone else zero'd in on that initially... just saying ^up there^
|
|
#e61919
Support Staff
224482
0
1
May 3, 2024 17:46:43 GMT -8
Scott
23,343
August 2015
socalso
|
Post by Scott on Oct 27, 2017 14:01:14 GMT -8
Ahem, Kami I believe someone else zero'd in on that initially... just saying ^up there^LOL - it's all good.
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 27, 2017 14:51:34 GMT -8
Yes, that's what I mean. And no worries I was already asleep lol. OK so it looks like you have a second thread about this issue. I'm not really comfortable helping while there are two threads for the same topic going on, so if you could wrap up the previous topic before we get started that would be great (: Sorry, Kami, I'm guessing you mean this topic? If so, wrapped Scott, could you please lock it so Kami and I can move forward with this one?
|
|
Kami
Forum Cat
Posts: 40,038
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,038
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 27, 2017 16:03:49 GMT -8
Alan Vende - Thanks (: So next thing you should do is to take any inline styles you have in the divs you have set up and put them into the stylesheet under their respective class. If the div has no class but still has an inline style, give the div a class and put the inline style under it. Your end result should be that all of your HTML should have no inline css and classes only!
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 27, 2017 17:07:54 GMT -8
Alan Vende - Thanks (: So next thing you should do is to take any inline styles you have in the divs you have set up and put them into the stylesheet under their respective class. If the div has no class but still has an inline style, give the div a class and put the inline style under it. Your end result should be that all of your HTML should have no inline css and classes only! I just want to ask this before I start moving CSS into the Style Sheet: For example, this is one of my divs. Should the boldfaced divs stay the way they are? And then have the ones in red moved, or should the black ones be moved as well?
|
|
Kami
Forum Cat
Posts: 40,038
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,038
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 27, 2017 17:16:51 GMT -8
Well the align attribute is not HTML5 compliant so I'd change that personally if you want your coding to be up to current standards. I'd change that specific line to:
<h3 class="Amazon-Review-Header">
and then in your stylesheet add:
h3.Amazon-Review-Header { text-align: center; }
If you already have CSS for that h3 class, then just append the alignment property to it.
edit: whoops missed the first question.
Honestly that's up to you. I'd personally give them classes because I don't like using inline styles unless I absolutely HAVE to; this way it'd be easier to set up a structure like
> container >> amazon-books-container >>> amazon-book-container intro
and so on, so you're not left wondering "what does this do?"
Alternatively, if that's the in-line CSS generated by the PB widget thing and you don't want to mess with it, I would recommend using HTML comment tags above and below so you don't forget what it is. Ultimately my answer is, "do something that makes it so you won't forget wtf it does".
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 27, 2017 17:31:37 GMT -8
Well the align attribute is not HTML5 compliant so I'd change that personally if you want your coding to be up to current standards. I'd change that specific line to:
<h3 class="Amazon-Review-Header">
and then in your stylesheet add:
h3.Amazon-Review-Header { text-align: center; }
If you already have CSS for that h3 class, then just append the alignment property to it.
edit: whoops missed the first question.
Honestly that's up to you. I'd personally give them classes because I don't like using inline styles unless I absolutely HAVE to; this way it'd be easier to set up a structure like
> container >> amazon-books-container >>> amazon-book-container intro
and so on, so you're not left wondering "what does this do?"
Alternatively, if that's the in-line CSS generated by the PB widget thing and you don't want to mess with it, I would recommend using HTML comment tags above and below so you don't forget what it is. Ultimately my answer is, "do something that makes it so you won't forget wtf it does".
Thank you for that h3 explanation! I didn't have anything, so I created it. So far, I have this in my HTML. From a quick look, all of the in-line CSS is moved: <div class="container boards"> <div class="title-bar Books-TOC"> <h3 align="center">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <div class="Book-Note"> <div align="center" style="padding-bottom: 5px;"><h3><strong>A Note About My Books</strong></h3></div> <p>Hello, $[current_user]! If you would like to buy a book straight from Amazon, please click the respective book's button below. If you would like to have a signed copy of any of the books below, please click on the respective button. Once you do, you will be redirected to my website where you can purchase the copy there, as Amazon does not sell signed copies.</p> <br /> <p><em>All of my books are still being written. They will be added here as they are put up onto Amazon and my website.</em></p> </div> <hr /> <div clsas="Solo-Books" style="float: left; padding-left: 5px;"> <h3 class="Stand-Alone-Books-Header" style="padding-bottom: 5px;"><strong>Stand-alone Books</strong></h3> <ol class="Stand-Alone-Books"> <li><p><em>Being Psychic for Beginners</em></p></li> <li><p><em>Best of Both Worlds</em></p></li> <li><p><em>College Life for the Physically Challenged</em></p></li> <li><p><em>The Other-side is Just Around the Corner</em></p></li> <li><p><em>Book about Psychic Children (to be named later.)</em></p></li> <li><p><em>Coming Out of the Spiritual Closet: A Journey of a Catholic to an Eclectic Witch</em></p></li> <li><p><em>My Video Game Journal</em></p></li> <li><p><em>My Zombie Journal</em></p></li> <li><p><em>Mission Critical</em></p></li> <li><p><em>Book about Atlantis</em></p></li> <li><p><em>Book about Reiki</em></p></li> <li><p><em>Cords: Living a Life Free of Fear-Based Attachment</em></p></li> </ol> </div> <div class="Series-Books" style="float: right; padding-right: 5px; padding-bottom: 5px;"> <div> <h3 class="Series-Books-Header-Title" style="padding-bottom: 5px;"><strong>Series Books</strong></h3> </div> <h2 style="padding-bottom: 5px;"><strong><em>How the Archangels Can Help You</em></strong></h2> <ol> <li><p><em>Book 1: Ariel</em></p></li> <li><p><em>Book 2: Archangel Azrael</em></p></li> <li><p><em>Book 3: Archangel Chamuel</em></p></li> <li><p><em>Book 4: Archangel Gabriel</em></p></li> <li><p><em>Book 5: Archangel Haniel</em></p></li> <li><p><em>Book 6: Archangel Jeremiel</em></p></li> <li><p><em>Book 7: Archangel Jophiel</em></p></li> <li><p><em>Book 8: Archangel Metatron</em></p></li> <li><p><em>Book 9: Archangel Michael</em></p></li> <li><p><em>Book 10: Archangel Raguel</em></p></li> <li><p><em>Book 11: Archangel Raphael</em></p><li> <li><p><em>Book 12: Archangel Raziel</em></p></li> <li><p><em>Book 13: Archangel Sandalphon</em></p></li> <li><p><em>Book 14: Archangel Uriel</em><p></li> <li><p><em>Book 15: Archangel Zadkiel</em></p></li> </ol> </div> </div> </div> </div>
<div style="float: left; width: 50%; clear: left;"> <div style="padding-right: 5px;"> <div class="container boards"> <div class="title-bar Books-TOC"> <h3 align="center"><em>Being Psychic for Beginners</em></h3> </div> <div class="content"> <div class="TOC-Contents"> <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div> <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div> <hr /> <h3 class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3> <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p> <div class="button-panel"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong></button></div> </div> </div> </div> </div> </div>
<div style="float: left; width: 49.9%;"> <div style="padding-left: 5px;"> <div class="container boards"> <div class="title-bar Books-TOC"> <h3 align="center"><em>Book 1: Ariel</em></h3> </div> <div class="content"> <div class="TOC-Contents"> <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div> <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div> <hr /> <h3 class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3> <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p> <div class="button-panel"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong></button></div> </div> </div> </div> </div> </div>
From the looks of it, it's all moved. EDIT: I apologize, I just saw this: The in-line CSS of <div style="float: left; width: 49.9%;"> is inline that I copied from an already-existent page. I could move it, but I don't know if it's there for a reason, is it? I think it's PB generated, though, so would it be able to be moved and still work, or is it in-line styling for a reason?
|
|
#e61919
Support Staff
224482
0
1
May 3, 2024 17:46:43 GMT -8
Scott
23,343
August 2015
socalso
|
Post by Scott on Oct 28, 2017 10:56:38 GMT -8
Yes, that's what I mean. And no worries I was already asleep lol. OK so it looks like you have a second thread about this issue. I'm not really comfortable helping while there are two threads for the same topic going on, so if you could wrap up the previous topic before we get started that would be great (: Sorry, Kami , I'm guessing you mean this topic? If so, wrapped Scott , could you please lock it so Kami and I can move forward with this one? Alan Vende and Kami, Locked link
|
|
Kami
Forum Cat
Posts: 40,038
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,038
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 28, 2017 11:33:16 GMT -8
Thank you, Scott! Alan Vende - That CSS specifically is so that your two side-by-side containers are side-by-side. As long as you assign a class to each div (and they'd have to be different classes, like left-box and right-box (as a for instance only, you do not have to use these names)) and specify the correct parameters it shouldn't affect anything. They're simply generated because you had originally selected a template format when creating your custom page, and thus PB provided the HTML you needed for it. So like I said, it's really your choice. As a general rule, any in-line styling can be replaced with stylesheet content. The only time I tend to use in-line styling on ProBoards is when I'm being clever and using template variables to determine when certain CSS values appear.
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Nov 1, 2017 15:36:34 GMT -8
Thanks, Scott! Kami: I sincerely apologize for the late acknowledgement. I'm going to PM you, as this is something that I rather not post out here. Please check your PM's!
|
|