Background repeatet nicht

Benny

unregistriert

Samstag, 18. April 2009, 00:07

Hallo zusammen,

ich habe ein Templates, welches bis jetzt nur auf HTML angepasst wurde. Es ist soweit fertig, allerdings gibt es Probleme mit der Navigation. Der Background geht bei langem Text im Content nicht mit, ich weis aber nicht woran das liegt, hier der Code:

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel Beschreibung</title>
<meta http-equiv="Content-Language" content="de" /> 
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="inc/main.css" />
</head>
<body>
<div align="center">
<table id="abstand1" width="859" border="0" cellpadding="0" cellspacing="0">	
	<tr>
		<td width="859" height="16"><img src="images/blank.gif" width="859" height="16" alt="" /></td>
	</tr>
</table>
<table id="header1" width="859" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td><img id="header" src="images/header.gif" width="859" height="171" alt="" /></td>
	</tr>
</table>
<table id="navi" width="859" border="0" cellpadding="0" cellspacing="0" style="background-image: url('images/navi_bg.gif');">
	<tr>
		<td><img id="navi_left" src="images/navi_left.gif" width="6" height="34" alt="" /></td>
		<td><img id="leistungen" src="images/leistungen.gif" width="113" height="34" alt="" /></td>
		<td><img id="angebote" src="images/angebote.gif" width="112" height="34" alt="" /></td>
		<td><img id="for_free" src="images/for_free.gif" width="114" height="34" alt="" /></td>
		<td><img id="referenzen" src="images/referenzen.gif" width="113" height="34" alt="" /></td>
		<td><img id="kontakt" src="images/kontakt.gif" width="115" height="34" alt="" /></td>
		<td width="280" height="34">&nbsp;</td>
		<td><img id="webmedia_12" src="images/navi_right.gif" width="6" height="34" alt="" /></td>
	</tr>
</table>
<table id="abstand" width="859" border="0" cellpadding="0" cellspacing="0">	
	<tr>
		<td width="859" height="16"><img src="images/blank.gif" width="859" height="16" alt="" /></td>
	</tr>
</table>
<table id="head" width="859" border="0" cellpadding="0" cellspacing="0">	
	<tr>
		<td><img id="content_head" src="images/content_head.gif" width="859" height="30" alt="" /></td>
	</tr>
</table>
<table id="inhalt" width="859" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="3" style="background-image: url('images/abstand_navi.gif');" id="abstand_navi" width="13" height="350">&nbsp;</td>
		<td valign="top"><img id="navi_top" src="images/navi_top.gif" width="142" height="29" alt="" /></td>
		<td rowspan="3" style="background-image: url('images/abstand_content.gif');" id="abstand_content" width="20" height="2"></td>
		<td rowspan="3" align="left" style="background-image: url('images/content_bg.gif');" id="content_bg" width="684" height="2">hhhhh
		<p>Text</p>
			<p><a href="#">Link</a></p>
			<h1>h1</h1>
			<p><input /></p>
				<ul>
					<li>Test</li>
					<li>Test</li>
				</ul>
			<p><span class="box_message_ok">Box OK</span></p>
			<p><span class="box_message_error">Box Error</span></p>
			<p><span class="box_message_info">Box Info</span></p>
			<p>&nbsp;</p>
		  <p><span class="infobox">Allgemeine Infobox</span></p>
      	<div id="lipsum">
        	<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus.  Mauris ante. Integer nec nisi. Vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Etiam eget tellus a leo  lacinia imperdiet. Nunc sapien. Suspendisse at dolor. Ut quis magna.  Maecenas egestas dictum tellus. Vestibulum posuere metus eget nisi.  Proin ac risus. Phasellus blandit dolor ac ipsum. Fusce ornare commodo  erat. Pellentesque a arcu in urna mollis sollicitudin. Cras aliquam  ligula vel risus. Praesent magna tortor, volutpat ac, tincidunt ut,  luctus ac, mauris. Nam accumsan pellentesque libero. </p>
        	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Quisque sit amet quam elementum risus tempus  lobortis. Aliquam accumsan diam vel augue. Proin in velit. Ut vitae  magna. Phasellus nec elit at lorem tristique lobortis. Donec id nisi.  Vestibulum arcu est, ultricies eget, fermentum at, dictum vitae, arcu.  Curabitur fringilla. Ut imperdiet vulputate est. </p>
        	<p>Fusce mattis. In malesuada sapien id arcu. Nam a purus eget arcu  condimentum varius. Duis augue. Sed vehicula massa vel justo. Sed ac  tortor. Integer adipiscing eros sed dolor cursus ullamcorper. Cras orci  turpis, vehicula vitae, fermentum nec, egestas a, neque. Vestibulum  ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia  Curae; Duis in nibh. Donec dignissim, tortor at tristique hendrerit,  felis sem volutpat enim, id bibendum sapien sem a eros. Ut magna sem,  ultricies vitae, dignissim eget, ullamcorper ac, metus. Curabitur  lectus. Cras accumsan, lorem blandit tristique pellentesque, nibh justo  molestie ante, eu molestie metus leo sed elit. Phasellus et ligula. In  hac habitasse platea dictumst. Donec elit lorem, eleifend in, molestie  et, vestibulum et, arcu. </p>
        	<p>Sed porttitor diam sit amet orci. Praesent pretium. Etiam neque  odio, varius quis, mollis vitae, lobortis ac, nisl. Nunc aliquet nulla  eu neque. In at enim. Ut nec metus. Morbi viverra pulvinar enim.  Praesent facilisis felis sed metus. Pellentesque id enim et justo  rutrum mollis. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; In purus augue, semper sed, mattis vel,  volutpat sed, leo. Phasellus feugiat, felis hendrerit rutrum congue,  massa nisi imperdiet urna, id lobortis mauris est nec magna.  Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Duis arcu. In hac habitasse platea dictumst. </p>
        	<p>Vivamus vestibulum enim sed magna. Phasellus mattis. Etiam id ligula  id tellus interdum tincidunt. Suspendisse potenti. Aenean odio tellus,  tempor in, interdum ut, mollis et, velit. Morbi quam. Nullam ut ante.  Fusce molestie massa. Sed venenatis malesuada augue. Nunc imperdiet,  urna ut egestas imperdiet, nisi ipsum pretium elit, ut elementum dui  leo sit amet enim. Mauris at magna. Cum sociis natoque penatibus et  magnis dis parturient montes, nascetur ridiculus mus. Duis massa lacus,  tincidunt nec, convallis at, consequat vulputate, nibh. </p>
      	</div>
  	<p>&nbsp;</p></td>
	</tr>
	<tr>
		<td valign="top" align="left" style="background-image: url('images/navi_backround.gif');" id="navi_backround"  width="142">
		<p align="center"><a target="_blank" href="http://www.PimpYourKiT.de"><img src="http://www.pimpyourkit.de/images/banner/100x200.jpg" alt="Pimp Your KiT" title="Pimp Your KiT.de | AddOns, Hacks, Module, Templates, Webdesign, Tutorials, Supportforum." width="100" height="200" border="0" /></a></p>
</td>
	</tr>
	<tr>
		<td style="vertical-align: bottom"><img id="navi_footer" src="images/navi_footer.gif" width="142" height="15" alt="" /></td>
	</tr>
</table>
<table id="footer1" width="859" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td><img id="footer" src="images/footer.gif" width="859" height="32" alt="" /></td>
	</tr>
</table>
</div>
</body>
</html>

Hier ein Beispiel:

Ich danke im Voraus!

Headless

... nur noch zur deko

Beiträge: 2 374

Geschlecht: Männlich

Wohnort: Nürnberg

PHPKIT Version: keine

2

Samstag, 18. April 2009, 01:16

Bin jetzt nicht so der CSS / Design Profi aber ich würde sagen du musst beim deklarieren der CSS Klasse das BG-Image auf repeat setzen.

	Cascading Style Sheet
1 2 3 4	... background-image:url(derhintergrund.gif); background-repeat:repeat-y; ...

So einfach wie möglich - aber nicht einfacher!
Albert Einstein (1879-1955)

Proggi

schaut regelmäßig rein

Beiträge: 263

Geschlecht: Männlich

Wohnort: Berlin

PHPKIT Version: 1.6.5

3

Samstag, 18. April 2009, 13:26

Wie sieht denn die CSS-Datei dazu aus?

Vor allem wäre es auf jeden Fall besser, das Layout selbst mit CSS zu gestalten und nicht mit der Tabelle.

Du hast einen Header, eine Top-Navi, links die Werbung...... , den Inhalt und den Footer.
Das lässt sich mit CSS wunderbar formatieren. Kommt eben nur darauf an, ob die Website später zentriert im Browserfenster dargestellt werden soll oder mit festen Abständen von links und oben.
Da gibt es mit CSS genügend Möglichkeiten.

Ein schönes Beispiel für zweispaltige Layouts findest Du hier.

Netten Gruß

Andy --- Proggi

Es gibt viel zu tun - packen wir es an.....

Benny

unregistriert

4

Samstag, 18. April 2009, 13:33

@ heady,
dass habe ich versucht, aber das klappt nicht!

@ Proggi,
hast du vieleicht mal was Zeit?

Proggi

schaut regelmäßig rein

Beiträge: 263

Geschlecht: Männlich

Wohnort: Berlin

PHPKIT Version: 1.6.5

5

Samstag, 18. April 2009, 13:49

Wie immer gilt der Grundsatz ---> Zeit ist Geld..... und da ich kein Geld habe, habe ich auch keine Zeit

kleiner Scherz
Soll jetzt nicht heißen, dass man dafür was verlangt - quatsch, aber ich habe zu tun ohne Ende.

Sieh Dich einfach mal auf der genannte Seite um und verwende die Beispiele für Deine Projekte zum Probieren. Ohne das Grundverständnis des Ganzen bringt es nix wenn man überall nur mal eben einen kleinen Codeschnippsel unterbringt. Das führt zu endlosen, weiteren Problemen in der Zukunft.......
Da ist das PHPKit das beste Beispiel dafür....... Ich schreibe auch immer wieder mal -----> "Mach das so: style="bla bla bla viele CSS-Angaben......."........"
Macht aber nicht wirklich Sinn weil es eben nur spezifisch für dieses Tag und das jeweilige Problem gilt......

Viel Gequatsche, das mancher nicht verstehen wird....... Deshalb meine Empfehlung: Beschäftige Dich mit dem Thema CSS. Irgendwann macht es Klick und es wird Dir vieles sehr leicht fallen.

Netten Gruß

Andy --- Proggi

Es gibt viel zu tun - packen wir es an.....

Benny

unregistriert

6

Samstag, 18. April 2009, 13:52

Danke dir

Ich bin auch bereit das alles zu lernen, versuche mich gerade schon!
Danke dir dennoch!

LG
Benny

Proggi

schaut regelmäßig rein

Beiträge: 263

Geschlecht: Männlich

Wohnort: Berlin

PHPKIT Version: 1.6.5

7

Samstag, 18. April 2009, 13:57

Das ist doch mal fein :thumbsup:

Aber das CSS haben wir immer noch nicht gesehen

Jetzt ist aber erst mal Hausarbeit angesagt :wacko:

Es gibt viel zu tun - packen wir es an.....

Benny

unregistriert

8

Samstag, 18. April 2009, 14:35

Also,
der Code sieht nun aktuell so aus:

Quellcode

<body>
<div id="content">
 <div id="header">
 </div>
 <div id="navigation">
  <div id="button_blank_left">
  </div>
  <div id="button_leistung">
  <img src="images/leistungen.gif" width="113" height="34" alt="" />
  </div>
  <div id="button_angebot">
  <img src="images/angebote.gif" width="112" height="34" alt="" />
  </div>
  <div id="button_free">
  <img src="images/for_free.gif" width="114" height="34" alt="" />
  </div>
  <div id="button_referenz">
  <img src="images/referenzen.gif" width="113" height="34" alt="" />
  </div>
  <div id="button_kontakt">
  <img src="images/kontakt.gif" width="115" height="34" alt="" />
  </div>
  <div id="button_blank_rechts">
  </div>
 </div>
 </div>
</body>

Der CSS Code sieht so aus:

Quellcode

body {
margin: 0;
padding: 0;
font: normal 11px verdana,tahoma,sans-serif;
background-image: url('../images/hintergrund.jpg');
background-repeat: repeat-x;
background-position: 0% 0%;
font-size: 11px;
}

#content {
width:859px;
margin:0px auto;
text-align:left;
}
#header {
width:859px;
height:171px;
margin-top:25px;
background-image: url('../images/header.gif');
}
#navigation {
width:859px;
background-image: url('../images/navi_bg.gif');
}
/* Navigation Button */
#button_blank_left {
width:6px;
height:34px;
background-image: url('../images/navi_left.gif');
float:left;
}
#button_leistung {
width:113px;
height:34px;
float:left;
}
#button_angebot {
width:112px;
height:34px;
float:left;
}
#button_free {
width:114px;
height:34px;
float:left;
}
#button_referenz {
width:113px;
height:34px;
float:left;
}
#button_kontakt {
width:115px;
height:34px;
float:left;
}
#button_blank_rechts {
width:6px;
height:34px;
background-image: url('../images/navi_right.gif');
float:right;
}

Das klappt für sich ganz gut, allerdings habe ich mit #button_blank_rechts so meine Probleme. Wenn ich diesen Code verwende

	Quellcode
1 2 3 4 5 6	#button_blank_rechts { width:6px; height:34px; background-image: url('../images/navi_right.gif'); float:right; }

sieht das ganze so aus:

Für meinen Teil, sieht das wunderbar aus. Doch habe ich mich dann gefragt, wo der Hintergrund #navigation denn geblieben ist. Habe etwas experimentiert und habe aus dem Code:

	Quellcode
1 2 3 4 5 6	#button_blank_rechts { width:6px; height:34px; background-image: url('../images/navi_right.gif'); float:right; }

das float:right; gelöscht und dann sieht das ganze so aus:

Nun wird der Background angezeigt, aber die grafik für rechts, die das abrundet nicht! Was kann ich nun machen?

Ebenfalls weis ich nicht wie man soetwas als divs hinbekommt:

Quellcode

<table id="inhalt" width="859" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="3" style="background-image: url('images/abstand_navi.gif');" id="abstand_navi" width="13" height="350">&nbsp;</td>
		<td valign="top"><img id="navi_top" src="images/navi_top.gif" width="142" height="29" alt="" /></td>
		<td rowspan="3" style="background-image: url('images/abstand_content.gif');" id="abstand_content" width="20" height="2"></td>
		<td rowspan="3" align="left" style="background-image: url('images/content_bg.gif');" id="content_bg" width="684" height="2"></td>
	</tr>
	<tr>
		<td valign="top" align="left" style="background-image: url('images/navi_backround.gif');" id="navi_backround"  width="142">
		<p align="center"><a target="_blank" href="http://www.PimpYourKiT.de"><img src="http://www.pimpyourkit.de/images/banner/100x200.jpg" alt="Pimp Your KiT" title="Pimp Your KiT.de | AddOns, Hacks, Module, Templates, Webdesign, Tutorials, Supportforum." width="100" height="200" border="0" /></a></p>
</td>
	</tr>
	<tr>
		<td style="vertical-align: bottom"><img id="navi_footer" src="images/navi_footer.gif" width="142" height="15" alt="" /></td>
	</tr>
</table>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Benny« (18. April 2009, 15:58)

Proggi

schaut regelmäßig rein

Beiträge: 263

Geschlecht: Männlich

Wohnort: Berlin

PHPKIT Version: 1.6.5

9

Sonntag, 19. April 2009, 11:02

CSS Beispiel mit drei Spalten - ohne Tabellen

Ich habe mal eine Beispielseite angehängt, die ich jetzt während der Weiterbildung bauen musste........
Sie besteht aus drei Spalten und kommt komplett ohne Tabellen aus.

Sieh Dir die Dateien durch und probiere damit etwas rum. Ich denke mal, das wird die beste Lösung sein um den Einstieg einigermaßen zu schaffen und zu verstehen

Netten Gruß

Andy --- Proggi

»Proggi« hat folgende Datei angehängt:

css_beispiel.rar (61,91 kB - 5 mal heruntergeladen - zuletzt: 1. Mai 2009, 19:34)

Es gibt viel zu tun - packen wir es an.....

Benny

unregistriert

10

Sonntag, 19. April 2009, 13:40

Ich danke dir