1

私はウェブデザインが初めてで、アートワークのサイトを構築しています。このフォト ギャラリーを適切に構築し、必要な場所に配置する方法に行き詰まっています。ギャラリーは、ギャラリー イメージのフレームとして機能する背景イメージと整列する必要があるため、完全に配置する必要があります。最終的に 4 つの異なる画面サイズ範囲に対応できるようにするために、% に基づいてこれを設計しました。これまでに持っているものをテストすると、さまざまなブラウザーにヒットするとバラバラになります。Dreamweaver のライブ ビューでは正常に動作しますが、任意のブラウザーでテストすると、背景画像が表示されないか、画像がページの左側に積み重なって表示され、画面を縮小してもまったく反応しません。 . 私が持っている 3 つの主な質問は次のとおりです。背景画像を表示し、ギャラリー画像を所定の位置に保持するにはどうすればよいですか? また、画面サイズが変更されたときに他の CSS ファイルを有効にするにはどうすればよいですか? しかし、どんな助けも大歓迎です。

コリン

ここにHTMLがあります

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
<title>Test</title>


<link rel"stylsheet" type="text/css" media="only screen and (min-width:769px;) and (max-width:1088px;)" href="../_css/large.css" />

<link rel"stylsheet" type="text/css" media="only screen and (min-width:449px;) and (max-width:768px;)" href="../_css/medium.css" />

<link rel"stylsheet" type="text/css" media="only screen and (min-width:252px;) and (max-width:448px;)" href="../_css/small.css" />

<link href="../_css/main_full.css" rel="stylesheet" type="text/css">


</head>

<body>

<div class="page_container">

        <div class="gallery_container">

                <a href="#"><img id="pos1" src="../_images/galleryimages_full/sunlight_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos2" src="../_images/galleryimages_full/clownflat_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos3" src="../_images/galleryimages_full/goldensun_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos4" src="../_images/galleryimages_full/monstertheatre_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos5" src="../_images/galleryimages_full/home_smallvector.jpg" width="250" height="194" alt="© C.M.B"></a>
                <a href="#"><img id="pos6" src="../_images/galleryimages_full/wishingstargallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos7" src="../_images/galleryimages_full/cozycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos8" src="../_images/galleryimages_full/coffeetable_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos9" src="../_images/galleryimages_full/breakaway_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos10" src="../_images/galleryimages_full/happyns_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos11" src="../_images/galleryimages_full/boymeetsgirl_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos12" src="../_images/galleryimages_full/sadbabygallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos13" src="../_images/galleryimages_full/salvation_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos14" src="../_images/galleryimages_full/orangestart_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos15" src="../_images/galleryimages_full/spaceobjectsgallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos16" src="../_images/galleryimages_full/clown_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos17" src="../_images/galleryimages_full/ponycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos18" src="../_images/galleryimages_full/pacha_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos19" src="../_images/galleryimages_full/goldstorm_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos20" src="../_images/galleryimages_full/qerogallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
                <a href="#"><img id="pos21" src="../_images/galleryimages_full/theblues_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>

        </div>

</div>


</body>
</html>

これがメインの CSS です。他の 3 つのスタイル シートは、まだ作成していないメディア クエリです。

@charset "UTF-8";
/* CSS Document */

/* Layout (global rules for fullsize) */

.page_container {
width: 1280px;
height: 3000px;
background-image: url(../_page_components/gallery/gallery_full.jpg);
margin: 0% auto 0% auto;
position: relative;
/*padding-top: 19.541%; 248 pixels*/
}

.gallery_container {
width: 66.7%;  /* 853 pixels */
height: 55.3%; /* 1659 pixels */
/*margin: 19.541% auto 0% auto; - equal to 248px*/
padding: 19.4% 0% 0% 0%;
margin: 0% auto 0% auto;
}

#pos1 {  /* Top Left Corner*/
padding-left: 0.3%;
padding-right: 4.91%;   
padding-bottom: 5.3%;
}

#pos2 {  /* Middle top row */
padding-left: 0.42%;    
padding-bottom: 5.3%;
}

#pos3 {  /* Topr Right Corner */
padding-left: 5.35%;
padding-bottom: 5.3%;
}

#pos4 {  /* The rest of the images/rows follow the same positioning pattern */
padding-left: 0.4%;
padding-right: 4.75%;   
padding-bottom: 5.3%;
}

#pos5 {
padding-left: 0.5%; 
padding-bottom: 5.3%;
}

#pos6 {
padding-left: 5.15%;
padding-bottom: 5.3%;
padding-right: 0.2%;
}

#pos7 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.3%;
}

#pos8 {
padding-left: 0.5%; 
padding-bottom: 5.3%;
}

#pos9 {
padding-left: 5.25%;
padding-bottom: 5.3%;
 }

#pos10 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.3%;
}

#pos11 {
padding-left: 0.5%; 
padding-bottom: 5.3%;
}

#pos12 {
padding-left: 5.25%;
padding-bottom: 5.3%;
}

#pos13 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.4%;
}

#pos14 {
padding-left: 0.5%; 
padding-bottom: 5.4%;
}

#pos15 {
padding-left: 5.25%;
padding-bottom: 5.4%;
}

#pos16 {
padding-left: 0.5%;
padding-right: 4.55%;   
padding-bottom: 5.6%;
}

#pos17 {
padding-left: 0.5%; 
padding-bottom: 5.6%;
}

#pos18 {
padding-left: 5.25%;
padding-bottom: 5.6%;
}

#pos19 {
padding-left: 0.5%;
padding-right: 4.55%;   

}

#pos20 {
padding-left: 0.5%; 

}

#pos21 {
padding-left: 5.25%;

 }

「大」画面用の CSS メディア クエリ ファイル

@charset "UTF-8";
/* CSS Document */
/* Layout Large Screens*/



.page_container {
width: 1088px;
height: 2550px;
margin: 0% auto 0% auto;
background-image: url(../_page_components/gallery/gallery_large.jpg);
}

「中」画面用の CSS メディア クエリ ファイル

@charset "UTF-8";
/* CSS Document */
/* Layout Medium Screens */

.page_container {
width: 768px;
height: 1800px;
margin: 0% auto 0% auto;
background-image: url(../_page_components/gallery/gallery_medium.jpg);
}

「小さい」画面用の CSS メディア クエリ ファイル

@charset "UTF-8";
/* CSS Document */
/* Layout Small Screens */

.page_container {
width: 448px;
height: 1050px;
margin: 0% auto 0% auto;
background-image: url(../_page_components/gallery/gallery_small.jpg);
}
4

1 に答える 1

0
<div id="bgpic">
  <img src="../_page_components/gallery/gallery_full.jpg" width="100%" height="100%" />
</div

<div class="page_container">
</div> 

#bgpic {
position:fixed;
width:100%;
height:100%;
}

#bgpic img {
 width:100%;
 height:100%;
}
于 2012-12-04T05:25:02.360 に答える