こんばんわー！
１１月に突入しましたね。
祝日と選択授業の兼ね合いで私は今日から４連休ですー！
課題をひたすらやります。あとデザイナーズウィーク行けたらいいなあ・・・
今日の記事は、課題のつまづきを。
疑問と対策ラベルの記事を書くのも久しぶりです。
これから頻繁に更新していくであろうこのラベルの記事。
個人的なノートとしてもブログ活用してゆきたい！！！
★★★
以前記事にしたWebクリエイションの課題。
この各テキストの頭に、
こんなハートの画像をバランスよく配置したい！
というわけで・・・
こんなコードを打ってみました。
ただ画像の配置をするだけだと、バランスが崩れてしまって・・・；；；
このやり方が正しいのか不安なのですが、
imgタグに style=“position:absolute; を入れて、画像の位置がしっくりくる数値を入力してみました。
これをね、ブラウザで見てみたのだけど・・・
が、しかし・・・
ハートの位置がズレまくりンゴwwwwwwこれはあかん・・・www
この現象が解決する策を傍島先生にお伺いしました。
position:absolute; を使うとき
上位の要素にposition:relative; を設定すれば、
その上位要素から座標(top,left)を図ります。
今の場合なら、
#nav か、 #nav li に
position:relative;を設定しましょう。
とのご返答を頂いたので、その通りに入力してみました。
img内の数値も変更。
ブラウザで確認してみますー！
これでウィンドウを小さくしても最大化しても
ハートの位置はこのままになりました！
座標を計って位置してくれるのは、微調整が利いて良いですね＊
多分他にも同じように配置するやり方があるんじゃないかなー？とも思います。
このやり方が普通なのかも、完全に初心者な私は不安でならない・・・・。
解決出来て良かった！
またつまづいた時は記事にして、同じ事で迷わないようにしてゆきますー！
でわでわまたね★
ブログトップへ戻る
タグ内のstyle設定ではなく、CSS側に書いた方がいいかな。
返信削除liのリストマークに画像を設定する方法は、以下のようにするといいよ。
http://www.tagindex.com/stylesheet/list/list_style_image.html
うわああ先生ー！！(´；ω；｀)
返信削除URL拝見致しました！非常に簡潔に書かれていたコードなので、作成中の物にも取り入れたいのですが、私の構造理解が甘い為、コードを入れると崩れてしまいます・・・。
今日は時間遅いので、明日現状をまとめたものをメールで質問させて頂きます。
お手数おかけ致しますが、宜しくお願い致します。。
html添付して送ってくれると、話が早いかもー。
返信削除時間があるときにでも送っておいて。
誠にありがとうございます(´；ω；｀)
削除只今送信させて頂きました。
失礼すぎるデータで申し訳御座いません・・・
宜しくお願い致します(´；ω；｀)