Forum PHP.pl > Display: inline

Pomoc - Szukaj - Użytkownicy - Kalendarz

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

Levabul

9.02.2006, 13:53:20

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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="all" />
    <title>KS Obro</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div id="body">
      <div id="shadow_left"></div>
      <div id="shadow_right"></div>
      <div id="site">
        <div id="column_left">left
        zxczxczxczxczxc vbn</div>
        <div id="column_right">righ
        right right right right </div>
      </div>
    </div>
  </body>
</html>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
body {
    font-famil: Tahoma, Trebuchet Ms, Verdana, sans-serif;
    font-size: 10pt;
    color: #324E05;
    background: #AEBD9C url('gfx/background.png') repeat;
    padding: 0px;
    margin: 0px;
}
div, img {
    padding: 0px;
    margin: 0px;
}
div#body {
    position: relative;
    vertical-align: top;
    margin-right: auto;
    margin-left: auto;
    width: 764px;
    height: 100%;
}
div#shadow_left {
    position: absolute;
    left: 0px;
    width: 6px;
    height: 100%;
    background-color: #000000;
}
div#shadow_right {
    position: absolute;
    right: 0px;
    width: 6px;
    height: 100%;
    background-color: #000000;
}
div#site {
    position: relative;
    left: 6px;
    background-color: #C7D6AF;
    width: 750px;
    height: 100%;
    min-height: 100%;
    border-left: 1px solid #67853D;
    border-right: 1px solid #67853D;
}
div#column_left {
    width: 201px;
    position: relative;
    left: 0px;
    display: inline;
    background-color: red;
}
div#column_right {
    width: 201px;
    position: relative;
    top: 0px;
    left: 549px;
    background-color: red;
}
[HTML] pobierz, plaintext

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

revyag

9.02.2006, 14:11:09

Aby ułożyć divy obok siebie dajesz im style float.
np.

Kod

div {
float:left;
}

Levabul

9.02.2006, 14:15:39

Ź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_*'

mike

9.02.2006, 14:19:43

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

Levabul

9.02.2006, 16:26:43

ok it works

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.