...

View Full Version : give width to a list item cell



esthera
10-26-2010, 11:10 AM
my css is below
I'm trying to give a width for each list item as 100px
why doesn't it work?



#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;


}

Mad_Designer
10-26-2010, 11:12 AM
try this?
http://css.maxdesign.com.au/listutorial/09.htm

esthera
10-26-2010, 11:16 AM
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?

Mad_Designer
10-26-2010, 11:36 AM
ok are you able to send over the html as well?

esthera
10-26-2010, 11:49 AM
here is the file
(i included css within just to make it easier)


<!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>

Mad_Designer
10-26-2010, 12:08 PM
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?

esthera
10-26-2010, 12:09 PM
your right - I really need them 93 to fit perfectly

abduraooft
10-26-2010, 12:10 PM
display: inline;
........
width:100px;

You can't set width/height on an inline element.

esthera
10-26-2010, 12:14 PM
so how do I get it to space as I want

I have to make each li with different padding?

abduraooft
10-26-2010, 12:20 PM
Set float:right; instead of display: inline;

Mad_Designer
10-26-2010, 12:43 PM
abduraooft's solution works, sorry couldn't help quicker.
Any other questions?

esthera
10-26-2010, 12:55 PM
yes it works - thanks for your help!

esthera
10-26-2010, 01:08 PM
I replied too fast

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

(links are all one on top of the other )


<!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>

Mad_Designer
10-26-2010, 01:21 PM
the code you sent is the old one?

esthera
10-26-2010, 01:42 PM
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;

}

Mad_Designer
10-26-2010, 01:57 PM
Yeah, use the old version you posted at the beginning and change the code below:


#links ul li
{

float: right;
width:83px;
list-style-type: none;
dir:rtl;
margin-top:10px;
margin-bottom:0px;

text-align:center;
border:solid white;

}

esthera
10-26-2010, 02:02 PM
it's not working in ie

it's showing the links one on top of each other

(firefox is ok)

Mad_Designer
10-26-2010, 02:08 PM
What version of ie are you using as it works in mine?

Whole code below:

<!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
{

float: right;
width:83px;
list-style-type: none;
dir:rtl;
margin-top:10px;
margin-bottom:0px;

text-align:center;
border:solid white;

}

#links ul li a
{
color:#000;
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>

abduraooft
10-26-2010, 02:10 PM
direction:rtl; Why do you need those direction properties? Are you going to make a page having text in rtl direction?

esthera
10-26-2010, 02:15 PM
7
and yes it's rtl direction but I took that out and it makes no difference

latest code is


<!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:block;
float:right;
width:93px;
list-style-type: none;

margin-top:0px;
margin-bottom:0px;
padding:0px;

float:right;

}


#links ul li
{

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

margin-top:10px;
margin-bottom:0px;

text-align:center;
border:solid white;

}


#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>

abduraooft
10-26-2010, 02:19 PM
#links ul
{
display:block;
float:right;
width:93px;
How can you display 7 items having a width of 83px each inside a 93px wide container? Please use firebug in your Firefox rather than repeatedly bumping the thread.

Mad_Designer
10-26-2010, 02:19 PM
So do you want the navigation down the side?

esthera
10-26-2010, 02:29 PM
no that was the problem -- It was a mistake it was supposed to be 650 - i changed it and it works now - thanks

Mad_Designer
10-26-2010, 02:35 PM
No Problem, anything else just ask :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum