Hello,
I have a css which sets all table width for 100% but in 1 case (for my navigation table) I don't want it. If I set it to 0 than the text in td tags will be written im more lines but I want to use the defined td with values.
How can I do it?
Thanks!
Now my css looks like this:
#navigation {
width:600px;
margin-left:auto;
margin-right:auto;
}
table {
width:100%;
}
table#navi {
text-align: right;
}
table#navi td#first{
text-align:left;
width:100px;
}
table#navi td{
width:20px;
height:20px;
}
table#navi td#naviact{
width:20px;
height:20px;
}
And the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"stylenavi.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id ="navigation">
<table id="navi" align="right"><tr>
<td id="first">Page 2 of 8</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=1">First</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=1"><</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=1">1</td>
<td id="naviact">2</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=3">3</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=3">></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=8">Last</td>
</tr></table>
</div>
</body>
</html>remember one wide td can cause other td's in the same column to stretch to the widest cell or td. you have one set to 100 and the rest to 20.
If I set it to 0 than the text in td tags will be written im more lines but I want to use the defined td with values.
by more lines, are you wanting them to be on different rows within the same td? u can still use a br tag inside a table cell to do that if you need to. or just simply use multiple rows.Hello,
I want to put the text "Page 1 of 1 | 1 | 2 | 3 |" into one line but want the line as short as possible and aligned it to right.
I want to make a navigation panel as here in this forum too.
So if I set a width value for the navi table than the td-s width value (defined in the css) will not used. If I didn't set any width value than my table will be 100% width and I don't want it eigther.
Everything works fine for navi table if I remove the table{ width:100% }. Of course in this case the other tables layout will be bad.what you want then, is a navigation bar (which is a TABLE) be less than 100% (let's say then, 300px wide), and have other TABLES be 100% width and not affect the width of the navigation TABLE?
Give the TABLE of the navigation an [ id="navigation" ], and in your style, do something like this:
table #navigation {width:300px;}
and to force it to stay to the right, something like
table #navigation {width:300px; float:right;}
(untested, but you get the idea...)
This will make the TABLE called "navigation" be just 300px wide, and stay always pushed towards the right-hand side of the user's browser screen.
From your code,it looks as if you almost have this figured out.
And for 'the navigation panel like here' (I don't know exactly what you're asking for here) do you mean the breadcrumb links like:
WebDeveloper.com > client-side development > CSS
This thing? If so, this is called 'breadcrumb', and something exactly like this can be found and freely used, from <!-- m --><a class="postlink" href="http://www.dynamicdrive.com">http://www.dynamicdrive.com</a><!-- m -->
Is this anything close to what you're asking for?
-JoelHello,
sorry it seems my explanation was not really good. So what I want: If you visit the main CSS topic on this forum than members can write "new thread" on the left side and there is a "page navigation panel" on the right. This panel looks like
"Page 1 of 14 | 1 | 2 | 3 | > | Last"
The table total width should be different depends on how many record was found. It can be "Page 1 of 1 | 1 |" or "Page 1 of 5 | 1 | 2 | 3 | 4 | 5 " and so on. The total table width should be 100+20px for the first version and 100+5*20 for the second.
So
1. If I set no width for my navigation table than it will inherit the 100% and so the width will be 600px as the div tag.
2. If I set the 300px for table width than again the td tags will be wider.
3. If I set 0px for the table width than the td tags will will be smaller than defined in the css.
It should be possible not to define the width:100% for the general table, but set an id or class for all tables on the page. But I don't want to use this way (if possible).
I have a css which sets all table width for 100% but in 1 case (for my navigation table) I don't want it. If I set it to 0 than the text in td tags will be written im more lines but I want to use the defined td with values.
How can I do it?
Thanks!
Now my css looks like this:
#navigation {
width:600px;
margin-left:auto;
margin-right:auto;
}
table {
width:100%;
}
table#navi {
text-align: right;
}
table#navi td#first{
text-align:left;
width:100px;
}
table#navi td{
width:20px;
height:20px;
}
table#navi td#naviact{
width:20px;
height:20px;
}
And the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"stylenavi.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id ="navigation">
<table id="navi" align="right"><tr>
<td id="first">Page 2 of 8</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=1">First</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=1"><</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=1">1</td>
<td id="naviact">2</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=3">3</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=3">></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"list.php?page=8">Last</td>
</tr></table>
</div>
</body>
</html>remember one wide td can cause other td's in the same column to stretch to the widest cell or td. you have one set to 100 and the rest to 20.
If I set it to 0 than the text in td tags will be written im more lines but I want to use the defined td with values.
by more lines, are you wanting them to be on different rows within the same td? u can still use a br tag inside a table cell to do that if you need to. or just simply use multiple rows.Hello,
I want to put the text "Page 1 of 1 | 1 | 2 | 3 |" into one line but want the line as short as possible and aligned it to right.
I want to make a navigation panel as here in this forum too.
So if I set a width value for the navi table than the td-s width value (defined in the css) will not used. If I didn't set any width value than my table will be 100% width and I don't want it eigther.
Everything works fine for navi table if I remove the table{ width:100% }. Of course in this case the other tables layout will be bad.what you want then, is a navigation bar (which is a TABLE) be less than 100% (let's say then, 300px wide), and have other TABLES be 100% width and not affect the width of the navigation TABLE?
Give the TABLE of the navigation an [ id="navigation" ], and in your style, do something like this:
table #navigation {width:300px;}
and to force it to stay to the right, something like
table #navigation {width:300px; float:right;}
(untested, but you get the idea...)
This will make the TABLE called "navigation" be just 300px wide, and stay always pushed towards the right-hand side of the user's browser screen.
From your code,it looks as if you almost have this figured out.
And for 'the navigation panel like here' (I don't know exactly what you're asking for here) do you mean the breadcrumb links like:
WebDeveloper.com > client-side development > CSS
This thing? If so, this is called 'breadcrumb', and something exactly like this can be found and freely used, from <!-- m --><a class="postlink" href="http://www.dynamicdrive.com">http://www.dynamicdrive.com</a><!-- m -->
Is this anything close to what you're asking for?
-JoelHello,
sorry it seems my explanation was not really good. So what I want: If you visit the main CSS topic on this forum than members can write "new thread" on the left side and there is a "page navigation panel" on the right. This panel looks like
"Page 1 of 14 | 1 | 2 | 3 | > | Last"
The table total width should be different depends on how many record was found. It can be "Page 1 of 1 | 1 |" or "Page 1 of 5 | 1 | 2 | 3 | 4 | 5 " and so on. The total table width should be 100+20px for the first version and 100+5*20 for the second.
So
1. If I set no width for my navigation table than it will inherit the 100% and so the width will be 600px as the div tag.
2. If I set the 300px for table width than again the td tags will be wider.
3. If I set 0px for the table width than the td tags will will be smaller than defined in the css.
It should be possible not to define the width:100% for the general table, but set an id or class for all tables on the page. But I don't want to use this way (if possible).