Problem mit Seitenlayout

[Uwe367]

Hallo zusammen....

Ich bin dabei, mir eine Testseite zu bauen und stosse bei der Gestaltung des Seitenlayout auf ein Problem.
Zu finden ist die Seite unter:
http://www.photoshop-corner.de/phpw2/index.php

Das Layout habe ich wie auf dem folgenden Bild angelegt:
Layout

Die dazugehörige Vorlage sieht wie auf dem nächsten Bild aus:
Vorlage



Nun zu dem eigentlichen Problem:
Mit IE 7 wird das ganze korrekt dargestellt, während Firefox und Safari die Bilder für den Header und den Footer NICHT anzeigen, obwohl sie im Quellcode definiert sind.
Ich würde mich freuen wenn sich das mal jemand anschauen könnte und evtl eine Lösung für das Problem hätte

Gruß Uwe

[flip-flop]

Hallo Uwe, das ist ein Fehler (Doppelte style Anweisung) in den neueren Versionen, der garantiert nicht mehr behoben wird. du solltest dich längerfristig von den Tabellen-Layouts lösen.
Es gibt natürlich, wie fast immer, einen einfachen Workaround: -> http://forum.phpwcms.org/viewtopic.php?p=91353#p91353

Knut

[Uwe367]

Hallo Knut....#

Danke für die klärenden Worte .
Dann mal an die Arbeit mit CSS, oder hab ich das falsch verstanden?

Gruß Uwe

[flip-flop]

Exakt -> als Einstieg und/oder Lernbeispiel kannst du ja eines von diesen Layouts verwenden oder eine Variante von pepe.

[Uwe367]

Alles klar.. besten Dank

[flip-flop]

Der Workaround funktioniert so:

Code: Select all

.test_header {
  background: #f6ddb2 url(bilder/test_01.jpg) 0px 0px no-repeat;
}
.test_footer {
  background: #f6ddb2 url(bilder/test_08.jpg) 0px 0px no-repeat;
}

Im Seitenlayout werden nun bei Kopfzeile und Fußzeile unter Bilder die Einträge gelöscht und in Class jeweils die Klasse eingetragen (ohne Punkt davor). ->
Kopfzeile Class: test_header
Fußzeile Class: test_footer

Bei diesen Tabellenlayout dürfen also Breite:/Höhe: oder Farbe: und Bild: niemals gleichzeitig gesetzt werden. Nur ein Eintrag darf hier pro Zeile gemacht werden. Deshalb besser gleich alles in eine Klasse schreiben.

Knut

[Jensensen]

[einmisch]
Hi Uwe,

würde mich an Deiner Stelle von den table layouts lösen.
Alles, was Du unter:

...Das Layout habe ich wie auf dem folgenden Bild angelegt:
Layout...

angelegt hast, kannste auch in DIV + CSS verpacken.

Dazu unter --> Seitenaufbau --> "Eigener" wählen und die Struktur der Seite in der --> Vorlage

...Die dazugehörige Vorlage sieht wie auf dem nächsten Bild aus:
Vorlage...

abbilden --> und alles in --> "Haupt" einfügen (und ggf. in --> head).

Dazu dann auch noch, sofern in Deiner Seitenstruktur angelegt: {LEFT}, {RIGHT}, {FOOTER}, --> {EIGENE_BLOCKS} usw.
Schau Dir auch die Tipps von flip-flop genauer an http://forum.phpwcms.org/viewtopic.php?p=96822#p96822 sowie evt. http://www.yaml.de

und die vielen websites, die mit phpwcms gebaut wurden:
http://forum.phpwcms.org/viewforum.php?f=12

INFO: für jedes DIV-Element kannst Du dediziert --> CSS-Angaben definieren, samt Hintergrundbildern, wie in in Deinen Tabellen Spalten/Zeilen/Zellen...

Greetz

PS: Für die --> http://www.photoshop-corner.de wäre das mindestens adäquat... [wo es doch gerade dbzgl. reichlich infos on proper sites on the web gibt]

[Uwe367]

Hi Jensensen...

Auch dir vielen Dank für deine Antwort. Ich werde mich dieser Tage mal an die Arbeit machen und das ganze in Ruhe durchgehen.
Was meine HP angeht... (photoshop-corner.de) da gebe ich dir recht. Die Seite stammt noch aus Zeiten, zu denen ich zwar wußte, das es CMS Systeme gibt, jedoch mit deren Umgang überhaupt nicht vertraut war, bzw. man in den Supportforen als lästiges Anhängsel angesehen und auch teilweise so behandelt wurde.
Diese Forum hier schließe ich allerdings aus .

Ich will meine HP komplett neu mit PHPWCMS gestalten. Es soll ein Layout werden das in der Breite zwar fest definiert ist, sich nach unten aber dem Content anpasst, zu gut deutsch, die Seite soll sich je nach Inhalt von selbst verlängern, bzw. verkürzen.

Gruß Uwe

[Uwe367]

Also ich hab das jetzt mit dem Workaround mal auf meinem Localhost probiert, aber ich steh irgendwie aufm Schlauch
Diese Codezeilen....

.test_header {
background: #f6ddb2 url(bilder/test_01.jpg) 0px 0px no-repeat;
}
.test_footer {
background: #f6ddb2 url(bilder/test_08.jpg) 0px 0px no-repeat;
}

...wollte ich nun einbauen und habe das auf verschiedene Weisen probiert, aber es will nicht funktionieren.

Ich habe sogar eine eigene CSS Datei damit erstellt und diese in der Vorlage eingebunden, ohne Erfolg.
Bin ich nun zu blöd dazu oder sehe ich den Wald vor lauter Bäumen nicht mehr?

[juergen]

Code: Select all

<div class="test_header">This is my perfect header</div>
....
....
<div class="test_footer">This is my perfect footer</div>

ist im pagelayout...


dann auch unter admin:

unter zB Standard css

Code: Select all

.test_header {


background: #f6ddb2 url(bilder/test_01.jpg) 0px 0px no-repeat;
}
.test_footer {
background: #f6ddb2 url(bilder/test_08.jpg) 0px 0px no-repeat;
}

das ist alles ...

beachten: Bilder liegen im Verzeichnis bilder welches direktg unter dem root liegt..

[kukki]

Also, ich möchte Dir anraten, Dich von diesem Table-Layout schnell zu lösen. Abgesehen das dies ein alter Zopf ist, wirst Du schnell merken, das eine Table-less-layout auf Basis von CSS viel einfacher in der Bearbeitung ist und bei einem Kunden vor Ort schnell und sicher angepasst werden kann. Stelle einfach alles auf leer und setze den Punkt bei SEITENLAYOUT(Adminbackend) auf DIV CSS.
Ich habe damals als erstes die (Standard_)forntend.css benutzt und mit den Notationen

Code: Select all

#headerBlock
#mainBlock
#leftBlock
#rightBlock

rumgespielt.
Ändere doch einfach mal die Background-Notationen. Und schon hast Du ein ziemlich gut funktionierendes CSS-Layout. Ein kluges Buch ( O'Reillys Taschenbuch: CSS: kurz & gut/ CSS2 und 2.1 für 8,90€ )noch dazu und dann einfach weiterspielen.

background: #f6ddb2 url(bilder/test_01.jpg) 0px 0px no-repeat; ist gleichbedeutend mit:
background-color: #farbe;
background-image: url(bilder/bildname.jpg)
background-position: 0px 0px; Anfangsposition der Hintergrundbildes, hier links=0 oben=0, also oberelinke Ecke
background-repeat: no-repeat; das Bild wird nicht "gekachelt" sondern steht alleine, verloren beginnend in der oberen linken Ecke

Und die meisten Server sind casesensitiv, also genau auf die Groß/Kleinschreibung bei Dateinamen achten, da liegt oft genug der Fehler!
Dann schau Dir einfach mal einige Websites hier in dem Forum an und lade Dir in den Browser die ../template/inc_css/frontend von der betreffenden Seite und schau Dir die Notationen dieser Blöcke an.
Mehr Hilfe für den Anfang geht doch gar nicht, oder. Und ich garantiere, Du wirst schnell das veraltete Table-Design über den Jordan schicken!

Viel Spaß und einen guten Rutsch ins Neue Jahr!

[Uwe367]

Hi Kukki,

Danke für deine Antwort.
Mittlerweile "spiele" ich schon einige Zeit auf meinem localhost mit CSS rum.
Ist zwar nicht ganz einfach für nen Neueinsteiger wie mich, aber dank der Hilfe hier im Forum komme ich einigermaßen gut voran.

Wünsche ebenfalls einen guten Rutsch

Gruß Uwe

[Uwe367]

Hallo zusammen und ein frohes neues Jahr euch allen

Ich habe in Photoshop ein Bild gesliced und mir das ganze als CSS und XHTML ausgeben lassen.
Das einbinden in phpwcms hat auch prima geklappt. Nun habe ich das Problem, daß das Layout linksbündig dargestellt wird, ich hätte es aber gerne zentriert.
Hier der Code:

<!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">
<head>
<title>psc 780</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (psc 780.psd) -->
<style type="text/css">
<!--
div.Tabelle_01 {
position:absolute;
left:0px;
top:23px;
width:780px;
height:592px;
}

div.psc-01_ {
position:absolute;
left:0px;
top:0px;
width:780px;
height:127px;
}

div.psc-02_ {
position:absolute;
left:0px;
top:127px;
width:32px;
height:465px;
}

div.psc-03_ {
position:absolute;
left:32px;
top:127px;
width:715px;
height:26px;
}

div.psc-04_ {
position:absolute;
left:747px;
top:127px;
width:33px;
height:465px;
}

div.psc-05_ {
position:absolute;
left:32px;
top:153px;
width:715px;
height:7px;
}

div.psc-06_ {
position:absolute;
left:32px;
top:160px;
width:113px;
height:184px;
}

div.psc-07_ {
position:absolute;
left:145px;
top:160px;
width:487px;
height:383px;
}

div.psc-08_ {
position:absolute;
left:632px;
top:160px;
width:115px;
height:184px;
}

div.psc-09_ {
position:absolute;
left:32px;
top:344px;
width:113px;
height:216px;
}

div.psc-10_ {
position:absolute;
left:632px;
top:344px;
width:115px;
height:199px;
}

div.psc-11_ {
position:absolute;
left:145px;
top:543px;
width:488px;
height:24px;
}

div.psc-12_ {
position:absolute;
left:633px;
top:543px;
width:114px;
height:17px;
}

div.psc-13_ {
position:absolute;
left:32px;
top:560px;
width:113px;
height:32px;
}

div.psc-14_ {
position:absolute;
left:633px;
top:560px;
width:114px;
height:32px;
}

div.psc-15_ {
position:absolute;
left:145px;
top:567px;
width:488px;
height:25px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (psc 780.psd) -->
<div class="Tabelle_01">
<div class="psc-01_">
<img src="images/psc_01.jpg" alt="" name="psc_01" width="780" height="127" id="psc_01" /> </div>
<div class="psc-02_">
<img id="psc_02" src="images/psc_02.jpg" width="32" height="465" alt="" />
</div>
<div class="psc-03_">
<img id="psc_03" src="images/psc_03.jpg" width="715" height="26" alt="" />
</div>
<div class="psc-04_">
<img id="psc_04" src="images/psc_04.jpg" width="33" height="465" alt="" />
</div>
<div class="psc-05_">
<img id="psc_05" src="images/psc_05.jpg" width="715" height="7" alt="" />
</div>
<div class="psc-06_">
<img id="psc_06" src="images/psc_06.jpg" width="113" height="184" alt="" />
</div>
<div class="psc-07_"><img id="psc_07" src="images/psc_07.jpg" width="487" height="383" alt="" /></div>
<div class="psc-08_">
<img id="psc_08" src="images/psc_08.jpg" width="115" height="184" alt="" />
</div>
<div class="psc-09_">
<img id="psc_09" src="images/psc_09.jpg" width="113" height="216" alt="" />
</div>
<div class="psc-10_">
<img id="psc_10" src="images/psc_10.jpg" width="115" height="199" alt="" />
</div>
<div class="psc-11_">
<img id="psc_11" src="images/psc_11.jpg" width="488" height="24" alt="" />
</div>
<div class="psc-12_">
<img id="psc_12" src="images/psc_12.jpg" width="114" height="17" alt="" />
</div>
<div class="psc-13_">
<img id="psc_13" src="images/psc_13.jpg" width="113" height="32" alt="" />
</div>
<div class="psc-14_">
<img id="psc_14" src="images/psc_14.jpg" width="114" height="32" alt="" />
</div>
<div class="psc-15_">
<img id="psc_15" src="images/psc_15.jpg" width="488" height="25" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

PS generiert den CSS und XHTML Code in einer Datei.
Ich habe bereits den CSS Code separiert und in einer Datei gespeichert, welche ich in der Vorlage eingebunden habe.
Im Seitenlayout habe ich bei Ausrichtung "mittig" gewählt und bei Seitenaufbau "Eigener".

Wie gesagt... mein Problem ist nun, daß die Seite linksbündig statt zentriert dargestellt wird.. Ich habe schon einiges versucht, leider ohne Erfolg. Vielleicht kann mir jemand DEN entscheidenden Tip geben. Ich hoffe, ich nerve nicht zu sehr mit meinen Anfängerfragen...

Danke schonmal im Voraus

Gruß Uwe

P.S. Einen Link dazu kann ich nicht posten da das ganze auf meinem Localhost läuft.

[Jensensen]

schreibe für deinen äußeren (relevanten) DIV container:

#mein_container_xyz {margin: 0 auto;}

Greetz

[Uwe367]

Hallo Jensensen

Hat geklappt. Ich mußte nur noch bei dem von dir benannten relevanten, äußeren Container die Position von absolute auf relative ändern.

Besten Dank und schönes Wochenende

Gruß Uwe