CSS Проблемы с выравниванием по левому краю

Я работаю над новым дизайном сайта, который имеет границу слева и справа, а также содержимое в центре. Все отлично, за исключением того, что у меня есть изображение слева, которое я хочу выровнять по краю левой границы. Другими словами, я не хочу места между границей слева и левой стороной изображения.CSS Проблемы с выравниванием по левому краю

Для справки, вот ссылка на проект страницы ... 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>

источник

2013-03-18 user1681502

Почему вы используете таблицы для структуры контента? Это не 1998 год. – Axel

Спасибо Axel. Я работаю над преобразованием своих «запрещенных» таблиц в CSS. :-) – user1681502

В Chrome он работает, когда вы даете IMG следующие действия CSS: Левое поле: -20px;

У меня нет возможности проверить его на IE и Firefox, извините.

Как другой Совет: Использование таблиц для макета не является семантическим. Также проще было бы упростить стиль и расположение элементов без таблиц. - Кевин

источник

2013-03-18 14:55:04 Reflic

Спасибо, Кевин! Кажется, это трюк. Я думаю, что я маленькая «старая школа» с использованием столов. Я очень ценю помощь! – user1681502

Вы можете использовать положение:

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

Но вам действительно нужно сосредоточиться на том, что вы используете таблицы для разметки. Это неприемлемо.

источник

2013-03-18 14:58:25 Alex

Спасибо, Алекс! Я буду работать над таблицами «старой школы». :-) Спасибо за помощь! – user1681502

CSS Проблемы с выравниванием по левому краю

ответ

Смежные вопросы