htmlの記述に関する質問

このQ&Aのポイント
  • ホームページに3つのコンテンツを用意する際、タグの種類ごとに書き、css(absolute)でレイアウトを整えるのは問題があるのでしょうか?
  • 他の人のソースでは1つのコンテンツについて集中的に書かれているが、タグの種類ごとに書くことが問題ないか教えてください。
  • htmlの記述において、コンテンツをタグの種類ごとに分けて書き、レイアウトを整える方法について教えてください。
回答を見る
  • ベストアンサー

htmlの記述に関して

htmlの記述に関して少し質問させていただきます。 ホームページに3つのコンテンツを用意した時に <body> <h2 class="">1つ目のコンテンツのタイトル</h2> <h2 class="">2つ目のコンテンツのタイトル</h2> <h2 class="">3つ目のコンテンツのタイトル</h2> <img src="1つ目のコンテンツの画像" class=""> <img src="2つ目のコンテンツの画像" class=""> <img src="3つ目のコンテンツの画像" class=""> <p class="">1つ目のコンテンツの文章</p> <p class="">2つ目のコンテンツの文章</p> <p class="">3つ目のコンテンツの文章</p> のようにタグの種類ごとに書きcss(absolute)でレイアウトを整える ようにしています。 他の人のソースを見ると <h2 class="">1つ目のコンテンツのタイトル</h2> <img src="1つ目のコンテンツの画像" class=""> <p class="">1つ目のコンテンツの文章</p> <h2 class="">2つ目のコンテンツのタイトル</h2> <img src="2つ目のコンテンツの画像" class=""> <p class="">2つ目のコンテンツの文章</p> <h2 class="">3つ目のコンテンツのタイトル</h2> <img src="3つ目のコンテンツの画像" class=""> <p class="">3つ目のコンテンツの文章</p> のように1つのコンテンツについて集中的に書かれています。 僕のようにタグの種類ごとに書き、css(absolute)でレイアウトを整える のは問題(文法的にもSEO的にも)があるのでしょうか? 教えてください。

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

 HTML(略語ですから大文字です)は、読んで字の如し--文書をそれを構成する要素をタグでマークアップするメタ言語です。 →Introduction to HTML 4 (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 ) 『著者は、自分の文書が音声出力ブラウザや点字出力等、様々なプラットフォームでどのようにレンダリングされるかを考慮する必要がある。』  たとえば検索エンジンは、javascriptもスタイルシートも利用しませんから、「ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )」  言い換えれば、スタイルシートも画像もない状態で文章の内容が理解できるかです。  またHTML4.01であいまいだった部分の反省からHTML5では、この部分はより徹底化されます。すなわち <body>  <header>   文書のヘッダ  </header>  <section>   <hn>見出し</hn><!-- nは1~6の数字だが階層は示さない-->   文章   <section>    <hn>見出し</hn>    文章   </section>   <article><!-- ヘッダや本文フッターを持ちうる独立した記事 -->    <header></header>    <section></section>    <footer></footer>   </article>  </section>  <footer>  </footer> </body> のようなマークアップになるでしょう。  HTML5でははっきりと、「ひとつのセクションにはそのセクションの見出しがひとつだけ必ず存在することが想定されている」とされています。ふたつ書くときは <section>  <hgroup>   <h1>見出し</h1>   <h2>見出し</h2>  </hgroup>  <p>・・・ と書かなければなりませんがその場合も、可能なら <section>  <h1>見出し</h1>  <section>   <h2>見出し</h2>   <p>・・・  </section> と書くことが推奨されています。  →4.4.2 The section element ( http://www.w3.org/TR/html5/the-section-element.html#the-section-element ) あなたの例文をHTML4.01的に書けば <div class="section">  <h2 class="">1つ目のセクションのタイトル</h2>  <div class="figure"><img src="1つ目のセクションの画像"></div>  <p class="">1つ目のセクションの文章</p> </div> <div class="section">  <h2 class="">2つ目のセクションのタイトル</h2>  <div class="figure"><img src="2つ目のセクションの画像"></div>  <p class="">2つ目のセクションの文章</p> </div> <div class="section">  <h2 class="">3つ目のセクションのタイトル</h2>  <div class="figure"><img src="3つ目のセクションの画像">  <p class="">3つ目のセクションの文章</p> </div> でしょう。 ★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ★画像は行内要素ですからブロック要素の内部に書きます。  この場合「そのセクションの画像」ですから、それを示すためにfigureというclass名をつけたDIVないしP要素が良いでしょうね。 >僕のようにタグの種類ごとに書き、css(absolute)でレイアウトを整える のは問題(文法的にもSEO的にも)があるのでしょうか?  はい、重大な誤りです。検索エンジンはあなたのページの内容を正確に理解できないでしょう。HTMLの目的は 【引用】____________ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より  なのですから・・  

trip-trip-trip
質問者

お礼

丁寧な回答ありがとうございます。 HTMLのことについてもよくわかりました。 ORUKA1951さんの回答で <div class="section">  <h2 class="">1つ目のセクションのタイトル</h2>  <div class="figure"><img src="1つ目のセクションの画像"></div>  <p class="">1つ目のセクションの文章</p> </div> とありますが、 僕はいつも  <h2 class="">1つ目のセクションのタイトル</h2>  <img src="1つ目のセクションの画像" class="">  <p class="">1つ目のセクションの文章</p> のようにdivは使わずに書いています。  やはり、1つのコンテンツのブロックということを  divで表記しているのでしょうか?  僕のこのやり方や考え方は間違いでしょうか? 追加の質問で申し訳ないですが、回答お願いします。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

>のようにdivは使わずに書いています。  それは、文法的には間違いではありません。しかし、仕様書には下のように書かれています。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 『次の例は、見出しとそれが導くテキストとをDIV要素で連結する方法を示している。こうすることで、スタイルシートによってセクション単位のスタイル定義(背景色やフォント設定等)を行うことができる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.5 )』  このあたりを読むと、DIVの本来の使い方が詳しく示されています。  ところが、これらの文章は仕様書のすべてを理解している人ならともかく、そうでない多くの人には読み飛ばされてきました。その反省からHTML5では、『文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』  ・・section・article・aside・hgroup・header・footer・nav・・・  これらは、HTML4.01で想定していた『『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する』のidやclass名です。 <div class="section">  <h2>1つ目のセクションのタイトル</h2>  <div class="figure"><img src="1つ目のセクションの画像"></div>  <p>1つ目のセクションの文章</p> </div> <div class="section">  <h2>2つ目のセクションのタイトル</h2>  <div class="figure"><img src="2つ目のセクションの画像"></div>  <p>2つ目のセクションの文章</p>  <div class="section>   <h3>項見出し</h3>   <p></p>  </div>  <div class="section>   <h3>項見出し</h3>   <p></p>  </div> </div> <div>  <h2 class="">3つ目のセクションのタイトル</h2>  <div class="figure"><img src="3つ目のセクションの画像">  <p>3つ目のセクションの文章</p> </div>  こうしてセクションごとにdivで括ってあると、スタイルシートで章番号や項目番号を振ることができます。 --レンダリング結果------------------------------- 一章 1つ目のセクションのタイトル  1つ目のセクションの文章 ■画像 二章 2つ目のセクションのタイトル  2つ目のセクションの文章 ■>  二章1項 項見出し   記事  二章2項 項見出し   記事> 三章 3つ目のセクションのタイトル  3つ目のセクションの文章 ■  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで、スタイルシートのcounterを使ってます。  このように、文書構造を補完する目的でDIVを適切に利用するとHTMLもスタイルシートもわかりやすくなります。たとえば div.section div.section{font-size:0.95em;} とするとスタイルシートを読むだけで、章→項→小項と下がるたびにフォントサイズを少しずつ小さくなるように指定してあることが一目瞭然ですね。  

trip-trip-trip
質問者

お礼

またまた丁寧な回答ありがとうございます。 HTMLを覚えるよりも、HPを作成することを 考えていたため、基本的なことをとばしていた感じがします。 回答の中の例文を見てみると、非常にわかりやすかったので これからはしっかりと勉強をしながらやっていこうと思います。 2度の回答ありがとうございました。

  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.1

HTMLはコンテンツの構造を反映した形で記述します。 コンテンツがいくつかあって、個々のコンテンツごとに、タイトルとか画像とか説明文という属性があるわけなので、後者が自然です。 前者の書き方は間違っていると言っても言いすぎでは無いでしょう。 構造を反映して記述しておくと、仮にブラウザがCSSファイルの取得を失敗しても、レイアウトが崩れるのはしょうがないとして、内容を把握できるというのもありますね。

trip-trip-trip
質問者

お礼

回答ありがとうございます。 確かに、コンテンツとして僕の書き方(前者)は 不自然ですよね。

関連するQ&A

  • ウィンドウの縮小に合わせて変化させるには?

    WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか? 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • divで囲まれたpaddingの指定を特定のタグだけ解除(margin:0px)する方法

    タイトルに上手く書けなかったのですが、divでpaddingを指定して余白を作っています。 そもそもはmargin leftでまかないたかったのですが、ほとんどはfloat指定しているため、IE6で倍に広がりなくなくpadding指定しています。 ただ、中身のテキストや画像はいいのですが、タイトルにあたり<h2>タグだけをどうしても左はしに寄せたいと悪戦苦闘しています。 なんとかいい方法はないものでしょうか? <div class="center-box2"> <h2>あああ</h2> <p id="top-text">いいい</p></p> <h3 class="caution-title1">あああ</h3> <img src="img/aaa.jpg" width="145" height="105" class="caution-img"> <p>いいい</p> </div> <h2>にはCSSで背景画像を使用し、テキストはindentで-9999を指定しています。 <h3>や<img>のpaddingの余白は指定のままで、タイトルの<h3>だけを何とかしたいと考えています。 どうかよろしくお願致します。

    • ベストアンサー
    • HTML
  • imgタグをそのまま使うことは正しいの?

    <h2>hogehogehoge</h2> <p>hogehogehogehogehogehogehoge</p> <img src="images/hoge.gif" alt"hoge" /> これって正しいですか? <h2>はタイトル <p>は段落(文章?) <img>は???? 画像? もしかして正確にはimgタグも<p>とかで囲わなければいけないのか? 教えてください。。。

    • ベストアンサー
    • HTML
  • floatで左右に分けて配置した2個の画像の中央にテキスト

    floatで左右に分けて配置した2個の画像の中央にテキストを回り込ませた後にテキストの続きの内容の画像を配置するとIE6でレイアウトが崩れしまします。 (NN7、Opera9、Firefox2では表示されるのですが…。) 初心者ですので困っています。お力をお貸し下さい。 ↓このように表示したいです。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■ ■画像■ ■■■■ ■■■■ ■画像■ ■■■■ ↓IE6ではこのような表示になってしまいます。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■       ■■■■ ■■■■       ■■■■ ■画像■ ■画像■ タグは以下のとおりです。 ☆HTML☆ <div id="contents01"> <div id="contents01_left"> <img src="img/contents01_01.gif"> </div> <div id="contents01_right"> <img src="img/contents01_02.gif"> </div> <p>テキストテキスト</p> <p><img src="img/contents01_03.gif"></p> <p><img src="img/contents01_04.gif"></p> <p><img src="img/contents01_05.gif"></p> </div> ☆CSS☆ #contents01{ width:480px; height:140px; padding:10px; } #contents01_left{ float:left; width:150px; padding-right:10px; } #contents01_right{ float:right; width:150px; padding-left:10px; } どうぞよろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • 画像はDIVタグとPタグの両方で囲むの?

    クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか? ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>~</div>に文章はありません。  同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2(見出しタグ?)で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか? すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか? 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。

  • CSSでの配置方法

    今学校の課題でCSSをやっています。 画像を「position」のタグで自分のやりたいように配置できません。 本やHPを参考にまねをしてみているのですが、それでもうまく配置できません。 -------------------------------------- <html> <head> <title>MY RADIO FLYER</title> <link rel="stylesheet" type="text/css" a href="stop.css"> </head> <h1><div class="section"> <img id="top" src="image/myradioflyer.gif"> </div></h1> <h2><div class="section2"> <img id="spec" src="image/spec.gif"> <img id="photo" src="image/photo.gif"> <img id="top photo" src="my radio flyer/a.jpg" alt=""> </div></h2> </html> ------------------------------------------ body {background-color: #ff0000;} div.section{align:center;} div.section2{align:left;} img#top photo{ position: absolute; right:80px; top:40px;} ------------------------- 今こんな感じでやっています。 ひとつひとつの画像それぞれを操りたいのですが、全くできません。 また、配置には関係の無いはずのタグを追加しただけでも、配置が換わってしまったりと、全くもってわからなくなってしまいました。 どなたかよろしければ配置方法教えてください。

    • ベストアンサー
    • HTML
  • <p>の右寄せ、CSSの設定について

    お世話になります。 ブログを書いているのですが、imgタグ(classを"a"とします)を挿入するとHTMLでは自動でimgタグだけで前後が<p></p>で囲まれてしまいます。 このimg.aをCSSのfloatで右に寄せ、marginを設定しているのですが、続きの文章が同じ<p>の中に無いためか画像の左が丸々空白になり、画像の下の行から文章が始まるようになってしまいます。なおFirefoxでは画像の左は空白にならず、同じ高さから文章が始まっています。またこの<p>タグだけにクラスを割り振ることはできないようです。 この場合、Internet ExplorerでもCSSの設定などで画像の脇に文章を持ってくることはできるのでしょうか?それともなにか変なCSS設定を別にしてしまっている可能性が高いでしょうか? よろしくお願いします。

  • css firefox IE 画像を中央揃えにしたいです

    初心者です。よろしくお願い致します。 cssでホームページを作っています。 index.htmlに画像を中央に貼り付けたいのですが、 firefoxでは中央揃えに、IEでは左側に表示されます。 下にタグを書くので、ご回答いただけましたら幸いです。 よろしくお願い致します。 -------------------------------------------------- <html> <head> <title>○○○</title> <link href="design/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <img src="img/tobira.jpg"> </div> </body> </html> -------------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#FFFFFF; } body a img{ border: none; align:center; } .contents{ width:800px; margin:0px auto; margin-top:100px; } h1{ color: #FFFFFF; }

    • ベストアンサー
    • HTML
  • jquerで画像の入れ替えをしたいのですが、上手く行かず困っております

    jquerで画像の入れ替えをしたいのですが、上手く行かず困っております。 ブロックを丸ごとクリック範囲にするため、透過gifをかぶせています。 htmlは下記のようになりますが、マウスオーバーで背景と、<p class="ここも変更">に入っている画像を入れ替えたいです。 <ul> <li> <div class="data"> <h3>タイトル</h3> <p>~</p> <p class="a">~</p> <p class="ここも変更"><img src="***.png" /></p> </div> <img src=".**.jpg" /> <a href="***.html" class="sp"><img src="sp.gif" /></a> </li> </ul> 背景についてはスクリプトができております。 liにクラスをつけて、cssで背景を書き換えています。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ $(function(){ $("body#list.index #contents ul li a.sp").mouseover(function(){ $(this).parents('li').addClass("over") ; }).mouseout(function(){ $(this).parents('li').removeClass("over"); }); }); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ しかし、<p class="ここも変更">の部分について、セレクタの指定がうまくできずにいます。 よろしくお願いいたします。

  • CSSレイアウトの配置ずれについて

    本を見ながらHTMLとCSSを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }