1
我一直在用php制作一个画廊。前段时间，我使用表格进行布局。它制定了超级。现在，不建议使用表格进行布局，并且不推荐使用表格（我不明白为什么，如果有人可以向我解释这个，谢谢）。所以，我试图从表格更改布局到div，我有很多问题（有人可以推荐一个很好的参考如何使用CSS来做出一个良好的布局？）。到目前为止，我管理这个：http://jsfiddle.net/hochvater/4DbUU/。我的第一个问题是：我如何让#panel_poze div显示在容器div的顶部，粘贴到#panel_albume（就像现在这样）？我不明白为什么#panel_albume与它粘贴到的div所包含的第三个div排成一行（#panel_albume）。我的第二个问题是：我不能把大桌子（你可以很容易地想象出div的结构如何看起来）放入一个容器div中，并保持原样......这仍然是考虑“弃用”还是不推荐？php画廊中的css布局
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 {
}
的画廊CODE：
<?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>
感谢您的时间投资在读这篇文章，任何想法，将不胜感激。
谢谢...我会尽力做到这一点，时刻......但尽管如此，我的第一个问题是没有回答:)非常感谢反正...我要开始现在就读 – 2013-03-18 13:26:23
@AngellumManaflow，欢迎您的光临！你的问题非常具体，并且以某种方式对未来的引用没有帮助，所以我更愿意引导你学习一些比投票下降和标志（在StackOverflow中推荐）好的东西。但是，无论如何，在这里调试这些特定的代码会很昂贵。所以玩得开心！ :) – 2013-03-18 13:33:30
嗯...不错960.gs但我没有看到它的相关性在我的情况... CSS技巧，我知道它...可能我会在那里发布的问题...锅板看起来也很有趣，但是我也没有看到与我的问题有关联......并且w3schools ...让我们只是说我开始用它们进行网络编程:) – 2013-03-18 13:52:33