Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts

    give width to a list item cell

    my css is below
    I'm trying to give a width for each list item as 100px
    why doesn't it work?

    Code:
    #links  ul 
    {
       
    display: inline;
    list-style-type: none;
    
    margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        direction:rtl;
        float:right;
    }
    
    
    #links  ul li 
    {
       
    display: inline;
    list-style-type: none;
    dir:rtl;
    margin-top:10px;
        margin-bottom:0px;
       
        text-align:right;
        width:100px;
     
    }
    
    #links ul li a 
    {
        color:#ffffff;
        text-decoration:none;
       
        
    }

  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    Portsmouth, UK
    Posts
    32
    Thanks
    1
    Thanked 1 Time in 1 Post

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    it's a horizontal list and I don't want margin as I want each cell to the be the same size - even the ones with links that are longer.

    can this be done?

  • #4
    New Coder
    Join Date
    Oct 2010
    Location
    Portsmouth, UK
    Posts
    32
    Thanks
    1
    Thanked 1 Time in 1 Post
    ok are you able to send over the html as well?

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    here is the file
    (i included css within just to make it easier)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Shome Tefila</title>
    <style>
    
    body {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	background-color:#ffffff;
    	margin:0px;
    	padding:0px;
    }
    
    td {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    th {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    img{
    border:none;
    }
    .bodystyle {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    .small {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 9px;
    }
    
    .medium {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    .big {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    }
    
    .xbig {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 24px;
    }
    
    .expanded {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 16px;
    	letter-spacing: 2px;
    }
    
    .justified {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	text-align: justify;
    }
    
    .footer {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 9px;
    	color: #999999;
    }
    
    .box1 {
    	padding: 3px;
    	border-width: thin;
    	border-style: solid;
    	border-color: #CCCCCC #666666 #666666 #CCCCCC;
    }
    
    .box2 {
    	font-style: italic;
    	word-spacing: 2pt;
    	padding: 3px;
    	border-width: thin;
    	border-style: solid;
    }
    #mainbig{
    margin:auto;
    	background-image: url(images/background.gif);
    	width:1000px;
    	height:800px;
    	display:block;
    }
    #main{
    width:654px;
    margin:auto;
    
    }
    
    #header{
    
    margin:auto;
    text-align:center;
    padding-top:50px;
    }
    #main
    {
        margin:auto;
        width:655px;
    }
    #links{
    margin:auto;
    	background-image: url(images/links.gif);
    	width:655px;
    	height:26px;
    	display:block;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
    }
    
    #links  ul 
    {
       
    display: inline;
    list-style-type: none;
    
    margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        direction:rtl;
        float:right;
        
    }
    
    
    #links  ul li 
    {
       
    display: inline;
    list-style-type: none;
    dir:rtl;
    margin-top:10px;
        margin-bottom:0px;
       
        text-align:center;
       border:solid white;
        width:100px;
     
    }
    
    #links ul li a 
    {
        color:#ffffff;
        text-decoration:none;
       
        
    }
    
    #slideshow
    {
        margin-auto;
    }
    
    #body
    {
        font-family: 'Times New Roman' , Times, serif;
        font-size: 12px;
        color: #000000;
        width:650px;
        height:435px;
        overflow:auto;
    }
    
    </style>
    
    
    </head>
    
    <body>
    <div id="mainbig">
        <div id="main">
    	    <div id="header"><img src="images/header.gif" width="654" height="108" /></div>
            <div id="links">
            <ul>
                <li><a href=xxx.html>sdfd</a></li>
                <li><a href=index.html>test link 2</a></li>
                   <li><a href=index.html>test link 3</a></li>
                 <li><a href=index.html>test link 4</a></li>
                   <li><a href=index.html>test link 5</a></li>
                <li><a href=index.html>test link 6</a></li>
                  <li><a href=index.html>test link 7</a></li>
            </ul>
            </div>
            
            <div id="slideshow">
                <img name='SlideShow' src="slideshowpictures/1.jpg" />
    
            </div>
            
            <div id="body">
            
           body will go here
            </div>
    
    
    
    
    
        </div>
    
    </div>
    
    </body>
    </html>

  • #6
    New Coder
    Join Date
    Oct 2010
    Location
    Portsmouth, UK
    Posts
    32
    Thanks
    1
    Thanked 1 Time in 1 Post
    Looking at this file, can i ask what you are trying to achieve, and why you want them with a width of 100px? as would then add up making the navigation as a whole 700px wide?

  • #7
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    your right - I really need them 93 to fit perfectly

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    display: inline;
    ........
    width:100px;
    You can't set width/height on an inline element.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    so how do I get it to space as I want

    I have to make each li with different padding?

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Set float:right; instead of display: inline;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New Coder
    Join Date
    Oct 2010
    Location
    Portsmouth, UK
    Posts
    32
    Thanks
    1
    Thanked 1 Time in 1 Post
    abduraooft's solution works, sorry couldn't help quicker.
    Any other questions?

  • #12
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    yes it works - thanks for your help!

  • #13
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I replied too fast

    it doesn't work in ie - do you know why

    (links are all one on top of the other )

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Shome Tefila</title>
    <style>
    
    body {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	background-color:#ffffff;
    	margin:0px;
    	padding:0px;
    }
    
    td {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    th {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    img{
    border:none;
    }
    .bodystyle {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    .small {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 9px;
    }
    
    .medium {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    .big {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    }
    
    .xbig {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 24px;
    }
    
    .expanded {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 16px;
    	letter-spacing: 2px;
    }
    
    .justified {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	text-align: justify;
    }
    
    .footer {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 9px;
    	color: #999999;
    }
    
    .box1 {
    	padding: 3px;
    	border-width: thin;
    	border-style: solid;
    	border-color: #CCCCCC #666666 #666666 #CCCCCC;
    }
    
    .box2 {
    	font-style: italic;
    	word-spacing: 2pt;
    	padding: 3px;
    	border-width: thin;
    	border-style: solid;
    }
    #mainbig{
    margin:auto;
    	background-image: url(images/background.gif);
    	width:1000px;
    	height:800px;
    	display:block;
    }
    #main{
    width:654px;
    margin:auto;
    
    }
    
    #header{
    
    margin:auto;
    text-align:center;
    padding-top:50px;
    }
    #main
    {
        margin:auto;
        width:655px;
    }
    #links{
    margin:auto;
    	background-image: url(images/links.gif);
    	width:655px;
    	height:26px;
    	display:block;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
    }
    
    #links  ul 
    {
       
    float:right;
    width:93px;
    list-style-type: none;
    
    margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        direction:rtl;
        float:right;
        
    }
    
    
    #links  ul li 
    {
       
    display: inline;
    list-style-type: none;
    dir:rtl;
    margin-top:10px;
        margin-bottom:0px;
       
        text-align:center;
       border:solid white;
        width:100px;
     
    }
    
    #links ul li a 
    {
        color:#ffffff;
        text-decoration:none;
       
        
    }
    
    #slideshow
    {
        margin-auto;
    }
    
    #body
    {
        font-family: 'Times New Roman' , Times, serif;
        font-size: 12px;
        color: #000000;
        width:650px;
        height:435px;
        overflow:auto;
    }
    
    </style>
    
    
    </head>
    
    <body>
    <div id="mainbig">
        <div id="main">
    	    <div id="header"><img src="images/header.gif" width="654" height="108" /></div>
            <div id="links">
            <ul>
                <li><a href=xxx.html>sdfd</a></li>
                <li><a href=index.html>test link 2</a></li>
                   <li><a href=index.html>test link 3</a></li>
                 <li><a href=index.html>test link 4</a></li>
                   <li><a href=index.html>test link 5</a></li>
                <li><a href=index.html>test link 6</a></li>
                  <li><a href=index.html>test link 7</a></li>
            </ul>
            </div>
            
            <div id="slideshow">
                <img name='SlideShow' src="slideshowpictures/1.jpg" />
    
            </div>
            
            <div id="body">
            
           body will go here
            </div>
    
    
    
    
    
        </div>
    
    </div>
    
    </body>
    </html>

  • #14
    New Coder
    Join Date
    Oct 2010
    Location
    Portsmouth, UK
    Posts
    32
    Thanks
    1
    Thanked 1 Time in 1 Post
    the code you sent is the old one?

  • #15
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    this was updated

    #links ul
    {

    float:right;
    width:93px;
    list-style-type: none;

    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    direction:rtl;
    float:right;

    }


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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