[GastForen Web allgemein HTML und CSS / Stylesheets Layoutproblem

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

Layoutproblem

jdgf
Beiträge gesamt: 117

23. Nov 2006, 19:41
Beitrag # 1 von 15
Bewertung:
(4325 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

auf der Seite http://www.kolping-hohenfels.de/demo_gila/index.htm fließt im FF und Opera der graue Fußbereich in den roten Hauptbereich. Im IE ist die Darstellung richtig. Die Seite ist valide.

Nach dem schließenden </div> des Hauptbereichs habe ich <br class="all" /> eingefügt und dann folgt der Fußbereich mit
<div id="unten"> Auch die umgekehrte Reihenfolge also erst <br class="all" /> und dann </div> ändert am Erscheinungsbild nichts.

Gruß Dietmar
X

Layoutproblem

SabineP
Beiträge gesamt: 7586

23. Nov 2006, 20:15
Beitrag # 2 von 15
Beitrag ID: #263522
Bewertung:
(4324 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

wie kommst Du darauf?
<br class="all" />

Die Klasse all existiert nicht in Deiner CSS-Datei.


Schreibe deshalb <br clear="all">

Also an diese Stelle:
<!-- phpCMS FOOTER START -->
</div><br clear="all">

Dann sollte es klappen.
Gruß Sabine


als Antwort auf: [#263517]
(Dieser Beitrag wurde von SabineP am 23. Nov 2006, 20:20 geändert)

Layoutproblem

jdgf
Beiträge gesamt: 117

23. Nov 2006, 20:54
Beitrag # 3 von 15
Beitrag ID: #263530
Bewertung:
(4315 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

grübel, dabei war ich überzeugt, dass ich es reingeschrieben habe. Denn das Thema http://www.hilfdirselbst.ch/...%3Cbr%20class#260112
hatten wir schon mal vor kurzem und etwas sollte ich doch dazugelernt haben.

Danke und Gruß Dietmar


als Antwort auf: [#263522]

Layoutproblem

jdgf
Beiträge gesamt: 117

27. Nov 2006, 18:02
Beitrag # 4 von 15
Beitrag ID: #264027
Bewertung:
(4297 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

die Seite http://www.kolping-hohenfels.de/demo_gila/index.htm
wird im FF / Opera richtig dargestellt, nicht aber im IE. Es scheint aber nicht an der Breite der beiden Spalten im Mittelbereich (gamma-Bereich) zu liegen, da selbst eine Reduzierung von 223px auf 123px zu keiner Veränderung führt.
<br class="clearall" /> mit .clearall {clear:both;} ist eingefügt.

Entferne ich die linke Randspalte (alpha-Bereich), fügen sich die Spalten bündig am linken Seitenrand oben ein.

Ich habe aber nur die SideBarBoxes innerhalb des jeweiligen Box-Bereiches verändert, nicht die Struktur der Seite.

Beim Testen ist die Seite valide. Was stimmt hier nicht?

Gruß Dietmar


als Antwort auf: [#263530]

Layoutproblem

SabineP
Beiträge gesamt: 7586

27. Nov 2006, 19:47
Beitrag # 5 von 15
Beitrag ID: #264041
Bewertung:
(4281 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

>> Was stimmt hier nicht?

Das kann ich Dir auch nicht sagen, weil ich momentan keinen IE zur Hand habe.
Vielleicht kann da mal jemand mit dem IE nachsehen.

Ein allgemeiner Rat:
Versuche den CSS-Code-Anteil zu reduzieren.
Das sind schon wieder über 700 Zeilen Code.
Wer soll da noch durchblicken.

http://www.kolping-hohenfels.de/demo_gila/testdemo.css
Gruß Sabine


als Antwort auf: [#264027]

Layoutproblem

FSt
  
Beiträge gesamt: 1961

27. Nov 2006, 21:50
Beitrag # 6 von 15
Beitrag ID: #264049
Bewertung:
(4271 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar

In der CSS-Datei
Deine beiden Boxen ultest1 und ultest2 sind 225px breit. Zusätzlich werden sie von einem 10px breiten "Spalt" getrennt.
Dein gamma ist 460px breit und hat ein margin-left und -right von 10px.

Im Browser
Im FF ist das gamma inkl. der beiden margins 477px, im IE 476px und im Opera 478px breit.
Ich denke, dieser eine Pixel ist gerade einer zu wenig! Aber trotzdem fehlen Dir hier plötzlich ein paar Pixel. Irgend was ist breiter als definiert und zerdrückt Dir das Layout.

Bei über 700 Zeilen Code wird es elend schwierig den Fehler zu suchen.
Wenn Du so komplexe CSS-Dateien planst, oder generierst, dann ist es umso wichtiger, dass auch die Qualitätskontrolle stimmt. Du solltest bei jeder neuen CSS-Anweisung kontrollieren, ob die Browser auch das machen, was Du ihnen sagst. Und zwar auf den Pixel genau, und nicht nur ungefähr. Sonst läufst Du irgendwann in Gefahr, das Dir am falschen Ort ein Pixel fehlt, der Dir das Layout zerschiesst und Du weisst nicht mehr welche Deiner Anweisungen ein Pixel zu breit interpretiert wurde ...

Gruss
Martin


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#264027]

Layoutproblem

jdgf
Beiträge gesamt: 117

28. Nov 2006, 08:37
Beitrag # 7 von 15
Beitrag ID: #264083
Bewertung:
(4256 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine, hallo Martin

danke für den Tip. Ich habe erst wieder mal die lauffähige Vortagsversion der CSS-Datei aktiviert und es klappt. Werde jetzt sorgfältiger den Rest integrieren, insbesondere noch intensiver den IE befragen.

Eigentlich hatte alles - auch im IE - funktioniert, bis ich auf die Idee kam, den Rahmen um die beiden Spalten zu entfernen und dafür (Rahmenstärke 1px) die Breite der Innenspalten (=ultest1 +2) von 223 auf 224 zu erhöhen.
Das ist doch rechnerisch richtig: Rahmen + Innenspalte + Rahmen = Breite --> 2 x 224 + 10 = 458 (also 2px weniger als 460). Mit 2 x 225 (Innenspaltenbreite 223 + 2x Rahmenbreite 1px) + 10 = 460 klappt es jetzt wieder. Gammabereich + margin beträgt 480px.

Der Außenabstand 10px vom Gammabereich bezieht sich doch auf den Abstand zu den beiden Außenspalten und beeinflußt doch die Breite des Gammabereiches nicht.

Denn die Außenabstände haben eine Spaltenbreite von 150px, sodass sich die Gesamtbreite errechnet:
2x150 (Außenspalte) + 2x 10 (margin) + 460 = 780px (Angabe Containerbreite).

Ist das richtig für alle Browser (FF, Opera und IE)? Funktionieren täte es, allerdings wieder mit den noch zu entfernenden Rahmen,
(siehe http://www.kolping-hohenfels.de/demo_gila/index.htm)

LG Dietmar


als Antwort auf: [#264049]

Layoutproblem

SabineP
Beiträge gesamt: 7586

28. Nov 2006, 10:00
Beitrag # 8 von 15
Beitrag ID: #264095
Bewertung:
(4246 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

verzichte auf pixelgenaue Layouts.
Du brauchst immer etwas Spielraum für diverse Fehldarstellungen.

Gruß Sabine


als Antwort auf: [#264083]
(Dieser Beitrag wurde von SabineP am 28. Nov 2006, 10:07 geändert)

Layoutproblem

jdgf
Beiträge gesamt: 117

28. Nov 2006, 11:46
Beitrag # 9 von 15
Beitrag ID: #264118
Bewertung:
(4235 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

das ist an sich lösbar; nur verrate mir bitte, wie groß soll der Spielraum sein? Gibt es hier Empfehlungen oder Erfahrungswerte. Wäre der Spielraum nur beim Container ratsam oder/und zusätzlich auch bei jedem untergeordneten div-Container. Denn dann summiert es sich doch.

LG Dietmar


als Antwort auf: [#264095]

Layoutproblem

SabineP
Beiträge gesamt: 7586

28. Nov 2006, 13:15
Beitrag # 10 von 15
Beitrag ID: #264135
Bewertung:
(4228 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dietmar,

>> nur verrate mir bitte, wie groß soll der Spielraum sein?

Das mußt Du selbst ermitteln.
Am besten jede Änderung in allen Browsern sofort testen,
damit Du den erforderlichen Spielraum sehen kannst.

Gruß Sabine


als Antwort auf: [#264118]

Layoutproblem

jdgf
Beiträge gesamt: 117

28. Nov 2006, 16:33
Beitrag # 11 von 15
Beitrag ID: #264191
Bewertung:
(4218 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

das mit dem Testen geht klar. Danach würde der jetzige Zustand passen. Denn die Ansicht ist in allen drei Browsern ok.

Nur weiter oben hast du erklärt:
Zitat verzichte auf pixelgenaue Layouts. Du brauchst immer etwas Spielraum für diverse Fehldarstellungen.


Das bedeutet doch, dass ich sowohl die Breite des Containers größer machen soll als die Summe der Breiten von den Containern alpha, beta und gamma plus Abstandsspalten als auch die Spalten (ultest) und die dazugehörige Abstandspalte kleiner als die Breite von gamma.

Gibt es einen Mindestspielraum?

LG Dietmar


als Antwort auf: [#264135]

Layoutproblem

ganesh
Beiträge gesamt: 1981

28. Nov 2006, 17:02
Beitrag # 12 von 15
Beitrag ID: #264204
Bewertung:
(4215 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
ich hab mir das ganze nicht im Detail angesehen, aber hier mal ein Tipp:

a) <img> tags jeweils alle auf einer einzigen Zeile belassen im Quellcode (keine Zeilenumbrüche)

b) im CSS:
img {border:0; margin:0;padding:0;}

Unter gewissen Umständen knallt der IE einfach noch einen Leerschlag rein bei Bildern; vielleicht ist das hier der Fall...


als Antwort auf: [#264191]

Layoutproblem

FSt
  
Beiträge gesamt: 1961

28. Nov 2006, 17:24
Beitrag # 13 von 15
Beitrag ID: #264207
Bewertung:
(4211 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo

<AnDieNaseFass>ganesh und Sabine haben natürlich recht<AnDieNaseFass>
Hatte den Wald vor Bäumen nicht gesehen.
Das img-tag kannst Du noch mehr aufpeppen: und zwar so
<img title="Hier kannst Du was reinschreiben, das erscheint dann, wenn Du mit der Maus darüber fährst" src="bild.jpg" alt="Das ist der altbekannte alternative Text, Suchmaschinen lieben den, wird angezeigt, wenn das Bild (noch) nicht geladen wird" longdesc="Hier kannst Du noch viel mehr schreiben, ganze (Ab-)Sätze, oder gar ganze Webseiten hinterlegen" width="100" height="100">

Gruss
Martin


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#264204]

Layoutproblem

ganesh
Beiträge gesamt: 1981

29. Nov 2006, 01:22
Beitrag # 14 von 15
Beitrag ID: #264264
Bewertung:
(4195 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Kleine Korrektur:

Das longdesc Attribut ist dafür vorgesehen, eine URL zu plazieren, wo man eine Bildlegende hinterlegen kann. Also NICHT den eigentlichen Bild-Kommentar, sondern einen Link, wo man den ausführlichen Bild-Kommentar einsehen kann.

http://www.w3.org/...ml#adef-longdesc-IMG
"This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute."

Die wenigsten Browser unterstützen allerdings longdesc, so dass man sich das genausogut sparen kann.


als Antwort auf: [#264207]

Layoutproblem

jdgf
Beiträge gesamt: 117

29. Nov 2006, 15:23
Beitrag # 15 von 15
Beitrag ID: #264424
Bewertung:
(4158 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Ganesh und Martin,

danke für eure Tips. Ich habe etwas getestet und bin zu dem Ergebnis gekommen, dass ein Rahmen bei den Spalten das Auseinanderdriften der Spalten verhindert. Daher färbe ich den Rahmen ein und es paßt.

Mein Problem ist der Übergang von einem Eintrag (litest) zum anderen : Wenn bei Zitat ein Bild erscheint und der dazugehörige Zitat-Text ist kürzer als die Bildhöhe, schlüpft der nachfolgende Text in die Resttextfläche, also rechtsbündig statt wie gewünscht linksbündig untereinander. Durch wiederholtes Drücken von F5 zeigt sich das Problem schnell.
Url: http://www.kolping-hohenfels.de/demo_gila/index.htm

Da beim Zitat-Bild-CSS die Anweisung float:left steht, müßte ich es mit clear:both aufheben. Wie löst man dies mit CSS, ohne einen Absatz oder Abstand zu erzeugen?

Gruß, Dietmar


als Antwort auf: [#264264]
(Dieser Beitrag wurde von jdgf am 29. Nov 2006, 15:27 geändert)
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
01.03.2021 - 05.03.2021

Persönlichkeitsentwicklung

Online
Montag, 01. März 2021, 00.17 Uhr - Freitag, 05. März 2021, 00.18 Uhr

Webinar

Personal Power Coaching - Um was geht es? ​ Potenzialentfaltung: Potenzial entdecken und entfalten Talente entdecken: Deine Talente und Fähigkeiten erkennen und loslegen Gewohnheiten: schlechte Gewohnheiten durch Positive ersetzen Selbstbewusstsein stärken: Dein Bewusstsein stärken Eigendynamik entwickeln: Mehr Erfolg durch Eigenverantwortung & Disziplin Ängste kontrollieren: Ängste als Antrieb nutzen Entscheidungen treffen: Mit mehr Mut an die Sache ran! Lebensenergie steigern: Deine Lebensenergie steigern und aufrechterhalten Ziele erreichen: Ziele setzen und übertreffen! Motivationssteigerung: Mehr Erfolg durch Selbstmotivation Selbstvertrauen: Selbstvertrauen auf- und ausbauen

Details:
https://www.snfa.ch/swiss-personal-power-birolisik

Ja

Organisator: Birol Isik

Kontaktinformation: Birol Isik, E-Mailinfo AT snfa DOT ch

https://www.snfa.ch/swiss-personal-power-birolisik

Neuste Foreneinträge


Bilder verschieben sich nach dem Speichern und Kopiern der Datei

Verknüpfung mit Format aufheben

Optionsfelder abhängig machen von Kontrollkästchen

Kursivierung geht bei é und É verloren

Abbildungen auf 100 % bringen

Scriptphänomen alle 16 Steps

Alternative Acrobat Pro

Affinity Designer

Objekte in Texten lassen sich nicht mehr mit Maus auswählen, nurnoch als Text mit Cursor

Welches Grafiktablett wofür?
medienjobs