Skocz do zawartości
ThePiotrek

Błędy za błędami

Rekomendowane odpowiedzi

Cześć, to znowu ja, i znowu mam problem z moim "zenkowym" kodem. Problem polega na tym, że znacznik <b> jest zbyt duży. W CSS nie doszukałem się niczego, co by miało na to wpływać, a wcześniej, przed wprowadzeniem kilku zmian było dobrze. Tak to wygląda:

 

BtJ28ly.jpg

 

(na wygląd strony nie patrzcie, dopiero przystosowywuje pod nowe tło) Mój kod wygląda tak:

echo '
<div align="center">
	<h1>Strona główna
	'; $zapytanie = mysql_query("SELECT id, name, author_id, text FROM `pb_news` ORDER BY id desc");
	   while($row = mysql_fetch_assoc($zapytanie)){
	    $strona = 'http://cenzura.pl/article.php?id='.$row['id'].'';
		echo("<div id='ramka' align='left'>");
		echo("<div id='tytul'><h2>".przerobTekst($row["name"], false, true)."</h2></div>");
		echo("<b>>Dodane przez: <a href='user.php?id=".$row["author_id"]."'>".pobierzWszystkieDane($row["author_id"])['nick']."</a></b><br>");
		echo("<h6 style='width: 100'>".przerobTekst(str_replace(" ", "&nbsp;", $row["text"]), true, false)."</h6><br>");
		$komentarzy = "<fb:comments-count href=".$strona."></fb:comments-count>";
		echo("<div align='left'><a href='article.php?id=".$row['id']."'><h6>Komentarzy: ".$komentarzy."</h6></a></div>");
		echo("</div>");
	   }
	   '
	
</div>
';

a CSS tak:

 

http://sendfile.pl/pobierz/326893---LtZ6.html

dałem też na pastebin, ale wygląda tragicznie.

http://pastebin.com/tKMVzArt

 

Z góry dzięki za pomoc.

Edytowane przez ThePiotrek

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

echo("<b>>

Usuń ten jeden znak jak możesz. Nie wiem, czy to pomoże, ale mimo wszystko lepiej mieć problem mniej.

 

Edit:

Nie zamykasz też tagu <h1>, który masz przy napisie Strona Główna.

Edytowane przez PaweL

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

No to nie wiem, ustaw w css'ie b { font-size: Ypx; }

 

Rzecz jasna zmień Y na własny rozmiar, etc.

 

Czyli h1 było przyczyną.

Edytowane przez PaweL

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Na przyszłość polecam Ci korzystać z Firefox'a. Ma bardzo dobre narzędzia dla webmasterów. W kodzie źródłowym strony (CTRL+U) zaznaczy Ci błędy HTML'a.

Jak dobrze poszperasz to masz też podgląd responsywności strony - http://screenshooter.net/101871354/aytmiwp

Edytor stylów - http://screenshooter.net/101871354/vkliurw

Zobaczysz jaki element strony ile czasu zajmuje przy wchodzeniu na nią - http://screenshooter.net/101871354/watdaje

Zobaczysz też błędy w JavaScript oraz jak bardzo ci laguje kod w JS - http://screenshooter.net/101871354/gcljkhn

Polecam :P

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Mam jeszcze jeden błąd, mianowicie tekst wychodzi mi poza div'a. Wygląda to tak:

 

GDTYL07.jpg

 

Trochę poprzeglądałem internet i próbowałem dodać do CSS overflow: hidden; albo display: block; Ale w przypadku 1 to nic nie dało, a w przypadku tego drugiego było jeszcze gorzej. CSS'a trochę zmodyfikowałem, dopisałem na końcu:

.ramka {
	width: 60%;
	background-color: #ffffff;
	padding: 1%;
}

.ramka h1, h2, h3, h4, h6, b {color: #000000;}

.tytul {
	 width: 60%; 
	 height: 20%;
	 font-size: 14px;
	 padding:20px; 
	 color: #fff;
         background: url("http://cenzura.pl/images/piksel.png")
	 repeat;
}

Kod też został zmieniony, wygląda tak:

 

'; $zapytanie = mysql_query("SELECT id, name, author_id, text FROM `pb_news` ORDER BY id desc");
  while($row = mysql_fetch_assoc($zapytanie)){
   $strona = 'http://cenzura.pl/article.php?id='.$row['id'].'';
echo("<div class='tytul'><h5 style='font-weight: bold'>".przerobTekst($row["name"], false, true)."</h2></div>");
echo("<div class='ramka'>");
echo("<div align='left'>");
echo("<b>Dodane przez: <a href='user.php?id=".$row["author_id"]."'>".pobierzWszystkieDane($row["author_id"])['nick']."</a></b><br>");
echo("<h6 style='width: 100'>".przerobTekst(str_replace(" ", " ", $row["text"]), true, false)."</h6><br>");
$komentarzy = "<fb:comments-count href=".$strona."></fb:comments-count>";
echo("<a href='article.php?id=".$row['id']."'><h6>Komentarzy: ".$komentarzy."</h6></a>");
echo("</div>");
echo("</div>");
echo("<br><br>");
  }
 
Edytowane przez ThePiotrek

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Tamten błąd już nieistotny, za to mam kolejny. Chcę, by awatar użytkownika był po lewej stronie, ale on wciąż jest na środku. Tak to wygląda:

 

oYvXcSw.jpg

 

 

A kod wygląda tak:

echo("<div align='center'>");
	  echo("<div class='tytulTematu'>
	  <img src='".$dane['awatar']."'></img>
	  <h5 style='color: white; align: left;'>".przerobTekst($row["name"], false, true)."</h5>
	  </div>
	  <br><br>");
	  
	  echo("<div class='ramka' align='center'>");
	  echo("<b>Dodane przez: <a href='index.php?/user/".$row['author_id']."-".$dane['nick']."'>".$dane['nick']."</a></b><br>");
	  if($_GET['edit'] == true && $_SESSION['admin'] == 1){
	  echo("
	  <div id='tresc'/>
		<form action='article.php?id=".$row['id']."' method='POST' >
		<input type='text' name='name' value='".$row['name']."' class='form-control' style='width:1000'><br>
		<textarea id='editor1' name='article'>".$row['text']."</textarea> 
		<script type='text/javascript'>
			CKEDITOR.replace( 'editor1' );
		</script>
		<button type='submit' class='btn btn-primary'>Zakończ edycję</button>
		<button href='article.php?id=".$row['id']."'class='btn btn-primary'>Anuluj</button>
		</form>
		");
	  }
	  else{
	  echo("<div id='tresc'><h6>".przerobTekst(str_replace(" ", "&nbsp;", $row["text"]), true, false)."</h6></div><br>");
	  }
	  if($_SESSION['admin'] == 1){
		if($_GET['edit'] == true){
			echo("<a href='article.php?id=".$row['id']."&edit=true'>Edytuj</a>");
	    }
		else{
			echo("<a href='article.php?id=".$row['id']."&edit=true'>Edytuj</a>");
		}
	  }
	  echo("</div>");
	  echo("<h1>Komentarze:</h1>");
	  echo("<div class='fb-comments' data-href='".$strona."' data-width='600' data-num-posts='5' align='center'></div>");
	  echo("</div>");
	  echo("<br><br><br><br><br>");

używany fragment CSS wygląda tak:

.tytul {
	 width: 60%; /* Szerokość ramki */ 
	 height: 10%;
	 font-size: 14px;
	 padding:20px; /* Wypełnienie w ramce */ 
	 color: #ffffff; 
    /* margin:10px; /* Odstęp od marginesów o 10px */ 
  /*   border:1px solid #ff0000; /* Obramowanie proste 1px o kolorze #ff0000 */  
	 background: url("cenzura.pl/images/piksel.png")
	 repeat;
}



.tytulTematu {
	width: 70%;
	height: 20%;
	font-size: 14px;
	padding: 10px;
	color: #000000;
	border-radius: 7px;
	background: url("http://cenzura.pl/images/pikselbialy.png")
	repeat;
}

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Nie chcę spamować, ale się już poprostu poddaję. Chcę, żeby tytuł tematu był obok awatara, ale on uparcie schodzi w dół.

 

H9bpu6Y.jpg

 

 

Kod się niewiele zmienił, ale wrzucam:

 

php: 

$zapytanie = mysql_query("SELECT id, name, author_id, text FROM `pb_news` WHERE `id` = '".$idartykulu."'");
	  $row = mysql_fetch_assoc($zapytanie);
	  $strona = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
	  $dane = pobierzWszystkieDane($row['author_id']);
	  echo("<div align='center'>");
	  echo("<div class='tytulTematu'>
	  <a href='index.php?/user/".$dane['id']."-".$dane['nick']."'><img src='".$dane['awatar']."' style='width: 100; height: 100; text-align: left;'></a>
	  <h1 style='color: white; text-align: center;'>".przerobTekst($row["name"], false, true)."</h1>
	  </div>
	  <br><br>");
	  
	  echo("<div class='ramka' align='center'>");
	  echo("<b>Dodane przez: <a href='index.php?/user/".$row['author_id']."-".$dane['nick']."'>".$dane['nick']."</a></b><br>");
	  if($_GET['edit'] == true && $_SESSION['admin'] == 1){
	  echo("
	  <div id='tresc'/>
		<form action='article.php?id=".$row['id']."' method='POST' >
		<input type='text' name='name' value='".$row['name']."' class='form-control' style='width:1000'><br>
		<textarea id='editor1' name='article'>".$row['text']."</textarea> 
		<script type='text/javascript'>
			CKEDITOR.replace( 'editor1' );
		</script>
		<button type='submit' class='btn btn-primary'>Zakończ edycję</button>
		<button href='article.php?id=".$row['id']."'class='btn btn-primary'>Anuluj</button>
		</form>
		");
	  }
	  else{
	  echo("<div id='tresc'><h6>".przerobTekst(str_replace(" ", "&nbsp;", $row["text"]), true, false)."</h6></div><br>");
	  }
	  if($_SESSION['admin'] == 1){
		if($_GET['edit'] == true){
			echo("<a href='article.php?id=".$row['id']."&edit=true'>Edytuj</a>");
	    }
		else{
			echo("<a href='article.php?id=".$row['id']."&edit=true'>Edytuj</a>");
		}
	  }
	  echo("</div>");
	  echo("<h1>Komentarze:</h1>");
	  echo("<div class='fb-comments' data-href='".$strona."' data-width='600' data-num-posts='5' align='center'></div>");
	  echo("</div>");
	  echo("<br><br><br><br><br>");

css:

.tytul {
	 width: 60%; /* Szerokość ramki */ 
	 height: 10%;
	 font-size: 14px;
	 padding:20px; /* Wypełnienie w ramce */ 
	 color: #ffffff; 
    /* margin:10px; /* Odstęp od marginesów o 10px */ 
  /*   border:1px solid #ff0000; /* Obramowanie proste 1px o kolorze #ff0000 */  
	 background: url("http://cenzura.pl/images/piksel.png")
	 repeat;
}
.tytul a {color: #fff;}
.pasek{background-color: #000000;}
.tytulTematu {
	width: 80%;
	height: auto;
	font-size: 14px;
	padding: 10px;
	color: #000000;
	border-radius: 7px;
	text-align: left;
	background: url("http://cenzura.pl/images/pikselbialy.png")
	repeat;
}

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
<h1 style='color: white; text-align: center;'>

spróbuj

<h1 style='color: white; text-align: center; display: inline'>

Jeśli tytuł dalej będzie pod zdjęciem, to spróbuj ustawić display na inline-block.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
<h1 style='color: white; text-align: center;'>

spróbuj

<h1 style='color: white; text-align: center; display: inline'>

Jeśli tytuł dalej będzie pod zdjęciem, to spróbuj ustawić display na inline-block.

 

 

Dzięki. Teraz to tak wygląda: 

 

m5zmCO3.jpg

 

Ale chciałbym, żeby był na samej górze tej ramki. Pytanie brzmi: jak? ;d

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

style='width: 100; height: 100; text-align: left;'
 Czy w ogóle istnieje możliwość dobierania szerokości/wysokości czegokolwiek bez podania jednostki? To jest "sto" czego? Procent, pikseli? Czy jesteś pewien, że taka reguła cokolwiek zmienia?
Ogólnie, z tego co czytałem nie ma prostego sposobu na wyśrodkowanie zawartości w pionie. Istnieje sposób przy użyciu zmiany wyświetlania elementu na tabelkowy ("display:table" oraz "display: table-cell;"), ale wtedy prawdopodobnie musiałbyś zmienić również sposób wyświetlania avatara, a następnie użyć reguły "vertical-align: middle;".

PS: W Twoim kodzie jest takie coś:

/* margin:10px; /* Odstęp od marginesów o 10px */
Chodziło tu raczej o "padding" niż "margin".

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Szczerze to patrzeć się na ten kod nie da. Oddzielaj PHP od HTML, poczytaj o strukturze MVC albo chociaż rób coś w tym rodzaju:

//Na samej górze strony, najlepiej w osobnym pliku, a potem przez "require" w docelowym pobieraj potrzebne rzeczy do tablic.
$result = mysql_query(...);
$row = mysql_fetch_assoc($result);

//a potem kod strony


<div id="costam">
   <? foreach($row as $array) { ?>
      <div>
          <h2><?= $array['kolumna'] ?></h2>
          <p><?= $array['druga_kolumna'] ?></p>
      </div>
   <? } ?>
</div>
Jeśli nie potrafisz pisać wg MVC albo korzystać z Symfony lub innego bajeru to rób chociaż w ten sposób.

I do jasnej anielki... wynaleziono coś takiego jak arkusze stylów, więc nie dawaj formatowania boxów, tekstu czy innych w style="" align="".

Uwierz, że dzięki tym poradom Twój kod będzie bardziej czytelny przez co będziesz mógł go w szybszym tempie edytować oraz łatwiej będzie Ci pomóc.

Łap:

<h1 style="color: white; text-align: center; display: inline; line-height: 100px;">

.tytulTematu img { float: left; }
W razie gdyby tekst nachodził pod awatar dodaj padding-left do h1.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dzięki za rady odnośnie tego, ale po wielu próbach doszedłem do wniosku, że bez awatara będzie estetyczniej. Ponadto, postanowiłem pójść za Waszymi radami i pisać klasy (wow :o). Stworzyłem sobie klasę Format, w której są funkcję do formatowania tekstu. Mam w niej dwie funkcje: najpierw addEmoticons, a potem formatText. W formatText chcę użyć addEmoticons, ale wywala że nie ma takiej funkcji. Mój kod:

<?php

class Format {

	function addEmoticons ( $text ) {
		//TODO, poki co bedzie tak
		$text = str_replace(':)', '<img alt=":)" src="images/emoticons/usmiech1.png"/>', $text);
		$text = str_replace(';)', '<img alt=":)" src="images/emoticons/usmiech2.png"/>', $text);
	return $text;
	}
	
	
	
	function formatText ( $tekst, $emoticons ) {
    	$tekst = str_replace("&", "&amp", $tekst);
		$tekst = str_replace("<", "&lt", $tekst);
		$tekst = str_replace(">", "&gt", $tekst);
		$tekst = str_replace('"', "&quot", $tekst);
		$tekst = str_replace("'", "&#x27", $tekst);
		$tekst = str_replace("/", "&#x2F", $tekst);
                if($emoticons == true){
	           $tekst = $this->addEmoticons($tekst);
	        }
	return $tekst;
	}

}





?>
Edytowane przez ThePiotrek

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.

×