CSS - нужно, чтобы столбец проходил до самого низа в макете из 3 столбцов - PullRequest
Новая
       8

CSS - нужно, чтобы столбец проходил до самого низа в макете из 3 столбцов

0 голосов
/ 17 декабря 2009

У меня есть сайт, над которым я работаю, и я должен был улучшить макет в первую очередь. Но сейчас я сталкиваюсь с проблемой не идти ко дну. Я прочитал учебники о том, как получить 3 колонки макета в CSS http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks но то, что мне нужно, это то, что будет легко исправить для моего существующего сайта .... У меня уже создано около 10 страниц, и я думал о возвращении к макету таблицы (а затем перестроил все, как я сделал здесь -> http://www.centuryautosd.com/new.asp если у кого-то есть более легкий и лучший способ сделать это.

Вот существующий веб-сайт с CSS и проблема с колонками -> http://www.centuryautosd.com/

Я, конечно, мог бы помочь!

1 Ответ

3 голосов
/ 17 декабря 2009

Я почти уверен, что эта тактика подойдет вам: http://www.ejeliot.com/blog/61

Редактировать: Хорошо, мы идем.

Просматривая шаблон Dreamweaver и разделяя встроенный CSS, я внес следующие изменения:

1> Переместите mainContent между sidebar1 и sidebar2 в HTML.
2> Измените css sidebar1 на: 

.thrColFixHdr #sidebar1 {
    float: left;
    width: 150px;
    background: #CCCCCC;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

Фон был изменен, чтобы выделить эффект на странице.

3> Изменить css для sidebar2 на: 

.thrColFixHdr #sidebar2 {
    float: left;
    width: 160px;
    background: #EEEEEE;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

4> Изменить CSS mainContent на: 

.thrColFixHdr #mainContent {
    float: left;
    width: 390px;
    background: #DDDDDD;
    padding: 0 10px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

5> Добавить определение для contentContainer: 

.thrColFixHdr #contentContainer {
    overflow: hidden;
}

6> Измените .footer на #footer и измените margin-top: 8px на padding-top: 8px и добавьте text-align: center и разбейте текст нижнего колонтитула.

Весь код выполняется через Notepad ++ HTML Tidy здесь (некоторые вкладки форматирования немного теряются при помещении в Stack Overflow): 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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 name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/

body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
}
.thrColFixHdr #container { 
    width: 780px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
} 
.thrColFixHdr #header { 
    background: #DDDDDD; 
    padding: 0 10px 0 20px; 
} 
.thrColFixHdr #header h1 {
    margin: 0;
    padding: 10px 0;
}
.thrColFixHdr #contentContainer {
    overflow: hidden;
}
.thrColFixHdr #sidebar1 {
    float: left;
    width: 150px;
    background: #CCCCCC;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}
.thrColFixHdr #sidebar2 {
    float: left;
    width: 160px;
    background: #EEEEEE;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}
.thrColFixHdr #mainContent { 
    float: left;
    background: #DDDDDD;
    width: 390px;
    padding: 0 10px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
} 
.thrColFixHdr #footer { 
    padding: 0 10px 0 20px;
    background:#BBBBBB;
} 
.thrColFixHdr #footer p {
    margin: 0;
    padding: 10px 0;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/*]]>*/
</style>
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

<style type="text/css">
/*<![CDATA[*/
.side a {
    color: #FFF;
    text-decoration: none;
}
a.side:link {color:#FF3;
text-decoration: none;
}      /* unvisited link */
a.side:visited {color:#FFF
text-decoration: none;
}  /* visited link */
a.side:hover {color:#C00}
a.side:active {color:#C00}

/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#footer {
    font: 12px Arial, Helvetica, sans-serif;
    color: #FF3;
    text-decoration: none;
    padding-top: 8px;
    text-align: center;
}
a.footer:link {color:#FF3}
a.footer:visited {color:#FFF}
a.footer:hover {color:#C00} 
a.footer:active {color:#C00}
/*]]>*/
</style>
</head>

<body class="thrColFixHdr">
<div id="container">
<div id="header">
  <h1>Header</h1><!-- end #header -->
</div>

<div id="contentContainer">
  <div id="sidebar1">
    <h3>Sidebar1 Content</h3>

    <p>The background color on this div will only show for the
    length of the content. If you&#39;d like a dividing line
    instead, place a border on the left side of the #mainContent
    div if it will always contain more content.</p>

    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
    pellentesque eget, cursus et, fermentum ut, sapien.</p>
    <!-- end #sidebar1 -->
  </div>

  <div id="mainContent">
    <h1>Main Content</h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Praesent aliquam, justo convallis luctus rutrum, erat nulla
    fermentum diam, at nonummy quam ante ac quam. Maecenas urna
    purus, fermentum id, molestie in, commodo porttitor, felis. Nam
    blandit quam ut lacus. Quisque ornare risus quis ligula.
    Phasellus tristique purus a augue condimentum adipiscing.
    Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
    in, vulputate at, odio. Donec et ipsum et sapien vehicula
    nonummy. Suspendisse potenti.</p>

    <h2>H2 level heading</h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Praesent aliquam, justo convallis luctus rutrum, erat nulla
    fermentum diam, at nonummy quam ante ac quam. Maecenas urna
    purus, fermentum id, molestie in, commodo porttitor, felis. Nam
    blandit quam ut lacus. Quisque ornare risus quis ligula.
    Phasellus tristique purus a augue condimentum adipiscing.
    Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
    in, vulputate at, odio.</p><!-- end #mainContent -->
  </div>

  <div id="sidebar2">
    <!-- #BeginLibraryItem "/Library/sidebar2.lbi" -->

    <div align="center" class="side">
      <img src="images/seHable.jpg" width="162" height="48" alt=
      "Se Habla Espanol" border="0" /><br />
      <br />
      <a href="https://secure.carfax.com/creditCard.cfx" target=
      "_blank"><img src="images/carfax.jpg" width="145" height="35"
      alt="CARFAX" border="0" /></a><br />
      <a href="https://secure.carfax.com/creditCard.cfx" target=
      "_blank">FREE CAR FAX</a><br />
      <br />
      <a href=
      "http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
      target="_blank"><img src="images/caGOV.jpg" width="109"
      height="78" alt="CA.gov" longdesc=
      "http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
      border="0" /><br />
      Verify a Smog Check</a><br />
      <br />
      <a href="http://www.iihs.org/ratings/default.aspx" target=
      "_blank"><img src="images/topSafetyPick.jpg" width="111"
      height="131" alt="Top Safety Picks" longdesc=
      "http://www.iihs.org/ratings/default.aspx" border=
      "0" /><br />
      Top Safety Picks</a><br />
      <br />
      <a href="http://www.kbb.com/" target="_blank"><img src=
      "images/kbb.jpg" width="155" height="56" alt=
      "Kelly Blue Book" longdesc="http://www.kbb.com/" border=
      "0" /><br />
      Kelly Blue Book</a>
    </div><!-- #EndLibraryItem -->

    <h3>Sidebar2 Content</h3>

    <p>The background color on this div will only show for the
    length of the content. If you&#39;d like a dividing line
    instead, place a border on the right side of the #mainContent
    div if it will always contain more content.</p>

    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
    pellentesque eget, cursus et, fermentum ut, sapien.</p>
    <!-- end #sidebar2 -->
  </div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  </div>

<div id="footer">
  <!-- #BeginLibraryItem "/Library/footer.lbi" -->
  <span class="footer">CENTURY AUTO GROUP, INC. |
  619.281.2300<br />
  COPYRIGHT 2009-2011 ALL RIGHTS RESERVED | EMAIL: <a href=
  "mailto:staff@centuryautosd.com" class=
  "footer">STAFF@CENTURYAUTOSD.COM</a></span> 
  <!-- #EndLibraryItem --><!-- end #footer -->
</div><!-- end #container -->
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...