Трудности с размерами (width/height)

Тиар · August 30, 2008

Здравствуйте.

Недавно начал изучать блочную верстку. Сайт-пример получился на отлично. От оригинала не отошел ни на йоту, вроде бы разобрался, а начал свой и столкнулся с некоторыми проблемами. А конкретнее следующее. Для ячейки таблицы прописываю следующие параметры:

td.shadow {

width: 100%;

height: 37px;

}

и не работает ни один ни второй параметр. Причем по всей таблице несколько таких косяков. В чем может быть проблема?

Vlad · August 30, 2008

Код таблицы приведи и доктайп укажи какой используешь.

klierik · August 30, 2008

а сколько ячеек в строке имеют такой класс?

Тиар · August 30, 2008

вот код. да, плюс еще вопрос: как убрать выделение вокруг ссылок в главном меню

html

<!DOCTYPE HTML Public"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dt1">

<html>
	<head>
		<title> hello world [block layout edition] </title>
			<link href="блочный css.css" rel="stylesheet" type="text/css">
	</head>
		<body>
		<br>

<!--main table (0)-->		

			<table class="main" border="0" align=center>
				<tr>
					<td colspan=2 class="header">
						<img src="header.jpg">
					</td>
					<td rowspan=4 class="shadow">
							<img src="shadow-top-angl.jpg">
					</td>
				</tr>
				<tr>
					<td colspan=2>
						<br>

						<table class="main-menu" border=0>
							<tr>
								<td><a href="#" class="pic"><img src="lnk-na.jpg"></a></td>
								<td><a href="#"><img src="lnk-na.jpg"></a></td>
								<td><a href="#"><img src="lnk-na.jpg"></a></td>
								<td><a href="#"><img src="lnk-na.jpg"></a></td>
								<td><a href="#"><img src="lnk-na.jpg"></a></td>
							</tr>
						</table>

					</td>
				</tr>
				<tr>
					<td width=45%>

						<table class="menu" border=1>
							<tr>
								<td rowspan=5 width=35><img src="tab.jpg"></td>
								<td rowspan=5 width=10></td>
								<td colspan=2 class="ftplace"><img src="avatar.jpg"></td>
								<td class="innershadowtop"></td>
								<td rowspan=2 colspan=2 class="tmenu">menu-table</td>
							</tr>
							<tr>
								<td colspan=2>shadow</td>
								<td>a</td>
								</tr>
							<tr>
								<td class="leftglow">ag</td>
								<td colspan=3>t</td>
								<td>ag</td>
							</tr>
							<tr>
								<td>r</td>
								<td colspan=3 class="infotable">i</td>
								<td>l</td>
							</tr>
							<tr>
								<td>ag</td>
								<td colspan=3>b</td>
								<td>ag</td>
							</tr>

						</table>

					</td>
					<td> news
					</td>
				</tr>
				<tr>
					<td> <a href="#">footer</a>
					</td>
					<td> re-main menu
					</td>
				</tr>
			</table>

		</body>			
</html>

css

html, body {
	margin:0px;
	padding:0px;
	background-color: #9f9f9f;
}
table.main {
	width: 60%;	
	border-collapse:collapse;
	background-color: #f3f3f3;
}
td, input, select, textarea {
	font-family: Verdana;
	font-size: 10px;
	color: black;
	font-weight: bold;
	vertical-align: top; 
}
td {
	padding:0px;
}
td.shadow {
	width: 6px;	
	background-image:url(shadow-top.jpg);
	background-repeat: repeat-y;
	background-position: right;	
	text-align:right;
}
td.header {
	width: 100%;
	height: 130px;
	text-align: right;
	padding-right: 10px;
}
table.main-menu {
	width: 100%;
	height: 37px;
	text-align: center;	
}
table.menu {

	padding-left: 15px;	
	padding-top: 15px;
}
td.ftplace {
	width: 160px;
	height: 160px;
	background-color: #5c7336;	
}
td.innershadowtop {
	width: 7px;
	height: 100%;
	background-image: url(shadow-inner-top.jpg)
	background-repeat: repeat-y;
	background-position: left;
}
td.tmenu {
	width: 21px;
	height: 100%	
}
td.leftglow {
	width: 3px;
	height: 100%;	
}
td.infotable {
	width: 195px;	
}
a:link {
	color: #f3f3f3;	
	text-decoration: none;
}
a:hover {
	color: #f3f3f3;
	text-decoration: none;
}
a:active {
	color: #f3f3f3;	
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:focus {
	outline: none;
}

rus · August 30, 2008

попробуйте переименовать файл:

<link href="[b]блочный css.css[/b]" rel="stylesheet" type="text/css">

думаю намек понятен?

Edited August 30, 2008 by rus

Тиар · August 31, 2008

2 Рус. Не помогло...

rus · August 31, 2008

2 Рус. Не помогло...

Посмотрел код, но не понял куда вы хотите применить класс shadow?

Код не форматированный сам черт ногу сломит!

Куда этот класс применить?

Вот ваш код отформатированный, покажите куда вы его хотите применить?

<!DOCTYPE HTML Public"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dt1">
<html>	
<head>		
<title> hello world [block layout edition] </title>
<link href="блочный css.css" rel="stylesheet" type="text/css">	
</head>
<style>	
img {
border:none;
}
html, body {	
margin:0px;	
padding:0px;	
background-color: #9f9f9f;
}
.main {	
width: 60%;		
border-collapse:collapse;	
background-color: #f3f3f3;
}
td, input, select, textarea {	
font-family: Verdana;	
font-size: 10px;	
color: black;	
font-weight: bold;	
vertical-align: top; 
}
td {	
padding:0px;
}
.shadow {	
width: 6px;		
background-image:url(shadow-top.jpg);	
background-repeat: repeat-y;	
background-position: right;		
text-align:right;
}
.header {	
width: 100%;	
height: 130px;	
text-align: right;	
padding-right: 10px;
}
.main-menu {	
width: 100%;	
height: 37px;	
text-align: center;	
}
.menu {		
padding-left: 15px;		
padding-top: 15px;
}
.ftplace {	
width: 160px;	
height: 160px;	
background-color: #5c7336;	
}
.innershadowtop {	
width: 7px;	height: 100%;	
background-image: url(shadow-inner-top.jpg);	
background-repeat: repeat-y;	
background-position: left;
}
.tmenu {	
width: 21px;	
height: 100%	
}
.leftglow {	
width: 3px;	
height: 100%;	
}
.infotable {	
width: 195px;	
}
a:link {	
color: #f3f3f3;		
text-decoration: none;
}
a:hover {	
color: #f3f3f3;	
text-decoration: none;
}
a:active {	
color: #f3f3f3;		
text-decoration: none;
}
a:visited {	
color: #000000;	
text-decoration: none;
}
a:focus {	
outline: none;
}	
</style>
<body>		
<!--main table (0)-->							
<table class="main" border="0" align=center>				
<tr>					
<td colspan=2 class="header">						
<img src="header.jpg">					
</td>					
<td rowspan=4 class="shadow">							
<img src="shadow-top-angl.jpg">					
</td>				
</tr>				
<tr>					
<td colspan=2>																		
<table class="main-menu" border=0>							
<tr>								
<td>
<a href="#" class="pic"><img src="lnk-na.jpg"></a>
</td>								
<td>
<a href="#"><img src="lnk-na.jpg"></a>
</td>								
<td>
<a href="#"><img src="lnk-na.jpg"></a>
</td>								
<td>
<a href="#"><img src="lnk-na.jpg"></a>
</td>								
<td>
<a href="#"><img src="lnk-na.jpg"></a>
</td>							
</tr>						
</table>											
</td>				
</tr>				
<tr>					
<td width=45%>												
<table class="menu" border=1>							
<tr>								
<td rowspan=5 width=35>
<img src="tab.jpg">
</td>								
<td rowspan=5 width=10>
</td>								
<td colspan=2 class="ftplace">
<img src="avatar.jpg">
</td>								
<td class="innershadowtop">
</td>								
<td rowspan=2 colspan=2 class="tmenu">menu-table</td>							
</tr>							
<tr>								
<td colspan=2>shadow</td>								
<td>a</td>								
</tr>							
<tr>								
<td class="leftglow">ag</td>								
<td colspan=3>t</td>								
<td>ag</td>							
</tr>							
<tr>								
<td>r</td>								
<td colspan=3 class="infotable">i</td>								
<td>l</td>							
</tr>							
<tr>								
<td>ag</td>								
<td colspan=3>b</td>								
<td>ag</td>							
</tr>						
</table>											
</td>					
<td> news</td>				
</tr>				
<tr>					
<td> <a href="#">footer</a></td>					
<td> re-main menu</td>
</tr>
</table>

Для того чтобы убрать "выделения" с сылок нужно в css вставить следующее:

img {
border:none;
}

Тиар · August 31, 2008

конкретно не работают следующие строки (в коде от rus)

55 width: 160px;

...

60 width: 7px;

...

затем с применеием Doctype появился косяк в строке 104 <img src="shadow-top-ang1.jpg"> рисунок сполз на один пиксель вниз.

rus · August 31, 2008

Вы можете нарисовать как должно выглядеть, а то я не понимаю что именно вам нужно.

Тиар · September 1, 2008

2Rus

что-то типа этого: http://slil.ru/26106977

rus · September 1, 2008

2Rus
что-то типа этого: http://slil.ru/26106977

Ближе к ночи покажу что вышло...

Amigos · September 1, 2008

Если используешь доктайп, у тебя трудностей с таблицами и процентами могут действительно возникнуть не мало. Каждый браузер округлает значения по своему. После того как приведут код страницы - совет попробуй ещё в ie6 порастягивать, потаскай окошко, и проверь не слипаются ли колонки при движении.

Есть такой глюк.

rus · September 1, 2008

Вот , единственное что я смог сделать, более не знаю что и как...

Amigos · September 2, 2008

2 rus

Снизу посмотри - футер вправа немного уехал.

rus · September 2, 2008

2 rus
Снизу посмотри - футер вправа немного уехал.

Да, есть такое дело, но думаю автор это сам исправит

Sign In

Трудности с размерами (width/height)

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information