Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Kolumny boczne a długość tekstu na środku, Kolumny kończą się wcześniej niż tekst
aBendi
post 22.10.2004, 19:28:34
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 22.10.2004

Ostrzeżenie: (0%)
-----

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 
  1. <?xml version="1.0" encoding="iso-8859-2" ?>
  2. <?xml-stylesheet type="text/css" href="layout.css" ?>
  3. <?xml-stylesheet type="text/css" href="basic.css" ?>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  6.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7.  
  8. <html xmlns="http://www.w3.org/1999/xhtml">
  9.  
  10. <head>
  11.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  12.   <title>OCMASTER.COM</title>
  13.   <link rel="stylesheet" type="text/css" href="layout.css" />
  14.   <link rel="stylesheet" type="text/css" href="basic.css" />
  15.   <meta name="Keywords" content="" />
  16.   <meta name="Description" content="" />
  17.   <meta name="Author" content="Bendi" />
  18. </head>
  19.  
  20.  
  21. <body xml:lang="pl">
  22.  
  23. <div id="box">
  24.  
  25.   <div id="leftnav">
  26.     <div id="leftnav_a"></div>
  27.     <div id="leftnav_b">a</div>
  28.     <div id="leftnav_c"></div>
  29.   </div>
  30.  
  31.   <div id="centerbox">
  32.     <div id="main">
  33.      <div>blah blah blah<br/></div> <!-- n razy -->
  34.     </div>
  35.   <div id="footer"></div>
  36.   </div>
  37.  
  38.   <div id="rightnav">
  39.     <div id="rightnav_a"></div>
  40.     <div id="rightnav_b"></div>
  41.     <div id="rightnav_c"></div>
  42.   </div>
  43. </div>
  44.  
  45. </body>
  46.  
  47. </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 smile.gif

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


--------------------
Pozdrawiam
Most people prefer doors to windows.
Go to the top of the page
+Quote Post
wassago
post 22.10.2004, 21:39:47
Post #2





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

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


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
aBendi
post 22.10.2004, 22:05:25
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 22.10.2004

Ostrzeżenie: (0%)
-----

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...

Ten post edytował aBendi 22.10.2004, 22:08:30


--------------------
Pozdrawiam
Most people prefer doors to windows.
Go to the top of the page
+Quote Post
wassago
post 22.10.2004, 22:24:30
Post #4





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

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


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
aBendi
post 23.10.2004, 18:15:30
Post #5





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 22.10.2004

Ostrzeżenie: (0%)
-----

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 sad.gif


--------------------
Pozdrawiam
Most people prefer doors to windows.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 28.06.2025 - 13:28
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn