inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 23, 2017 10:25:53 GMT -8
I'm having a coding-brain malfunction. I'm attempting to target a div within a div within a div.
The code that I have is as follows (which is working on my Custom Page):
.content .TOC-Contents .Book-Note { border: 1px solid #000000; width: 200px; height: 100px; } I also typed it like this, which I always thought was correct, and it worked as well:
.content.TOC-Contents .Book-Note { border: 1px solid #000000; width: 200px; height: 100px; } So, my question is, which way is correct? Or is neither way correct? I'm drawing a blank...
Thanks for your help!
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,286
January 2004
todge
|
Post by Todge on Oct 23, 2017 14:04:34 GMT -8
I'm having a coding-brain malfunction. I'm attempting to target a div within a div within a div. The code that I have is as follows (which is working on my Custom Page): .content .TOC-Contents .Book-Note { border: 1px solid #000000; width: 200px; height: 100px; } I also typed it like this, which I always thought was correct, and it worked as well: .content.TOC-Contents .Book-Note { border: 1px solid #000000; width: 200px; height: 100px; } So, my question is, which way is correct? Or is neither way correct? I'm drawing a blank... Thanks for your help! Depending on how the HTML is structured, you could get away with: .content .Book-Note { border: 1px solid #000000; width: 200px; height: 100px; } but your first example is correct enough. In your second example the browser error correction is probably adding the gap you missed between '.content' & '.TOC-Contents' to separate the classes.
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,870
December 2005
horace
|
Post by Chris on Oct 23, 2017 14:53:44 GMT -8
Just a small correction, .content.TOC-Content would indicate a SINGLE element bearing BOTH classes
e.g <div class="content user-content TOC-Content some-weird-class some-other-class padding-medium approved-content">blah</div>
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,286
January 2004
todge
|
Post by Todge on Oct 23, 2017 15:32:44 GMT -8
I did actually think that, but couldn't work out why both CSS snippets would work (still can't ), so assumed I was incorrect..
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,870
December 2005
horace
|
Post by Chris on Oct 23, 2017 15:48:59 GMT -8
The necessary info when debugging CSS is the actual HTML structure which is being targeted and that is missing here so it could very well be that the content class is applied to both the parent element and the TOC-Content element if the claim that they both work holds true. A forum URL to observe and save guess work time (which I am always harping on) would reveal that in a matter of seconds instead of on page #3 of the help topic 37 posts later.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,286
January 2004
todge
|
Post by Todge on Oct 23, 2017 16:23:13 GMT -8
The necessary info when debugging CSS is the actual HTML structure which is being targeted and that is missing here so it could very well be that the content class is applied to both the parent element and the TOC-Content element if the claim that they both work holds true. A forum URL to observe and save guess work time (which I am always harping on) would reveal that in a matter of seconds instead of on page #3 of the help topic 37 posts later. Too true... It never even crossed my mind that both parent and child cells would share the same classname.. Seems obvious now.
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 23, 2017 17:24:02 GMT -8
Just a small correction, .content.TOC-Content would indicate a SINGLE element bearing BOTH classes e.g <div class="content user-content TOC-Content some-weird-class some-other-class padding-medium approved-content">blah</div>Oh, duh. I'm an idiot. Thanks, Chris . The necessary info when debugging CSS is the actual HTML structure which is being targeted and that is missing here so it could very well be that the content class is applied to both the parent element and the TOC-Content element if the claim that they both work holds true. A forum URL to observe and save guess work time (which I am always harping on) would reveal that in a matter of seconds instead of on page #3 of the help topic 37 posts later. My forum is in Maintenance Mode, so I wasn't sure if I was allowed to post the HTML. I could have sworn there was a board here that if your forum is in Maintenance Mode, you cannot do anything with it. (That's not this board, is it?) The HTML structure is here: <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>If you would like to buy a book straight from Amazon, please click the respective book's buttons 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> </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> <p><em>Being Psychic for Beginners</em></p> <p><em>Best of Both Worlds</em></p> <p><em>College Life for the Physically Challenged</em></p> <p><em>The Other-side is Just Around the Corner</em></p> <p><em>Book about Psychic Children (to be named later.)</em></p> <p><em>Coming Out of the Spiritual Closet: A Journey of a Catholic to an Eclectic Witch</em></p> <p><em>My Video Game Journal</em></p> <p><em>My Zombie Journal</em></p> <p><em>Mission Critical</em></p> <p><em>Book about Atlantis</em></p> <p><em>Book about Reiki</em></p> <p><em>Cords: Living a Life Free of Fear-Based Attachment</em></p> </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%;"> <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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <div class="container boards"> <div class="title-bar Books-TOC"> <h3 align="center"><em>Best of Both Worlds</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 2: Archangel Azrael</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>College Life for the Physically Challenged</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 3: Archangel Chamuel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>The Other-side is Just Around the Corner</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 4: Archangel Gabriel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Book about Psychic Children (to be named later.)</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 5: Archangel Haniel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Coming Out of the Spiritual Closet: A Journey of a Catholic to an Eclectic Witch</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 6: Archangel Jeremiel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>My Video Game Journal</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 7: Archangel Jophiel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>My Zombie Journal</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 8: Archangel Metatron</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Mission Critical</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 9: Archangel Michael</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Book about Atlantis</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 10: Archangel Raguel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Book about Reiki</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 11: Archangel Raphael</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Cords: Living a Life Free of Fear-Based Attachment</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 12: Archangel Raziel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Coming Soon!</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 13: Archangel Sandalphon</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Coming Soon!</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 14: Archangel Uriel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </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>Coming Soon!</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </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 15: Archangel Zadkiel</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">Book description coming soon! Keep your eyes peeled on this page for more information!</p></em></strong> <button class="Amazon-book-button"><div>Test</div></button> </div> </div> </div> </div> </div>
<!-- <div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <div class="container boards"> <div class="title-bar Books-TOC"> <h3 align="center"></h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div>
<div style="float: left; width: 50%;"> <div style="padding-right: 5px;"> <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"> <p>Test</p> </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">Louis' Books Table of Contents</h3> </div> <div class="content"> <div class="TOC-Contents"> <p>Test</p> </div> </div> </div> </div> </div> -->
PS: I have no idea why in the BBCode window the code holds its formatting, but when posted, it's in one single line. That's irksome. I was also hesitant to post the structure because of how long it is... EDIT: I just thought of something: would it be easier just to put a non-breaking space between the two and use float-right and then padding-right and padding-left to move it where I want them to since they won't go with the center declaration?
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,870
December 2005
horace
|
Post by Chris on Oct 23, 2017 17:56:54 GMT -8
Alan Vende , the content class is obviously not applied to the element bearing the class of TOC-Content so then the question becomes is there another rule being applied causing you think it is working when you use the selector that has the double class which would be inapplicable for the posted structure or are you mistaken in it working? Once again a forum link would reveal that in seconds if you temporarily release maintenance mode and allow a proper inspection. To put it another way, there's a horrendous crime which you report to the police but you want it solved based on your description of the crime scene instead of allowing the authorities to examine the scene for themselves. There is a very good probability that the clue that breaks open the case was something that you glanced over as unimportant but a trained eye would see that single strand of hair stuck in the lamp shade and end up solving the case.
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 23, 2017 18:36:02 GMT -8
Alan Vende , the content class is obviously not applied to the element bearing the class of TOC-Content so then the question becomes is there another rule being applied causing you think it is working when you use the selector that has the double class which would be inapplicable for the posted structure or are you mistaken in it working? Once again a forum link would reveal that in seconds if you temporarily release maintenance mode and allow a proper inspection. To put it another way, there's a horrendous crime which you report to the police but you want it solved based on your description of the crime scene instead of allowing the authorities to examine the scene for themselves. There is a very good probability that the clue that breaks open the case was something that you glanced over as unimportant but a trained eye would see that single strand of hair stuck in the lamp shade and end up solving the case. I apologize, Chris . I'm a tad scatterbrained (which is probably what makes me think that this is working when it's clearly not...) and I thought I had put my forum URL into the Edit. I took it out of Maintenance Mode, but never posted it. I apologize for that. It's here.
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,870
December 2005
horace
|
Post by Chris on Oct 23, 2017 18:58:16 GMT -8
The CSS rule appears to be working for me
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 23, 2017 19:10:35 GMT -8
I don't know what I was seeing then that made me thought it worked. Thank you for that. So, for this, and other things to work, the classes must be separate? I thought there was sometimes when the first two classes must be together and the third separate from it? Or am I wrong in that? Thank you for your help with that!
I'm wondering now if something with my CSS or something else is causing the buttons that I have in the bottoms of each of the divs to not align properly. I want to make it so they're in the middle and then use a non-breaking space to separate them, but no matter what I do, it just moves the text over and not the button itself.
I've been working on that for the psst hour (while attempting to do about 50 other things as well, so my attention really isn't on it exclusively), but I could have sworn that I coded it correctly... but, from what you said, I didn't even code that correctly, so I'm wondering if something is wrong with how I coded the buttons... I guess I'm just not having a good coding night...
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,870
December 2005
horace
|
Post by Chris on Oct 23, 2017 21:34:41 GMT -8
The space character is just one of several combinators used when constructing a CSS selector and just like there is no hard and fast rule saying a sentence should always start with the words "The night is dark and full of terrors" doesn't mean you can't start every sentence with that phrase yourself but does it accomplish the main purpose of the sentence? Does it convey what you were trying to get across when you constructed that sentence, probably not? You use the words that fit when constructing a sentence the same way you use the appropriate combinators, classes, etc. when constructing a selector, there is no "pattern" to follow. You would need to apply text-align:center to the parent container (in this case div.TOC-Content) if you wish it to affect the buttons since they are contents of that container. Right now you are applying text-align:center to the button itself which means it would affect the positioning of what is INSIDE that button not the positioning of the button itself.
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 23, 2017 22:40:16 GMT -8
Going off of what you said about effecting what is inside the button: When I had targeted the button itself, when I put either text-align: center; or padding-left: 15px;, for example, it only moved the text, but that was because the text is what is inside the button, correct?
(Sounds like a noob question, but I just want to make sure that I fully comprehend what you said.)
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,870
December 2005
horace
|
Post by Chris on Oct 23, 2017 22:50:27 GMT -8
The text-align is meant to affect the contents of the container it is applied to not the container itself, so by applying it to the button you are saying you want whatever is INSIDE that button tag to be aligned as specified. You instead want the buttons themselves to be aligned so you would instead apply that to the container that holds the buttons so it can then have an effect on the buttons themselves and other non-block-level content within that container
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 23, 2017 22:59:01 GMT -8
Thank you so much for your help with this and the further explanation, Chris . It is greatly appreciated! One final question related to this: What one is better: margin-top or margin-bottom when you want to space text at a certain percentage or certain pixel length away from each other? I find myself using either one, but should they be uniform if it's used, like should margin-top always be used on a page if it's used once? Pretty much, what the strike-through is asking: How do you know when to use margin-top as opposed to margin-bottom? I am using them a lot in this CSS because, like I said, I want to make it so everything is equal distances apart, and I want to be able to control the distance, not be at the mercy of the predetermined distance of the <br /> tag. Alright, I told a little white lie. That wasn't my last question. I have one more related to this. You said to do div.TOC-Contents and put that as text-align: center;, but when I did that, all of the text inside the div centered, not just the buttons. I wanted to keep the book descriptions as well as the text underneath asking for a review, aligned left. I was going to put <p align="left"> so I don't mess with the buttons again, but a while ago, I read something about doing button.button-class-name to target solely the button. I tried that here, and that didn't work in this case. Is that something that is not supported by browsers anymore?
|
|