1. дома
  2. Вопрос и ответ
  3. CSS - столбец потребности до конца до конца в макете 3 столбца

CSS - столбец потребности до конца до конца в макете 3 столбца

2009-12-17 2 views
0

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

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

Я мог бы с уверенностью использовать какую-либо помощь!

источник

2009-12-17 Drea

ответ

3

Я уверен, что эта тактика будет работать для вас: http://www.ejeliot.com/blog/61

Edit: Хорошо, здесь мы идем.

Глядя мимо шаблона 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> Изменить sidebar2 в CSS для:

.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 и change 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:[email protected]" class= 
    "footer">[email protected]</a></span> 
    <!-- #EndLibraryItem --><!-- end #footer --> 
</div><!-- end #container --> 
</div> 
</body> 
</html>

источник

2009-12-17 02:26:15 Aaron

+0

Я, конечно, ценю ваш ответ, и я прочитал через него и попробовал некоторые из примеров, без успех. По-прежнему кажется, что контейнеры не имеют ту же высоту, что и контейнер. Есть ли шанс, что вы можете пойти на этот сайт, а затем рассказать мне, как изменить CSS? http://www.centuryautosd.com/help.asp Если вы можете показать мне, как изменить CSS на этом, я могу использовать его, чтобы изменить все мои страницы, потому что это шаблон, с которого я начал. – Drea

+0

, а другая проблема заключается в том, что каждая страница генерирует другую группу автомобилей (иногда только 1 автомобиль, следовательно, «короткая страница» и другие 20 автомобилей, что заставляет страницу быть длинной), поэтому столбцы всегда должны соответствовать размеру страница, поскольку она динамически разворачивается. – Drea

+0

Если сегодня вечером я получу шанс, я постараюсь вас завести. :: делает заметку :: – Aaron

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

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