作者ckw19 (keep going)
站內Web_Design
標題[問題] 有關版面問題
時間Thu Oct 7 11:27:19 2010
大家好
我是剛接觸網頁設計的菜鳥新手，
由於我是自己看書，不太會用軟體^^"
所以是用打在記事本裡的方式。
但是我有一個問題一直找不到方法解決
就是我的header方塊和global-nav方塊中間
的空白處為什麼比較大??
我只想留10px，但不知道哪裡出問題了，
請各位高手幫我看一下好嗎，謝了~
以下是我的html和css語法
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=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Cntent-Script-Type" content="text/javascript" />
<style type="text/css"> @import "css.css"; </style> <media="screen,
projection, tv" />
<link rel="contents" href="index.html" title="HOME" />
<title>半人馬</title>
</head>
<body>
<div id="whole">
<div id="header">
<h1>半人馬</h1>
</div>
<div id="global-nav">
<h2>
<ul class="global-nav">
<li>首頁</li>
<li>電繪</li>
<li>網設</li>
<li>攝影</li>
<li>留言</li>
</ul>
</h2>
</div>
<div id="main"> main </div>
<div id="side"> side </div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body{
text-align:center;
}
div#whole {
width:760px;
margin:auto;
}
div#header{
margin:10px 0 0 0;
}
div#header h1{/*檔頭文字塊*/
background-color:#69F;
height: 78px;
margin:0;
}
div
#global-nav{/*導覽塊*/
background-color:#F93;
margin:10px 0 0 0;
height:60px
}
div
#global-nav ul li{/*導覽清單選項*/
display:inline;
margin:0 40px;
vertical-align:center;
}
div#side {/*側邊區塊*/
float:left;
margin:10px 0px 10px 0;
width:150px;
height:600px;
background-color:#CFF
}
div#main {/*主要區塊*/
float:right;
margin:10px 0px 10px 10px;
height:600px;
width:600px;
background-color:#FF9
}
div#footer {/*註腳*/
clear:both;
margin:0;
height:70px;
background-color:#F90;
}
再麻煩大家，謝謝了!!~
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.42.98.184
推 KevinXII:試試把h1的padding跟margin都設成0 10/07 13:18
→ ckw19:不行耶 不過謝謝你的建議!!~ 10/07 13:48
推 KevinXII:另一個可能是你是用firefox測試的 所以他會自動在第二層 10/07 14:54
→ KevinXII:加上margin, 所以你再global-nav的css中加上 10/07 14:55
→ KevinXII:padding-top: 1px; 就可以了, 或是boder-top: 1px;也可! 10/07 14:55
→ aceone:有沒有用reset啊~reset一下啦~ 10/07 15:56
推 andrew43:你的h2太有創意了. 應該是這個原因. 10/07 18:43
→ superpai:放開那個ul.... ul不能在h2裡 10/07 22:36
→ ckw19:喔喔 刪掉h2就縮小了 成功了 10/08 12:07