[css] problem z divami

Odpowiedz Nowy wątek
potrzebuje pomocy
2007-12-10 18:17
potrzebuje pomocy
0

Witam

zrobilem sobie szablon strony na divach.

#srodek1 {
    width:          15px;
    height:         800px;
    float:          left;
    background-image:   url(gfx_12.gif);
}
#srodek2 {
    width:          800px;
    float:          left;
    background-image:   url(gfx_13.gif);
}
#srodek3 {
    width:          15px;
    height:         800px;
    float:          left;
    background-image:   url(gfx_14.gif);
}

tutaj html :


<div id="srodek">
<div id="srodek1"></div>
<div id="srodek2"></div>
<div id="srodek3"></div>
</div>

Pozostało 580 znaków

potrzebuje pomocy
2007-12-10 18:19
potrzebuje pomocy
0

no i tu sie zaczal problem...
chciualem zeby dlugosc strony byla zalezna od tekstu w 'srodek2'. Jednak 'srodek1' i 'srodek3' nie chca byc takiej samej dlugosc. Moze ktos pomoc ?

Pozostało 580 znaków

2007-12-10 19:35

Rejestracja: 14 lat temu

Ostatnio: 8 lat temu

0
<div id="srodek">
  <div id="srodek1"></div>
  <div id="srodek2"></div> 
  <div id="srodek3"></div>
  <div style='clear:both'></div>
</div>

O to chodzi?


You need to learn how to walk
before you can run

Pozostało 580 znaków

Potrzebuje pomocy
2007-12-10 19:58
Potrzebuje pomocy
0

raczej nie o to. postaram sie to wyjasnic dokladniej.

mam 3 div lewy i prawy ( w ktorym sa tylko tla obrazkowe, powtarzajacy sie obrazek o szerokosci 15px i wysokosci 1px, obrazek powtarza tylko w pionie ) Div srodkowy zawiera newsy, menu i logowanie. Chce zrobic tak zeby dlugosc tych divow byla zalezna od tekstu w tym srodkowym a te boczne zeby mialy taka dlugosc jak ten srodkowy.

Pozostało 580 znaków

llmucha
2007-12-10 20:00
llmucha
0

#srodek{
overflow: hidden;
}
#srodek1, #srodek2, #srodek3{
padding-bottom: 20000px;
margin-bottom: -20000px;
}

To powinno pomóc. Jeśli dobrze zrozumiałem. :)

Pozostało 580 znaków

Potrzebuje pomocy
2007-12-10 20:27
Potrzebuje pomocy
0

to nie zadzialalo, dziwne rozwiazanie oO

Free Image Hosting at www.ImageShack.us

tutaj zalaczam kod:

body {
    background-color:   #605F5F;
}
#Calosc {
    width:          830px;
    background-color:   white;
    margin:         auto;
}
#header1a {
    width:          15px;
    height:         22px;
    float:          left;
    background-image:   url(gfx_01.gif);
}
#header2a {
    width:          14px;
    height:         22px;
    float:          left;
    background-image:   url(gfx_02.gif);
}
#header3a {
    width:          772px;
    height:         22px;
    float:          left;
    background-image:   url(gfx_03.gif);
}
#header4a {
    width:          14px;
    height:         22px;
    float:          left;
    background-image:   url(gfx_04.gif);
}
#header5a {
    width:          15px;
    height:         22px;
    float:          left;
    background-image:   url(gfx_05.gif);
}
#header1b {
    width:          15px;
    height:         121px;
    float:          left;
    background-image:   url(gfx_06.gif);
}
#header2b {
    width:          800px;
    height:         121px;
    float:          left;
    background-image:   url(gfx_07.gif);
}
#header3b {
    width:          15px;
    height:         121px;
    float:          left;
    background-image:   url(gfx_08.gif);
}
#header1c {
    width:          15px;
    height:         4px;
    float:          left;
    background-image:   url(gfx_09.gif);
}
#header2c {
    width:          800px;
    height:         4px;
    float:          left;
    background-image:   url(gfx_10.gif);
}

#header3c {
    width:          15px;
    height:         4px;
    float:          left;
    background-image:   url(gfx_11.gif);
}
#srodek1 {
    width:          15px;
    height:         800px;
    float:          left;
    background-image:   url(gfx_12.gif);
}
#srodek2 {
    width:          800px;
    float:          left;
    background-image:   url(gfx_13.gif);
}
#srodek3 {
    width:          15px;
    height:         800px;
    float:          left;
    background-image:   url(gfx_14.gif);
}
#srodek1b {
    width:          15px;
    height:         11px;
    float:          left;
    background-image:   url(gfx_12a.gif);
}
#srodek2b {
    width:          800px;
    height:         11px;
    float:          left;
    background-image:   url(gfx_13.gif);
}
#srodek3b {
    width:          15px;
    height:         11px;
    float:          left;
    background-image:   url(gfx_14a.gif);
}
#stopka1 {
    width:          15px;
    height:         35px;
    float:          left;
    background-image:   url(gfx_15.gif);
}
#stopka2 {
    width:          800px;
    height:         35px;
    float:          left;
    background-image:   url(gfx_16.gif);
}
#stopka3 {
    width:          15px;
    height:         35px;
    float:          left;
    background-image:   url(gfx_17.gif);
}

a tu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Moja Strona Domowa </title>
        <link rel="Stylesheet" type="text/css" href="Pliki/Style.css"/>
        <link rel="Stylesheet" type="text/css" href="Pliki/Wyglad.css"/>
        <meta http-equiv="Content-Type" content="text/html;charset=windows-1250" /> 
    </head>
    <body>
          <div id="Calosc">
               <div id="headera">
                 <div id="header1a"></div>
                 <div id="header2a"></div>
                 <div id="header3a"></div>
                 <div id="header4a"></div>
                 <div id="header5a"></div>
           </div>
               <div id="headerb">
                 <div id="header1b"></div>
                 <div id="header2b"></div>
                 <div id="header3b"></div>
           </div>
               <div id="headerc">
                 <div id="header1c"></div>
                 <div id="header2c"></div>
                 <div id="header3c"></div>
           </div>
               <div id="srodek">
                 <div id="srodek1"></div>
                 <div id="srodek2">
                        <div id="Menu">
                        <div class="Naglowek1"></div>
                    <div class="Naglowek_Logowanie">MENU</div>
                        <div class="Naglowek3"></div>
                    <div id="nav"><ul>  
                                <li><a href="#czcionki.html">Strona Glowna</a></li>
                            <li><a href="#tekst.html">O Mnie</a></li>
                            <li><a href="#hobby.html">Moje Hobby</a></li>
                            <li><a href="#tlo.html">Moje Projekty</a></li>
                            <li><a href="#artykuly.html">Moje Artykuly</a></li>
                            <li><a href="#marginesy.html">Historia</a></li>
                            <li><a href="#marginesy.html">Linki</a></li>
                            <li><a href="#obramowanie.html">Kontakt</a></li>
                         </ul>
                    </div>
                  </div>
                  <div id="Tresc">
                    <div class="Naglowek1"></div>
                    <div class="Naglowek2">NEWS</div>
                    <div class="Naglowek3"></div>
                    <div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Dodanie systemu news'ow w wersji 1.0</a></div><div class="Data">Data: 06.12.2007</div></div><p>Dziś </p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div><div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Ustawianie szablonu strony</a></div><div class="Data">Data: 05.12.2007</div></div><p>Chcialem .</p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div><div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Tworzenie Layout'a</a></div><div class="Data">Data: 04.12.2007</div></div><p>Kolejnym</p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div><div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Projekt Strony</a></div><div class="Data">Data: 03.12.2007</div></div><p>Utworzenie </p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div> 
                  </div>
                  <div id="Form">
                             <div class="Naglowek1"></div>
                             <div class="Naglowek_Logowanie">LOGOWANIE</div>
                             <div class="Naglowek3"></div>
                             <div class="Logowanie"><br /><br />
                            <form action="panel.php" method="POST">     Podaj Login:<br />
                            <input class="Pole" type="text" id="Login" name="login" value="Login" /><br />
                            Podaj Haslo:<br />
                            <input class="Pole" type="password" name="haslo" value="Haslo" /><br />
                            <input class="Przycisk" type="submit" value="Zaloguj" /> <input class="Przycisk" type="reset" value="Wyczysc" />
                            </form>
                            </div>
                </div>

                </div>
                 <div id="srodek3"></div>

           </div>
               <div id="srodek2a">
                 <div id="srodek1b"></div>
                 <div id="srodek2b"></div>
                 <div id="srodek3b"></div>
           </div>
               <div id="stopka">
                 <div id="stopka1"></div>
                 <div id="stopka2"></div>
                 <div id="stopka3"></div>
           </div>
          </div>
    </body>
</html>

Pozostało 580 znaków

potrzebuje pomocy
2007-12-10 20:30
potrzebuje pomocy
0

jeszcze raz daje linka

http://img69.imageshack.us/my.php?image=l1tz7.gif

Pozostało 580 znaków

2007-12-10 20:35

Rejestracja: 13 lat temu

Ostatnio: 12 lat temu

0

Może i dziwne ale działa. U mnie ta to wygląda:

<div>
    <div class="naglowek"></div>
    <div class="srodek">
        <div class="menu"></div>
        <div class="glowna"></div>
    </div>  
    <div class="stopka"></div>
</div>

I dokładnie takimi stylami:

div.srodek {
    width: 100%;
    min-height:300px;
    height: auto;
    overflow:hidden;
}
div.menu {
    background-color:#3333FF;
    width: 28%;
    float: left;
    padding-bottom: 20000px;
    margin-bottom: -20000px;
}
div.glowna {
    background-color:#3333FF;
    width: 71%;
    float: right;
    padding-bottom: 20000px;
    margin-bottom: -20000px;
}

Wszystko załatwiam. Oba div'y (menu i główna) zawsze mają taką samą wysokość. I wynosi ona tyle ile miejsca potrzebuje większy div.

ps. llmucha i m00cha to cały czas ja. :P

Pozostało 580 znaków

nav
2007-12-10 20:35
nav

Rejestracja: 16 lat temu

Ostatnio: 19 godzin temu

Lokalizacja: Warszawa

0

Ustaw tło dla #srodek (szerokie, z gradientami po bokach), potem zmien to tło tylko w #srodek2 (na to ciemniejsze).


utf-8 rlz! ٩(ಥ_ಥ)۶

Pozostało 580 znaków

Potrzebuje pomocy
2007-12-10 20:41
Potrzebuje pomocy
0
nav napisał(a)

Ustaw tło dla #srodek (szerokie, z gradientami po bokach), potem zmien to tło tylko w #srodek2 (na to ciemniejsze).

tak tylko ze chodzi mi o to zeby to jak najmniej wazylo, no ale sprobuje tak jak mowisz.

a moze ktos wie jak zrobic to tak jak mialem w zalozeniach?

Pozostało 580 znaków

2007-12-10 22:24

Rejestracja: 14 lat temu

Ostatnio: 8 lat temu

0

Wyglada, ze tutaj jest takie cus opisane

http://pmob.co.uk/pob/equal-columns.htm


You need to learn how to walk
before you can run

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0