[GastForen Web allgemein HTML und CSS / Stylesheets Layoutproblem

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Layoutproblem

jdgf
Beiträge gesamt: 117

8. Nov 2006, 18:39
Beitrag # 1 von 19
Bewertung:
(4603 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

auf der Testwebsite www.kolping-hohenfels.de/demo-gila/index.htm habe ich in die rechte Sidebar (blauer Rahmen) den Eventkalender eingefügt. Dadurch wurde die nachfolgende Box (gelber Rahmen) verdrängt, obwohl die rechte Sidebar (= Container für die drei Boxen) ihre Höhe anpassen soll. Was ist falsch codiert.

Der Code der Vorlage:
Code
<div id="side-bar_right"> 
<!-- Right Sidebar (header.tpl) Start -->

{CONTENT_RSB_1}
<!-- Right Sidebar Box 1 (Content) Start -->
<div class="rightSideBar">
<p class="sideBarTitle">Wie gefällt dir die Homepage?</p>
{SCRIPT_UMFRAGETEST}
<!-- Right Sidebar Box 1 (Content) End -->
</div>

{CONTENT_RSB_2}
<div class="rightSideBar">
<!-- Right Sidebar Box 2 (Content) Start -->
<p class="sideBarTitle">Eventkalender</p>
<a href="kalender/admin/vorschlag.php" title="Eventkalendereintrag">Termin eintragen<br /></a>
<a href="event.htm" title="zunm Eventkalender">Eventkalender ansehen<br /></a>
{SCRIPT_EVENT}
<!-- Right Sidebar Box 2 (Content) End -->
</div>

{CONTENT_RSB_3}
<div class="rightSideBar">
<!-- Right Sidebar Box 3 (Content) Start -->
<p class="sideBarTitle">Validation</p>
<div class="sideBarText">Validate this page:</div>
<div class="sideBarText">
<a href="http://validator.w3.org/check/referer"><img style="border:none;" src="$home/gif/valid-xhtml10.gif" alt="Validator" /> </a></div>
<div class="sideBarText">
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:none;" src="$home/gif/valid-css.gif" alt="Validator" /></a></div>
<div class="sideBarText">(Two errors shown for XHTML 1.0 strict are due to Mail2Crypt and a 'weird' behaviour of the validator in this case.)</div>
<!-- Right Sidebar Box 3 (Content) End -->
</div>

<!-- Right Sidebar (header.tpl) End -->

</div>
<!-- Sidebar (header.tpl End -->


CSS-Code:
Code
#side-bar_right { 
float:right;
width:13.5em;
margin-right:0;
margin-top:1em;
border: 1px solid #00FFFF;
}
.rightSideBar {
width: 13em;
background-color:#5f7797;
margin-bottom:1em;
padding-left:0.5em;
padding-bottom:0.5em;
border: 1px solid yellow;
}

/*[class~="rightSideBar"] {
margin-right: 1.5ex;
}
*/
.rightSideBar .sideBarTitle {
color: black;
background-color:#bfc4cb;
font-weight: bold;
margin: 1.25ex 1ex;
padding: 0.9ex 1ex;
}

Danke und lG Dietmar
X

Layoutproblem

jdgf
Beiträge gesamt: 117

9. Nov 2006, 09:51
Beitrag # 2 von 19
Beitrag ID: #260897
Bewertung:
(4588 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

ich habe jetzt die rechte Sidebar der linken Sidebar angepaßt. <div class="leftSideBar> wird jetzt ein Container unter <div id="side-bar_right"> und die einzelnen Boxen werden wie auf der linken Seite mit <div class="rightSideBarBox"> definiert. Das optischen Ergebnis ändert sich nur insoweit, indem die Validierungsbox zentriert über dem Mainbereich liegt. Warum sie sich nicht in die nun zwei div-Container einfügt, verstehe ich nicht.

Zur Klarstellung der geänderte Code:
Code
<div id="side-bar_right"> 
<!-- Right Sidebar Start -->
<div class="rightSideBar">
<!-- Right Sidebar Box 1 (Content) Start -->
<div class="rightSideBarBox">
<p class="sideBarTitle">Wie gefällt dir die Homepage?</p>
{SCRIPT_UMFRAGETEST}
</div>
<!-- Right Sidebar Box 1 (Content) Ende -->

<!-- Right Sidebar Box 2 (Content) Start -->
<div class="rightSideBarBox">
<p class="sideBarTitle">Eventkalender</p>
<a href="kalender/admin/vorschlag.php" title="Eventkalendereintrag">Termin eintragen<br /></a>
<a href="event.htm" title="zunm Eventkalender">Eventkalender ansehen<br /></a>
{SCRIPT_EVENT}
</div>
<!-- Right Sidebar Box 2 (Content) Ende -->

<!-- Right Sidebar Box 3 (Content) Start -->
<div class="rightSideBarBox">
<p class="sideBarTitle">Validation</p>
<!--<div class="sideBarTitle">Validate this page:</div>-->
<div class="sideBarText">
<a href="http://validator.w3.org/check/referer"><img style="border:none;" src="$home/gif/valid-xhtml10.gif" alt="Validator" /> </a></div>
<div class="sideBarText">
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:none;" src="$home/gif/valid-css.gif" alt="Validator" /></a></div>
<div class="sideBarText">(Two errors shown for XHTML 1.0 strict are due to Mail2Crypt and a 'weird' behaviour of the validator in this case.)</div>
</div>
<!-- Right Sidebar Box 3 (Content) Ende -->

</div>
<!-- Right Sidebar Ende -->
</div>
<!-- side-bar_right Ende -->


CSS hierzu:
Code
#side-bar_right { 
float:right;
width:13.5em;
margin-right:0;
margin-top:1em;
border: 1px solid #00FFFF;
}
.rightSideBar {
width: 13em;
background-color:#5f7797;
margin-bottom:1em;
padding-left:0.5em;
padding-bottom:0.5em;
border: 1px solid yellow;
}
.rightSideBar .sideBarTitle {
color: black;
background-color:#bfc4cb;
font-weight: bold;
margin: 0.7em 0.5em;
padding: 0.4em 0.5em;
}
.rightSideBarBox {
background-color:#5f7797;
border: 0.12em solid white;
margin-bottom:1em;
}


Gruß, Dietmar


als Antwort auf: [#260805]

Layoutproblem

SabineP
Beiträge gesamt: 7586

9. Nov 2006, 13:44
Beitrag # 3 von 19
Beitrag ID: #260979
Bewertung:
(4575 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

deine Testseite fehlt auf dem Server:
www.kolping-hohenfels.de/demo-gila/index.htm
Sie haben die Seite /demo-gila/index.htm aufgerufen. Sorry. Diese Seite ist leider nicht vorhanden. Bitte benutzen Sie den "zurück"-Button in ihrem Browser.

Gruß Sabine


als Antwort auf: [#260897]

Layoutproblem

jdgf
Beiträge gesamt: 117

9. Nov 2006, 16:15
Beitrag # 4 von 19
Beitrag ID: #261046
Bewertung:
(4569 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

sorry, die Adresse lautet richtig:
http://www.kolping-hohenfels.de/demo_gila/index.htm

LG Dietmar


als Antwort auf: [#260979]

Layoutproblem

SabineP
Beiträge gesamt: 7586

9. Nov 2006, 18:38
Beitrag # 5 von 19
Beitrag ID: #261089
Bewertung:
(4563 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

>>... indem die Validierungsbox zentriert über dem Mainbereich liegt.
>> Warum sie sich nicht in die nun zwei div-Container einfügt, verstehe ich nicht.

Dann klick doch mal auf den Button, der mit XHTML 1.0 beschriftet ist.
Deine Seite enthält 54 Fehler!

Gruß Sabine

PS. Du solltest mal schleunigst noch Dein Script aktualisieren.

Diese Version (parsed by phpCMS 1.2.1pl2) enthält zahlreiche Sicherheitslücken.

http://www.phpcms.de/index.de.html
http://www.securityfocus.com/archive/1/436893


als Antwort auf: [#261046]
(Dieser Beitrag wurde von SabineP am 9. Nov 2006, 18:55 geändert)

Layoutproblem

jdgf
Beiträge gesamt: 117

9. Nov 2006, 19:33
Beitrag # 6 von 19
Beitrag ID: #261096
Bewertung:
(4549 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

die Seite ist wieder valide. Ich habe den Kalendereintrag links und den Eventkalender rechts wieder rausgenommen. Den Fehler hat der Eventkalender verursacht. Jetzt sieht das Layout wieder vernünftig aus. Kalender und Eventkalender müssen leider erst noch XHTML-valide gemacht werden.

Das Sicherheitsupdate für phpCMS wird auch noch erfolgen. Ich will nur zuerst eine funktionsfähige XHMTL-Website haben.

LG Dietmar


als Antwort auf: [#261089]

Layoutproblem

jdgf
Beiträge gesamt: 117

15. Nov 2006, 09:06
Beitrag # 7 von 19
Beitrag ID: #261897
Bewertung:
(4524 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

jetzt müßte die Seite für die Auflösung 1024 passen.

LG Dietmar


als Antwort auf: [#261096]

Layoutproblem

SabineP
Beiträge gesamt: 7586

15. Nov 2006, 10:26
Beitrag # 8 von 19
Beitrag ID: #261929
Bewertung:
(4515 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

die Seite ist nach wie vor zu breit.
Mit der Maßeinheit em kann sich keine Breite in Pixel ergeben.

aus Deinem Code:

#seite {
margin: auto;
/*width: 84.6em;*/
/* width:980px;*/
/* width:100%*/
/*width:1000px;*/
width:85em;
border:0;
padding: 0;

}


Gruß Sabine


als Antwort auf: [#261897]

Layoutproblem

FSt
  
Beiträge gesamt: 1965

15. Nov 2006, 11:28
Beitrag # 9 von 19
Beitrag ID: #261953
Bewertung:
(4510 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar

Ich versteh nicht ganz was Du da machst.
Einerseits willst Du eine skalierbare Website, andererseits doch nicht.

Wieso kannst Du nicht einfach 100% für #seite nehmen?
Die Schriftgrösse kannst Du auch in Prozent angeben.
Wieso probierst Du die Schriftgrösse zu fixieren (im IE)? Nur weil es Dir sonst das Layout zerreist?

Stell mal auf Prozent um und lass die "em" weg. Ich denke so kommst Du schneller an Dein Ziel.

Gruss
Martin


als Antwort auf: [#261897]

Layoutproblem

jdgf
Beiträge gesamt: 117

15. Nov 2006, 11:43
Beitrag # 10 von 19
Beitrag ID: #261956
Bewertung:
(4509 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

meine Vorgehensweise ist folgende. Ich stelle die Breite auf 1000px ein. Dann passe ich die Bildergröße auf die Breite ein (Maßeinheit em). Die Bildergröße ergibt dann die Seitenbreite, wobei die Breite der Seite etwas größer als die Bilder.
Da ich die Änderungen bei derselben Einstellung am Monitor mache, sollte doch die Größe für 1024 stimmen. Nach meinem Test entspricht auf meinem Monitor 85em etwa 1000px bei Schriftgrad normal. Die Größe der Seite sieht in allen Browsern gleich aus, allerdings bei unterschiedlichen Schriftgraden.

Wenn ich mich auf exakt 1000px festlege, stimmen die Bilder bei einer Änderung der Schriftgröße nicht mehr. Das sieht auch nicht gut aus.

Entscheide ich mich für 100%, wird bei einem größeren Bildschirm die Seite zerrissen.

Ich weiß, dass man nicht alle Möglichkeiten einbinden kann, nur was ist richtig. In unserer aktuelle Seite http://www.kolping-hohenfels.de ist die äußerste Tabelle auf 600px festgelegt und alle weiteren Breitenangaben sind in Prozent ausgedrückt. Vergrößere ich die Seite, wird hier der Hintergrund bei den Bildern sichtbar. Entspricht diese Lösung einem flexiblen barrierefreiem Design?

LG Dietmar


als Antwort auf: [#261929]

Layoutproblem

SabineP
Beiträge gesamt: 7586

15. Nov 2006, 12:50
Beitrag # 11 von 19
Beitrag ID: #261976
Bewertung:
(4504 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> Dann passe ich die Bildergröße auf die Breite ein (Maßeinheit em).

Die Maßeinheit für Bilder ist Pixel.
Mit em werden die Bilder im Browser skaliert und unscharf, so wie es bei Dir der Fall ist.

Schau Dir doch mal ein paar Bildschirmfotos von Deiner Seite in verschiedenen Browsern
bei browsershots.org an.

Gruß Sabine


als Antwort auf: [#261956]

Layoutproblem

jdgf
Beiträge gesamt: 117

15. Nov 2006, 14:41
Beitrag # 12 von 19
Beitrag ID: #261998
Bewertung:
(4491 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

ich bin grad am Umbauen. Allerdings sieht bei mir die Seite http://www.kolping-hohenfels.de/demo_gila/index.htm kleiner aus als http://www.kolping-hohenfels.de, obwohl letztere nur 600px breit und die neue Seite 760 px breit ist.

Zuerst wollte ich die Seitenbreite in #seite mit 760px festlegen und die anderen Angaben in % ausdrücken. Die Seite wurde dann nicht richtig angezeigt.

Klappt dies nur, wenn vorher #seite mit 100% definiert ist. In der aktuellen Seite wurde die äußerste Tabelle mit px und die nächste in % bestimmt. Muß ich deshalb eine weitere Ebene einfügen oder gibt es eine andere Lösung.

LG Dietmar


als Antwort auf: [#261976]

Layoutproblem

SabineP
Beiträge gesamt: 7586

15. Nov 2006, 18:06
Beitrag # 13 von 19
Beitrag ID: #262052
Bewertung:
(4482 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Die die Seite http://www.kolping-hohenfels.de/kolping/index.htm
hat 74 HTML-Fehler.

http://validator.w3.org/...Inline&verbose=1

Der Browser kann damit machen was er will, er zeigt also irgendwas an, aber sicher nicht das was Du willst.

Gruß Sabine


als Antwort auf: [#261998]
(Dieser Beitrag wurde von SabineP am 15. Nov 2006, 18:08 geändert)

Layoutproblem

jdgf
Beiträge gesamt: 117

16. Nov 2006, 11:32
Beitrag # 14 von 19
Beitrag ID: #262137
Bewertung:
(4464 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

du hast mich auf den ersten Blick geschockt; die Adresse www.kolping-hohenfels.de bezieht sich auf die HTML-Variante, die durch www.kolping-hohenfels.de/demo-gila/index.htm (XHTML-Varinate = valide) ersetzt werden soll.

Ich würde lieber die %-Lösung nehmen; müßte ich dann zwischen #seite und dem derzeitigen Inhalt einen weiteren Container id= #seiteProzent, der in CSS mit {width=100%} deklariert ist, einfügen, da bei #seite {width=100%} die Seite bei größeren Auflösung als 800px zerrissen wird.

LG Dietmar


als Antwort auf: [#262052]

Layoutproblem

SabineP
Beiträge gesamt: 7586

16. Nov 2006, 12:07
Beitrag # 15 von 19
Beitrag ID: #262148
Bewertung:
(4457 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> du hast mich auf den ersten Blick geschockt

Ja, wenn Du mich fragst warum die Seite mehr als 600px breit ist.

>> da bei #seite {width=100%} die Seite bei größeren Auflösung als 800px zerrissen wird.

Warum legst Du die Breite dann nicht gleich auf 800px fest?


als Antwort auf: [#262137]
X