09/01/16 19:53:00
>>433は無言で他スレに行きました↓
ｽﾚﾘﾝｸ(hp板:471-番)
438:Name_Not_Found
09/01/18 17:58:09
DW8で作業中で、現在下のような感じでヘッダ内にh1とその下にナビを
入れようとしてます。
ナビのli要素をインラインにすると普通にul全体もヘッダ内にあるのですが、
li要素をブロック、フロート左にするとul要素全体がヘッダの下に飛び出て
しまいます。これをヘッダ内におさめる方法はないでしょうか？
【HTML】
<div id="header">
<h1>株式会社ロゴ</h1>
<ul>
<li><a href="#">TOP</a></li><li><a href="#">ななな</a></li><li><a href="#">あああ</a></li>
</ul>
</div>
【CSS】
#header {
margin: 0px;
padding: 0px;
}
#header h1 {
margin: 10px 0px 0px 10px;
padding: 0px;
}
#header ul {
margin: 0px;
padding: 0px;
}
#header li {
padding: 0px;
margin: 0px;
display: block;
float: left;
}
439:Name_Not_Found
09/01/18 18:08:41
>>438
よくわからないんだけどどういう風に表示したいのか画像か文字で出力後を眼で見えるように書いて
440:438
09/01/18 18:50:38
-----------------------------------------------------
| titlelogo
|
|----------------
| btn1 | btn2 | btn3 |
-----------------------------------------------------
こんな感じです。
右側の縦の線入れると崩れるんで書いてないだけです。
ボタンはテキスト表示なんでインラインでも良いのかもしれないですが
画像に変更する際に不便だと思いまして。
441:Name_Not_Found
09/01/18 18:54:51
>>438
clearfixでググるがよろし
442:Name_Not_Found
09/01/18 18:58:31
#header h1 {
margin: 10px 0px 0px 10px;
ここでヘッダのh1に右マージン入れてるからじゃなくて？
443:Name_Not_Found
09/01/18 19:44:29
有難うございますここから先はググって自分でやってみます。
>>442
右マージン0にしてみたんですが変わりませんでした。
CSSﾑｽﾞｶｼ…
444:Name_Not_Found
09/01/18 20:51:42
float 指定しているのにwidth指定してないからじゃないの？
floatにはwidth必須。
445:Name_Not_Found
09/01/18 20:53:50
>>444
それは2.0
2.1ではもうwidthは不必要
446:Name_Not_Found
09/01/18 22:15:30
>>445
現実的には必須じゃね？
css2.1に対応してないブラウザのシェアが多すぎる。
447:Name_Not_Found
09/01/18 23:06:56 et4jyHhz
どっちにしろ指定しないとデザインむちゃくちゃになるだろ
448:Name_Not_Found
09/01/18 23:21:07
>>446
何を言ってるんだ
2.0基準なんてネスケ6だけで、IE6でさえ2.1の扱いだぞ
IEはバグなんだけどさｗｗｗ
449:Name_Not_Found
09/01/18 23:21:33
>>447
そんなのは内容による
450:Name_Not_Found
09/01/18 23:23:19 et4jyHhz
それはおまいがデザイン放棄してるからだよ
451:Name_Not_Found
09/01/18 23:41:29
>>449
おまえ逃げるなよＩＤ出せよコラ
452:Name_Not_Found
09/01/19 00:28:00
>>444
>>438で書いたのが中途半端でスイマセン。ここにレスするにあたって
要素を少なくしてシンプルにしたつもりだったんですがその際にｆｌｏａｔも消して
しまっていただけで、一応、指定はしていたんですが無理でした。
最終的にはclearfixの方法で解決しました。
有難うございました。
453:438
09/01/19 00:29:12
452＝438の私です。
454:Name_Not_Found
09/01/19 00:34:53
>>438みたいなヘッダぐらいなら、clearfix使わなくても
ulにemで高さ指定するとか、#headerにナビを加えた高さ指定するなりして
次の要素で普通にclearした方がいいんじゃね。
clearfixって見えないだけで、余計な要素が挿入されてることには変わりないんでしょ？
455:Name_Not_Found
09/01/19 00:36:57 RI41bZ/M
一般的なclearfixはCSSだけで完結する
456:438
09/01/19 00:45:44
>>454
有難うございます、教えて頂いた方法も明日試してみます。
457:Name_Not_Found
09/01/19 01:41:51
>>444=>>446=>>454なのかな…
もうちょっと自分が勉強してから来てくれないかな、スレを混乱させるだけだから