電子書籍の厳選無料作品が豊富！

CSSを使った全体の配置

解決済

  • 質問者：smile0915
  • 質問日時：
  • 回答数：3件

サイト全体の配置指定を外部スタイルシートを使い、
ホームページ作成をしております。
CSS初心者なので、変な質問になるかもしれませんが宜しくお願いします。
全体のぺージの構造は上にヘッダー、下にフッター
真中は3つに分け、3カラムの状態で配置しております。
今回、ヘッダー部分を2つに分けたいと思っております。

今のヘッダー部分は、最初にh1（テキスト）を左配置に表示し、その右側にテキストで「サイトマップ」のテキストリンクを配置。
その下に width="850" height="200" の大きめな画像を置き、
画像の下に右配置でh2（テキスト）
上記のような配置になっているので、外部スタイルシートコードは・・・

/* ヘッダーコンテンツ */
.header {
text-align:left;
padding-bottom:0.5em;
　width:830px;
float:left;}

.header h1{
font-size:12px;
padding:0;
float:left;}

.header h2{
font-size:12px;
float:right;}

/* ヘッダーサイトマップ */
.headersite{
float:right;}

・・・としています。
HTMLタグの方は・・・

<!-- ヘッダー開始 -->
<div class="header">
<h1>ｈ1題名</h1>
<div class="headersite"><a href="sitemap.html">サイトマップ</a></div>
<a href="index.html"><img src="%/logo.jpg" width="850" height="200" border="0"/></a>
<h2>h2題名</h2></div>
<!-- ヘッダー終了 -->

画像部分を真中から分け、左に画像を置き右はテキストにし回り込ませたいと思っておりますが、なかなか上手くいきません（汗）
画像を2つにわけるCSSコードを

.header left
.header right

とするならば、
HTMLタグ部分は・・・

<!-- ヘッダー開始 -->
<div class="header">
<h1>ｈ1題名テキスト</h1>
<div class="headersite"><a href="sitemap.html">サイトマップ</a></div>
<div class="header left"><a href="index.html"><img src="%/logo.jpg" width="300" height="200" border="0"/></a>
<div class="header right">テキストテキストテキスト
<h2>h2テキスト</h2></div>
<!-- ヘッダー終了 -->

にしたいのですが、CSSコードはどのように指定したら良いでしょうか？
自分なりにCSSコードを筆記したのですが、
回り込みがうまくいかないのか、真ん中から分けた左画像の右にテキストが並んでくれなくて下に配置されてしまいます。

ちなみに全体横幅は850pxにしております。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： abril
  • 回答日時：

すみません、ANo.2のサンプル、IE6.0で検証したら不備がある様でしたので修正します。


あと、HTMLのソースのスペースが一部「?」に変換されてしまっているので、そこも訂正しておきます
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
（省略）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
（省略）
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
.header {
width: 830px;
text-align: left;
padding-bottom: 0.5em;
}
.header h1, .header h2, .header p {
font-size: 12px;
}
.header h1 {
float: left;
margin: 0;
}
.header p {
margin: 0;
}
.header img {
border: 0;
}
.header p.sitemap {
float: right;
}
.header_sub {
position: relative;
clear: both;
height: 200px;
}
.header_sub p.logo {
position: absolute;
top: 0;
left: 0;
width: 300px;
line-height: 0;
}
.header_sub p.text {
margin-left: 310px;
}
.header_sub h2 {
margin-left: 310px;
}
---------------------------------------------------------------------
    • good
    • 0
    • 件
通報する
この回答へのお礼

素晴らしいです！
筆記して頂いたコードをコピペでそのまま使用したところ・・・
完璧です。
私が希望していた配置通りになりました。
ありがとうございます。

CSS配置配置のサイト作成は始めてで・・・CSSの知識は全くの初心者です ^^;
最初の回答頂いたところで、
>不明点や記述ミスがあります
と、指摘されましたが、単なるコピペのミスではなく、本当に間違えていました（滝汗）

CSS配置のサイト作成は始めたばかりですので・・・
まだまだわからなく質問をしてしまうかもしれませんが、
機会がありましたら、また宜しくお願いします m(_"_)m

ちなみに・・・
作成中のサイトのCSSに関しては、すべてclassセレクタにしてあります。
idセレクタがある事は知っておりますが、どちらかに統一した方が良いのかと思っていました（汗
調べてみたら、そうでもなさそうなので、自分なりに検索し調べてみます。

本当にありがとうございました m(_"_)m

通報する
お礼日時：2008/04/15 00:26

No.2

  • 回答者： abril
  • 回答日時：

単なるコピペのミスかもしれませんが：


---------------------------------------------------------------------
.header {
(省略）
　width:830px;←行頭に全角スペースが入っています。
float:left;←ヘッダー自体がフロートしているのは何故ですか？
}

(省略）
<div class="header left"><a href="index.html">（省略）</a>←</div>で閉じていません
(省略）
<h2>h2テキスト</h2></div>
←</div>で閉じていません
<!-- ヘッダー終了 -->
---------------------------------------------------------------------
といった不明点や記述ミスがあります。

ご希望の配置は、
---------------------------------------------------------------------
ｈ1題名テキスト　　　　　　　　サイトマップ
---------------------------------------------------------------------
ロゴ画像　　テキストテキスト（改行）h2テキスト
---------------------------------------------------------------------
という構造で宜しいでしょうか？
もしそうであれば、以下はごく大雑把なサンプルです。構成はオリジナルのままではなく、変更してあります。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"?http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="?http://www.w3.org/1999/xhtml"? xml:lang="ja">
<head>
<link rel="stylesheet" href="./css/common.css" type="text/css" media="all" />
<title>サンプル</title>
</head>

<body>

<!-- ヘッダー開始 -->
<div class="header">
<h1>ｈ1題名テキスト</h1>

<p class="sitemap"><a href="sitemap.html">サイトマップ</a></p>

<div class="header_sub">
<p class="logo"><a href="index.html"><img src="./images/logo.jpg" width="300" height="200" /></a></p>
<p class="text">テキストテキストテキスト</p>
<h2>h2テキスト</h2>
</div>

</div>
<!-- ヘッダー終了 -->

</body>
</html>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
.header {
width: 830px;
text-align: left;
padding-bottom: 0.5em;
}
.header h1 {
float: left;
font-size: 12px;
margin: 0;
}
.header p {
margin: 0;
}
.header img {
border: 0;
}
.header p.sitemap {
float: right;
}
.header_sub {
clear: both;
height: 200px;
}
.header_sub p.logo {
position: absolute;
width: 300px;
line-height: 0;
}
.header_sub p.text {
margin-left: 310px;
}
.header_sub h2 {
font-size: 12px;
margin-left: 310px;
}
---------------------------------------------------------------------
実際のヘッダーの中の詳細内容がわからないので、構成内容によっては質問者様のご希望のレイアウトにぴったり合致する様、"clear: both;"の替わりに所謂「clearfix」の様な方法でfloatの解除を仕込んだり、幅・高さ・マージン・位置関係を微調整したり、内容に相応しいマークアップ（サンプルはわかりやすい様に<div><p><hn>だけにしましたが、実際には<ul><dl>といったリストタグでのマークアップがより適切となる内容かもしれませんので）に変更したり、等々が必要になってくる事もあると思いますので、そこは適宜カスタマイズなさって下さい。それから本件の不具合とは関係ありませんが、構造上、"header"はclassではなくidセレクタの方がより宜しいかと（classセレクタを使用する事が間違っているという意味ではないです）。
※ちなみに<table>でレイアウトする必要は全くないですね。この内容はどう見ても「表」ではなさそうなので。

実現なさりたいレイアウトが違う様でしたら、詳細を補足して下さい。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： 15mm
  • 回答日時：

原因はスペースですね。



「header right」というクラス名をつけたかったのでしょうが、
＞.header right{}
では、「header」クラスの要素の子要素<right>タグへの指定
のような解釈がされてしまいます。
つまり、上記のやり方では「うまくいかない」どころか指定すらできていなかったことになります。

ですから、
class="header_left"
.header_left{}
のようにしてあげればうまくいくと思いますよ
（header rightのほうも同様に）

でもなぜあえてtableを使わずに回り込みで・・・？
    • good
    • 0
    • 件
通報する
この回答へのお礼

すばやいお返事をありがとうございます。
CSSに関しては全くの初心者で、名前にスペースを入れられない事すら知りませんでした ^^;

仰せの通り、今までテーブルタグを使いサイトを作成していたのですが、余計なタグが多くなってしまうのでHTMLをすっきりさせたくて、CSS配置サイトに挑戦しています。
CSSは奥が深く難しいですが楽しいです。

ありがとうございました m(_"_)m

通報する
お礼日時：2008/04/15 00:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報