凍結
0 hatikvah 501SO
position属性のabsoluteとrelativeが効かなくて混乱しています
何がなんだかわからなくなってしまったのですが誰か優しい方教えてください

私は今までHTMLやCSSを直感だけで操作していたのでわからない用語が多いです
わからない単語は検索するように心がけていますが調べ方が下手なのでわからないことも多々あります
かみくだいて説明してもらえると助かります

>↓HTML

<header><img src="##IMAGE_DATA_1_URL##"/><p>マンガ格納庫。</p></header>

>↓CSS

header img{
width: 100%;
position: absolute;
}

header p{
position: relative;
top: 50%;
left: auto;
right: auto
}

コードはこのようになっているのですがどこが間違っているのでしょうか
11/22 23:22
返信
コメント投稿 検索
12 hatikvah 501SO
>>10
解説通りにやってみたらできました!
ありがとうございました
11/24 13:46
返信
11 ALICE+運営 Firefox
>>10
いつも大変お世話になっております。
只今最大文字数を変更いたしました。
要件のみで申し訳ございません。失礼致します。
11/24 10:47
返信
10 しち Firefox
>>8
大前提ですが、【CSS編集】や【CSSファイル編集】には独自タグが一切使えません。(>>7さんが仰っている、「独自タグが使えない場所」の一つです)
もちろん##IMAGE_DATA_1_URL##も使えません。

なので【CSS編集】にもしも↑のような独自タグを使っている場合は、普通のURLに書き換えてやる必要があります。
例えば##IMAGE_DATA_1_URL##の場合は、
*  https://alicex.jp/data/サイトID/img/サイトID_upld_1.拡張子
といったURLになります。
(拡張子の部分は『.gif』『.png』『.jpg』などのことです。画像の拡張子によって変わります)

URLが分からなければ、HTMLの適当なところに独自タグ ##IMAGE_DATA_1_URL## を書いてプレビュー→表示されるURLをコピペしたらよいかと思います。

それと……>>8の子ページを見たところ、現状ではそもそもCSSがないのですが……?(ALICE+のデフォルトCSSしか入ってませんので、これだと当然ながら>>6のデザインは反映されません)
どこにCSSをお書きですか?
私が見たときたまたま編集中でCSSがなかった、とかだったらすみません。

ついでなんですが、『中央に文字を置く』だけなら<p>タグは使う必要がないように見えます。

>HTML
<header>マンガ格納庫。</header>

>CSS
body{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
header{
width: 100%;
min-height: ●●px;/*背景にしたい画像の高さを書けば良いかと。不要ならこの一行消す*/
background:url(https://alicex.jp/data/サイトID/img/サイトID_upld_1.拡張子) no-repeat center;
text-align: center;
padding: 20px 0;/*ヘッダー内の余白:上下px 左右px*/
}
main{
max-width: 90%;
}
.main p{/*←『main p』の間違いじゃないですね?これだとclass="main"の中にある<p>要素へのデザイン指定になりますが…*/
padding: 5px;
}

*※不要そうなプロパティを勝手に消したり、スペルミスを訂正しています。
最終的にどんなデザインになさりたいのか不明なのでそんなに弄りませんでしたが、『width:100vw』などは単位を『%』にしてます。
vwは、パソコンで閲覧した際に横スクロール発生するんです……。スマホは多分起きないのかなとは思うんですが、専門外なので絶対大丈夫かどうかは自分は知りません。

きっとheaderを画面の横幅一杯に広げたかったのかな? と思いましたのでbodyに『margin:0;』を追加しています。(ブラウザのデフォルトマージンを消さないと、ブラウザの縦横ぴったりに要素を広げられません)

それからセレクタに『main』と『.main p』があるのですが、子ページを見るに今のところ<main>をお使いですよね?
『.main』と書くと<main>要素を指定できませんが、<div class="main">〜</div>みたいなHTMLを今後使う予定ということでしょうか……?
もしも『<main>要素の中にある<p>要素をデザインしたい』という意図であるなら、
* main p{……;}
と、ピリオドを取る必要があります。

あともとのCSSだと、画像がheader内で繰り返し貼り付けになります。多分>>0でやりたかったことを推察するにソレジャナイだろうと思うので、『画像を繰り返さず、上下中央に配置(no-repeat center)』にとりあえずしています。

更にheaderの高さ。もとのCSSだと画像の高さが自動で反映されることはないので、背景画像をすべて表示させたいのであれば、headerの高さを画像の高さ以上に設定する必要があります。
『min-height: ●●px;』のところに画像の高さを入れてください。

臆測で書いているCSSなので多分希望通りのデザインとはまた違うと思いますが、ご参考までに……。
(もしもheader内の文字を、左右中央だけでなく上下でも中央に配置したい場合はまた書き方を変える必要があります。文字数が足りないので説明は割愛)

〔追記〕……↑とか書いたら文字数制限がとても増えている!ありがとうございます!>>11
旧掲示板に引き続き、迅速な文字数アップのご対応を本当にありがとうございました。(というか毎回私の書き込みが長すぎてすみません)
今後とも何卒よろしくお願いいたします。
>>12
解決してよかったです!
11/24 07:56
返信
8 hatikvah 501SO
>>7
言葉足らずになってしまって申し訳ないです

>↓HTML

<header><p>マンガ格納庫。</p></header><br>

<main><a href="http://hatikvah.39099.xrie.biz/?guid=on">コンテンツ名</a><br></main>

<footer><center><a href="http://hatikvah.101383.xrie.biz/?guid=on">top</a></center></footer>

>↓URL
子ページです

hatikvahのマンガたち - hatikvahと愉快な絵

1人の女がいろいろなマンガが生み出すらしい。

alicex.jp


CSSは前述の通りのままです

ブラウザのキャッシュを削除したり違うブラウザでアクセスしたりしましたがうまくいかない状態です
11/23 15:20
返信
7 Anonymous Firefox
>>6
CSSだけじゃわからないよ
HTMLもお願い
それとどこに貼ったのかなど詳細が無いと妄想でも答えつらい

画像が表示されないのは
・画像独自タグを間違えている
・画像アップローダーに画像がない
・独自タグが使えない場所に独自タグを貼ってる
・CSSの他の指定が干渉してる
・ブラウザが未対応
・キャッシュうんぬん
今思いつく原因です
11/23 13:51
返信
6 hatikvah 501SO
教えていただきありがとうございます
コピペしてやってみたのですが今度は画像が表示されなくなりました

どこが間違っているか分からないのでCSSを全部貼ってみます

body{
padding: 0;
}

a{
text-decoration: none;
}

header{
width: 100vw;
height: auto;
background-image:url(##IMAGE_DATA_1_URL##);
}

header p{
txt-align: center;
}

main{
max-width: 90vw;
}

.main p{
padding: 5px;
left: auto;
}
11/23 10:14
返信
5 Anonymous Firefox

header{
background-image:url(##IMAGE_DATA_1_URL##);
}
header p{
text-align:center;
}


<header><p>マンガ格納庫。</p></header>

これでOKです
11/23 01:26
返信
4 hatikvah 501SO
>>3
どうしたいかを書き忘れてすみません
画像はちゃんと現れますがpositionを使って画像の中央に文字を置くということができません
どうしたらできるか知りたいです
11/23 01:21
返信
3 Anonymous Firefox
>>2
スラッシュを消しても見た目の変化はありません
HTMLを間違えている点を述べただけです
画像が表示されないなら独自タグを間違えているんだと思います

改めて質問を読むとpositionについての質問ですね
で、どうしたいのかが書いてないので、どうしたいのかがわかりません
11/23 01:17
返信
2 hatikvah 501SO
>>1
コメントありがとうございます
スラッシュを消してみましたが反映されませんでした
Alice側のバグか何かだったのでしょうか
11/23 01:13
返信