Page 1 of 1
Problem mit Seitenlayout
Posted: Thu 27. Dec 2007, 09:15
by 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
Re: Problem mit Setenlayout
Posted: Thu 27. Dec 2007, 09:43
by 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
Re: Problem mit Setenlayout
Posted: Thu 27. Dec 2007, 09:50
by 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
Re: Problem mit Setenlayout
Posted: Thu 27. Dec 2007, 09:56
by flip-flop
Exakt -> als Einstieg und/oder Lernbeispiel kannst du ja eines von
diesen Layouts verwenden oder eine Variante von
pepe.
Re: Problem mit Setenlayout
Posted: Thu 27. Dec 2007, 10:23
by Uwe367
Alles klar.. besten Dank
Re: Problem mit Setenlayout
Posted: Thu 27. Dec 2007, 10:52
by 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
Re: Problem mit Setenlayout
Posted: Fri 28. Dec 2007, 23:04
by Jensensen
[einmisch]
Hi Uwe,
würde mich an Deiner Stelle von den table layouts lösen.
Alles, was Du unter:
Uwe367 wrote:...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
Uwe367 wrote:...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]
Re: Problem mit Setenlayout
Posted: Sat 29. Dec 2007, 07:53
by 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
Re: Problem mit Setenlayout
Posted: Sat 29. Dec 2007, 18:08
by 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?
Re: Problem mit Setenlayout
Posted: Sat 29. Dec 2007, 18:59
by 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..
Re: Problem mit Seitenlayout
Posted: Sun 30. Dec 2007, 20:07
by 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!
Re: Problem mit Seitenlayout
Posted: Sun 30. Dec 2007, 20:29
by 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
Re: Problem mit Seitenlayout
Posted: Fri 4. Jan 2008, 15:07
by 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.
Re: Problem mit Seitenlayout
Posted: Fri 4. Jan 2008, 15:19
by Jensensen
schreibe für deinen äußeren (relevanten) DIV container:
#mein_container_xyz {margin: 0 auto;}
Greetz
Re: Problem mit Seitenlayout
Posted: Fri 4. Jan 2008, 20:53
by 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
