私はphpで作られたギャラリーに取り組んできました。少し前に、テーブルを使ってレイアウトを作成しました。それは超うまくいきました。現在、レイアウトにテーブルを使用することは推奨されておらず、一種の「非推奨」です（理由がわかりません。誰かがこれを説明してくれたら、ありがとうございます）。だから、私はレイアウトをテーブルからdivに変更しようとしていますが、多くの問題があります（cssを使用して適切なレイアウトを作成する方法についての良いリファレンスを誰かが勧めることができますか？）。これまで私はこれを管理しました：http：//jsfiddle.net/hochvater/4DbUU/。私の最初の質問はこれです：＃panel_poze divをコンテナdivの上部に表示し、＃panel_albumeに接着するにはどうすればよいですか（現在のように）？#panel_albumeが、接着されているdiv（#panel_albume）に含まれる3番目のdivと並んでいる理由がわかりません。私の2番目の質問はこれです：大きなテーブル（divの構造によってどのように見えるかを簡単に想像できます）をコンテナdivに入れて、そのままにしておくことはできません...これはまだですか？ 「非推奨」と見なされるか、推奨されませんか？
CSSコード：
body {
background-color: black;
color: white;
}
@font-face {
font-family:"john_handy";
src: url("john_handy.eot");
src: local("¢"), url("john_handy.woff") format("woff"), url("john_handy.TTF") format("opentype"), url("john_handy.svg#john_handy") format("svg");
}
@font-face {
font-family:"bradley_hand";
src: url("bradley_hand.eot");
src: local("¢"), url("bradley_hand.woff") format("woff"), url("bradley_hand.TTF") format("opentype"), url("bradley_hand.svg#bradley_hand") format("svg");
}
a:link {
color:white;
}
/* unvisited link */
a:visited {
color:white;
}
/* visited link */
a:hover {
color:red;
}
/* mouse over link */
a:active {
color:blue;
}
/* selected link */
.fonty {
text-align:center;
font: italic 30px john_handy, serif;
}
a.fonty {
font-style: normal;
font-size:20px;
}
#pp {
margin: 15% auto;
max-width:80%;
min-width:850px;
text-align: center;
white-space:nowrap;
}
.sec {
position: static;
margin: 0% 4%;
max-width: 20%;
min-width: 200px;
display: inline-block;
}
.imageOff {
border: 3px solid transparent;
margin: auto;
}
.imageOn {
border: 3px solid red;
opacity: 0.7;
filter: alpha(opacity=70);
margin: auto;
}
.selected {
padding: 2px;
border: 1px solid red;
}
.submit {
/*margin: 0;*/
border: none;
/*padding: 0;*/
background: black;
font:normal 20px john_handy, serif;
color:white;
}
.subsel {
color:red;
}
.submit:hover {
color:red;
}
.poze_albume {
border: 1px solid red;
height: 250px;
width: 200px;
}
#panel_poze {
border: 1px solid blue;
width: 70%;
min-width: 400px;
display: inline-block;
height: 100px;
}
#panel_albume {
border: 1px solid yellow;
display:inline-block;
}
#container {
text-align: center;
width: 100%;
border: 1px solid white;
min-width: 700px;
}
.album {
}
ギャラリーコード：
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./zastyle.css" />
</head>
<body><!-- oncontextmenu="return false;"> -->
<h1 class="fonty">Portofolio</h1>
<?php
if (!isset($_POST['restart']))
{
?>
<div id="pp">
<div class="sec ">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./studio/photoshoot.JPG" title="Studio Photography" alt="Studio Photography" />
<input type="hidden" name="album" value="studio" />
<input type="hidden" name="restart" value="1"/>
<br />
<input type="submit" class="submit" value="Studio Photography" />
</form>
</div>
<div class="sec ">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./outdoor_lifestyle/lifestyle.jpg" title="Outdoor and Lifestyle Photography" alt="Outdoor and Lifestyle Photography" />
<input type="hidden" name="album" value="outdoor" />
<input type="hidden" name="restart" value="1"/>
<br />
<input type="submit" class="submit" value="Outdoor and Lifestyle" />
</form>
</div>
<div class="sec " >
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./landscapes/landscapes.jpg" title="Landscapes" alt="Landscapes" class="album" />
<input type="hidden" name="album" value="landscapes" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit" value="Landscapes" />
</form>
</div>
</form>
</div>
<?php //require("za_menu.php"); ?>
<?php
}
if (isset($_POST['restart'])&&$_POST['restart']==1){
?>
<div id="container">
<div id="panel_albume">
<div class="poze_albume">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff <?php
if($_POST['album']=='studio') echo 'selected';
?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
if($_POST['album']=='studio') echo 'selected';
?>'" type="image" src="./studio/photoshoot.JPG" title="Studio Photography" alt="Studio Photography" />
<input type="hidden" name="album" value="studio" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit <?php
if($_POST['album']=='studio') echo 'subsel';
?>" value="Studio Photography" />
</form>
</div>
<div class="poze_albume">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff <?php
if($_POST['album']=='outdoor') echo 'selected';
?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
if($_POST['album']=='outdoor') echo 'selected';
?>'" type="image" src="./outdoor_lifestyle/lifestyle.jpg" title="Outdoor and Lifestyle Photography" alt="Outdoor and Lifestyle Photography" />
<input type="hidden" name="album" value="outdoor" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit <?php
if($_POST['album']=='outdoor') echo 'subsel';
?>" value="Outdoor and Lifestyle" />
</form>
</div>
<div class="poze_albume">
<form action="./galerie.php" method="post" enctype="multipart/form-data">
<input class="imageOff <?php
if($_POST['album']=='landscapes') echo 'selected';
?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
if($_POST['album']=='landscapes') echo 'selected';
?>'" type="image" src="./landscapes/landscapes.jpg" title="Landscapes" alt="Landscapes" class="album"/>
<input type="hidden" name="album" value="landscapes" />
<input type="hidden" name="restart" value="1" />
<br />
<input type="submit" class="submit <?php
if($_POST['album']=='landscapes') echo 'subsel';
?>" value="Landscapes" />
</form>
</div>
</div>
<div id="panel_poze"></div>
</div>
<?php }
session_destroy();
?>
</body>
</html>
これを読むことに時間を割いていただきありがとうございます。どんなアイデアでもいただければ幸いです。