①1列目にnavメニューを置き、2列目に画像のみ中央に置きたいですが
出来ません。
②あと、navのタブにかかっているのも、多少スペース開けたいです。
margin-topとmargin-leftを使えば見た目上は、ずれますが、
今後の為に、margin 0 auto や、text-alignで揃えたいです。
text-alignは、ブロック要素にしか適用出来ないは調べました。
イメージ画像のサイズは、749*782でした。
聞くのも恥ずかしいんですが、すごく基礎的なところが出来ていないので
教えてください。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/base.css" type="text/css"> 6</head> 7<body> 8 <div id="wrap"> 9 <!-- グローバルナビゲーション部分 --> 10<nav id="gnav"> 11 <ul class="inner"> 12 <li><a href="#">はじめに</a></li> 13 <li><a href="#">どこの海?</a></li> 14 <li><a href="#">海辺の町の一口メモ</a></li> 15 </ul> 16</nav> 17<div class="clear"></div> 18 <div class="mainphoto"><img src="photo/sky.jpg"> 19 </div> 20</body> 21</html>
css
1@charset "utf-8"; 2 3html, body, div, span, applet, object, iframe, 4h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5a, abbr, acronym, address, big, cite, code, 6del, dfn, em, img, ins, kbd, q, s, samp, 7small, strike, strong, sub, sup, tt, var, 8b, u, i, center, 9dl, dt, dd, ol, ul, li, 10fieldset, form, label, legend, 11table, caption, tbody, tfoot, thead, tr, th, td, 12article, aside, canvas, details, embed, 13figure, figcaption, footer, header, main, 14menu, nav, output, ruby, section, summary, 15time, mark, audio, video{ 16 margin:0; 17 padding:0; 18 border: 0; 19 font-size: 100%; 20} 21#wrap{ 22 width:800px; 23 height: 800px; 24} 25/* リストマーカーを非表示 */ 26ul{ 27 list-style-type:none; 28} 29/* デフォルトリンク色の設定 */ 30a{ 31 color:#00C4AB; 32} 33a:hover{ 34 color:#CCE739; 35} 36 37/* グローバルナビゲーション 38---------------------------*/ 39#gnav{ 40 background: #6633FF ; 41 margin-left: 100px; 42} 43#gnav ul{ 44 overflow: hidden; 45} 46#gnav li{ 47 float: left; 48 width: 195px; 49 border-right: #fff 1px solid; 50} 51#gnav li:first-child{ 52 width: 153px; 53 border-left: #fff 1px solid; 54} 55#gnav a{ 56 display: block; 57 padding: 10px 0; 58 text-align: center; 59 text-decoration: none; 60 color: #fff; 61} 62#gnav a:hover{ 63 color:#000; 64 background: #FFFF99; 65} 66.mainphoto{ 67 opacity: 0.3; 68 margin 65px auto; 69} 70.clear{ 71 clear:both; 72} 73
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/06 23:09