2017-06-06 10 views
0

でないときは、フォントや位置を変更しますが、私はそれを半分の画面サイズを作るときに、デフォルトのフォントにヘッダ(H1)が変化し、中央の代わりに左に揃えます。ここで見出しは、私はHTMLとCSSとフルスクリーンの見出しが表示さ罰金を使用してウェブサイトを作っていますフルスクリーン

は私のHTMLコードです:ここで

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
<title>Home page</title> 
<link type="text/css" rel="stylesheet" 
href="css/filesheet1.css"/> 
</head> 
<body> 
<nav> 
<ul> 
<li><a href="index.html">Home page</a></li> 
<li><a href="about us.html">About us</a></li> 
<li><a href="our songs.html">Our songs</a></li> 
<li><a href="see us play.html">See us play</a></li> 
<li><a href="Contact us.html">Contact us</a></li> 
<li><a href="merchandise.html">Merchandise</a></li> 
<li><a href="playing a concert.html">Playing a concert</a></li> 
</ul> 
</nav> 
<h1>Home</h1> 
</body> 
</html> 

は私のCSSコードは(私はそこにすべてを入れているこの問題を引き起こしていただきまし見当がつかないように多くがあるかどう申し訳ありません)です:

/* set sizing to border box method */ 
html { 
box-sizing: border-box; 
} 
*, *:before, *:after { 
box-sizing: inherit; 
} 
/* set maximum and minimum widths for the body and centre within the viewport */ 
body { 
text-align: center; 
border: solid; 
border-radius: 15px; 
border-color: #CACFD2; 
box-shadow: 0 0 100px 0 #888888; 
background-color: #CACFD2; 
font-family: 'Inconsolata', monospace; 
margin-left: auto; 
margin-right: auto; 
max-width: 1024px; 
min-width: 256px; 
padding-top: 8px; 
padding-bottom: 24px; 
padding-left: 24px; 
padding-right: 24px; 
} 
html, html body{ 
height: 100%; 
} 
html{ 
background-color: white; 
} 
/* header */ 
header{ 
} 
header p { 
float: left; 
font-size: 16px; 
font-weight: bold; 
margin-top: 0px; 
} 
header h1 { 
font-size: 16px; 
text-align: center; 
} 
/* the menu */ 
nav ul { 
text-align: center; 
list-style-type: none; 
background-color: none; 
border: none; 
font-family: 'Inconsolata', monospace; 
font-weight: 400; 
padding: 16px; 
} 
nav ul li { 
display: inline; 
border-right: 2px solid #111111; 
padding-right: 8px; 
padding-left: 8px; 
} 
nav ul li:last-child { 
border-right: none; 
} 
nav ul li a { 
text-decoration: none; 
color: #111111; 
} 
nav li.selected{ 
color: #606060; 
} 
nav ul li a:hover { 
font-weight: 900; 
} 
/* biographies */ 
section { 
background-color: #FFFFFF; 
margin-bottom: 24px; 
min-height: 320px; 
padding-left: 24px; 
padding-right: 24px; 
} 
/* the aside */ 
aside { 
} 
/* footer */ 
footer { 
} 
footer p.copyright { 
float: left; 
margin-top: 0px; 
} 
footer p.contact { 
text-align: right; 
} 

/* small images are set to 200px in height */ 
img.small { 
float: left; 
height: 200px; 
margin-bottom: 24px; 
margin-right: 24px; 
} 
/* medium images can be 50% of the container element’s width, up to 360px */ 
img.medium { 
max-width: 360x; 
width: 50%; 
} 
/* large images are 100% of the container element’s width */ 
img.large { 
width: 100%; 
} 
/* add the same style of border to the elements which are to have borders */ 
section, img { 
border: 2px solid #B1B1B1; 
border-radius: 16px; 
} 
/* the bits that are specific to a wide viewport (over 56em) */ 
@media{ 
min-width: 900px 
} 
article { 
float: left; 
width: 66%; 
} 
aside { 
float: left; 
padding-left: 24px; 
width: 34%; 
} 
footer { 
clear: both; 
} 
h1{ 
text-align: center; 
font-family: 'Inconsolata', monospace; 
} 

答えて

0

/* Styles go here */ 
 

 
/* set sizing to border box method */ 
 
html { 
 
box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
box-sizing: inherit; 
 
} 
 
/* set maximum and minimum widths for the body and centre within the viewport */ 
 
body { 
 
text-align: center; 
 
border: solid; 
 
border-radius: 15px; 
 
border-color: #CACFD2; 
 
box-shadow: 0 0 100px 0 #888888; 
 
background-color: #CACFD2; 
 
font-family: 'Inconsolata', monospace; 
 
margin-left: auto; 
 
margin-right: auto; 
 
max-width: 1024px; 
 
min-width: 256px; 
 
padding-top: 8px; 
 
padding-bottom: 24px; 
 
padding-left: 24px; 
 
padding-right: 24px; 
 
} 
 
html, html body{ 
 
height: 100%; 
 
} 
 
html{ 
 
background-color: white; 
 
} 
 
/* header */ 
 
header{ 
 
} 
 
header p { 
 
float: left; 
 
font-size: 16px; 
 
font-weight: bold; 
 
margin-top: 0px; 
 
} 
 
header h1 { 
 
font-size: 16px; 
 
text-align: center; 
 
} 
 
/* the menu */ 
 
nav ul { 
 
text-align: center; 
 
list-style-type: none; 
 
background-color: none; 
 
border: none; 
 
font-family: 'Inconsolata', monospace; 
 
font-weight: 400; 
 
padding: 16px; 
 
} 
 
nav ul li { 
 
display: inline; 
 
border-right: 2px solid #111111; 
 
padding-right: 8px; 
 
padding-left: 8px; 
 
} 
 
nav ul li:last-child { 
 
border-right: none; 
 
} 
 
nav ul li a { 
 
text-decoration: none; 
 
color: #111111; 
 
} 
 
nav li.selected{ 
 
color: #606060; 
 
} 
 
nav ul li a:hover { 
 
font-weight: 900; 
 
} 
 
/* biographies */ 
 
section { 
 
background-color: #FFFFFF; 
 
margin-bottom: 24px; 
 
min-height: 320px; 
 
padding-left: 24px; 
 
padding-right: 24px; 
 
} 
 
/* the aside */ 
 
aside { 
 
} 
 
/* footer */ 
 
footer { 
 
} 
 
footer p.copyright { 
 
float: left; 
 
margin-top: 0px; 
 
} 
 
footer p.contact { 
 
text-align: right; 
 
} 
 

 
/* small images are set to 200px in height */ 
 
img.small { 
 
float: left; 
 
height: 200px; 
 
margin-bottom: 24px; 
 
margin-right: 24px; 
 
} 
 
/* medium images can be 50% of the container element’s width, up to 360px */ 
 
img.medium { 
 
max-width: 360px; 
 
width: 50%; 
 
} 
 
/* large images are 100% of the container element’s width */ 
 
img.large { 
 
width: 100%; 
 
} 
 
/* add the same style of border to the elements which are to have borders */ 
 
section, img { 
 
border: 2px solid #B1B1B1; 
 
border-radius: 16px; 
 
} 
 
/* the bits that are specific to a wide viewport (over 56em) */ 
 
@media all and (min-width: 900px) { 
 

 
} 
 
article { 
 
float: left; 
 
width: 66%; 
 
} 
 
aside { 
 
float: left; 
 
padding-left: 24px; 
 
width: 34%; 
 
} 
 
footer { 
 
clear: both; 
 
} 
 
h1{ 
 
text-align: center; 
 
font-family: 'Inconsolata', monospace; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 
<title>Home page</title> 
 
<link type="text/css" rel="stylesheet" 
 
href="style.css"/> 
 
</head> 
 
<body> 
 
<nav> 
 
<ul> 
 
<li><a href="index.html">Home page</a></li> 
 
<li><a href="about us.html">About us</a></li> 
 
<li><a href="our songs.html">Our songs</a></li> 
 
<li><a href="see us play.html">See us play</a></li> 
 
<li><a href="Contact us.html">Contact us</a></li> 
 
<li><a href="merchandise.html">Merchandise</a></li> 
 
<li><a href="playing a concert.html">Playing a concert</a></li> 
 
</ul> 
 
</nav> 
 
<h1>Home</h1> 
 
</body> 
 
</html>

これが今、あなたのために働く必要があります。

+0

上記の通常のCSSではどういう意味ですか? – Qwertykey

+0

ただそれを 'h1 { text-align:center; font-family: 'Inconsolata'、モノスペース。 } '@mediaから取り出してそれを上に置いてください – joshsisley

+0

それはそれ自体が一番下にあります – Qwertykey

関連する問題