Таблица

F

FireSword

Registered
Почнах един сайт с таблици ето html кода
Код: 
<!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= "Windows-1251" />
<title>Sait</title>
<style type="text/css">

</style></head>

<body>
<table width="960" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3"> </td>
  </tr>
  <tr>
    <td width="200"><link rel="stylesheet" type="text/css" href="style.css" />  
<div id="menu9">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
</td>
 
   <td width="556"></td>
    <td width="196"> </td>
  </tr>
</table>
</body>
</html>
Картинка
kartinkahi0.png

Можете ли да ми кажете какво да направя ,че менюто да прилепне кам таблицата?
 
към CSS файла ти където имаш #menu9 добави тези два реда.
padding-top: 0px;
padding-left: 0px;
и виж клетката как си я позиционирал.
 
<td width="200" align="left"><link rel="stylesheet" type="text/css" href="style.css" />
<div id="menu9">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
</td>

<td width="556"></td>
<td width="196"> </td>
</tr>
</table>
</body>
</html>



<td width="200" align="left"> right където искаш или
<td width="200" align="top"> bottom middle
 
<!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= "Windows-1251" />
<title>Sait</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">

</style>
</head>

<body>
<table width="960" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="200">
<div id="menu9" style="width:200px;" >
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
</td>

<td width="556"></td>
<td width="196"> </td>
</tr>
</table>
</body>
</html>

1. Мястото на задаване на външни набори на стилове е в часта между <head> и </head>.

2. Сложих широчината на дива с менюто да е 200px и така се докосва пълтно до рамките на таблицата, но като приложиш някакви стилове за менюто може да се наложи да смениш това число 200 с по-малко, за да не ти се разтяга таблицата. Пробвай си вече ти или си дай и css кода на менюто, за да ти го наглася точно колко px трябва да е


Друг вариант е да го направиш така:

<div id="menu9" style="margin: 0px; width: 4islo px" >


Също това, което съм оцветил в синьо го махни, защото стиловете се слагат като коментар за по-старите браузъри и при стриктния XHTML не може да се валидира. При преходния, който ползваш ти незнам как стоят нещата, но по-добре ги махни тези коментари, в които си оградил css кода, за да не ти прави грешки ако решиш да минеш към стриктния XHTML
 
Ето css-a
Код: 
 #menu9 {
width: 200px;
margin: 10px;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu.gif);
padding: 8px 0 0 35px;
}

#menu9 li a:hover {
color: #FFF;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}
 
<!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= "Windows-1251" />
<title>Sait</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
margin: 0px;
}
#menu9 ul {
width: 200px;
margin: 0 auto;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu.gif);
padding: 8px 0 0 35px;
}

#menu9 li a:hover {
color: #FFF;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style></head>

<body>
<table width="960" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="200">
<div id="menu9">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
</td>

<td width="556"></td>
<td width="196"> </td>
</tr>
</table>
</body>
</html>

Това в червеното е кода за менюто ти, ако искаш да си го върнеш шак в style.css :)

Демо ще ти дам, но понеже нямам картинката ще е с цветове :)

Демо
 
Мерси ама ще можеш ли да ми кажеш как да махна точките отстрани и да прилепне и отпред да стане направо цяло в лявата таблица щото като сложа картинката и старчи отстрани?
 
FireSword каза:
Мерси ама ще можеш ли да ми кажеш как да махна точките отстрани и да прилепне и отпред да стане направо цяло в лявата таблица щото като сложа картинката и старчи отстрани?
Увеличете...

Това:

#menu9 ul {
width: 200px;
margin: 0 auto;
}

го променяш с това:

#menu9 ul {
width: 200px;
margin: 0 auto;
list-style: none;
}

И като се махнат точките би трябвало да си седи в таблицата, но ако не си седи просто числото в синьо го намали докато не се получи желания ефект :)
 
adrian каза:
FireSword каза:
Мерси ама ще можеш ли да ми кажеш как да махна точките отстрани и да прилепне и отпред да стане направо цяло в лявата таблица щото като сложа картинката и старчи отстрани?
Увеличете...

Това:

#menu9 ul {
width: 200px;
margin: 0 auto;
}

го променяш с това:

#menu9 ul {
width: 200px;
margin: 0 auto;
list-style: none;
}

И като се махнат точките би трябвало да си седи в таблицата, но ако не си седи просто числото в синьо го намали докато не се получи желания ефект :)
Увеличете...
Точките се махат ама неще да прилепне кам външната част на таблицата. Можеш ли да ми кажеш как да го направя така, че прилепне и към външната и вътрешна част на таблицата както тук в web-tourist.net?
 
Дай линк към картинките, които ползваш и ако може да обясниш по-подробно какво искаш да прилепне?
 
Ето картинката
menu9.gif

Ами да е прилепнало към единия и другия край на таблицата както менюто тук в web-tourist.net отстрани
 
<!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= Windows-1251" />
<title>Sait</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
margin: 0px;
}
#menu9 ul {
list-style: none;
width: 200px;
margin: 0 auto;
padding: 0px;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 35px;
}

#menu9 li a:hover {
color: #FFF;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style></head>

<body>
<table width="960" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="200">
<div id="menu9">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
</td>

<td width="556"></td>
<td width="196"> </td>
</tr>
</table>
</body>
</html>

Демо
Вече съм сигурен, че работи под всички браузъри - пробвах го :)
Работи под IE, Mozilla, Opera, Netscape и Safari. Други браузъри нямам :)

Valid XHTML
Valid CSS
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе