Forum PHP.pl > Kolumny boczne a długość tekstu na środku

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Kolumny boczne a długość tekstu na środku

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

aBendi

22.10.2004, 19:28:34

Witam wszystkich Forumowiczów,

Mam na stronie taki układ: 2 boczne kolumy i środek (http://ocm.pl/ocm_xhtml/). Mój problem polega na tym, że wysokość tych kolumn jest taka jak tekst w nich, a chciałbym, żeby dostosowywała się do wysokości środkowego bloku. Każda z 2 kolumn składa się z 3 części: górnej o ustalonej wysokości, srodkowej i dolnej o ustalonej wysokości. Czy da się zrobić tak, żeby środkowa część była zawsze na maksa (rozciągała się aż do końca) i tym samym żeby kolumny kończyły się w tym samym miejscu, co główny blok? (ustawienie height: 100% nic nie daje)

[HTML] pobierz, plaintext 
<?xml version="1.0" encoding="iso-8859-2" ?>
<?xml-stylesheet type="text/css" href="layout.css" ?>
<?xml-stylesheet type="text/css" href="basic.css" ?>
 
<!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=iso-8859-2" />
  <title>OCMASTER.COM</title>
  <link rel="stylesheet" type="text/css" href="layout.css" />
  <link rel="stylesheet" type="text/css" href="basic.css" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <meta name="Author" content="Bendi" />
</head>
 
 
<body xml:lang="pl">
 
<div id="box">
 
  <div id="leftnav">
    <div id="leftnav_a"></div>
    <div id="leftnav_b">a</div>
    <div id="leftnav_c"></div>
  </div>
 
  <div id="centerbox">
    <div id="main">
     <div>blah blah blah<br/></div> <!-- n razy -->
    </div>
  <div id="footer"></div>
  </div>
 
  <div id="rightnav">
    <div id="rightnav_a"></div>
    <div id="rightnav_b"></div>
    <div id="rightnav_c"></div>
  </div>
</div>
 
</body>
 
</html>
[HTML] pobierz, plaintext

A tu layout.css:

Kod

html {
  background-color: #686868;
  background-image: url('gfx/ocm_bg.jpg');
  background-repeat: repeat-x;
  background-position: top;
}

body {
  margin: 21px auto;
}

div#box {
  width: 1072px;
  float: left;
}

div#leftnav {
  width: 134px;
  float: left;
}

div#leftnav {
  width: 134px;
  float: left;
}

div#leftnav_a {
  height: 500px;
  background-image: url('gfx/leftnav_a.jpg');
  background-repeat: no-repeat;
  background-position: top;
}

div#leftnav_b {
  background-image: url('gfx/leftnav_b.gif');
  background-repeat: repeat-y;
}

div#leftnav_c {

  bottom: 0;
  height: 96px;
  background-image: url('gfx/leftnav_c.jpg');
  background-repeat: no-repeat;
  background-position: top;
}

div#centerbox {
  margin: 29px auto;
  width: 804px;
  float: left;
  background-color: #686868;
  background-image: url('gfx/adjunct.jpg');
  background-repeat: repeat-x;
  background-position: bottom;
}

div#rightnav {
  width: 134px;
  float: left;
}

div#rightnav_a {
  height: 500px;
  background-image: url('gfx/rightnav_a.jpg');
  background-repeat: no-repeat;
  background-position: top;
}

div#rightnav_b {
  background-image: url('gfx/rightnav_b.gif');
  background-repeat: repeat-y;
}

div#rightnav_c {
  height: 96px;
  bottom: 0;
  background-image: url('gfx/rightnav_c.jpg');
  background-repeat: no-repeat;
  background-position: top;
}

div#main {
  float: left;
  width: 100%;
  background-color: #5A5A5A;
}

div#footer {
  float: left;
  bottom: 0;
  width: 100%;
  height:  41px;
  background-image: url('gfx/adjunct.jpg');
  background-repeat: repeat-x;
  background-position: bottom;
}

Jeszcze do tego dochodzi problem, że to się kompletnie krzaczy pod IE, ale nad tym się dopiero zastanowię, chociaż rady mile widziane

Aha, w Operze jest wszystko przesunięte trochę w dół, ale poprawię to później.

wassago

22.10.2004, 21:39:47

jezeli chodzi o to rozciaganie to musisz uzyc hacka, w selektorach head, html, body wstawic "display: block" i "width: 100%" - powinno pomoc.

aBendi

22.10.2004, 22:05:25

Cytat(wassago @ 2004-10-22 20:39:47)

jezeli chodzi o to rozciaganie to musisz uzyc hacka, w selektorach head, html, body wstawic "display: block" i "width: 100%" - powinno pomoc.

Dzięki, częściowo to działa, tzn. rozciaga tam gdzie nie ma tekstu... ale do pewnej stałej wielkości (na oko z 500px). Wtedy, gdy tekstu jest mało, to kolumny są od niego dłuższe, a gdy dużo - są za krótkie, a ja próbuję zrobić, żeby były takie jak tekst.

BTW. gwoli ścisłości chodziło o height...

wassago

22.10.2004, 22:24:30

to pobaw sie z "max-height" i "min-height"

aBendi

23.10.2004, 18:15:30

Cytat(wassago @ 2004-10-22 21:24:30)

to pobaw sie z "max-height" i "min-height"

Niestety nie bardzo pomaga.. min-height nic nie daje

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.