Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak polączyc ze sobą dwa divy
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
endr1u
21.02.2009, 21:43:33
Czy konieczne jest stosowanie takiego kodu?

html
Kod
<div id="puszkaGlowna">
    <div id="tytulNewsa">title
    </div>

    <div id="dataNewsa">date
    </div>
</div>


css
Kod
div#tytulNewsa{float: left; width: 50%; border-bottom: 1px solid; padding: 2px 0px 2px 0px;}
div#dataNewsa{float: right; width: 50%; border-bottom: 1px solid; padding: 2px 0px 2px 0px;}


czy da sie to zrobic jakos mniej bolesnie?
piotrooo89
21.02.2009, 21:45:42
zamiast float'ów można nadać display: inline; ale szczerze mówiąc nie wiem czy jest sens.
endr1u
21.02.2009, 21:50:38
Cytat(piotrooo89 @ 21.02.2009, 21:45:42 ) *
zamiast float'ów można nadać display: inline; ale szczerze mówiąc nie wiem czy jest sens.


ale chodzi mi o to, ze jak teraz bede chcial uzyc paddinga od prawej i od lewej wtedy bede musial obliczac szerokosc wszystkiego od nowa.. jak display moge uzyc?
piotrooo89
21.02.2009, 22:02:39
Cytat(endr1u @ 21.02.2009, 21:50:38 ) *
ale chodzi mi o to, ze jak teraz bede chcial uzyc paddinga od prawej i od lewej wtedy bede musial obliczac szerokosc wszystkiego od nowa..


nie bardzo rozumiem.

Cytat(endr1u @ 21.02.2009, 21:50:38 ) *
jak display moge uzyc?


[HTML] pobierz, plaintext 
  1. div#tytulNewsa{ display: inline; width: 50%; border-bottom: 1px solid; padding: 2px 0px 2px 0px;}
  2. div#dataNewsa{ display: inline; width: 50%; border-bottom: 1px solid; padding: 2px 0px 2px 0px;}
[HTML] pobierz, plaintext
endr1u
21.02.2009, 22:09:22
Cytat(piotrooo89 @ 21.02.2009, 22:02:39 ) *
nie bardzo rozumiem.



[HTML] pobierz, plaintext 
  1. div#tytulNewsa{ display: inline; width: 50%; border-bottom: 1px solid; padding: 2px 0px 2px 0px;}
  2. div#dataNewsa{ display: inline; width: 50%; border-bottom: 1px solid; padding: 2px 0px 2px 0px;}
[HTML] pobierz, plaintext


to mi nic nie dalo.. chodzi mi o to, ze chce poprostu na stałe połączyć prawa kolumne z lewą bo gdy zrobilem tak jak w przykladzie wyzej to gdy chce ustawic padding 5px 5px 5px 5px wtedy wszystko sie psuje i musze wtedy od powiedzmy szerokosci 1024 odejmowac te 5px od prawej i od lewej.. zeby zachowac okreslona szerokosc..
gcdreak
21.02.2009, 23:13:26
Kod
margin:0;
endr1u
22.02.2009, 12:16:34
wy mnie w ogole nie rozumiecie moze cos niejasno napisalem.. mam kod :

Kod
body, div, table, p, ul, li, a, form, input, label{margin: 0px; padding: 0px; text-align: center;}

body{font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 12px; color: #000000; margin: 20px;}

div#puszkaGlowna{width: 1024px; padding: 0px; background-color: green; margin: 0px auto; border: 1px solid;}
div#tytulNewsa{float: left; width: 50%; border-bottom: 1px solid; padding: 2px 5px 2px 5px; text-align: left; margin: 0px;}
div#dataNewsa{float: right; width: 50%; border-bottom: 1px solid; padding: 2px 5px 2px 5px; text-align: right; margin: 0px;}
div#trescNewsa{clear: both; height: 150px; border-bottom: 1px solid; padding: 15px 25px 15px 25px;}
div#panelNewsa{clear: both; padding: 2px 15px 2px 0px; text-align: right;}


a html :
Kod
<div id="tlo">
    <div id="lewa"></div>
    <div id="prawa"></div>
</div>

<div id="puszkaGlowna">
    <div id="tytulNewsa">{$tytul}
    </div>

    <div id="dataNewsa">{$data}
    </div>

    <div id="trescNewsa">{$zawartosc}
    </div>

    <div id="panelNewsa">{$komentarze}
    </div>
</div>


wklejcie to gdzies i zobaczycie o co mi chodzi jak ustawilem padding lewy i prawy to mi sie robia takie linie ..
piotrooo89
22.02.2009, 12:33:04
szczerze powiedziawszy to nie bardzo wiem czy będzie to możliwe bez ustawiania szerokości. choć mogę się mylić i chętnie poznam ewentualne rozwiązanie.
endr1u
22.02.2009, 12:42:32
Cytat(piotrooo89 @ 22.02.2009, 12:33:04 ) *
szczerze powiedziawszy to nie bardzo wiem czy będzie to możliwe bez ustawiania szerokości. choć mogę się mylić i chętnie poznam ewentualne rozwiązanie.


aha no ja tez chetnie poznam i jeszcze jedno pytanie dlaczego jak ustawiam margines powiedzmy tutaj :
Kod
div#puszkaGlowna{position:relative; z-index: 2; width: 1024px; padding: 0px; background-color: green; margin: 20px auto; border: 1px solid;}

to tyczy sie to calego dokumentu?
piotrooo89
23.02.2009, 11:52:57
Cytat(endr1u @ 22.02.2009, 12:42:32 ) *
aha no ja tez chetnie poznam i jeszcze jedno pytanie dlaczego jak ustawiam margines powiedzmy tutaj :


ponieważ to jest kontener główny w którym masz pozostałe, są w nim niejako zawarte i dostosowują się do swojego rodzica w tym wypadku #puszkaGlowna

nie wiem czy to rozwiąże Twój problem ale być może: http://forum.php.pl/index.php?showtopic=11...st&p=575357
sowiq
23.02.2009, 12:15:14
Cytat(endr1u @ 21.02.2009, 22:09:22 ) *
i musze wtedy od powiedzmy szerokosci 1024 odejmowac te 5px od prawej i od lewej.. zeby zachowac okreslona szerokosc..
Tak, musisz. Wyświetlana szerokość = width + padding-left + padding-right + border-left + border-right (z tymi borderami to różnie czasami - chodzi mi o IE).

Jeżeli chcesz to obejść, to możesz zrobić tak:
[HTML] pobierz, plaintext 
  1. <div style="width: 200px; height: 200px; float: left; background-color: #ff0;" id="rodzic1">
  2.     <div style="padding: 20px;" id="dziecko1">
  3.         Tutaj ustawiasz padding ile chcesz bez zmiany szerokości rodzica...
  4.     </div>
  5. </div><div style="width: 200px; height: 200px; float: left; background-color: #f00;" id="rodzic2">
  6.     <div style="padding: 50px;" id="dziecko2">
  7.         Tutaj ustawiasz padding ile chcesz bez zmiany szerokości rodzica...
  8.     </div>
  9. </div>
[HTML] pobierz, plaintext
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.