いつもお世話になっております。
今、自社サイトを作成中です。
1)上記のところまでは作成したのですがheaderの文字を写真の上に下揃えでピタッとくっつけて表示させる方法がわからず困っております。
インターネットや本を購入し勉強をし調べているのですがCSSを使って下揃えできるのでしょうか?
それともやはり画像でないとできないのでしょうか?
HTMLの入力に不備があるのでしょうか?
2)同じく【NEW】と下の画像もピタッとくっつけて表示をしたいのですが色々とCSSの設定を変更しているのですができません。
初歩的な質問で申し訳ございませんが皆様のご指導をいただければとても助かります。
よろしくお願い致します。
Mac版CC2014を使っております。
@charset "UTF-8";
#container footer {
background-color: rgba(246,219,219,1.00);
text-align: center;
}
#container #main h2 {
color: rgba(249,6,10,1.00);
}
#container {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
color: #666666;
line-height: 150%;
font-family: Arial, Helvetica, sans-serif;
}
.newphoto {
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#container #new {
margin-left: auto;
margin-right: auto;
width: 960px;
}
#mainnav ul {
/* [disabled]margin-top: 0px; */
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
}
#mainnav a {
width: 120px;
display: block;
float: left;
text-align: right;
color: #000000;
text-decoration: none;
/* [disabled]height: 50px; */
vertical-align: 5px;
}
#mainnav {
float: left;
font-size: 14px;
line-height: 100%;
width: 480px;
height: 30px;
clear: none;
}
#container #header h1 {
float: left;
font-size: 24px;
color: #000000;
width: 480px;
/* [disabled]vertical-align: 20px; */
line-height: 100%;
height: 30px;
}
#container #header {
/* [disabled]vertical-align: text-bottom; */
width: 960px;
height: 30px;
/* [disabled]bottom: 0px; */
margin-bottom: 0px;
margin-left: auto;
padding-bottom: 0px;
margin-right: auto;
}
#container #new h3 {
color: #000000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 100%;
}
#container #main {
clear: both;
top: 0px;
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}