Forum PHP.pl > [HTML][CSS]dwa elementy obok siebie

nigraS

22.01.2009, 11:15:19

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 
<?php
<body>
  <div id="banner">  </div>
  <div id="pod_bannerem"></div>
  <div id="tlo_linkow"></div>
  <div id="lista_przedstawicieli"></div>
  <div id="text"></div>
</body>
?>
[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;
}

EarthCitizen

22.01.2009, 11:22:29

Kod

#lista_przedstawicieli {
    ...
    float: left;
}

div2 {
    float: right;
}

i jeszcze te 2 divy daj w diva

Kod

erix

22.01.2009, 18:33:16

http://www.alistapart.com/articles/holygrail

nigraS

25.01.2009, 14:33:14

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.

erix

25.01.2009, 15:02:42

Kod

height: 337px;

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

Asmox

26.01.2009, 11:43:26

Zrób takie coś:

[HTML] pobierz, plaintext 
<div id="nav"><div id="nav-inner">
<!-- Jakaś nawigacja albo coś -->
</div></div>
<div id="content"><div id="content-inner">
<!-- Treść -->
</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ę.

nigraS

26.01.2009, 13:43:58

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ą.

erix

26.01.2009, 16:13:32

Strzelam, że trzeba podać szerokość dla #tresc.

nigraS

26.01.2009, 16:34:15

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.

erix

26.01.2009, 16:36:02

Ale pamiętaj, że do szerokości wliczają się również padding.

nigraS

26.01.2009, 16:38:43

padding mam tylko w #tresc, tak on wygląda

Kod

#tresc {
padding-left: 200px;
padding-right: 250px;
}

erix

26.01.2009, 17:15:12

http://www.w3.org/TR/CSS21/box.html#box-dimensions

nigraS

27.01.2009, 11:18:51

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

Kod

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;

}

erix

27.01.2009, 18:12:00

Nie widzę, abyś nadał szerokość dla #tresc.

koreja

27.01.2009, 19:18:35

Z doskoku zapytam: po co position:relative w #tresc .kolumna?

nigraS

28.01.2009, 13:51:30

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?