0

どうやってこれをジャッキアップしたのか完全にはわかりません。

http://pretty-senshi.com

あれを見てみると、左のアイテムと右のアイテムがあるところで、右のアイテムがなぜかはみ出していて、何か間違っていると思います。または、私のコーディング/cssがうまくいっていないのかもしれません. とにかくコーディングについて完全にはわかりません. 下記参照。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><br />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>Pretty Senshi - Sailor Moon  </title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" 
href="http://pretty-senshi.com/log/wp-content/themes/BLANK-Theme/style.css"      
type="text/css" />
<link rel="pingback" href="http://pretty-senshi.com/log/xmlrpc.php" />

</head>

<body class="home blog logged-in admin-bar">
<body>

<div id="container">

<div id="rightHalf"></div>
<div style="text-align: center;"><caption>
<img src="http://pretty-senshi.com/images/design.png"  alt="text" id="picture">
</caption></div>

<div id="wrapper"><div id="leftcolumn">
<div class="headernav">Navigation</div>
<a href="about.php">About Us<br></a>
<a href="gallery.php">Gallery<br></a>
<a href="links.php">Links In/Out</a><br>
</div>

<div id="content">
<div class="post-1 post type-post status-publish 
format-standard hentry category-uncategorized" id="post-1"></div>
<div class="header">Welcome</div>
<div class="entry">
<p>The site isn&#8217;t ready yet. This site is not ONLY dedicated to 
Sailor Moon but to all anime.</p>

<div id="commentbar">
<div class="left">left stuff</div> 
<div class="right">right stuff</div></div>

</div>

<div id="footer"></div>

</body>

</html>

CSS は次のとおりです。

/*   
Theme Name: Pretty Senshi
Theme URI: http://pretty-senshi.com
Description: 
Author: Megan Riffey
Author URI: http://hateyourway.org
Version: 1
*/

body {background: url(http://pretty-senshi.com/images/sideone.png);
   background-repeat:repeat-x;background-color: #fcefd8;
   margin-top:0px;line-height: 20px;font-size: 10.5pt; 
   font-family: Tahoma;color:#998574;}

div#container {
    width:100%;z-index: -1;}

   .header {font-weight: bold;
    font-size: 14px;
    color: #D4556A;
    FONT-FAMILY: verdana;
    text-align: justify;
    letter-spacing: 0px;
    line-height: 25px;
    background:  url(http://pretty-senshi.com/images/header.png) left no-repeat;
    padding-right:3px;
    padding-left: 10px;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align:center;}

.headernav {font-weight: bold;
    font-size: 13px;
    color: #D4556A;
    FONT-FAMILY: verdana;
    text-align: justify;
    letter-spacing: 0px;
    line-height: 25px;
    background:  url(http://pretty-senshi.com/images/header.png) left no-repeat;
    padding-right:20px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align:right;}

.header:first-letter {color:#b970be;}

.headernav:first-letter {color:#b970be;}

div#picture {z-index: -1;width:780px;margin: 0 auto;text-align:center;}

#rightHalf {
   background: url(http://pretty-senshi.com/images/sidetwo.png);
   background-repeat:repeat-x;
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
   z-index: -1;}

p {padding: 10px;z-index: 1;}

#wrapper {position:relative;
    margin:0 auto;
    width: 650px;
    height:100%;}

#content {
    float: right;
    text-align:justify;margin-top:-80px;
    width: 440px;z-index: 999;height:100%;}

#leftcolumn {position:absolute;
    text-align:justify;
    width: 200px;margin-top:-80px;
    float: left;z-index: 999;height:100%;}

#commentbar {width:100%;padding:10px;}

.left {float:left; width:50%;} 

.right {float:right; width:50%;text-align:right;}

A:link, A:visited, A:active {
    color:#175f8b;
    text-decoration:none;
    text-transform:uppercase;
    font-size: 9pt;
    font-weight:bold;}

A:hover{
    color:#d76b92;
    text-decoration:none; 
    text-transform:uppercase;
    cursor:default; 
    border-bottom: 1px solid #7d8f9a;
    font-weight:bold;}

#date
    {font:10pt "Century Gothic", sans-serif;
    border-top:2px solid #d4aabc;
    margin-top:10px;
    color:#7ea558;
    text-align:right;
    font-weight:bold;
    text-transform:uppercase;}


div.comment a {
    width:100px
    float:left;
    height:22px;
    background-color:#72a2c6;
    text-align:center;
    display:block;
    letter-spacing:0px;
    text-shadow:none;
    text-transform:uppercase;
    margin-top:-16px;
    padding:3px;
    opacity:.8;
    filter:alpha(opacity=80);
    filter:"alpha(opacity=80)";}

本文に合わせて何を追加または変更できますか?

4

2 に答える 2

0

パディングがずれを引き起こしています...このCSS宣言のパディングを削除すると、整列します

#commentbar {
  width: 100%;
  /*padding: 10px;*/
}
于 2012-11-14T06:52:14.760 に答える
0

padding: 10px;これは、 inを使用しているためです。それを#commentbar削除するだけで準備完了です。次に、CSS でpadding: 10px;forも使用しているのを見pたので、それも削除すると、両方がまったく同じになります。

于 2012-11-14T06:49:52.647 に答える