0
다음은 내 웹 사이트의 코드입니다. 파이어 폭스에서는 완벽하게 작동하지만 크롬이나 사파리에서는 완벽하게 작동하지 않습니다. 유일한 방법은 헤더 그림의 오른쪽에있는 탐색 행 표시이고 홈 버튼은 헤더 그림의 전체 길이입니다. 나는 그것이 디스플레이와 관련이 있다고 생각한다 : css에서는 인라인되지만 확실하다. 웹 사이트는 firefox에서는 작동하지만 크롬이나 사파리에서는 작동하지 않습니다. 내비게이션 행이 크롬 및 사파리에서 올바르게 정렬되지 않았습니다.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td><a href="index.html">Home</a></td>
<td><a href="about.html">About</a></td>
<td><a href="workouts.html">Workouts</a></td>
<td><a href="trainers.html">Trainers</a></td>
<td><a href="contact.html">Contact</a></td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
이
는 사용 a validator 내 스타일* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
colspan을 7로 변경하고 div를 없애 버렸지 만 상황이 악화되었습니다. 모든 것이 다른 크기가되었고 그 곳곳에 퍼졌습니다. 일단 내가이 문제를 해결하면 나는 CSS 레이아웃을 연구하고 그것을 고치려고 시도 할 것이다. 그러나 지금은 적어도이 문제를 해결할 필요가있다. –
나는 그것을 이해했다 ... 나는 또한 하단 열에 colspan을 추가해야했다. –