縦 3 列レイアウト中央のみ可変
-
07.10.22 12:10
-
フリーのウェブクリエーター宏騎さんに出題いただいた、縦 3 列レイアウト中央のみ可変の HTML + CSS コーディングがサクッと解けたので、残しておく。
個人的に CSS ハックを好んでないので利用したくなかったが、今回は苦渋の選択である。
仕事中の出題で、時間もなかったし。
こちらが HTML 。
#left や #right にはメニューやらバナーやらが入るので、#center よか下に。見せるべきものをソースの上位に持ってくるといった、自己流 SEO 対策。もはや死語？<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<title>3 列レイアウト中央可変</title>
<link href="common.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="inbox">
<div id="center">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>こちらが問題の common.css 。
#center ul のハックが肝。モダンブラウザ (Firefox, Opera 等) にはこの width を読ませたくないのです。でも基本的にブロック要素には横幅指定は必須なんだけど。時間がなかったってことで。body{
width:100%;
margin:0;
padding:0;
position:relative;
}
#left{
width:200px;
background:#aaa;
position:absolute;
top:0;
clear:both;
}
#center{
float:left;
width:100%;
background:#eee;
}
#center ul{
list-style-type: none;
_width:100%;
margin:0 200px;
}
#center li{
float:left;
width:150px;
height:150px;
background:#fa0;
}
#right{
width:200px;
background:#aaa;
position:absolute;
top:0;
right:0;
clear:both;
}以上でクリア。
Author :: おたむ トラックバック (0)
- トラックバックURL: http://www.otamu.com/m_type/mt/mt-tb.cgi/25