WEB css question

Discussion in 'OT Technology' started by White Stormy, Sep 29, 2008.

  1. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,730
    Likes Received:
    196
    Location:
    Sparkopolis
    http://halefx.com/temp/temp.html

    my intention is for all of the text to have the green background color..

    I know the problem has something to do with the list.. but is there a property I can add to the ul or li to fix it?

    this shit aggravates me even more about CSS than IE stuff :o

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background-color: #ffffff;
			}
			.block {
				background-color: #00bb00;
				line-height: 1.5em;
				width: 200px;
			}
			.block-inner {
				padding: 8px;
			}
			.block-contents ul {
				float: left;
				list-style-type: none;
				width: 50%;
			}
			.block-contents ul li a {
				display: block;
			}
		</style>
		<title>Temp</title>
	</head>
	<body>
		<div class="block block-cat" id="block-cat-1">
			<div class="block-inner">
				<div class="block-title">
					Categories
				</div>
				<div class="block-contents">
					<ul>
						<li><a>&raquo; Category 1</a></li>
						<li><a>&raquo; Category 2</a></li>
						<li><a>&raquo; Category 3</a></li>
						<li><a>&raquo; Category 4</a></li>
						<li><a>&raquo; Category 5</a></li>
						<li><a>&raquo; Category 6</a></li>
						<li><a>&raquo; Category 7</a></li>
						<li><a>&raquo; Category 8</a></li>
					</ul>
					<ul>
						<li><a>&raquo; Category 9</a></li>
						<li><a>&raquo; Category 10</a></li>
						<li><a>&raquo; Category 11</a></li>
						<li><a>&raquo; Category 12</a></li>
						<li><a>&raquo; Category 13</a></li>
						<li><a>&raquo; Category 14</a></li>
						<li><a>&raquo; Category 15</a></li>
						<li><a>&raquo; Category 16</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
     
    White Stormy, Sep 29, 2008
    #1
  2. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    That should probably be a table.
     
    Kevin, Sep 29, 2008
    #2
  3. kingtoad

    kingtoad Well-Known Member

    Joined:
    Sep 2, 2003
    Messages:
    56,166
    Likes Received:
    232
    Location:
    Los Angeles
    Add the overflow attribute to your .block element.

    Code:
    .block {
  background-color: #00bb00;
  line-height: 1.5em;
  width: 200px;
  overflow: hidden;
}
     
    kingtoad, Sep 29, 2008
    #3
  4. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,730
    Likes Received:
    196
    Location:
    Sparkopolis
    my god, dude. you ARE the internet.

    Thanks
     
    White Stormy, Sep 29, 2008
    #4
  5. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,587
    Likes Received:
    21
    Location:
    Detroit
    :werd: Kingtoad is :bowdown:

    sometimes I hate to bother him, but he is always open to help me when ever I need it
     
    Pepsi1975, Sep 29, 2008
    #5
  6. kingtoad

    kingtoad Well-Known Member

    Joined:
    Sep 2, 2003
    Messages:
    56,166
    Likes Received:
    232
    Location:
    Los Angeles
    Never a bother, man. :hs:
     
    kingtoad, Sep 29, 2008
    #6
  7. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,730
    Likes Received:
    196
    Location:
    Sparkopolis
    maybe kingtoad should tell the W3C how html 5 should work and then it would be out sooner than 2020 :bowdown:
     
    White Stormy, Sep 29, 2008
    #7
  8. kingtoad

    kingtoad Well-Known Member

    Joined:
    Sep 2, 2003
    Messages:
    56,166
    Likes Received:
    232
    Location:
    Los Angeles
    :bowrofl:

    I'm actually looking forward to HTML 5. :hs:
     
    kingtoad, Sep 29, 2008
    #8
  9. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,587
    Likes Received:
    21
    Location:
    Detroit
    thanks again, made about $70 in the last 3 weeks in adsense
     
    Pepsi1975, Sep 29, 2008
    #9
  10. kingtoad

    kingtoad Well-Known Member

    Joined:
    Sep 2, 2003
    Messages:
    56,166
    Likes Received:
    232
    Location:
    Los Angeles
    :bowdown: congrats
     
    kingtoad, Sep 29, 2008
    #10
  11. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,587
    Likes Received:
    21
    Location:
    Detroit
    would not have been able to do it with out your help man
     
    Pepsi1975, Sep 29, 2008
    #11
  12. kingtoad

    kingtoad Well-Known Member

    Joined:
    Sep 2, 2003
    Messages:
    56,166
    Likes Received:
    232
    Location:
    Los Angeles
    :love: Glad I can assist.
     
    kingtoad, Sep 29, 2008
    #12
  13. pkr

    pkr Guest

    :coold: Kingtoad is really ftw. Best source of information I have found and an all around great dude.
     
    pkr, Sep 29, 2008
    #13
  14. pkr

    pkr Guest

    :cool:
     
    pkr, Sep 29, 2008
    #14
  15. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    looked at your xhtml and you have a severe case of DIVitus :o
     
    biawokauns, Sep 29, 2008
    #15
  16. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,730
    Likes Received:
    196
    Location:
    Sparkopolis
    isn't really any way around that, though, is there?

    only thing I can think to change would be a heading tag for the block title, and I'm not sure that that's appropriate
     
    White Stormy, Sep 29, 2008
    #16
  17. kingtoad

    kingtoad Well-Known Member

    Joined:
    Sep 2, 2003
    Messages:
    56,166
    Likes Received:
    232
    Location:
    Los Angeles
    You can probably completely get rid of block-title and block-inner. I'd keep the outer wrapper for the Drupal identifier, and probably block-contents for any adjustments. If you want to get technical, all you really would need is the block wrapper, and leave any other styling up to the "ul li" markup.
     
    kingtoad, Sep 29, 2008
    #17
  18. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,730
    Likes Received:
    196
    Location:
    Sparkopolis
    I just have block-inner there for padding. if I didn't have it, wouldn't the padding be presented differently by ff, ie, safari, chrome, etc?
     
    White Stormy, Sep 29, 2008
    #18
  19. kingtoad

    kingtoad Well-Known Member

    Joined:
    Sep 2, 2003
    Messages:
    56,166
    Likes Received:
    232
    Location:
    Los Angeles
    You can set the padding in the ul tag and it'll be the same thing. It'll be the same as long as you have the outer div preventing the padding from bleeding over.
     
    kingtoad, Sep 29, 2008
    #19

Share This Page