css - CSS の左揃えの問題

Question

左右に縁取り、中央にコンテンツを配置した新しいウェブサイトのデザインに取り組んでいます。左の境界線の端に合わせたい画像が左側にあることを除いて、すべてが素晴らしいです。つまり、画像の左側と左側の境界線の間にスペースを入れたくありません。

参考までに、ページの下書きへのリンクを以下に示します... http://www.nwsccmoodledemo.com/newnwscc/

厄介な画像の位置合わせを除いて、すべてがまさに私が望む方法です。マージン、パディングなどを変更してみましたが、IE と Firefox の両方で一貫していないようです。提案をいただければ幸いです。

外部スタイルシートはありません。スタイルシートコードはすべて HTML ファイルに含まれていますが、以下のコードも掲載しました。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Northwest-Shoals Community College</title>
    <style type="text/css">
    /*CSS RESET*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
outline: 0;
    }
    body {
line-height: 1;
color: black;
background: white;
    }
    ol, ul {
list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
border-collapse: separate;
border-spacing: 0;
    }
    caption, th, td {
text-align: left;
font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
content: "";
    }
    blockquote, q {
quotes: "" "";
    }

    strong {
font-weight:bold;color:#0289ce;
    }

    em {
font-style:oblique;
    }

    p {
margin:15px 0;
line-height:25px;
    }

    .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
    }
    .alignleft {
float: left;
    }
    .alignright {
float: right;
    }

    h1 {font-size:180%;}
    h2 {font-size:150%;}
    h3 {font-size:125%;}
    h4 {font-size:100%;}
    h5 {font-size:90%;}
    h6 {font-size:80%;}

    a:link {color:#0289ce;}
    a:hover {color:#f64274;}

    /*End RESET - Begin Full Width CSS*/
body {
    color:#DFE4ED;
    background:url(images/home_frame_925.gif) repeat top center;
    color:#2D1F16;
    font:13px Helvetica,  Arial,  sans-serif

}

.wrap {
    position:relative;
    margin:0 auto;
    width:900px;
    clear:both;
}

a:link{
    text-decoration:none;
    color:#000033;      
    }

a:hover {
    color:#0066CC; 
}

a:visited {
    color:#0066CC:
}

#header, #footer {
    width:925px;
    float:center;
    padding:0 0;
    height:103px;
    margin:auto;
}


#header {
    background:#698DA4;
}

#header .logo {
    float:left;
    /*width:400px;*/
    padding:0 0 0 0;
    margin:0;
    /*clear:both;*/
}

#header p {
    float:right;
    width:400px;
    margin:0;
}

#content {
    padding:30px 0;
    clear:both;
}

#footer {
    background:#698DA4;
    width:925px;
    text-align:right;
    /**position:fixed;**/
    bottom:0;
    float:center:
    z-index:999999;
    padding:20px 0;
}

#footer2 {

    background:#D2D8E8;
    width:925px;
    text-align:center;
    float:center;
    /**position:fixed;**/
    bottom:0;
    z-index:999999;
    margin:auto;

}

#footer a {
    color:#fff;
}

    </style>
    </head>

    <body bgcolor="#DFE4ED">

    <div id="header">
    <!--    <div class="wrap">-->
    <div class="logo">
        <a href="http://www.nwscc.edu">

        <p><img src="images/banner.png" alt="NW-SCC Homepage Banner" /></p>
        </a></div>
    <!--    </div>-->
    </div>

    <div class="wrap">
<div id="content">


    <table>

    <tr><td style="vertical-align:top;padding="30px;";>
    <img  src="images/homepage_students_smaller.png"><br><br>

   <table style="margin:auto"><tr><td style="vertical-align:top;padding:5px">
   <a href=http://www.facebook.com/pages/Northwest-Shoals-Community-
   College/105177256819">
   <img src="images/facebooknew.png"></td></a></td><td style="vertical-align:
   top; padding:5px"><a href="http://twitter.com/#!/NWSCC">
   <img src="images/twitternew.png"></a></td><td style="vertical-align:
   middle;padding:0px"><a href="http://www.youtube.com/user/OfficialNWSCC">
   <img src="images/youtubenew.png"></a></td>
          </tr></table>
   </td>

   <td style="padding:30px">

<table style="vertical-align:top;padding:0px;">

<tr style="vertical-align:top;"><td style="vertical-align:top;width:40%;">

<h1>Quick Links</h1>

   <p><a href="http://www.nwsccmoodle.com">Moodle</a> | <a href="
   http://nwscc.edu/moodlehandout.pdf">Login Instructions</a><br>
   <a href="http://www.nwscc.edu/collectionfees.html">Online Services</a> 
   | <a href="http://www.nwscc.edu/onlineserviceslogin.pdf">Login Instructions</a><br>
   <a href="http://www.nwscc.edu/studentemail.html">Student Email</a><br>
   <a href="http://www.nwscc.edu/classschedule.html">Spring 2013 Class Schedule</a><br>
   <a href="http://www.nwscc.edu/library/library.html">Library</a><br>
   <a href="http://www.nwscc.edu/onecard/nwscconecard.html">NW-SCC OneCard</a></p>
    </td>
<td style="vertical-align:top;width:40%;"><h1><br></h1>
    <p><a href="http://www.nwscc.edu/applicationinfo.html">
    Admissions Application</a><br>
<a href="http://nwscc.edu/calendar.html">College Calendar</a><br>
<a href="http://nwscc.edu/bookstorecheck.html">Bookstore</a><br>
<a href="http://nwscc.edu/financialaid/finaid.html">Financial Aid</a><br>
<a href="http://www.nwscc.edu/businessoffice.html">Financial Data</a><br />
<a href="http://www.nwscc.edu/distanceeducation/">Distance Education </a></p>
</td></tr>

   <tr style="vertical-align:top"><td style="vertical-align:top;padding:
   0px" colspan="2">

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 10,
    interval: 31000,
    width: 475,
    height: 150,
    theme: {
    shell: {
    background: '#698DA4',
    color: '#f9f9fc'
    },
    tweets: {
    background: '#fcfcfc',
color: '#8C0000',
    links: '#063c94'
    }
    },
    features: {
    scrollbar: true,
    loop: false,
    live: true,
    behavior: 'all'
    }
    }).render().setUser('NWSCC').start();
    </script>
</td>
    </tr>

    </table>
    </td></tr></table>

   </div>
   </div>

   <div id="footer2">

<table style="padding:0px;margin:auto;vertical-align:top"><tr>
    <td style="padding:20px">
    <a href="http://www.nwscc.edu/arra.html"><img src="images/
    arra_logo_final.jpg">  </a></td>
    <td style="padding:20px"><a href="http://nwalabamabest.org/">
    <img src="images/best_final.jpg"></a></td>
    <td style="padding:20px"><a href="http://shoalsscholardollars.com/">
    <img src="images/scholar_dollars_final.jpg"></a></td>
    <td style="padding:20px"><a href="http://www.nwscc.edu/athensstate.html">
    <img src="images/athens_final.jpg"></a></td>
     <td style="padding:20px"><a href="http://www.accs.cc/">
    <img src="images/accs_logo_final.jpg"></a></td>
     </tr></table>

     </div>

    <div id="footer">
<div class="wrap">

           800 George Wallace Blvd. | Muscle Shoals, AL 35661 | 256.331.5200<br>
     2080 College Road | Phil Campbell, AL 35581 | 256.331.6200<br>
     <a href="http://www.nwscc.edu/cyberadvisor.html">Contact CyberAdvisor</a><br>
     <p>&copy; 2007 - 2013 | Northwest-Shoals Community College

     </div>
     </div>

     </body>
     </html>

score 1 · Accepted Answer

Chrome では、img に次の CSS を指定すると機能します: margin-left: -20px;

IE と Firefox でテストする機会がありません。申し訳ありません。

別のヒント: レイアウトにテーブルを使用することはセマンティックではありません。また、テーブルのない要素のスタイル設定と配置がより簡単になります。- ケビン

score 0 · Accepted Answer

位置を使用できます：

#imageid {
    left: -18px;
    position: relative;
}

ただし、レイアウトにテーブルを使用しているという点に注意する必要があります。これは受け入れられません。

css - CSS の左揃えの問題

2 に答える 2

Related

Reference