CSS Bild einfügen (kein backround)

jaimo

Hallo, habe ein Problem möchte gerne ein Template von phpbb in Joomla nachbauen bin leider ein fast blutiger anfänger. Möchte gerne diese schattierungen an den seiten haben, doch kenn die mittel nicht für habe da paar sachen ausprobiert doch ohne erfolg, es soll auch kein backround bild sein weil ich schon eins habe.

hier der code von der seite http://www.studidesign.de :
http://www.loaditup.de/162453.html

ich möchte einen template bauen das genau so aussieht wie hier http://www.studidesign.de/forum, hier die daten/theme vom forum :

http://www.loaditup.de/162460.html

Ich habe soweit geschaft das backround zu machen und möchte nun hauptplatte (wie beim forum das in der mitte mit ran innen weiss usw..) fürs joomla erstellen.

ich hoffe ich komme diesmal etwas weiter, habe schon bei selfhtml nachgeschaut doch leider blick ich net ganz durch, bitte habt mitleid für meine doofe birne

synaptic

also, mit html setzt du bilder als objekte ein und mit css vergibt man den style für html-objekte
also wirst du ein div oder nen anderes element nehmen müssen, um diesem einen background zu geben

jaimo

Zitat von synaptic

also, mit html setzt du bilder als objekte ein und mit css vergibt man den style für html-objekte
also wirst du ein div oder nen anderes element nehmen müssen, um diesem einen background zu geben

Danke erstmal, gibt es irgendwo nen tuorial für oder so, wie ich sehe (google) ist diese frage oft gestellt worden doch nicht wirklich ausführlich beantwortet worden

saluté

Greg10

http://de.selfhtml.org lesen

jaimo

Danke erstmal,
habe bei selfhtml bischen rumgeschaut und dieses entdeckt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(background1.gif)">

<div style="background-image:url(background2.gif); margin:0px; padding:10px">

</div></div>

</body></html>

habe es jetzt mal angewendet doch es tut sich nichts, habe die url usw geändert und es tut sich nichts.
Muss ich das in mein template.css datei einfügen oder ein neues anlegen und im index.php einen neuen link zufügen damit er einen zugriff drauf hat?

Kann mir einer evl erklären wie ich das genau mache?.

synaptic

überprüf den pfad der bilder, ob se hochgeladen sind, keine umlaute oder leerzeichen enthalten....
so wie du es geschrieben hast ist es an sich richtig, derbody hat so background1.gif und das div background2.gif
dem div musste halt noch die größe des bildes geben, damit es korrekt aussieht

jojo87

das div ist zudem zweimal geschlossen worden, ist aber nicht weiter tragisch.
Allerdings hat dasdiv bisher keine Größe, du müsstest entweder Inhalt reinmachen, oder noch position:absolute; width: ; und height: ; vergeben.
Gruß,
Jojo

jaimo

Zitat von synaptic

überprüf den pfad der bilder, ob se hochgeladen sind, keine umlaute oder leerzeichen enthalten....
so wie du es geschrieben hast ist es an sich richtig, derbody hat so background1.gif und das div background2.gif
dem div musste halt noch die größe des bildes geben, damit es korrekt aussieht

das backround bild ist nur ein kleines bild das mit repeat x mehrmals foramtiert wird das habe ich ja schon drin:

body {
background:url(../images/background.png) repeat-x;
color:#333;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
text-align:left;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px; }

Das was ich jetzt haben will das mit dem rand/schattierung ist auch ein kleines bild, das problem ist ich weiss nicht ob ich das auch in das template.css reinchreiben soll?.

also es sieht so aus wenn ich alles so mache wie beschrieben:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(../images/background.png)">

<div style="background-image:url(background_wrap_bg.gif); margin:0px; padding:10px">

</div></div>

</body></html>

doch es erscheint alles nur weiss kann es sein das ich ein neues verzeichnis anlegen muss mit das mit html endet?

jojo87

Ich wiederhole:
Dein Div hat nach wie vor die Größe 0!

jaimo

Zitat von jojo87

Ich wiederhole:
Dein Div hat nach wie vor die Größe 0!

kannst du mir evtl verraten wo ich die grösse hinschreiben müsste und für was die grösse ist?

jojo87

im css: width und height. weitere infos hier: http://www.css4you.de
Nu ja, wenn das div keine Größe hat, also quasi nicht existiert, kanns auch nicht angezeigt werden

driver

mach einfach ein paar
in des div rein.
reicht zum testen auch....

des body-background-teil sollte allerdings immer angezeigt werden.
falls nicht stimmt was min namen der datei nicht (auch auf groß-
und kleinschreibung achten).

wenn alles nix hilft: poste mal die url

jaimo

habe es jetzt mehrmals probiert und nicht geschafft

http://www.studidesign.de/

hier der code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(../images/background.png)">

<div style="background-image:url(background_wrap_bg.gif); margin:50px; padding:50px">

width:500px;height:200px;

</div>

</body></html>

mit dem hier zeigt ermir das hintergrund an:

body {
background:url(../images/background.png) repeat-x;
color:#333;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
text-align:left;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px; }

Habe einen Template ordner in dem ordner befinden sich:
temaplete > studidesign > images ordner, index.php. teamplatedeatils.xml, CSS ordner>template.css

driver

a) breite definieren:

Code

<div style="background-image:url(background_wrap_bg.gif); margin:50px; padding:50px;width:500px;height:200px;">










</div>


</body></html>

Alles anzeigen

was du gmacht hast schreibt nur den text rein

b)

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(../images/background.png)">




<div style="background-image:url(background_wrap_bg.gif); margin:50px; padding:50px">




width:500px;height:200px;






</div>


</body></html>

Alles anzeigen

hat im css-file nix zu suchen.

c) ich se weder im css-file noch in der html datei eine definition
eines background-images....

d) du musst auch drauf achten das die pfade passen. wennst den background
über die css datei einbindest muss der pfad anders sein als direkt im html.
da die dateien ansich ja an ner anderen stelle liegen...

jaimo

Zitat von driver
a) breite definieren:
Code
<div style="background-image:url(background_wrap_bg.gif); margin:50px; padding:50px;width:500px;height:200px;">










</div>


</body></html>
Alles anzeigen
was du gmacht hast schreibt nur den text rein

b)
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(../images/background.png)">




<div style="background-image:url(background_wrap_bg.gif); margin:50px; padding:50px">




width:500px;height:200px;






</div>


</body></html>
Alles anzeigen
hat im css-file nix zu suchen.

c) ich se weder im css-file noch in der html datei eine definition
eines background-images....

d) du musst auch drauf achten das die pfade passen. wennst den background
über die css datei einbindest muss der pfad anders sein als direkt im html.
da die dateien ansich ja an ner anderen stelle liegen...
Alles anzeigen

Danke erstmal Drive,
habe jetzt deinen code in das php.index eingefügt. http://www.studidesign.de

Das backround ist in css :

Code

body {
 	background:url(../images/background.png) repeat-x;
	color:#333;
	font-family:Helvetica,Arial,sans-serif;
	font-size:12px;
	text-align:left;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px; }

das index.php sieht so aus:

PHP

<?php
/**
 * @copyright	Copyright (C) 2007 DMz. All rights reserved.
 * @license		GNU/GPL, see LICENSE.php
*/
defined('_JEXEC') or die('Restricted access');
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>


<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >




<head>
	<jdoc:include type="head" />
    <div style="background-image:url(images/background_wrap.png) repeat-x; margin:50px; padding:50px;width:900px;height:10px;">










</div>




	<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<body>
<div class="myBody" id="myBody" >myBody
  <div class="myBody" id="header" >header
    <div class="search" id="search">search </div>
    <div class="topmenu" id="topmenu">topmenu </div>
  </div>
  <div class="mainarea" id="mainarea" >mainarea
    <div id="breadcrumb">breadcrumb</div>
    <div class="leftcol" id="leftcol">leftcol</div>
    <div class="content">content</div>
    <div class="rightcol" id="rightcol">rightcol</div>
  </div>
  <div id="footer" >footer</div>
</div>
</body>
</html>

Alles anzeigen

mein ziel ist es das ich diesen rand mit schattierung und weisse fläche hinbekomme wie hier http://www.studidesign.de/forum die bilder habe ich hier.

psss.
coole seite und starke argumente
https://www.forum-hilfe.de/viewtopic.php?p=180718#180718

Danke dir und @ll

Tags