Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Przesunięcie div'a przy podówjnym <br/>
Forum PHP.pl > Forum > Przedszkole
L0k0
Witam!

Zdecydowałem się zapytać na forum, bo od dwóch dni walczę z dziwnym dla mnie problemem i nie mogę sobie poradzić.

W zasadzie nie wiem nawet jakie części kodu dołączyć

Sprawa wygląda tak:

  1. 2011.04.28
  2.  
  3. <tr>
  4. <td width="600"><img src="images/aktualnosci/20110428/kurczak_mini.png" style="vertical-align: middle; text-align: center;">
  5. <b>Coś tam</b>
  6.  
  7. <p align="justify">
  8. Jakiś tekst <br /><br />
  9. </td>
  10. </tr>
  11. <img src="images/line.png">
  12. <br />
  13.  
  14.  
  15. 2011.04.28
  16.  
  17. <tr>
  18. <td width="600"><img src="images/aktualnosci/20110428/kurczak_mini.png" style="vertical-align: middle; text-align: center;">
  19. <b>Coś tam</b>
  20.  
  21. <p align="justify">
  22. Jakiś tekst <br /><br />
  23. </td>
  24. </tr>
  25. <img src="images/line.png">
  26. <br />


Problem pojawia się, gdy w którejś z tabel daję podwójny znak <br /> , <br> lub <p>.

Wtedy to cały div, w którym osadzony jest plik z tym tekstem przesuwa się o kilkanaście pikseli w lewo względem nagłówka.



Co ciekawsze: jeśli w jednej tabeli zrobię parę <br> to wszystko jest dobrze, problem pojawia się, gdy w drugiej tabeli zrobię to samo.

Czy ktoś się z czymś takim spotkał?

Pozdrawiam!

pedro84
Zacznijmy od podstaw: Wiesz do czego służy <br/>? Chyba nie, bo kod masz strasznie śmieciowy.

Pokaż screen.
L0k0
Cytat(pedro84 @ 2.05.2011, 17:43:55 ) *
Zacznijmy od podstaw: Wiesz do czego służy <br/>? Chyba nie, bo kod masz strasznie śmieciowy.

Pokaż screen.


<a href="http://ifotos.pl/zobacz/Beztytulu_hnenwxr.png/"><img src="http://s2.ifotos.pl/mini/Beztytulu_hnenwxr.png">Tutaj po przesunięciu</a>

Nie wiem czy o tego screena chodziło.

No BR to break, czyli złamanie linii. Dziwi mnie to, że jedno złamanie nic nie przeszkadza, a dwa już tak, większa ilość nie robi różnicy.
pedro84
Skopałeś strukturę zapewne. Wstawiasz tekst zaraz po <table> co jest złe. <br/> to załamanie linii, ale w tekście. Nie służy do tych celów, do których Ty chcesz to użyć. Ogólnie, robisz sieczkę.

Zrób te tabele po ludzku (kurshtml.boo.pl) i będą działać.
L0k0
Poza tym tekstem po <table> (pozostałość po dłubaniu) tabela jest prawie najprostszą z możliwych.

Jeśli div się przesunie, to obojętne, z której tabeli wytnę tekst z któregoś <td> i się naprawia. Nie ma znaczenia, z którego.

Czy ma ktoś jeszcze jakieś pomysły?
pedro84
Ale czy Ty nie rozumiesz, że <br> służy do załamywania tekstu, a nie odstępów? Użyj CSS.

Poza tym, pokaż więcej kodu.
L0k0
Dobra, już wiem, o co chodzi, ale nie znam rozwiązania.

div przestawia się, kiedy tekstu jest tak dużo, że strona musi się wydłużyć.

Prawdopodobnie coś trzeba ustawić w CSS'ach.

Tu jest sekcja div z index'u:

  1. <div id="content_wrapper">
  2. <div id="content">
  3.  
  4. <div>
  5. <?php page_chooser(); ?>
  6. </div>
  7.  
  8. </div>
  9. <!-- end of content -->
  10. <div id="sidebar">
  11. <div class="sidebar_section">
  12. <h2>Menu</h2>
  13. <div class="sidebar_section_content">
  14. <ul class="categories_list">
  15. <li><a href="index.php?page=main">Aktualności</a></li>
  16. <li><a href="index.php?page=twojsamorzad">Twój Samorząd</a></li>
  17. <li><a href="index.php?page=zobrad">Z obrad RM oraz KRM</a></li>
  18. <li><a href="index.php?page=sokumenty">Dokumenty</a></li>
  19. <li><a href="index.php?page=linki">Linki</a></li>
  20. <li><a href="index.php?page=mediaonas">Media o nas</a></li>
  21. <li><a href="index.php?page=pytania">Pytania i odpowiedzi</a></li>
  22. <li><a href="index.php?page=kontakt">Kontakt</a></li>
  23. </ul>
  24. </div>
  25. </div>
  26. <div class="cleaner_h30"></div>
  27. <br />
  28. <div class="sidebar_section">
  29. <h2>Strefa </h2>
  30. <div class="sidebar_section_content">
  31.  
  32. <div class="cleaner"></div>
  33. </div>
  34. </div>
  35. </div>
  36. <!-- end of sidebar -->
  37. <div class="cleaner"></div>
  38. </div>


Sekcja, w której jest tekst to:
  1. <div>
  2. <?php page_chooser(); ?>
  3. </div>


A poniżej CSS odpowiedzialny za to:
  1. #content_wrapper {
  2. width: 920px;
  3. margin: 0 auto;
  4. padding: 20px 40px;
  5. background: url(images/content.jpg) repeat-y;
  6.  
  7. }
  8.  
  9. #content {
  10. float: left;
  11. width: 600px;
  12. }
  13.  


Czy toś ma pojęcie jak to zrobić, żeby jak tekstu jest więcej niż 'strona' i schodzi niżej, to żeby mi się to nie rozjeżdżało?

Pozdrawiam
pedro84
Hm... Skoro dajesz elementowi
Kod
float:left
to nadrzędnemu daj
Kod
overflow:hidden;
, to raz.

Po drugie, wrzuć cały kod, a jeśli masz, to link do strony.
L0k0
http://l0k0.cba.pl

Wrzuciłem tam projekt z 'efektem' przesunięcia. Jak możesz pedro to obadaj.

Dzięki
pedro84
Jak robisz listę, <ul> to nie możesz ładować linków bezpośrednio do środka (musi być <li>).

Zupełnie też nie jestem w stanie zrozumieć, dlaczego traktujesz listę newsów jako tabelę, która z tabelą wspólnego ma... nic. To tak na szybko, wieczorem obadam dokładniej i zmodyfikuję posta.
L0k0
Cytat(pedro84 @ 3.05.2011, 12:02:52 ) *
Jak robisz listę, <ul> to nie możesz ładować linków bezpośrednio do środka (musi być <li>).

Zupełnie też nie jestem w stanie zrozumieć, dlaczego traktujesz listę newsów jako tabelę, która z tabelą wspólnego ma... nic. To tak na szybko, wieczorem obadam dokładniej i zmodyfikuję posta.


No to <li> zrobiłem, co do tabel to... po prostu jest mi najłatwiej sformatować wiadomość. Chociaż próbowałem z <div> ale efekt końcowy był taki sam, tzn. przy wydłużeniu głównego div'a całość przesuwa się w lewo o parę pixeli.

http://l0k0.cba.pl/style.css pod tym adresem oczywiście jest cały styl.

Pozdrawiam
achill
1)Na moje oko pewnie tu masz problem - wewnątrz table masz
  1. <p align="justify">

a gdzie zamknięcie tego paragrafu? nie skomentuję - align="justify" (oczywiście poprawnie ale nie lepiej w cssie? kod mało czytelny a wszelkie zmiany musisz wprowadzać w kazdym paragrafie z osobna).

2)
  1. <br /><br /><br /><br /><br /><br />
  2. Gorąco zachęcamy do udziału w tworzeniu galerii.

zapoznaj się bliżej z paddingami, marginami, borderami wogole formatowaniem w cssie nie będziesz wtedy musiał sie br wspomagac. Ja bym to wogole dał w osobnej tabeli jezeli juz sie na nie uparles.

a jesli koniecznie ma to byc pod ta wiadomoscia to wrzuc to w span i daj margin-top(zalecane) albo padding-top zamiast tych wszystkich br.

3) Na twoim miejscu wziałbym dwa tygodnie wolnego. tydzien zeby zapomniec o wszystkim co wiesz o tworzeniu stron w html/css, drugi tydzien na ponowne nauczenie sie htmla i cssa. Bez urazy,
BlackWorth
Cytat(pedro84 @ 3.05.2011, 12:02:52 ) *
Jak robisz listę, <ul> to nie możesz ładować linków bezpośrednio do środka (musi być <li>).

Zupełnie też nie jestem w stanie zrozumieć, dlaczego traktujesz listę newsów jako tabelę, która z tabelą wspólnego ma... nic. To tak na szybko, wieczorem obadam dokładniej i zmodyfikuję posta.


ponieważ użył pewno mysql_fetch_array() i dał pętle for która dopisuje kolejne wiersze tabeli jako wyniki zapytania tongue.gif
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.