[GELÖST] Layout «zerschossen»

redigo/ · 04. Januar 2015 18:50

Hallo Kolleginnen und Kolegen
Mein Problem ist, dass ich mein Problem nicht wirklich beschreiben kann:
Der äusserste Container mit Inhalt (Rahmen, HG-Farbe) hat sich auf einen 25 px hohen Streifen zurückgezogen, die Fusszeile geistert irgendwo herum.
Nachdem ich Template und CSS vorwärts und rückwärts inkll. debug-Optionen erfolglos durchgeackert habe, sehe ich keine andere Möglichkeit mehr (ausser den Rechner zum Fenster zu schmeissen) als hier eine Hilfeanfrage zu posten, obwohl ich nicht nicht sagen kann, ob das Template, das CSS oder beide für das Problem verantwortlich sind.
Ich gebe euch gerne den Link, damit ihr euch ein Bild von der «Bescherung» machen könnt.
www.himmelunderde.ch
Mir wäre wohl schon geholfen, wenn mir jemand sagen könnte, WO ich nach dem Fehler suchen soll. Die Debug-Optionen on board sind für mich leider keine Hilfe, weil ich dort nur «Bahnhof» verstehe.
Danke und Gruss
redigo

Beitrag geändert von redigo/ (04. Januar 2015 18:52)

owr_web · 04. Januar 2015 20:13

Auf die schnelle hab ich mal beim div id=main das float=left Probleme verursacht - du hast anscheinend ein "fließendes" Problem

EDIT: Hast du vielleicht im Div id=content Stylesheet irgendwo im oder nach dem Inhalt (z.B. vor oder im footer) ein clear=both gelöscht?

EDIT zwei: Versuch mal in der div#fusszeile ein "clear: both;" einzufügen - sollte hinhauen

Beitrag geändert von owr_web (04. Januar 2015 20:23)

redigo/ · 04. Januar 2015 22:19

owr schrieb:

EDIT zwei: Versuch mal in der div#fusszeile ein "clear: both;" einzufügen - sollte hinhauen

Danke, owr, die Fährte «clear» hatte ich auch schon verfolgt, aber offenbar nicht konsequent genug - wir sind inzwischen aber auf dem Weg der Besserung ;-)

redigo/ · 05. Januar 2015 08:47

Guten Morgen allerseits
Ich habe ein mysteriöses Problem mit einem Stylesheet.
Das Template definiert den Container «Main» mit dem 'Content'-Tag so:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="main">  
<h2>{title}</h2> 
{content} 
<hr class="accessibility" />
<div class="clear"> </div>
</div>

Das Stylesheet für dieses <div> sieht so aus:

Hier klicken, um den Code zum Kopieren zu markieren

div#main { 
float: left; 
display: block; 
margin-right: 135px; 
margin-top: 39px; 
margin-bottom: 25px; 
width: 350px; }

Sonderbarerweise wird das Stylesheet aber ohne div#main verarbeitet, dortige Änderungen im Stylesheet bleiben wirkungslos, während alle anderen Elemente sauber verarbeitet werden.
Kann mir jemand auf die Sprünge helfen?
Danke!
redigo

Beitrag geändert von redigo/ (05. Januar 2015 08:49)

Klenkes · 05. Januar 2015 09:16

Da ist auch ein Fehler drin:

Hier klicken, um den Code zum Kopieren zu markieren

...
div#vraqtext {
width: 250px;
font-size: 1.0em;
line-height: 1.3em;
color: #111;
/*padding: 5px;*/
/*border: 1px solid #7b6a6e;*/
}
clear: both; /* <- Das steht hier alleine und muss vermutl. oben rein */
}
#main {
/* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */
float: left;
display: block;
margin-right: 135px;
margin-top: 39px;
margin-bottom: 25px;
width: 350px;
}
...

Bei dem allein stehenden clear:both bricht der Browser die Verabeitung des Stylesheets ab. Verrmutlich gehört es zur Deklaration von div#vraqtext.

redigo/ · 05. Januar 2015 09:22

Hier klicken, um den Code zum Kopieren zu markieren

clear: both; /* <- Das steht hier alleine und muss vermutl. oben rein */ }

Zu schön um wahr zu sein: Wenn ich clear:boath; in die vorherige Deklaration integriere, zerschiesst mir dies wieder das gesamte Layout. ;-(

Klenkes · 05. Januar 2015 09:31

Jetzt heißt es clear:boath; was sowieso falsch ist.
Du musst auch die Klammern richtig schließen!

redigo/ · 05. Januar 2015 09:42

Ein Schreibfehler – nicht zu fassen! ;-)
Nur wird nach der Korrektur von Schreibfehler und Klammer die entsprechende CSS-Position immer noch nicht verarbeitet.

Beitrag geändert von redigo/ (05. Januar 2015 09:45)

mike-r · 05. Januar 2015 11:58

Sieht ok aus hier, was wird denn genau nicht verarbeitet?

redigo/ · 05. Januar 2015 12:11

mike schrieb:

was wird denn genau nicht verarbeitet?

Die CS-Deklaration für den Container «main» wird nicht verarbeitet. Aber ich habe inzwischen Pflaumen auf den Augen und sehe gar nichts mehr ;-(

mike-r · 05. Januar 2015 12:30

Warum das so ist steht hier: http://www.cmsmadesimple.de/forum/viewt … 373#p33373

Janl · 05. Januar 2015 14:24

Wenn Du mal schaust auf http://tierschutz-in.eu.
Da habe ich ein Header, 3 Spalten und ein Footer.

Dann mit Firefox und Addon Firebug, Quellkode und CSS kopieren wo es gebraucht wird.
Man muss Div's in richtige Reihenfolge haben.

Wenn es nicht gelingt schicke PM und ich schicke Templates/Stylesheets.

MfG
Jan

redigo/ · 05. Januar 2015 16:23

Danke, Jan, ich versuche mal, dein CSS zu kopieren.
Gruss
redigo

redigo/ · 05. Januar 2015 17:19

Danke, Jan. Ich habe mir dein CSS angeschaut, aber bez. floating wird da eine ganz andere Systematik angewandt als die mir bekannte. Ich bin vielleicht hinter dem Mond zuhause, aber wenn das so ist, dann muss ich halt dort versuchen, meine Site wieder in Ordnung zu bringen ;-))
Danke und Gruss
redigo

mike-r · 05. Januar 2015 17:46

warum löschst Du nicht einfach das falsch clear raus?

redigo/ · 05. Januar 2015 17:51

mike schrieb:

warum löschst Du nicht einfach das falsch clear raus?

Sagst du mir bitte, welches falsche «clear». Ich habe inzwischen so oft hin und her ausprobiert damit, dass ich nicht mehr weiss, welches das falsche ist.
Danke und Gruss
redigo

mike-r · 05. Januar 2015 20:09

das direkt oberhalb von #main - wurde doch hier im Thread besprochen?

redigo/ · 05. Januar 2015 21:01

Ja, ich habe vermutet, dass du das meinst. Aber so einfach ist das nicht. Entweder habe ich die korrekte Darstellung der die Spalten OHNE den Hintergrund des Pagewrappers oder aber diesen nur Hälfte und ein Chaos mit den Spalten. Ich habe alle Versionen mit diesem "clear" ausprobiert...

mike-r · 05. Januar 2015 21:41

Sieht doch ok aus jetz? Wo ist denn jetzt noch das Problem?
Edit: ok, sehe es, finde aber auf Anhieb die Ursache nicht. Kuck da später nochmal drauf.

Beitrag geändert von mike-r (05. Januar 2015 21:47)

redigo/ · 06. Januar 2015 09:37

Der «Missetäter» ist inzwischen identifiziert.
Es ist der Container in der dritten rechten Spalte:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="containerrechts"> 
<div id="imagebox"> 
{content block='imagebox'} 
</div> <div id="textbox"> 
<div id="vraqtitel"> 
<h5> VRAQ </br> 
Very Rarely Asked Questions</br> 
</h5> 
</div>  
<div id="vraqtext"> {CGBlog detailpage="neueste" number="3" } 
</div> 
</div> 
</div>

Hier klicken, um den Code zum Kopieren zu markieren

div#containerrechts 
{ float: right; 
margin-top: 15px; margin-right: 13px; 
width: 250px; } 
div#imagebox 
{ font-size: 1.0em; 
margin-bottom: 15px; 
width: 250px; 
text-align: left; line-height: 1.2em; 
} 
#imagebox h6 
{width: 240px; 
font-size: 0.8em; 
line-height: 1.2em; }  
div#textbox 
{ 
margin-top: 25px; 
margin-right: 0px; width: 250px;}  
#textbox h6 
{font-size: 1.2em; line-height: 1.2em; }  
div#vraqtitel 
{width: 250px;} 
#vraqtitel h5 
{line-height: 1.2em; } 
div#vraqtext 
{ width: 250px; 
font-size: 1.0em; 
line-height: 1.3em; 
color: #111;}
div#vraqtext 
{width: 250px;
font-size: 1.0em;
line-height: 1.3em;
color: #111;
clear: both;}

Wenn ich mit Firebug float: right; wegklicke, erscheint der Pagewrapper mit der Hintergrundfarbe problemlos, mit «float» wird er «verdrängt».
Was an diesem «containerrechts» fehlerhaft ist, sehe ich leider im Moment nicht.
Falls hier jemand mit einem schnellen Blick den Übertäter erkennt, wäre das super.
EDIT: Inzwischen ist klar, dass sämtliche «float»-Einträräge in allen 3 Spalten die verdrängende Wirkung auf die Grundcontainer «pagewrapper» und «content» haben.
EDIT 2: Der «Inspector» zeigt keine CSS-Fehler an, die einen Bezug zu meinem Problem haben könnten.

Beitrag geändert von redigo/ (06. Januar 2015 10:05)

Janl · 06. Januar 2015 10:50

Das Prinzip ist einfach.
Container in der Mitte mit breite Margins links und rechts für spalten links und rechts.
Spalten-div's mit float links und rechts platzieren.
Dann clear:both
Dann Footer

Ein Beispiel-Datei is mit E-Mail geschickt.

MfG
Jan

Klenkes · 06. Januar 2015 12:33

Nur so mal als kleine Randnotiz:
1. Deinem div#content fehlt die schließende Klammer(nach height: 100%;). Daraufhin wird der Rest des CSS ignoriert.

2. Im Quellcode finde ich dies:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="vraqtitel">
<h5>
VRAQ </br>
Very Rarely Asked Questions</br>
</h5>
</div>

Ein gibt es nicht. wäre richtig.
Mancher Browser mag als schließenden Tag interpretieren, der nirgendwo geöffnet wurde.

Ich kann es nur immer wieder betonen:
Wer Fehler in der Darstellung sucht, braucht zuerst fehlerfreies HTML und CSS!

redigo/ · 06. Januar 2015 12:39

Danke, Klenkes.

Janl · 06. Januar 2015 13:09

Aber immer aufpassen welcher DOC-TYPE
HTML 4 
XHTML 
HTML5

Mit rechter Maustaste in Firefox (irgend wo im Hintergrund), "Seitenquelltext anzeigen",
da kann man oft schon HTML-Fehler erkennen als rote Text.

MfG
Jan

redigo/ · 06. Januar 2015 16:03

Jan schrieb:

XHTML

Hab's geändert, aber leider hat das – natürlich – mein «float»-Probem nicht gelöst. ;-)

Forum für CMS/made simple

#1 04. Januar 2015 18:50

[GELÖST] Layout «zerschossen»

#2 04. Januar 2015 20:13

Re: [GELÖST] Layout «zerschossen»

#3 04. Januar 2015 22:19

Re: [GELÖST] Layout «zerschossen»

#4 05. Januar 2015 08:47

Re: [GELÖST] Layout «zerschossen»

#5 05. Januar 2015 09:16

Re: [GELÖST] Layout «zerschossen»

#6 05. Januar 2015 09:22

Re: [GELÖST] Layout «zerschossen»

#7 05. Januar 2015 09:31

Re: [GELÖST] Layout «zerschossen»

#8 05. Januar 2015 09:42

Re: [GELÖST] Layout «zerschossen»

#9 05. Januar 2015 11:58

Re: [GELÖST] Layout «zerschossen»

#10 05. Januar 2015 12:11

Re: [GELÖST] Layout «zerschossen»

#11 05. Januar 2015 12:30

Re: [GELÖST] Layout «zerschossen»

#12 05. Januar 2015 14:24

Re: [GELÖST] Layout «zerschossen»

#13 05. Januar 2015 16:23

Re: [GELÖST] Layout «zerschossen»

#14 05. Januar 2015 17:19

Re: [GELÖST] Layout «zerschossen»

#15 05. Januar 2015 17:46

Re: [GELÖST] Layout «zerschossen»

#16 05. Januar 2015 17:51

Re: [GELÖST] Layout «zerschossen»

#17 05. Januar 2015 20:09

Re: [GELÖST] Layout «zerschossen»

#18 05. Januar 2015 21:01

Re: [GELÖST] Layout «zerschossen»

#19 05. Januar 2015 21:41

Re: [GELÖST] Layout «zerschossen»

#20 06. Januar 2015 09:37

Re: [GELÖST] Layout «zerschossen»

#21 06. Januar 2015 10:50

Re: [GELÖST] Layout «zerschossen»

#22 06. Januar 2015 12:33

Re: [GELÖST] Layout «zerschossen»

#23 06. Januar 2015 12:39

Re: [GELÖST] Layout «zerschossen»

#24 06. Januar 2015 13:09

Re: [GELÖST] Layout «zerschossen»

#25 06. Januar 2015 16:03

Re: [GELÖST] Layout «zerschossen»

Fußzeile des Forums