初めて投稿させて頂きます。
cssで、一段組みのサイト全体の中央揃えと画像、
テキストの左揃えの箇所が分かりません。
サイト全体を中央揃えにし、全体の幅960px、
logo.pngを幅の一番左に、
「CHEESE DEVELOPMENT</br>
GROWTH CEESE</br>
CHEESE PERSPECTIVE<br>
CHEESE GENERATOR」
という文言を幅の一番右(logo.pngと同じ高さで)に配置したいと考えておりますが、
現状は文字の部分が右側に配置されません。
htmlは以下のように記載しております。
html
1<body> 2 <div id="wrap"> 3 <div><img src="logo.png"></div> 4 <div class="header">CHEESE DEVELOPMENT</br>GROWTH CEESE</br>CHEESE PERSPECTIVE<br>CHEESE GENERATOR</div> 5 <div><img src="bg-cheese.jpg"></div> 6 <div><img src="catch.png"></div>``` 7 8#cssは以下のように記載しております。 9```body { 10 line-height: 1; 11} 12article, aside, details, figcaption, figure, 13footer, header, hgroup, menu, nav, section { 14 display: block; 15} 16 17header{ 18 text-align: right; 19 float: right; 20} 21 22 23nav ul, 24ul { 25 list-style: none; 26} 27 28blockquote, q { 29 quotes: none; 30} 31 32blockquote:before, blockquote:after, 33q:before, q:after { 34 content: ''; 35 content: none; 36} 37 38a { 39 margin: 0; 40 padding: 0; 41 color:#000; 42 text-decoration: none; 43 vertical-align: baseline; 44 background: transparent; 45} 46 47/* change colours to suit your needs */ 48ins { 49 background-color: #ff9; 50 color: #000; 51 text-decoration: none; 52} 53 54merit{ 55 float 56} 57 58/* change colours to suit your needs */ 59mark { 60 background-color: #ff9; 61 color: #000; 62 font-style: italic; 63 font-weight: bold; 64} 65 66del { 67 text-decoration: line-through; 68} 69 70abbr[title], dfn[title] { 71 border-bottom: 1px dotted; 72 cursor: help; 73} 74 75dl { 76 background-color:; 77} 78 79dl { 80 width: 230px; 81 height: 150px; 82 margin: 0auto; 83} 84body{ 85 width:100%; /*ページ全体の幅は100%と指定する*/ 86 text-align:center;/*ページ全体を中央揃えにする*/ 87} 88#wrap{ 89 width: 960px; /*全体の幅を指定する*/ 90 margin: 0 auto; /*マージンの指定をする、ブラウザ対策*/ 91 text-align:left; /*全体を左揃えにする。*/ 92} 93.aa { 94 float:left; 95} 96header{ 97 float:right; 98} 99table { 100 border-collapse: collapse; 101 border-spacing: 0; 102} 103 104/* change border colour to suit your needs */ 105hr { 106 display: block; 107 height: 1px; 108 border: 0; 109 border-top: 1px solid #cccccc; 110 margin: 1em 0; 111 padding: 0; 112} 113 114input, select { 115 vertical-align: middle; 116} 117 118 119 120*:first-child + html body { 121 overflow: hidden; 122} 123 124* html body { 125 overflow: hidden; 126} 127 128input, select, textarea { 129 margin: 0px; 130 color: #727172; 131 border: solid 1px #bababa; 132 font-weight: normal; 133 padding: 0px 2px; 134} 135 136table { 137 border-collapse: collapse; 138 border-spacing: 0; 139} 140 141img { 142 border: 0px; 143 display: inline; 144} 145 146*:first-child + html img { 147 display: inline !important; 148} 149 150* html img { 151 display: inline !important; 152} 153 154a:focus { 155 outline: none; 156} 157 158sup { 159 vertical-align: top; 160} 161 162sub { 163 font-size: x-small; 164 vertical-align: text-bottom; 165 padding-right: 3px; 166} 167 168.clearfix:after { 169 visibility: hidden; 170 display: block; 171 font-size: 0; 172 content: " "; 173 clear: both; 174 height: 0; 175 } 176* html .clearfix { zoom: 1; } /* IE6 */ 177*:first-child+html .clearfix { zoom: 1; } /* IE7 */
お知恵をお貸し頂けますと幸いです。
何卒よろしくお願いします。