Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów › Technologie internetowe - tworzenie stron WWW › xHTML, CSS, JavaScript v
[css] problem z grafiką w divach i layoutem

Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tryb drzewa
[css] problem z grafiką w divach i layoutem
ukaef Offline
Junior Member
**
Liczba postów: 2
Liczba wątków: 1
Dołączył: 14-03-2008
Reputacja: 0
#1
14-03-2008, 22:22
Szukaj
Odpowiedz
ppawel4 Offline
Hall of Fame
**
Liczba postów: 43
Liczba wątków: 4
Dołączył: 19-02-2008
Reputacja: 0
#2
14-03-2008, 23:02
Mógłbyś to jakoś bardziej wyjaśnić i pokazać ten kod?
Jeżeli chcesz umieścić 3 divy obok siebie to spróbój tak
Kod:
<div id="paka">
<div id="left'></div>
<div id="right"></div>
<div id="center"><div/>
</div>

A w css daj
Kod:
#paka { width: 900px;}
#left { width: 200px;
          float: left; }
#right {width: 200px;
           float: right; }
#center { width: 500px;
               float: left; }

Oczywiście szerokość ustawiasz według potrzeb.
http://red104.w.interia.pl/ - moja stronka o Maluchach
http://www.twojpc.ugu.pl/ - Twoje forum komputerowe
Strona WWW Szukaj
Odpowiedz
ukaef Offline
Junior Member
**
Liczba postów: 2
Liczba wątków: 1
Dołączył: 14-03-2008
Reputacja: 0
#3
15-03-2008, 04:26 (Ten post był ostatnio modyfikowany: 15-03-2008, 04:48 przez Radek.)
ppawel4 napisał(a):Mógłbyś to jakoś bardziej wyjaśnić i pokazać ten kod?
Jeżeli chcesz umieścić 3 divy obok siebie to spróbój tak
Kod:
<div id="paka">
<div id="left'></div>
<div id="right"></div>
<div id="center"><div/>
</div>

A w css daj
Kod:
#paka { width: 900px;}
#left { width: 200px;
          float: left; }
#right {width: 200px;
           float: right; }
#center { width: 500px;
               float: left; }

Oczywiście szerokość ustawiasz według potrzeb.

Kod:
body  {
    font: 12px Arial, Helvetica;
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    background-image:url(dol_bgd.jpg);
    background-position: bottom;
    background-repeat:repeat-x;
}
#calosc {
    width: 1018px;
    background: #1D1D1D;
    margin: 0 auto;
    border: none;
    text-align: left;
        background-image:url(dol_bgd.jpg);
    background-position: bottom;
    background-repeat:repeat-x;
}
#pudelko {
    width: 918px;
    background: #1D1D1D;
    margin: 0 auto;
    border: none;
    text-align: left;
}
#gora {
    width: 918px;
    height: 78px;
    background: #999999;
    margin: 0 auto;
    border: none;
    background-image:url(gora.jpg);
}
#menu {
    width: 918px;
    height: 211px;
    background: #999999;
    margin: 0 auto;
    border: none;
    background-image:url(menu.jpg);
}
#handler {
    width: 918px;
    height: auto;
    background: #1D1D1D;
    margin: 0;
    border: none;
    clear: none;
    display: block;
}
#left {
    width: 261px;
    height:auto;
    background: #1D1D1D;
    margin: 0;
    margin-left: 0px;
    border: none;
    float: left;    /*display: inline;
    clear: none;*/
    padding-left: 20px;
}
#kontent {
    height:auto;
    width: 594px;
    background: #1D1D1D;
    margin: 0;
    margin-bottom: 20px;
    padding-left: 20px;
    border: none;
    float: left;  
    display: block;
    /*clear: none;*/
}
#stopka {
    width: 918px;
    height: 203px;
    background: #999999;
    background-image:url(stopka.jpg);
    /*position: absolute;
    bottom: 0px;    */
    clear: both;
    display: block;
}
#gora_lewo {
    width: auto;
    height: 285px;
    padding: 0;
    margin: 0;
    background: #FFFFFF;
    background-image:url(gora_bgd.jpg);
    /*position: absolute;
    bottom: 0px;    */
    clear: both;
    float: left;
    display: inline;
}
#gora_prawo {
    width: auto;
    height: 285px;
    padding: 0;
    margin: 0;
    background: #FFFFFF;
    background-image:url(gora_bgd.jpg);
    /*position: absolute;
    bottom: 0px;    */
    clear: none;
    float: right;
    display: inline;
}
nie wiem czemu nie wskoczył, dawałem go w pierwszym poście Smile

Kod:
<body>
<div id="calosc">

<div id="gora_lewo">
<img src="gora_l.jpg" />
</div>
<div id="gora_prawo">
<img src="gora_p.jpg" />

</div>

<div id="pudelko">
  <div id="gora"></div>
  <div id="menu"></div>
  <div id="handler">
      <div id="left">
      <img src="m_dolacz.jpg" />
      <img src="m_nprod.jpg" />
      </div>

      <div id="kontent">
      <img src="k_aktual.jpg" />
      <img src="n_nowew.jpg" style="margin-left:25px; margin-right:auto" />
      <img src="k_licencja.jpg" />
      </div>
  </div>
  <div id="stopka">
  </div>
</div>

</div>
</body>

jest zrobione mniej więcej tak jak mówisz i IE przesuwa "pojemnik" poniżej tych dwóch boków...
Szukaj
Odpowiedz
Marcin Offline
Administrator
*******
Liczba postów: 852
Liczba wątków: 35
Dołączył: 17-12-2007
Reputacja: 12
#4
15-03-2008, 16:01
Spakuj całość z obrazkami w zipa i wrzuć jako załącznik w odpowiedzi, bo bez grafiki ciężko zobaczyć ten błąd.
Strona WWW Szukaj
Odpowiedz
ppawel4 Offline
Hall of Fame
**
Liczba postów: 43
Liczba wątków: 4
Dołączył: 19-02-2008
Reputacja: 0
#5
16-03-2008, 01:12
Dla "pudelko" daj jeszcze
Kod:
float: right;

a dla tych po bokach ustal szerokosć zamiast auto tak aby suma wszystkich trzech szerokości była równa szerokosci "calosc"
http://red104.w.interia.pl/ - moja stronka o Maluchach
http://www.twojpc.ugu.pl/ - Twoje forum komputerowe
Strona WWW Szukaj
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Grafika na tablecie i telefonie barthy 6 21,228 11-02-2021, 12:58
Ostatni post: nebruu
  Problem z background'em w divach i z-index iluminatix 1 2,157 30-04-2013, 21:34
Ostatni post: b3zyr
  Problem z float w dwóch divach obok siebie VuQ 4 3,952 02-10-2011, 23:57
Ostatni post: Kartofelek
  Szablon na divach, problem z tłami lukaszwojcik 1 2,320 21-03-2011, 13:51
Ostatni post: Kartofelek
  Problem z stroną na divach i IE Leon1991 6 4,704 20-02-2011, 06:48
Ostatni post: Leon1991

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl