[Linuxmint-jp-devel:152] Re: ホームページ最終的な改善の提案
yikei lu
luyikei.qmltu @ gmail.com
2012年 9月 29日 (土) 13:57:29 JST
良いですね。
そしてトップのLinux Mintのロゴの画像と、ナビゲーションバー、スライドショーの横幅を画面の横幅に合わせるようにするとほとんど元のデザインに戻りますがどう思いますか?
今思いましたが、昔の横幅可変のデザインで
<div class="lof-slidecontent" id="lofslidecontent45">
<div class="preload">
<div></div>
</div>
<!-- MAIN CONTENT -->
<div class="lof-main-wapper">
<div class="lof-main-item">
<img width="950" src="topstories/cover_mint13.jpg"
title="Newsflash 2" height="300"/>
<div class="lof-main-item-desc">
<h3>
<a target="_parent" href="#" title="Newsflash 2">Linux
Mint13 Maya</a>
</h3>
<p>Linux Mint は最新で、洗練されて、簡単に使える、
強力で使いやすいオペレーティングシステムです。</p>
</div>
</div>
<div class="lof-main-item">
<img width="950" src="topstories/cover_kde.jpg"
title="Newsflash 1" height="300"/>
<div class="lof-main-item-desc">
<h3>
<a target="_parent" href="#" title="Newsflash 1">Linux
Mint 13 KDE</a>
</h3>
<p>Linux Mint を KDE の組み合わせで最高のデスクトップを!</p>
</div>
</div>
<div class="lof-main-item">
<img width="950" src="topstories/cover_xfce.jpg"
title="Newsflash 3" height="300"/>
<div class="lof-main-item-desc">
<h3>
<a target="_parent" href="#" title="Newsflash 3">Linux
Mint 13 Xfce</a>
</h3>
<p>Xfce で快適で高速でエレガントなデスクトップを!</p>
</div>
</div>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="lof-navigator-outer">
<ul class="lof-navigator">
<li>
<div>
<img alt="Linux Mint" src="images/lofthumbs/linuxmint.jpeg"/>
<h3>Linux Mint13 Maya</h3>
</div>
</li>
<li>
<div>
<img alt="Ubiquity" src="images/lofthumbs/ubiquity.png"/>
<h3>Linux Mint 13 KDE</h3>
</div>
</li>
<li>
<div>
<img alt="LMDE" src="images/lofthumbs/lmde_logo.jpg"/>
<h3>Linux Mint 13 Xfce</h3>
</div>
</li>
</ul>
</div>
</div>
この部分を<div id="slideshow">のように囲み、さらにcssに
width:950px;
margin-right: auto;
margin-left: auto;
などというふうにやれば中央に来るような気がしましたがどうでしょうか?
luyikei
2012年9月29日 12:56 AYANOKOUZI, Ryuunosuke <i38w7i3 @ yahoo.co.jp>:
> 綾小路です。
>
> コメントありがとうございます。
>
>> コンテンツの左右の余白の部分のことです。
>
> html の背景色は #EEEEEE とし、これが継承される
> body の背景色を #FFFFFF で上書きしました。いかがでしょうか。
>
> 修正の結果 [1] とコミットログ [2] は以下のページをご覧ください。
>
> [1] http://l.github.com/WebSite/
> [2] https://github.com/l/WebSite/commits/polyglot_markup
>
> 綾小路龍之介
> --
> AYANOKOUZI, Ryuunosuke <i38w7i3 @ yahoo.co.jp>
>
> _______________________________________________
> Linuxmint-jp-devel mailing list
> Linuxmint-jp-devel @ linuxmint-jp.net
> http://linuxmint-jp.net/mailman/listinfo/linuxmint-jp-devel
>
Linuxmint-jp-devel メーリングリストの案内