Script werkt niet goed met nieuwe afbeeldingen

[maxxxie]

Hallo iedereen, ik heb een nieuwsscript op mijn website die aan een database is gekoppeld die het daar vanaf haald.

Het probleem is, sinds ik de top,main en footer image heb veranderd naar mijn design word alles dubbel geplaats, ik heb de size wel iets veranderd, ik heb vervolgens de tijd genomen om alles in style naar dat formaat te maken, maar dan zie ik ze helemaal niet meer, of nog meer verpest.

Beeld van het script


Hier heb ik de php code van het script:

<?PHP

if(isset($_GET['id']) && checkInt($_GET['id']))
{
  $sqlNews = "SELECT * FROM ".SQL_HP_DB.".news WHERE anzeigen>0 AND id='".mysql_real_escape_string($_GET['id'])."' LIMIT 1";
  $qryNews = mysql_query($sqlNews,$HP);
  if(mysql_num_rows($qryNews)>0)
  {
    while($getNews = mysql_fetch_object($qryNews))
    {
      echo'<div class="news_head">'.$getNews->titel.'</div>
	<div class="news_main">
		<img src="http://revolutionmt2.net/images/news/01.jpg" />'.x_nl2br($getNews->inhalt).'</div>
	<div class="news_foot">Geschrieben von '.x_nl2br($getNews->author).' am '.getDatum($getNews->datum).' um '.getZeit($getNews->datum).'
	</div>';
    }
  }
  else 
  {
	echo'<div class="news_head">Fehler</div>
	<div class="news_main">Die ID existiert nicht.</div>
	<div class="news_foot"></div>';
  }
}
else
{
  $sqlNews = "SELECT * FROM ".SQL_HP_DB.".news WHERE anzeigen>0 AND kategorie!=2 ORDER BY datum DESC LIMIT 10";
  $qryNews = mysql_query($sqlNews,$HP);
  
  while($getNews = mysql_fetch_object($qryNews))
  {
    $newsText = (strlen($getNews->inhalt)>50000) ? substr($getNews->inhalt,0,strpos($getNews->inhalt,' ',50000)).'... <a href="index.php?s=news&id='.$getNews->id.'">&raquo; mehr lesen</a>' : $getNews->inhalt;
    echo'<div class="news_head"><a href="index.php?s=news&id='.$getNews->id.'">'.$getNews->titel.'</a></div>
	<div class="news_main">
		<img src="http://revolutionmt2.net/images/news/01.jpg" />'.x_nl2br($newsText).'</div>
	<div class="news_foot">Geschrieben von '.x_nl2br($getNews->author).' am '.getDatum($getNews->datum).' um '.getZeit($getNews->datum).'
	</div>';
  }
}

?>

ook het stukje css:

/* Links - News */
.news_head{
	background-image:url(images/news_head.png);
	width:498px;
	height:41px;
	color:#d4c198;
	font-size:14px;
	font-variant:small-caps;
	text-shadow: 0 0 0.2em #746d5e, 0 0 0.2em #746d5e;
	padding:26px 15px 21px 15px;
}
.news_head a{
	color:#d4c198;
	font-variant:normal;
	text-decoration:none;
}
.news_main{
	background-image:url(images/news_main.png);
	width:498px;
	color:#cecece;
	font-size:13px;
	padding:12px 15px 12px 15px;
}
.news_main table{
	padding:5px 18px;
}
.news_main select {
	height:23px;
	width:154px;
	background-image:url(images/regis.png);
	border:none;
	color:#858585;
}
.news_main a{
	color:#d4c198;
	font-variant:normal;
	text-decoration:none;
}
.news_main a:hover{
	text-decoration:none;
}
.news_main img{
	float:left;
	margin-right:12px;
}
.news_foot{
	width:498px;
	height:28px;
	background-image:url(images/news_foot.png);
	font-variant:small-caps;
	color:#cecece;
	text-align:right;
	font-size:11px;
	padding:11px 15px 14px 15px;
	margin-bottom:10px;
}
.news_foot a{
	color:#d4c198;
	font-variant:normal;
	text-decoration:none;
}
	.news_foot a:hover{
	text-decoration:underline
}

Hopelijk kan iemand mijn gemaakte fout vinden,

Mvg,
Max.

 

[maxxxie]

bump

 

[kenikavanbis]

Ik wil de site zien zoek ook eens firebug plugin firefox op dan moet je rechtsboven klikken

 

[maxxxie]

Ik wil de site zien zoek ook eens firebug plugin firefox op dan moet je rechtsboven klikken

Ik vraag me af of dat het probleem is, aangezien deze fout alleen maar ontstaan is door het veranderen van 3 plaatjes, die ervoor geen fout maakte. Het is zoiezo een fout in de style.css.., Alleen ik weet niet waar, dat is mijn vraag.

 

[kenikavanbis]

dus dit vindt je het snelst met firebug omdat het om websites te debugen is

 

[csshunter]

Hoi maxxxie,
Je class="news_head" heeft een hoogte van 41px, maar ook een {padding: 26px 15px 21px 15px;}.

De paddings worden altijd opgeteld bij een opgegeven hoogte (of breedte; zie css-box dimensions).
In dit geval een padding-top van 26px en een padding-bottom van 21px. Samen met de hoogte van 41px wordt het dus: 88px.

En in het hele gebied van de padding en de inhoud van de container wordt de background-afbeelding geplaatst (= herhaald).
Meet maar na:

Het klopt allemaal exact volgens je instructies!

Met vriendelijke groet,
CSShunter

 

[maxxxie]

Hoi maxxxie,
Je class="news_head" heeft een hoogte van 41px, maar ook een {padding: 26px 15px 21px 15px;}.

De paddings worden altijd opgeteld bij een opgegeven hoogte (of breedte; zie css-box dimensions).
In dit geval een padding-top van 26px en een padding-bottom van 21px. Samen met de hoogte van 41px wordt het dus: 88px.

En in het hele gebied van de padding en de inhoud van de container wordt de background-afbeelding geplaatst (= herhaald).
Meet maar na:

Het klopt allemaal exact volgens je instructies!

Met vriendelijke groet,
CSShunter

Bedankt voor de reactie csshunter,
Als ik het goed heb begrepen staan de images dubbel omdat ik met de padding niet op 41 uitkom, ben ik juist?

Mvg,
Max

 

[csshunter]

Correct, ik denk dat je beter af bent met:

.news_head {
   ...
   height: 41px;
   padding: 0 15px; /* alleen links en rechts */
   }

Of met:

.news_head {
   ...
   height 31px;
   padding: 10px 15px 0 15px; /* 10px ruimte boven de tekst */
   }

Dus bij wat padding voor de top gaat hetzelfde aantal pixels van de hoogte af.

O: nadeel van de vaste hoogte is, dat een nieuwskop nooit uit meer dan 1 regel mag bestaan. Anders past het er niet in.