Why wont this position properly using css?
This should be simple, it is just three div tags inside of another div tag. The three div tags should just line up in a row. Instead they are lined up vertically. Nothing I do seems to fix it.
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
function NameChange($num) {
$card = $_POST["state".$num];
$spaces = " ";
$underscore = "_";
$imagename = str_replace($spaces, $underscore, $card);
return $imagename;
}
?>
<div id="main">
<div id="3c1">
<?php
echo '<script type="text/javascript">
function myPopup1() {
window.open( "images/'.NameChange(1).'.jpg", "myWindow",
"status = 1, height = 691, width = 468, resizable = 0" )
}
</script>';
echo '<script type="text/javascript">
function myPopup2() {
window.open( "images/'.NameChange(2).'.jpg", "myWindow",
"status = 1, height = 691, width = 468, resizable = 0" )
}
</script>';
echo '<script type="text/javascript">
function myPopup3() {
window.open( "images/'.NameChange(3).'.jpg", "myWindow",
"status = 1, height = 691, width = 468, resizable = 0" )
}
</script>';
echo '<img src=images/'.NameChange(1).'_tn.jpg />';
echo "<br />";
echo '<input type="button" onClick="myPopup1()" value="Image">';
echo '<script type="text/javascript">
function myPopup1t() {
window.open( "/'.$_POST[state1].'.html", "myWindow",
"status = 1, height = 691, width = 468, resizable = 0" )
}
</script>';
echo '<input type="button" onClick="myPopup1t()" value="Meaning">';
?>
</div>
<div id="3c2">
<?php
echo '<img src=images/'.NameChange(2).'_tn.jpg />';
echo "<br />";
ec开发者_StackOverflow社区ho '<input type="button" onClick="myPopup2()" value="Image">';
echo '<script type="text/javascript">
function myPopup2t() {
window.open( "/'.$_POST[state2].'.html", "myWindow",
"status = 1, height = 691, width = 468, resizable = 0" )
}
</script>';
echo '<input type="button" onClick="myPopup2t()" value="Meaning">';
?>
</div>
<div id="3c3">
<?php
echo '<img src=images/'.NameChange(3).'_tn.jpg />';
echo "<br />";
echo '<input type="button" onClick="myPopup3()" value="Image">';
echo '<script type="text/javascript">
function myPopup3t() {
window.open( "/'.$_POST[state3].'.html", "myWindow",
"status = 1, height = 691, width = 468, resizable = 0" )
}
</script>';
echo '<input type="button" onClick="myPopup3t()" value="Meaning">';
?>
</div>
</div>
</body>
And the CSS
#main {
width: 808px;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#main #3c1 {
height: 200px;
width: 200px;
display: inline;
}
#main #3c2 {
height: 200px;
width: 200px;
display: inline;
}
#main #3c3 {
height: 200px;
width: 200px;
display: inline;
}
If display:inline is not doing the right thing thing you can float the divs.
<div>
<div style="float:left">stuff</div>
<div style="float:left">stuff</div>
<div style="float:left">stuff</div>
<br style="clear:both;"/>
</div>
The id's cannot start with numbers. You cannot set height and width (among other attributes) on inline elements. Use display:inline-block for that. Also use a single class if all 3 divs will have the exact same CSS rules.
Best and easiest approach - User Firebug in conjunction with Firefox and edit/adjust the styling using Firebug. This will give you dynamic preview and you'll get the correct styling in no time.
Agree with Michael's response though regarding ID's starting with numbers. You should fix that and check out the results.
加载中,请稍侯......
精彩评论