0
google chromeとウィンドウリサイザーを使用しています。 レスポンシブウェブサイトを作成しました。モバイルはまず480pxから1366pxのすべての解像度で正常に動作しますが、2つの要素は表示されません1280px、ディスプレイ罰金他のすべて、サイトの写真とCSSメディアクエリで1つの要素が表示されない1280px
70％が480PX解像度で作成された参照、私はその後1280px
見るためにそれを追加する前に、メディアクエリ1366pxに有名人のサブメニューやコンテンツを追加しました私は最初に@mediaの画面を使用していましたが、@mediaのすべての画面は、@mediaのみの画面になりました）
http://s1305.photobucket.com/user/dorian61/library/?view=recent&page=1
**CSS**
img, object, embed, video{
max-width:100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
#header{
clear: none;
width: 97%;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 98%;
padding: 1%;
}
/*Navigation menu*/
#horznav {
clear: both;
display: block;
width: 97%;
padding: 1%;
margin-left: auto;
margin-right: auto;
background-color: #080829;
}
#horznav a {
text-decoration: none;
color: #FFFFFF;
padding: 0 10px ;
margin-left: auto;
margin-right: auto;
}
#horznav a:hover {
color: #5f9ea0;
}
/*End of Navigation menu*/
/*aside*/
#aside_container{
width:100%;
}
h3{
color: #ffffff;
}
.news_header_1,.news_header,.news_header_3{
clear: both;
width: 97%;
padding: 1%;
margin-top:5px;
height:50px;
text-align: center;
background-color:#080829 ;
margin-left: auto;
margin-right: auto;
}
.picture_box {
width: 95%;
padding: 2%;
}
#News1a,#News2,#News3 {
width: 97%;
padding: 1%;
margin-left: auto;
margin-right: auto;
background-color: #080829;
margin-top:5px ;
}
/*End of aside*/
/*World news*/
#world_news{
display: block;
clear: none;
width: 97%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding:1%;
color: #080829;
border: solid 1px #5f9ea0;
margin-top:5px ;
}
#News_extra,#_first{
display: none;
}
#mark_1{
margin-top:10px;
}
/*End of world news*/
footer {
display: block;
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #080829;
color: white;
text-align: center;
}
/*Iphone*/
@media screen and (min-width: 640px) {
.nav_p{
width: 75%;
margin-left: auto;
margin-right: auto;
}
#News_extra,#_first{
display: none;
}
}
/*Tablets*/
@media only screen and (min-width: 768px) {
.nav_p{
width: 65%;
margin-left: auto;
margin-right: auto;
}
#News_extra,#_first{
display: none;
}
}
/*Medium screens*/
@media only screen and (min-width: 1024px){
#horznav{
width: 98%;
}
#aside_container{
float: right;
clear: none;
width: 40%;
}
.nav_p {
width: 45%;
margin-left: auto;
margin-right: auto;
}
#world_news{
clear: none;
float: left;
width: 57%;
}
}
/*Netbook*/
@media only screen and (min-width: 1280px) {
.nav_p {
margin-left: auto;
margin-right: auto;
}
#News_extra{
display: block;
float: left;
width:57%;
height: 30px;
background-color: #080829;
color: #ffffff;
margin-top: 5px;
}
#_first{
display: block;
float: left;
width: 57%;
padding:1%;
height:325px;
margin-top: 5px;
background-color:#080829;
color: #ffffff;
}
}
/*Desktop screens*/
@media only screen and (min-width:1366px) {
.nav_p {
width: 35%;
margin-left: auto;
margin-right: auto;
}
#News_extra {
float: left;
width: 59%;
height: 50px;
display: block;
background-color: #080829;
color: #ffffff;
margin-top: 5px;
}
#_first {
display: block;
float: left;
width: 57%;
padding: 1%;
height: 285px;
margin-top: 5px;
background-color: #080829;
color: #ffffff;
}
@media only screen and (min-width: 1440px) {
#News_extra {
float: left;
width: 59%;
height: 50px;
display: block;
background-color: #080829;
color: #ffffff;
margin-top: 5px;
}
#_first {
display: block;
float: left;
width: 57%;
padding: 1%;
height: 335px;
margin-top: 5px;
background-color: #080829;
color: #ffffff;
}
}
}HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset= "utf-8">
<meta name="descripton" content="Everything you wanted to learn about World News"/>
<meta name= "keywords" content="sport, news, politics, current affairs, music"/>
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--end of meta news-->
<base href="index.html"/>
<link href="Newscorp.css" rel="stylesheet" type="text/css"/>
<title>News</title>
</head>
<!--welcome message-->
<body onload = "alert ('hello and welcome')">
<!--welcome message-->
<noscript>please enable javascript</noscript>
<div id="gridContainer clearfix">
<header>
<img id="header" src="jpg/headone.jpg">
</header>
<!--Navigation menu-->
<nav id="horznav">
<p class="nav_p">
<a href = http://www.bing.com>Home</a>
<a href = http://www.aol.com>Products</a>
<a href = http://www.bbc.co.uk>Abouts us</a>
<a href = http://www.google.com>Info Mania</a>
<a href = http://www.yahoo.com>Contact Us</a>
</p>
</nav>
<!--End of Navigation menu-->
<!--aside-->
<div id="aside_container">
<div class="news_header_1"> <h3>Man United Vs Liverpool</h3></div>
<aside id="News1a">
<a id= "manulive" title ="A Game They Can't Afford To Lose, Click For More Info" href="http://www.bbc.co.uk/sport/0/football/34215789">
<img class ="picture_box" src="jpg/manulive.jpg"/></a>
</aside>
<div class="news_header"> <h3>The Blind Hiker</h3></div>
<aside id="News2">
<a class= "blind_hiker" title ="The Blind Hiker, Click For More Info" href="http://www.bbc.co.uk/news/blogs-ouch-34186187">
<img class ="picture_box" src="jpg/blind_hiker.jpg"/></a>
</aside>
<div class="news_header_3"> <h3>Matt Damon in The Martian</h3></div>
<aside id="News3">
<a class= "ava" title ="AI fact or Fiction, Click For More Info" href="http://variety.com/2015/film/festivals/toronto-film-review-matt-damon-in-the-martian-1201590528/">
<img class ="picture_box" src="jpg/the_martian.jpg"/></a>
</aside>
</div>
<!--Main content World news-->
<main id="world_news">
<h2>Shares in China</h2>
<p>Chinese shares have closed lower despite a fresh rate cut by the central bank.
The mainland's benchmark Shanghai Composite fell 1.27% to 2,927.29, after veering in and out of negative territory.
It had fallen about 16% this week, rocking global markets.
On Tuesday, China's central bank cut its key lending rate by 0.25 percentage points to 4.6% in a bid to calm stock
markets after the past days' turmoil.
The dramatic losses and volatility in China have shattered investor confidence and led to sharp falls in Asia and the US over the past days.
European markets were down by about 1% in morning trading on Wednesday, after rallying on Tuesday.
The interest rate cut was the fifth by the People's Bank of China since November last year. </p>
<div class =line_seperator"></div>
<div class="h_2">
<h2>In pictures: Artists take over Ghana's streets</h2>
<p>1st November 2015</p>
<p>The streets of Ghana's capital have been alive with artistic talent, from photography and graffiti to live music
and DJ sets, says photographer Nana Kofi Acquah, who joined the crowds enjoying a four-day cultural festival:</p>
<p>More than 200 artists and performers took part. This performance piece, called African Resurrect, provided some high-concept food for thought. </p>
</div>
<div class="h_2">
<h2>Analysis: Robert Peston, BBC business</h2>
<p>In some ways I thought yesterday's events on markets were if anything more disturbing than Monday's global rout.
Because if share-price gains could not hold after the significant monetary easing by China's central bank, then mistrust
about the true state of the world's second largest economy (actually the number-one economy on the purchasing-power-parity
measure of GDP) has become very pronounced indeed.
And another thing, the Chinese interest rate cuts will exacerbate the phenomenon that has caused so much stress in so many
different global markets, from commodities, to foreign exchange, to stocks and bond</p>
</div>
<div class="h_2">
<h2>Migrant crisis: In Mainland Europe</h2>
<p>1st November 2015</p>
<p>Hundreds of migrants have been protesting outside a major railway station in the Hungarian capital after police
sealed off the terminal to stop them travelling through the EU.
<p>Government spokesman Zoltan Kovacs defended the closure, saying Hungary was trying to
enforce EU law.</p>
</div>
</main>
<section id ="News_extra"><h2>Celebrity News</h2></section>
<section id ="_first">
<h3>Seven Things Lady Gaga's New Album Needs To Deliver</h3>
<p>The next few months are make or break for Lady Gaga. Poised for the release of her
fifth studio album, the singer knows she has a lot to prove following, what can
only be described as, a rocky few years. Once the biggest popstar in the world
with more number ones and awards than you could shake a disco stick at, the wheels
fell off after the release of her last album Artpop in 2013.
<p>Ashley Percival[Entertainment Reporter, The Huffington Post UK]</p>
<hr>
<h3>Join the Revolution!</h3>
<p>The industry is changing, slowly, and at last consumers are starting to demand
change - especially through glorious campaigns like #FashRev and #WhoMadeYourClothes.
</section>
<marquee id="mark_1"> Latest News: <a id="uk_ref" href="http://www.bbc.co.uk">UK Referendum, this autumn________Sport: Neymar on the move to Man United
_____Business News: UK heading back into recession</a></marquee>
<!-- Footer -->
<footer><p>(c) 2010 The Example company</p></footer>
<!-- End of footer-->
</div>
</body>
</html>
あなたの質問はCSSとほとんど関係がありますが、あなたのHTMLは投稿済みです。これはあまり役に立ちません。 – JDB
質問にコードを追加するときにCSSとHTMLを分解して、質問内でコードを実行することができます。それはコミュニティがあなたを助けるのに役立ちます。 –