Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]dwa elementy obok siebie
nigraS
post 22.01.2009, 11:15:19
Post #1





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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

W jaki sposób ustawić, by div 1 i div 2 były ustawione po lewej i po prawej stronie? i jeśli text znajdujący się na div 2, to div 2 będzie się powiększał, a div 1 pozostanie i na odwrót.




index.tpl
[PHP] pobierz, plaintext 
  1. <?php
  2. <body>
  3.   <div id="banner">  </div>
  4.   <div id="pod_bannerem"></div>
  5.   <div id="tlo_linkow"></div>
  6.   <div id="lista_przedstawicieli"></div>
  7.   <div id="text"></div>
  8. </body>
  9. ?>
[PHP] pobierz, plaintext


css
Kod
body{
  background-color:black;
  text-align:center;
}

#banner{
  /*border:solid white 1px;*/
  background-image:url("img/banner.gif");
  background-position:left center;
  background-repeat:no-repeat;
  position:relative;
  margin-left: auto;
  margin-right: auto;  
  width:996px;
  height:198px;
}
#pod_bannerem{
  background-image:url("img/tlo/pod_bannerem.gif");
  background-position:left center;
  background-repeat:no-repeat;
  position:relative;
  margin-left: auto;
  margin-right: auto;  
  width:1024px;
  height:29px;
}
#tlo_linkow{
  background-image:url("img/tlo/tlo_linkow.gif");
  background-position:left center;
  background-repeat:no-repeat;
  position:relative;
  margin-left: auto;
  margin-right: auto;  
  width:1024px;
  height:145px;
}


#lista_przedstawicieli{
  background-image:url("img/tlo/lista_przedstawicieli.gif");
  background-position:left center;
  background-repeat:no-repeat;
  position:relative;
  margin-left: 62px;
  width:198px;
  height:337px;
}
Go to the top of the page
+Quote Post
EarthCitizen
post 22.01.2009, 11:22:29
Post #2





Grupa: Zarejestrowani
Postów: 286
Pomógł: 70
Dołączył: 13.01.2009

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

Kod
#lista_przedstawicieli {
    ...
    float: left;
}

div2 {
    float: right;
}


i jeszcze te 2 divy daj w diva

Kod
<div id="lista_przedstawicieli"></div>
<div id="text"></div>


Ten post edytował EarthCitizen 22.01.2009, 11:24:16
Go to the top of the page
+Quote Post
erix
post 22.01.2009, 18:33:16
Post #3





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
http://www.alistapart.com/articles/holygrail


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
nigraS
post 25.01.2009, 14:33:14
Post #4





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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

zrobiłem tak:
css
Kod
#tresc {
  padding-left: 200px;  
  padding-right: 150px;
}
#tresc .kolumna {
  position: relative;
  float: left;
}
#lista_przedstawicieli {
  color:white;
  background-image:url("img/tlo/lista_przedstawicieli.gif");
  width: 198px;    
  height: 337px;
  right: 61px;          
  margin-left: -10%;
}
#text {
  background-image:url("img/tlo/text.gif");
  width: 758px;
  height: 303px;
  right: 23px;
  margin-right: -150px;
}


php
Kod
div id="tresc">
        <div id="lista_przedstawicieli" class="kolumna">
          test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>test<br><br><br>
        </div>
        
      <div id="text" class="kolumna"></div>
    </div>


zielona kolumna się nie wydłużyła.


Ten post edytował nigraS 25.01.2009, 14:53:55
Go to the top of the page
+Quote Post
erix
post 25.01.2009, 15:02:42
Post #5





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Kod
height: 337px;


Złóż ten lay od nowa, a nie korzystasz z kodu wyplutego przez jakiegoś WYSIWTF.


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Asmox
post 26.01.2009, 11:43:26
Post #6





Grupa: Zarejestrowani
Postów: 359
Pomógł: 12
Dołączył: 16.01.2009

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

Zrób takie coś:
[HTML] pobierz, plaintext 
  1. <div id="nav"><div id="nav-inner">
  2. <!-- Jakaś nawigacja albo coś -->
  3. </div></div>
  4. <div id="content"><div id="content-inner">
  5. <!-- Treść -->
  6. </div></div>
[HTML] pobierz, plaintext

Kod
STYLE CSS
#nav {
width: auto;
min-width: 200px;
}
#nav-inner {
padding: .5em;
}
#content {
width: auto;
min-width: 600px;
}
#content-inner {
padding: .5em;
}

Normalnie dopełnienie odsuwające tekst od krawędzi kontenera (padding) rozpycha cały kontener, ale dzięki zastosowaniu drugiego tak się nie będzie działo.
Min-width ustawiłem po to, aby rozszerzająca się treść nie zmniejszyła za bardzo drugiej kolumny

P.S. Pomysł z 2 div'ami ściągnąłem z książki CSS. Witryny internetowe szyte na miarę.


--------------------
Moja prywatna strona internetowa
Go to the top of the page
+Quote Post
nigraS
post 26.01.2009, 13:43:58
Post #7





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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

a jak ustawić, by kolumny się nie ruszały?
Gdy jest długi tekst, i pojawia się suwak, to jest ok, a gdy jest mały test i brak suwaka, kolumny się przesuwają.
Go to the top of the page
+Quote Post
erix
post 26.01.2009, 16:13:32
Post #8





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Strzelam, że trzeba podać szerokość dla #tresc.


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
nigraS
post 26.01.2009, 16:34:15
Post #9





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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

jak poszerzyłem #tresc to teraz jest na odwrót
Gdy jest długi tekst, i pojawia się suwak, to nie jest ok, a gdy jest mały test i brak suwaka, jest ok.
Go to the top of the page
+Quote Post
erix
post 26.01.2009, 16:36:02
Post #10





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Ale pamiętaj, że do szerokości wliczają się również padding. winksmiley.jpg


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
nigraS
post 26.01.2009, 16:38:43
Post #11





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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

padding mam tylko w #tresc, tak on wygląda
Kod
#tresc {
  padding-left: 200px;  
  padding-right: 250px;
}
Go to the top of the page
+Quote Post
erix
post 26.01.2009, 17:15:12
Post #12





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
http://www.w3.org/TR/CSS21/box.html#box-dimensions


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
nigraS
post 27.01.2009, 11:18:51
Post #13





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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

patrzę i nie widzę, jaki popełniłem błąd?

Kod
<body>
  <div id="banner">  </div>
  <div id="pod_bannerem"></div>
  

    <div id="tlo_linkow">
        <!--
          <img src="css/img/przyciski/aktualnosci.png" class="aktualnosci">
        
      <img src="css/img/przyciski/o_firmie.png" class="o_firmie">
      <img src="css/img/przyciski/produkty.png" class="przyciski">
      <img src="css/img/przyciski/kariera.png" class="przyciski">
        
          <img src="css/img/przyciski/zostan_przedstawicielem.png" class="zp_i_k">
          <img src="css/img/przyciski/kontakt.png" class="k">
        -->
    </div>

  

  
    <div id="tresc">
        <div id="przedstawiciele_srodek" class="kolumna">
          test<br><br><br>test<br><br><br>test
            <div id="przedstawiciele_dol"></div>
        </div>
        
      <div id="tresc_srodek" class="kolumna">
        test
          <div id="tresc_dol"></div>
      </div>
    </div>
    
    <div id="stopka"></div>
    
    
    
    
    

</body>


Kod
body{
  background-color:black;
  text-align:center;
}

#banner{
  /*border:solid white 1px;*/
  background-image:url("img/banner.gif");
  background-position:left center;
  background-repeat:no-repeat;
  position:relative;
  margin-left: auto;
  margin-right: auto;  
  width:996px;
  height:198px;
}
#pod_bannerem{
  background-image:url("img/tlo/pod_bannerem.gif");
  background-position:left center;
  background-repeat:no-repeat;
  position:relative;
  margin-left: auto;
  margin-right: auto;  
  width:1024px;
  height:29px;
}
#tlo_linkow{
  background-image:url("img/tlo/tlo_linkow.gif");
  background-position:left center;
  background-repeat:no-repeat;
  position:relative;
  margin-left: auto;
  margin-right: auto;  
  width:1024px;
  height:145px;
}



#tresc {
  padding-left: 200px;  
  padding-right: 250px;
}
#tresc .kolumna {
  position: relative;
  float: left;
}
#przedstawiciele_srodek {
  color:white;
  background-image:url("img/tlo/przedstawiciele_srodek.png");
  width: 198px;    
  
  right: 61px;          
  margin-left: -10%;
}
#przedstawiciele_dol{
  background-image:url("img/tlo/przedstawiciele_dol.png");
  width: 198px;
  height: 16px;
  right: 61px;          
}
#tresc_srodek {
  background-image:url("img/tlo/tresc_srodek.png");
  width: 758px;
  right: 23px;
  margin-right: -250px;
}
#tresc_dol{
  background-image:url("img/tlo/tresc_dol.png");
  width: 758px;
  height: 20px;
}


#stopka{
  background-image:url("img/tlo/stopka.png");
  width: 1007px;
  height: 40px;

}


Ten post edytował nigraS 27.01.2009, 14:46:10
Go to the top of the page
+Quote Post
erix
post 27.01.2009, 18:12:00
Post #14





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Nie widzę, abyś nadał szerokość dla #tresc.


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
koreja
post 27.01.2009, 19:18:35
Post #15





Grupa: Zarejestrowani
Postów: 120
Pomógł: 22
Dołączył: 15.07.2008
Skąd: Raniżów/Rzeszów

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

Z doskoku zapytam: po co position:relative w #tresc .kolumna?
Go to the top of the page
+Quote Post
nigraS
post 28.01.2009, 13:51:30
Post #16





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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

ok, dodałem width:1024px; do treści, a #tresc .kolumna usunąłem position:relative

co zrobić, by kolumny nie wychodziły z poza obramowania body?

Ten post edytował nigraS 28.01.2009, 18:52:22
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 16.05.2025 - 08:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn