Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Display: inline, niepomaga :/
Levabul
post
Post #1





Grupa: Zarejestrowani
Postów: 197
Pomógł: 0
Dołączył: 11.07.2005

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

Po pierwsze chcę aby divy 'column_left' oraz 'column_right' były umiejscowione w jednej lini. Dodaję więc do nich parametr 'display: inline' który sprawia że podane columny są w lini. Niestety takie rozwiązanie przestaje działać jeżeli do któregoś z Divów wstawie obrazek. Divy niezachowują dotego przydzielonej szerokości +_+. Co mam zrobić aby divy były w jednej lini ?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <meta name="robots" content="all" />
  7.     <title>KS Obro</title>
  8.     <link rel="stylesheet" href="style.css" type="text/css" />
  9.   </head>
  10.   <body>
  11.     <div id="body">
  12.       <div id="shadow_left"></div>
  13.       <div id="shadow_right"></div>
  14.       <div id="site">
  15.         <div id="column_left">left
  16.         zxczxczxczxczxc vbn</div>
  17.         <div id="column_right">righ
  18.         right right right right </div>
  19.       </div>
  20.     </div>
  21.   </body>
  22. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body {
  2.     font-famil: Tahoma, Trebuchet Ms, Verdana, sans-serif;
  3.     font-size: 10pt;
  4.     color: #324E05;
  5.     background: #AEBD9C url('gfx/background.png') repeat;
  6.     padding: 0px;
  7.     margin: 0px;
  8. }
  9. div, img {
  10.     padding: 0px;
  11.     margin: 0px;
  12. }
  13. div#body {
  14.     position: relative;
  15.     vertical-align: top;
  16.     margin-right: auto;
  17.     margin-left: auto;
  18.     width: 764px;
  19.     height: 100%;
  20. }
  21. div#shadow_left {
  22.     position: absolute;
  23.     left: 0px;
  24.     width: 6px;
  25.     height: 100%;
  26.     background-color: #000000;
  27. }
  28. div#shadow_right {
  29.     position: absolute;
  30.     right: 0px;
  31.     width: 6px;
  32.     height: 100%;
  33.     background-color: #000000;
  34. }
  35. div#site {
  36.     position: relative;
  37.     left: 6px;
  38.     background-color: #C7D6AF;
  39.     width: 750px;
  40.     height: 100%;
  41.     min-height: 100%;
  42.     border-left: 1px solid #67853D;
  43.     border-right: 1px solid #67853D;
  44. }
  45. div#column_left {
  46.     width: 201px;
  47.     position: relative;
  48.     left: 0px;
  49.     display: inline;
  50.     background-color: red;
  51. }
  52. div#column_right {
  53.     width: 201px;
  54.     position: relative;
  55.     top: 0px;
  56.     left: 549px;
  57.     background-color: red;
  58. }
[HTML] pobierz, plaintext


Ps. może później zamieszcze przykład w necie.


--------------------
Go to the top of the page
+Quote Post
revyag
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Aby ułożyć divy obok siebie dajesz im style float.
np.
Kod
div {
    float:left;
}


--------------------
-------------

------
Go to the top of the page
+Quote Post
Levabul
post
Post #3





Grupa: Zarejestrowani
Postów: 197
Pomógł: 0
Dołączył: 11.07.2005

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

Źle się wyraziłem - chce aby jeden z divów był po lewej stronie a drugi po prawej stronie i żeby znajdowały się na tej samej wysokości.

ps. Zabawa z float niewchodzi w grę ponieważ jeżeli użyje float to div 'site' w którym znajdują sie divy 'column_*' nie rozciągnie się na skutek zwiększenia wysokości divów 'column_*'


--------------------
Go to the top of the page
+Quote Post
mike
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

Cytat(Levabul @ 2006-02-09 14:15:39)
ps. Zabawa z float niewchodzi w grę ponieważ jeżeli użyje float to div 'site' w którym znajdują sie divy 'column_*' nie rozciągnie się na skutek zwiększenia wysokości divów 'column_*'

Jeden div: dajesz float: left;
Drugi div: dajesz float: right;

Dla tego, w którym się znajdują dajesz: overflow: auto;

I wszystko ładnie się rozciągnie winksmiley.jpg
Go to the top of the page
+Quote Post
Levabul
post
Post #5





Grupa: Zarejestrowani
Postów: 197
Pomógł: 0
Dołączył: 11.07.2005

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

ok it works biggrin.gif


--------------------
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 Aktualny czas: 22.08.2025 - 01:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn