volitics Posted October 19, 2012 Share Posted October 19, 2012 (edited) Hello W3Schools; I am making an inline list using float left. It is for a baseball score table. Inside each of the list items I want to put <span> tags so each the winning and losing scores can have different colored backgrounds. The <span> tags need to be centered. Using just "display: block;" the "text-align: center;" directive in the <li> tag won't work. It won't center the <span> tag. It may not be proper coding technique, since <span> tags are already inline tags, but have found that using "display: inline-block;" will center the <span> tags. I am a little bit confused about setting the widths of the <span> tags. The other day I set the Win <span> tag class [see html below] at a width of 50px when the <li> tag in which it was enclosed was set at a width of 40px. The second <li> tag broke onto the second line. Today, I have set the Win <span> tag class to 50px and it simply pushes the text further to the right; and does not cause the second <li> tag to break to the second line. I can't remember what I did different the other day compared to today. I am familiar with the W3Schools "CSS Box Model." I have been using it.http://www.w3schools...ss_boxmodel.asp Question 1: a. When using "display: inline-block;" are the sum total of the <span> tags' left and right margins, borders, and padding plus the content supposed to be less than or equal to the content width of the <li> tag in which the <span> tag is enclosed? Question 1: b. When using "display: block;" are the sum total of the <span> tags' left and right margins, borders, and padding plus the content supposed to be less than or equal to the content width of the <li> tag in which the <span> tag is enclosed? Question 2. a. When using "display: inline-block;" or "display: block;" for <span> tags do the left and right margins, borders, and padding plus the content for a <span> tag impact the <li> tag in which the <span> tag is enclosed? Question 2. b. If so, how. I would appreciate any help with my problem. Thanks. ------- html code ----------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css"> ul.Legend{padding: 0px;margin: 0px;list-style-type: none;border: 1px solid black;width: 84px;overflow: hidden;clear: both;} li.Win{margin: 0px 0px 0px 0px;border: 1px solid purple;padding: 0px 0px 0px 0px;width: 40px;background-color: lightblue;float: left;text-align: center;} li.Loss{margin: 0px 0px 0px 0px;border: 1px solid purple;padding: 0px 0px 0px 0px;width: 40px;background-color: lightblue;float: left;text-align: center;} span.Win{margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;width: 50px;background-color: tan;display: inline-block;} span.Loss{margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;width: 60px;background-color: grey;display: inline-block;} </style></head><body> <ul class="Legend"> <li class="Win"><span class="Win">Win</span></li> <li class="Loss"><span class="Loss">Loss</span></li> </ul> </body></html>-------------- Edited October 19, 2012 by volitics Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2012 Share Posted October 20, 2012 (edited) 50+60 = 110 (84?) The border is added on to width of elements, so you have make the width of inner li elements 2px smaller in width to allow for the 1px border to fit. Not sure exactly if i got this right! but from what i read you require the score values to be highlighted within centre with light blue background showing either end? ul.Legend{padding: 0;margin: 0;list-style-type: none;border: 1px solid black;width: 110px;overflow: hidden;clear: both;text-indent:0;}.Legend li {list-style-type: none; margin:0; padding:0; text-indent:0;border: 1px solid purple;background-color: lightblue;float: left;text-align: center;}.Legend li.Win{width:48px;}.Legend li.Loss{width: 58px;}span.Win{margin: 0;padding: 0; background-color: tan;display: inline-block;} span.Loss{margin: 0;padding: 0;background-color: grey;display: inline-block;} <ul class="Legend"><li class="Win"><span class="Win">Win</span></li><li class="Loss"><span class="Loss">Loss</span></li></ul> Edited October 20, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
volitics Posted October 20, 2012 Author Share Posted October 20, 2012 (edited) 50+60 = 110 (84?) Basically, all I am asking is: When displaying the <span> tag as a block element can the sum total of the margins, borders, padding, and width exceed the width of the <li> tag in which it is enclosed? With the above example the widths of each of the <span> tags exceed the widths of the <li> tags in which they are enclosed. If I open the above code in a browser window both <li> tags stay on the same line. Are they supposed to do that? Why are the <li> tags not breaking to the second line? ---- I've got the above figured right. Span <span> tags don't figure into the total width calculations of the <ul> tags. The <li> tags do. ((40+2) + (40+2)) = 84 Summary of widths from first post: ul.Legend{width: 84px;} li.Win{margin: 0px 0px 0px 0px;border: 1px solid purple; /* 1px times 2 sides equals 2px */padding: 0px 0px 0px 0px;width: 40px;} li.Loss{margin: 0px 0px 0px 0px;border: 1px solid purple; /* 1px times 2 sides equals 2px */padding: 0px 0px 0px 0px;width: 40px;} Edited October 20, 2012 by volitics Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2012 Share Posted October 20, 2012 You have defined the the width of the LI elements to fit the parent UL element, as long as these are of a width including borders that will fit within the UL, and use float, they will sit side by side, and not stack, the span within the LI cannot affect this elements width, it can't do nothing else but extend beyond the first LI elements right edge, where the second LI will overlap it, and the second LI span extended width will be hidden by the UL overflow hidden, as will the first LI span if its width extends beyond the total width of UL element. Link to comment Share on other sites More sharing options...
volitics Posted October 20, 2012 Author Share Posted October 20, 2012 dsonesuk; Thank you for responding to my problem. I appreciate the help. That's what I was beginning to think. I have been tinkering with this problem since yesterday evening. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now