+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: 2 kolumny w CSS - problem z wysokością (/thread-2-kolumny-w-css-problem-z-wysoko%C5%9Bcia)
2 kolumny w CSS - problem z wysokością - ogor89 - 05-09-2012
Cześć,
mam problem z ustawieniem prawej kolumny. Chodzi mi o to, żeby wysokość div-a "content" była rozciągana do wysokości div-a "panels", jeśli "content" będzie niższy od tego drugiego. Poniżej fragmenty CSS-a i HTML-a:
Kod:
<div id="page">
<div id="header">
<div id="logo"></div>
<div id="menu">
</div>
</div>
<div id="main">
<div id="main_line"></div>
<div id="main_corner"></div>
<div id="collumns">
<div id="panels">
<div id="panel"></div>
<div id="panel_bricks_big"></div>
<div id="panel"></div>
<div id="panel_bricks_small"></div>
</div>
<div id="content">
<!-- tu będzie div z tekstem -->
<div id="content_bricks"></div>
<div id="content_line"></div>
</div>
</div>
</div>
<div id="footer_top">
<div id="footer_height"></div>
<div id="footer_text">
</div>
<div id="copyright"></div>
</div>
<div id="footer_bottom"></div>
</div>Kod:
html, body {
background: rgb(50,50,50) url(png/tlo.png) repeat;
color: #000;
margin: auto;
padding: 0;
color: black;
font: 15px Verdana, Helvetica, sans-serif;
}
#page{
position: static;
margin: 0 auto;
padding: 0;
clear: none;
width: 900px;
background: transparent;
}
/* START HEADER */
#header{
position: static;
margin: 0;
padding: 0;
clear: none;
width: 900px;
height: 255px;
background: transparent url(png/naglowek.png) no-repeat;
}
#logo{
/*position: relative;
top: 105px;
left: 30px;**/
position: absolute;
padding: 0;
margin: 105px 0 0 30px;
width: 459px;
height: 84px;
background: transparent url(png/logo.png) no-repeat;
}
#menu{
position: absolute;
margin: 231px 0 0 0;
padding: 0;
height: 26px;/*24+2*/
}
/* END HEADER */
/* START MAIN */
#main{
position: static;
margin: 0;
padding: 22px 12px 7px 4px;
clear: both;
float: left;
width: 884px;
/*height: auto;*/
background: rgb(39,39,39) url(png/main_fade.png) repeat-x top;
}
#main_line{
position: static;
margin: -22px 0 0 -4px;
padding: 0;
clear: left;
float: left;
width: 852px;
height: 2px;
background: rgb(39,39,39) url(png/main_line.png) no-repeat top;
}
#main_corner{
position: static;
margin: -22px -12px 0 0;
padding: 0;
clear: right;
float: right;
width: 48px;
height: 48px;
background: rgb(39,39,39) url(png/main_corner.png) no-repeat top;
}
/* END MAIN */
/* START COLLUMNS */
#collumns{
position: static;
margin: -26px 0 0 0;
padding: 0;
clear: none;
float: left;
width: 884px;
/*height: auto;*/
background: transparent;
}
/* END COLLUMNS */
/* START PANEL */
#panels{
position: static;
margin: 0 4px 0 0;
padding: 0;
clear: left;
float: left;
width: 180px;
/*height: auto;*/
}
#panel{
/*position: static;*/
margin: 0;
/*padding: 0;*/
clear: both;
/* float: left;
width: 180px;
height: auto;*/
min-height: 30px;
background: rgb(23,23,23) url(png/panel_corner.png) no-repeat top right;
}
#panel_bricks_big{
/*position: static;*/
margin: 0;
/*padding: 0;*/
clear: both;
/*float: left;*/
width: 35px;
height: 35px;
background: rgb(39,39,39) url(png/panel_bricks_big.png) no-repeat left;
}
#panel_bricks_small{
/*position: static;*/
margin: 0;
/*padding: 0;*/
clear: both;
/*float: left;*/
width: 35px;
height: 21px;
background: rgb(39,39,39) url(png/panel_bricks_small.png) no-repeat left;
}
/* END PANEL */
/* START CONTENT */
#content{
position: static;
margin: 0 0 0 8px;
padding: 0;
clear: none;
float: right;
width: 692px;
/*height: auto;*/
min-height: 48px;
background: rgb(23,23,23) url(png/matter_corner.png) no-repeat right top;
}
#content_bricks{
position: static;
margin: 13px 0 0 0;
padding: 0;
clear: left;
float: left;
width: 35px;
height: 35px;
background: rgb(23,23,23) url(png/matter_bricks.png) no-repeat left bottom;
}
#content_line{
position: static;
margin: 0;
padding: 0;
clear: both;
float: left;
width: 692px;
height: 2px;
background: rgb(23,23,23) url(png/matter_line.png) no-repeat left;
}
/* END CONTENT */
/* START FOOTER */
#footer_top{
position: static;
margin: 2px 0 0 0;
padding: 0;
clear: both;
float: left;
width: 900px;
height: auto;
background: rgb(39,39,39) url(png/stopka_klocki_g.png) no-repeat left bottom;
}
#footer_height{
position: static;
margin: 0;
padding: 0;
clear: right;
float: right;
width: 12px;
height: 37px;
background: transparent;
}
#footer_text{
position: static;
margin: 0;
padding: 0;
clear: left;
float: left;
background: transparent;
}
#footer_bottom{
position: static;
margin: 0 0 20px 0;
padding: 0;
clear: both;
float: left;
width: 888px;
height: 12px;
background: rgb(39,39,39) url(png/stopka_klocki_d.png) no-repeat left bottom;
}
/* END FOOTER */
/* START COPYRIGHT */
#copyright{
position: static;
margin: auto 0 0 0;
float: right;
min-height: 21px;
}
/* END COPYRIGHT */RE: 2 kolumny w CSS - problem z wysokością - Radian - 05-09-2012
http://3d.hmax.pl/php/css3/2/
chodzi o takie coś ?
RE: 2 kolumny w CSS - problem z wysokością - camelrafal - 05-09-2012
chyba tylko javascript
RE: 2 kolumny w CSS - problem z wysokością - Kartofelek - 05-09-2012
Display table-cell albo zmienić podejscie na nowe standardy
RE: 2 kolumny w CSS - problem z wysokością - ogor89 - 11-09-2012
Nie udało mi się. Zostawiłem tak jak jest. Strona miała być napisana w HTML-u i CSS-ie, więc może kiedyś będzie jakieś przejście na nowsze techniki.
RE: 2 kolumny w CSS - problem z wysokością - camelrafal - 11-09-2012
display:table-cell to jest css właśnie
a pisząc nowe standardy kartofelek miał na myśli css3(chyba)
RE: 2 kolumny w CSS - problem z wysokością - ogor89 - 12-09-2012
dałem wcześniej display:table-cell w panels i content i nic się nie zmieniło.
RE: 2 kolumny w CSS - problem z wysokością - Kartofelek - 12-09-2012
Dzisiejsze layouty po prostu nie korzystają z tej techniki. Teraz robi się layouty poza takimi rzeczami.
Możesz zrobić tak:
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
Poza tym w css definiują niby flexowe wyświetlanie (które pewnie będzie przyszłością) ale póki co to jest to śmietnik nie z tej ziemi. Miejmy nadzieję że szybko się to poprawi.
Możesz spróbować też rozwiązania js: http://flexiejs.com/ lub "jquery equal height" które jest banalne w implementacji a daje więcej możliwości od czystego css.
A co do table cell:
http://css-tricks.com/fluid-width-equal-height-columns/
Tam masz przykład zastosowania wspomnianej metody.
RE: 2 kolumny w CSS - problem z wysokością - ogor89 - 13-09-2012
Na tej ostatniej stronie mam same prostokąciki zamiast tekstu. Pokombinuję z tym później, bo mam bardziej naglący problem.
Chcę zrobić drugi poziom menu w którym będzie następowała zmiana koloru <li> na inny po najechaniu i kliknięciu. (class="menuactive"). Poniżej kod i screen z tego co osiągnąłem. <span> ma nadaną szerokość 150px, ale jakoś tego nie widać. Gdzie jest błąd i jak go naprawić?
HTML:
Kod:
<div id="menuwrapper">
<ul id="primary-nav">
<li>
<a
href="http://testing.thumpers.pl/cmsms/"><span>strona główna</span></a>
</li>
<li><a ><span class="sectionheader">motocykle</span></a>
<ul class="unli">
<li>
<a
href="http://testing.thumpers.pl/cmsms/index.php?page=motocykle-honda"><span>honda</span></a>
</li>
<li>
<a
href="http://testing.thumpers.pl/cmsms/index.php?page=motocykle-yamaha"><span>Yamaha</span></a>
</li>
<li>
<a
href="http://testing.thumpers.pl/cmsms/index.php?page=kawasaki"><span>Kawasaki</span></a>
</li><li class="separator once" style="list-style-type: none;"> </li></ul>
</li>
<li class="menuactive menuparent parent"><a class="menuactive menuparent parent"><span class="sectionheader">Skutery</span></a>
<ul class="unli">
<li class="menuactive"><a class="menuactive"
href="http://testing.thumpers.pl/cmsms/index.php?page=skut-honda"><span>Honda</span></a>
</li><li class="separator once" style="list-style-type: none;"> </li></ul>
</li>
<li>
<a
href="http://testing.thumpers.pl/cmsms/index.php?page=o-nas"><span>O nas</span></a>
</li>
<li>
<a
href="http://testing.thumpers.pl/cmsms/index.php?page=kontakt"><span>Kontakt</span></a>
</li>
</ul>
<div class="clearb"></div>
</div>CSS:
Kod:
ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
/* START LEVEL 0 */
#menuwrapper ul {
float: left;
width: 100%;
height: 24px;
}
#menuwrapper ul li {
float: left;
height: 24px;
margin-right: 3px;
}
#menuwrapper ul li {
background: url("[[root_url]]/uploads/GoodMoto/main_menu_left.png") no-repeat left top;
}
#menuwrapper ul li:hover {
background: url("[[root_url]]/uploads/GoodMoto/main_menu_hover_left.png") no-repeat left top;
}
#menuwrapper ul li.menuactive, #menuwrapper ul li.menuactive:hover {
background: url("[[root_url]]/uploads/GoodMoto/main_menu_active_left.png") no-repeat left top;
}
#menuwrapper ul li a {
font-size: 14px;
color: rgb(92,119,86);
text-decoration: none;
}
#menuwrapper ul.primary-nav li a, #menuwrapper ul.primary-nav li a:visited {
display: block;
height: 24px;
}
#menuwrapper ul li a span {
margin-left: 15px;
}
#menuwrapper ul li a span, #menuwrapper ul li a:visited span {
height: 24px;
margin-left: 15px;
padding: 0 20px 6px 5px;
}
#menuwrapper ul li a span, #menuwrapper ul li a:visited span {
background: url("[[root_url]]/uploads/GoodMoto/main_menu_right.png") no-repeat right top;
}
#menuwrapper ul li:hover a span {
background: url("[[root_url]]/uploads/GoodMoto/main_menu_hover_right.png") no-repeat right top;
}
#menuwrapper ul li.menuactive a span, #menuwrapper ul li.menuactive:hover a span, #menuwrapper ul li.menuactive a:visited span, #menuwrapper ul li.menuactive:hover a:visited span {
background: url("[[root_url]]/uploads/GoodMoto/main_menu_active_right.png") no-repeat right top;
color: rgb(25,25,25);
}
#menuwrapper li.separator {
display: none;
}
/* END LEVEL 0 */
/* START LEVEL 1 */
/* BACKGROUND RESET */
#menuwrapper ul li ul li, #menuwrapper ul li.menuactive ul li, #menuwrapper ul li:hover ul li, #menuwrapper ul li.menuactive:hover ul li,
#menuwrapper ul li ul li a span, #menuwrapper ul li ul li a:visited span,
#menuwrapper ul li:hover ul li a span, #menuwrapper ul li:hover ul li a:visited span,
#menuwrapper ul li.menuactive ul li a span, #menuwrapper ul li.menuactive ul li a:visited span,
#menuwrapper ul li.menuactive:hover ul li a span, #menuwrapper ul li.menuactive:hover ul li a:visited span {
background: none;
}
#menuwrapper ul li ul {
position: absolute;
width: auto;
height: auto;
margin: 6px 0 0 0;
padding: 0;
background-color: yellow;
}
#menuwrapper ul li ul li, #menuwrapper ul li.menuactive ul li,
#menuwrapper ul li:hover ul li, #menuwrapper ul li.menuactive:hover ul li {
float: left;
clear: both;
width: auto;
margin: 0;
padding: 0;
background-color: red;
}
#menuwrapper ul li ul li a {
margin: 0;
padding: 0;
}
#menuwrapper ul li ul li a span, #menuwrapper ul li ul li a:visited span,#menuwrapper ul li ul li a:hover span {
margin: 0;
padding: 0;
width: 150px;
}