0

我正在设计一个新的网站设计，它的左右两侧都有边框，中间有内容。一切都很好，除了我在左边有一个图像，我想与左边框的边缘对齐。换句话说，我不希望图像左侧的边框和左侧之间有任何空间。

作为参考，这里是页面草稿的链接... 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>
4

2 回答 2

1

在 Chrome 中，当您为 img 提供以下 CSS 时，它可以工作： margin-left: -20px;

我没有机会在 IE 和 Firefox 上测试它，抱歉。

作为另一个提示：使用表格进行布局不是语义化的。没有表格的元素的样式和定位也会更容易。- 凯文

于 2013-03-18T14:55:04.607 回答
0

你可以使用位置：

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

但是您确实需要关注使用表格进行布局这一点。这是不可接受的。

于 2013-03-18T14:58:25.943 回答