SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Space problems

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Space problems

    Nothing to do with the celestial space, but spacing within a <ul> and <li>

    I was originally trying to centre the

    The Html:
    HTML Code:
    <span class="thumbNail">
    <ul id="thumbs">
    <li><img class="sizeImg" src="images/007.jpg" /></li>
    .
    .
    repetition of <li> tag
    .
    </ul>
    </span>
    The CSS:
    Code:
    span.thumbNail ul{
    text-align: left;
    width: 96%;
    overflow-x: scroll;
    overflow-y: no-display;
    background: #ccc;
    white-space: nowrap
    }
    I had to insert this css styling in order to get the <li> styling for the list not to cascade vertically
    Code:
    #thumbs li {
    display: inline-block;
    /* if you need ie7 support */
    *display: inline;
    zoom: 1
    }
    If you want me to include a screenshot to explain this, I will be happy to do so

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You didn't actually ask a question

    If you want to centre elements in a navigation then you can set the list elements to display:inline-block for horizontal alignment (as you have done) but then you will need to use text-align:center on the parent ul in order to centre those inline-block elements. Remember that spaces between elements that are inline-block will be interpreted as a space like the space between words (there are solutions to this)

    There is no need to put a width on the ul unless of course that was what you wanted. Don't forget to negate the default left margin and padding on the ul either as that will upset the spacing.

    Not also that is is invalid to wrap a span around a UL as a span is an inline element and can contain only other inline elements. Change the span to a div and you will be ok.

    I don't know any browsers that support the 'no-display' value of the overflow property either.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there, thanks for that, but negating the margin-left has left the bottom left scrollbar also moving to the left, negating the padding-left has no effect on the <li> tags

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cssbonding View Post
    Hi there, thanks for that, but negating the margin-left has left the bottom left scrollbar also moving to the left, negating the padding-left has no effect on the <li> tags
    Hi,

    You'll have to make a working example as we may be talking at cross purposes

    A UL by default has a left margin in some browsers and in others it has a left padding so you need to negate both or your ul will be the 96% width you gave it plus an unknown amount of margin (or padding) which means it may not fit within the containing block.

    Usually you would do this when using the list as navigation:

    ul{margin:0;padding:0;list-style:none}

    Note that the list element has no padding or margin applied by default so you don't need to do anything to the list element itself only the ul.

    However, I still don't know what problem you are trying to overcome exactly You mentioned space in a list but you don't say where, what and how?

    If you want a centred navigation then this example has all the fixes and details in place:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .nav {
    	list-style:none;
    	margin:0;
    	padding:0;
    	overflow:hidden;
    	text-align: center;
    	width:100%;
    	display:table;/* Webkit Fix */
    	word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    }
    .nav li {
    	display:inline-block;
    	word-spacing:0; /* reset from parent ul*/
    }
    * html #nav li { display:inline; } /*IE6*/
    *+html #nav li { display:inline; } /*IE7*/
    .nav a {
    	display:block;
    	width:120px;
    	font-weight:bold;
    	color:#FFF;
    	background-color:#98bf21;
    	text-align:center;
    	padding:4px;
    	text-decoration:none;
    	text-transform:uppercase;
    }
    .nav a:visited { color:#FFF; }
    .nav a:hover, .nav a:active, nav a:focus { background-color:#7A991A; }
    </style>
    </head>
    
    <body>
    <ul class="nav">
    		<li><a href="#home">Home</a></li>
    		<li><a href="#news">News</a></li>
    		<li><a href="#contact">Contact</a></li>
    		<li><a href="#about">About</a></li>
    </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •