[CSS][HTML] Przesunięcie div'a przy podówjnym <br/> Opcje

[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:

[HTML] pobierz, plaintext 
<table>
	2011.04.28
 
	<tr>
		<td width="600"><img src="images/aktualnosci/20110428/kurczak_mini.png" style="vertical-align: middle; text-align: center;">
		<b>Coś tam</b>
 
		<p align="justify">
		Jakiś tekst <br /><br />
		</td>
	</tr>
</table>
<img src="images/line.png">
<br />
 
 
<table>
	2011.04.28
 
	<tr>
		<td width="600"><img src="images/aktualnosci/20110428/kurczak_mini.png" style="vertical-align: middle; text-align: center;">
		<b>Coś tam</b>
 
		<p align="justify">
		Jakiś tekst <br /><br />
		</td>
	</tr>
</table>
<img src="images/line.png">
<br />
[HTML] pobierz, plaintext 

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]

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:

[HTML] pobierz, plaintext 
<div id="content_wrapper">
  <div id="content">
 
    <div>
            <?php page_chooser(); ?>
    </div>
 
  </div>
  <!-- end of content -->
  <div id="sidebar">
    <div class="sidebar_section">
      <h2>Menu</h2>
      <div class="sidebar_section_content">
        <ul class="categories_list">
          <li><a href="index.php?page=main">Aktualności</a></li>
	  <li><a href="index.php?page=twojsamorzad">Twój Samorząd</a></li>					
          <li><a href="index.php?page=zobrad">Z obrad RM oraz KRM</a></li>
          <li><a href="index.php?page=sokumenty">Dokumenty</a></li>
          <li><a href="index.php?page=linki">Linki</a></li>
          <li><a href="index.php?page=mediaonas">Media o nas</a></li>					
	  <li><a href="index.php?page=pytania">Pytania i odpowiedzi</a></li>					
	  <li><a href="index.php?page=kontakt">Kontakt</a></li>
        </ul>
      </div>
    </div>
    <div class="cleaner_h30"></div>
		<br />
    <div class="sidebar_section">
      <h2>Strefa </h2>
      <div class="sidebar_section_content">
 
        <div class="cleaner"></div>
      </div>
    </div>
  </div>
  <!-- end of sidebar -->
  <div class="cleaner"></div>
</div>
[HTML] pobierz, plaintext 

Sekcja, w której jest tekst to:

[HTML] pobierz, plaintext 
    <div>
            <?php page_chooser(); ?>
    </div>
[HTML] pobierz, plaintext 

A poniżej CSS odpowiedzialny za to:

[HTML] pobierz, plaintext 
#content_wrapper {
	width: 920px;
	margin: 0 auto;
	padding: 20px 40px;
	background: url(images/content.jpg) repeat-y;
 
}
 
#content {
	float: left;
	width: 600px;
}
 
[HTML] pobierz, plaintext 

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]

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

[HTML] pobierz, plaintext 
		<p align="justify">
[HTML] pobierz, plaintext 

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)

[HTML] pobierz, plaintext 
<br /><br /><br /><br /><br /><br />
Gorąco zachęcamy do udziału w tworzeniu galerii.
[HTML] pobierz, plaintext 

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,

Ten post edytował achill 10.05.2011, 18:27:42

[BlackWorth]

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