Probleme mit Homepageformatierung

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich muß zur Zeit eine Homepage überarbeiten, dabei habe ich mich irgendwie im Stylesheet-Formatierungsdschungel verlaufen oder sehe zumindest den Wald vor lauter Bäumen nicht.
1.) Der Button mit dem Text „suchen“ erscheint, warum auch immer, unter dem Formularfeld zur Eingabe und ist somit von den unten nachfolgenden Bereichen verdeckt. Ich kann nirgends einen Grund erkennen, warum dieser Button unter das Eingabefeld verschoben wird. Normalerweise sollte dieser rechts daneben erscheinen.
2.) Die komplette Seite sollte sich eigentlich auf Bildschirmbreite einrichten. Im oberen Bereich der Seite funktioniert das eigentlich auch noch recht schön, ausser dem „Suchen-Feld“, für das ja eine absolute Position vorgegeben ist. Allerdings im Hauptteil wird die Seite Plötzlich breiter als der Bildschirm. Leider sehe ich vor lauter Formatierungsangaben partout nicht, warum der Hauptteil nicht analog zum oberen Teil in die richtige Breite ausgerichtet wird.
Ich bin für jede Hilfe und für jeden Tip dankbar, weil ich leider ein wenig unter Zeitdruck stehe und die Fehler auf Biegen und Brechen nicht finde.
Unter http://www.robert-sommer.eu kann sich jeder ein Bild von dem Mallheur machen.

Gruß

Thomas

#2

Gruß

Thomas

Hallo
Ich hab mal die Sete aufgesucht, aber irgendwas seh ich aber anders.
Erstmal, es werden anscheinend einige 's verwendet, aber sie liegen ungünstig übereinander. Bilder verdecken Schrift usw…
etwas viel Schrift könnte man auch sagen.
Einen „Suchen“ Button, der etwas verdeckt oder verdeckt wird, finde ich nicht…
Stattdessen sind Felder für Eingaben und für das Absenden zu klein(diese email-Registrierung).
Das Eingabefeld hat auch den falschen Typ, setzt sich nicht ab und solche Kleinigkeiten weiter.
Mal was anderes: Du kannst nur schlecht jemandem zumuten, Deine Seite zu debuggen.
Vorschlag, frag einfach mal, wie was geht.
Hast Du überhaupt geeignete Referenzen?
MfG
Matthias

#3

Hallo Matthias,

Ich hab mal die Sete aufgesucht, aber irgendwas seh ich aber
anders.
Erstmal, es werden anscheinend einige 's verwendet,
aber sie liegen ungünstig übereinander. Bilder verdecken
Schrift usw…

Hier will ich Dir ja nicht widersprechen. Wie gesagt, ich habe weder die Seite an sich erstellt noch die Formatierung dazu erstellt und erarbeitet. Beides habe ich so übernommen und soll dieses überarbeiten.

etwas viel Schrift könnte man auch sagen.

Wie meinst Du denn das? Pro Element? Insgesamt auf der Seite, oder wie?

Einen „Suchen“ Button, der etwas verdeckt oder verdeckt wird,
finde ich nicht…

Das habe ich doch gesagt, daß man den „Suchen“-Button nicht sieht. Dieser wird vom oberen Banner verdeckt. Er befindet sich unterhalb des Rahmens (Eingabefeld) ganz in der oberen Zeile. Wenn man den restlichen Code unterhalb der oberen Zeile löscht, dann sieht man ihn. Dieser sollte aber normalerweise rechts neben dem Feld erscheinen und nicht drunter.

Stattdessen sind Felder für Eingaben und für das Absenden zu
klein(diese email-Registrierung).

Soweit, mir das anzuschauen bin ich noch gar nicht gekommen, weil es ja im Groben momentan schon nicht hinhaut und Bereiche eine Größe haben, die sie eigentlich gar nicht haben dürften. Wie gesagt, das alles sollte eigentlich genau so breit sein, wie die Bildschirmseite.

Das Eingabefeld hat auch den falschen Typ, setzt sich nicht ab
und solche Kleinigkeiten weiter.

Wieso hat es den falschen Typ? Dieses Feld habe ich noch nicht genauer angeschaut, aber welcher Typ sollte es denn Deiner Meinung nach richtigerweise sein?

Mal was anderes: Du kannst nur schlecht jemandem zumuten,
Deine Seite zu debuggen.

Ich will hier auch niemandem etwas zumuten, nur manchmal übersieht man beim Debuggen einer Seite etwas, was ein anderer sofort sieht und ich hatte gehofft, daß ich vom einen oder anderen Leser eine Tip bekommen könnte.

Vorschlag, frag einfach mal, wie was geht.

Ich habe ja nichts neues geschaffen, bei dem ich irgendwo nicht weiß, wie das eine oder andere funktioniert, sondern ich versuche ja selber diese vorhandene Seite zu debuggen. Allerdings gebe ich offen zu, daß ich ein Stück weit den Überblick über die Zusammenhänge und das Zusammenspiel der ganzen Formatierungen verloren habe.

Hast Du überhaupt geeignete Referenzen?

Wie meinst Du denn das?

Gruß

Thomas

#4

Hallo

etwas viel Schrift könnte man auch sagen.

Wie meinst Du denn das? Pro Element? Insgesamt auf der Seite,
oder wie?

Nee, insgesamt auf der Seite. Ich fand beim ersten Draufschauen, das zuviel Text eher abstoßend wirkt. So eine Art Kaffeeklatsch alleine. Meine Meinung.

Einen „Suchen“ Button, der etwas verdeckt oder verdeckt wird,
finde ich nicht…

Das habe ich doch gesagt, daß man den „Suchen“-Button nicht
sieht. Dieser wird vom oberen Banner verdeckt. Er befindet
sich unterhalb des Rahmens (Eingabefeld) ganz in der oberen
Zeile. Wenn man den restlichen Code unterhalb der oberen Zeile
löscht, dann sieht man ihn. Dieser sollte aber normalerweise
rechts neben dem Feld erscheinen und nicht drunter.

Ist wohl egal. Finde ich alles nicht. Aber ich fand oben einen Link „Suchen“. Können wir das vergessen?

Stattdessen sind Felder für Eingaben und für das Absenden zu
klein(diese email-Registrierung).

Soweit, mir das anzuschauen bin ich noch gar nicht gekommen,
weil es ja im Groben momentan schon nicht hinhaut und Bereiche
eine Größe haben, die sie eigentlich gar nicht haben dürften.
Wie gesagt, das alles sollte eigentlich genau so breit sein,
wie die Bildschirmseite.

Das Eingabefeld hat auch den falschen Typ, setzt sich nicht ab
und solche Kleinigkeiten weiter.

Wieso hat es den falschen Typ? Dieses Feld habe ich noch nicht
genauer angeschaut, aber welcher Typ sollte es denn Deiner
Meinung nach richtigerweise sein?

Na ich meinte, da müßte ein Textfeld sein,mit Rahmen, welches sich auch farblich absetzt, schwarze Schrift auf weißen Grund. Ich sah nur eine textzone, nicht als Eingabefeld erkennbar. Allerdings konnte man dort was eingeben.

sofort sieht und ich hatte gehofft, daß ich vom einen oder
anderen Leser eine Tip bekommen könnte.

Ist schon klar. Aber irgendwie meine ich, debuggen ist nur was für „gehärtete Typen“, weil sonst mache ich Deine Fehler nachher auch noch oder so.
Aber debuggen kennst Du sicher. Teil doch die Seite mal auf, nimm zuerst nur das hinein, was falsch dargestellt wird, dann kannst Du reparieren, ohne die Übersicht zu verlieren.

Hast Du überhaupt geeignete Referenzen?

Wie meinst Du denn das?

Damit ist eine Referenz für html und css gemeint. In anderen Worten, wenn Du auf der Seite was machen möchtest, kannst Du dann nachschauen, wie was geht?
Ich hab auch noch außer dem IE noch Firefox, Opera, Netscape als Browser zum Testen installiert.

Mein Tip zum Thema, wie was geht:
Es gibt Elemente, die nehmen so eine Art Wildcards als Größenangabe an(% oder *). Das geht mit Framesets sehr gut, mit Iframes schon etwas schlechter. Soll es ohne Frames sein, kann man eine Tabelle nehmen. Die passt sich dann automatisch der Fensterbreite an und stellt in ihren Feldern immer alles dar.
Div’s kann man notfalls auch absolut positionieren.
Ansonsten weiß ich auch nicht mehr.
Viel Spaß noch.
MfG
Matthias

1 Like
#5

hy,

also meiner meinung nach solltest du als erstes mal die css-file überarbeiten! das erste was man sehen tut, ist dass viele sachen wie headlines, links, etc. zusammengefasst sind. allerdings ist dann nahezu jeder eintrag nochmal extra aufgelistet um „zusatzeigenschaften“ zu definieren. ich persönlich finde so etwas sehr unübersichtlich.
zum problem überlappen: für 's gibt es noch die möglichkeit einen „z-index: wert“ zu definieren. je größer der wert, desto weiter vorn wird der auf dem bildschirm dargestellt. oder du änderst einfach die reihenfolge in der html-file von den einzelnen 's. eine html-file wird von oben nach unten gelesen. das heißt auch, dass das was zu erst in der file steht als erstes „gezeichnet“ wird und alles nachfolgende darüber liegt.

#6

Hy,

also meiner meinung nach solltest du als erstes mal die
css-file überarbeiten! das erste was man sehen tut, ist dass
viele sachen wie headlines, links, etc. zusammengefasst sind.
allerdings ist dann nahezu jeder eintrag nochmal extra
aufgelistet um „zusatzeigenschaften“ zu definieren. ich
persönlich finde so etwas sehr unübersichtlich.

Das geht nicht nur Dir so. :smile: Nur muß ich mich da erst mal nach und nach in diese Datei einlesen und schauen, was man übersichtlicher machen kann. Ich überlege schon die ganze Zeit, ob diese Datei irgendwer per Hand kreirt hat, oder ob die die Folge irgendeines Programmes ist. Wenn sie einer per Hand erzeugt hat, muß ich den bewundern es geschafft zu haben, ohne dabei den Überblick zu verlieren.

zum problem überlappen: für 's gibt es noch die
möglichkeit einen „z-index: wert“ zu definieren. je größer der
wert, desto weiter vorn wird der auf dem
bildschirm dargestellt. oder du änderst einfach die
reihenfolge in der html-file von den einzelnen 's.
eine html-file wird von oben nach unten gelesen. das heißt
auch, dass das was zu erst in der file steht als erstes
„gezeichnet“ wird und alles nachfolgende darüber liegt.

Ja, an sowas habe ich auch schon gedacht. Allerdings, wenn ich z.B. den besagten Button zum Suchen nehme, dann ist ja das ursprüngliche Problem nicht, daß dieser verdeckt wird, sondern, daß dieser falsch positioniert wird. Eigentlich sollte dieser nicht unter dem Eingabefeld in der obersten Zeile liegen, sondern rechts daneben. Ich kann hier nirgends irgendwelche Angaben erkennen, warum dieser drunter angeordnet wird. Das Verdecken durch den nächsten DIV ist also nur eine Folge aus der falschen Position des Elements.

Mein Problem liegt aber mal vorerst ganz woanderes. Die Seite besteht im groben zerpflückt aus 3 Blöcken. Interessanterweise ist aber der mittlere Block breiter als er sein soll. Alle 3 Blöcke sollten eigentlich genau Bildschirmbreite haben. Der mittlere Block ist aber aus mir unerklärbaren Gründen breiter. Entweder übersehe ich in dem Stylesheet-Dschungel irgendwelche Maßangaben, die das bewirken, oder aber ich habe irgendwo noch einen anderen Denkfehler drin.

Gruß

Thomas

#7

Hallo,

jetzt wird das ganze immer komischer. Zufällig habe ich mir die Seite mal mit Mozilla angeschaut und siehe da, alles ist eigentlich so, wie es sein sollte. Gut, an ein paar Stellen überdeckt der rechte Block den mittleren Hauptteil, das muß ich mir nochmal genauer anschauen. Aber so im Großeindruck schaut es so aus, wie es ausschauen sollte. Somit scheint der Seitenaufbau eigentlich ja richtig zu sein, nur der Internetexplorer macht wieder mal irgendwas nicht so, wie er sollte. Vielleicht findet das ja wer raus oder kann mir zumindest einen Tip geben, wo ich am besten zu suchen anfangen soll.
Wie man recht schön sehen kann, ist hier sogar der „suchen“-Button da, wo er sein sollte.
Nebenbei bemerkt hat mir ein Bekannter vorhin mitgeteilt, daß bei Opera wohl auch alles seinen richtigen Platz hat.

Jetzt wenn mir noch wer einen Tip geben könnte, warum der Internetexplorer hier solchen „Mist“ macht, obwohl ichso auf Anhieb nirgends einen Fehler in den Formatierungen finden kann, wäre das Projekt so ziemlich gerettet.

Gruß

Thomas

#8

hy,

hab mir mal die css-file etwas genauer angesehen.
ich würde mal meinen, dass der fehler hier stecken könnte:

#essential .centerContainer
{
position: relative;
left: -2px;
padding-left: 2px;
margin-right: 0px !important;
margin-right: -2px;
/* width: 77.6% !important; */
width: auto !important;
width: 100%;
background: #fff;
}

und da genau die angaben über die breite. für die browser die css2 richtig unterstützen zählt der wert width: auto !important für den ie zählt der nächste wert. hier sind aber 100% angegeben und nicht auto
änder das mal um. bin mir nicht sicher ob es das ist, aber ein versuch ist es wert.

gruß
BenDigger

#9

noch ne kleine anmerkung. ich selber verwende zum erstellen bzw. bearbeiten von websites vorrangig firefox mit der extension web developer.
ist ganz hilfreich weil man so schnell alle nötigen informationen abrufen und sichten kann :wink:

1 Like
#10

Hallo BenDigger

hab mir mal die css-file etwas genauer angesehen.

die hatte ich mir auch mehrfach genauer angesehen

ich würde mal meinen, dass der fehler hier stecken könnte:

#essential .centerContainer
{
position: relative;
left: -2px;
padding-left: 2px;
margin-right: 0px !important;
margin-right: -2px;
/* width: 77.6% !important; */
width: auto !important;
width: 100%;
background: #fff;
}

und da genau die angaben über die breite. für die browser die
css2 richtig unterstützen zählt der wert width: auto
!important für den ie zählt der nächste wert. hier sind
aber 100% angegeben und nicht auto
änder das mal um. bin mir nicht sicher ob es das ist, aber ein
versuch ist es wert.

Da hast Du Recht, ein Versuch ist es Wert. :smile:
Nur es hat hier nichts gebracht. Aber die Idee war schon mal der heiße Tip. Das gleiche Spiel haben wir nämlich nochmal bei:
.centerContainerHome
und hier hat es was gebracht. Warum habe ich das nur immer übersehen? :frowning:
Danke für den sehr guten Tip übrigens. Ein Fehler wäre somit mal behoben.

Gruß

Thomas

#11

Hallo BenDigger

noch ne kleine anmerkung. ich selber verwende zum erstellen
bzw. bearbeiten von websites vorrangig firefox mit der
extension web developer.
ist ganz hilfreich weil man so schnell alle nötigen
informationen abrufen und sichten kann :wink:

Interessante Info. Wo bekomme ich das Ding her und wie funktioniert das?

Gruß

Thomas

#12

also…
firefox bekommst du hier: http://www.mozilla.com/ :wink:
und die erweiterung bekommst du hier: https://addons.mozilla.org/firefox/60/

1 Like
#13

und was hast du jetzt noch für probleme? sollte doch gelacht sein, wenn wir das zusammen net hinbekommen *lol*

#14

Hallo,

und was hast du jetzt noch für probleme? sollte doch gelacht
sein, wenn wir das zusammen net hinbekommen *lol*

ich weiß z.B. immer noch nicht, warum bei Internetexplorer dieser „suchen“-Button unter das zugehörige Eingabefeld gesetzt wird, wärend er im Mozilla so wie es sich gehört, daneben erscheint.

Es freut mich im Übrigen, wenn Du mich ein wenig unterstützt. Ich bin zur Zeit mit diesen Projekten and meinem Beruf im Schnitt ca. 20 Stunden pro Tag auf den Beinen, da scheitert man dann oft an den einfachsten Dingen, weil man sie einfach nur noch übersieht.

Gruß

Thomas

#15

also…der fehler liegt mal wieder in der css-file *lol*. und zwar genau hier:

input.searchButtonTop,
…
padding: 2px 0px 2px 10px !important;
padding: 0px 0px 2px 24px;
…

hier liegt der fehler bei dem letzten wert in der zweiten zeile. dieser gibt den abstand nach links an. wenn du den auf 10px änderst sollte das auch soweit stimmen - hoffe ich jedenfalls

1 Like
#16

Hallo,

also…der fehler liegt mal wieder in der css-file *lol*.
und zwar genau hier:

input.searchButtonTop,
…
padding: 2px 0px 2px 10px !important;
padding: 0px 0px 2px 24px;
…

hier liegt der fehler bei dem letzten wert in der zweiten
zeile. dieser gibt den abstand nach links an. wenn du den auf
10px änderst sollte das auch soweit stimmen - hoffe ich
jedenfalls

Jetzt schäme ich mich langsam, daß ich das nicht sehe. :frowning: Ich teste das heute Abend gleich mal, wenn ich heim komme, vermute aber stark, daß Du Recht hast.

Jetzt ist ein neues Problem aufgetreten. Ich habe im Internet (siehe Arikel http://www.wer-weiss-was.de/cgi-bin/www/service.fpl?.. ) eine Lösung gefunden, wie man eine Mindestbreite konstruieren kann, die auch der IE versteht. Diese Lösung habe ich eingebaut und siehe, beim IE funktioniert es jetzt super.
Nur der Mozilla macht jetzt was ganz komisches. Der interpretiert das jetzt als feste Breite. Allerdings verstehe ich nicht warum. Irgendwo habe ich da anscheinend noch einen Denkfehler drin. Ausserdem macht der Opera jetzt nur noch „Schrott“. :frowning:
Vielleicht kann mir da ja auch wer einen Tip geben.

Gruß

Thomas

#17

Hm, das wäre eine gute Idee gewesen, hat aber keine Veränderung mit sich gebracht. :frowning:

Leider nein.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#18

mmmmmmmmmhhhhhhhhhhhhhhh

dann weiß ich es jetzt auf die schnelle auch net. über’s we musst du allein weiter machen. hab die nächsten tage leider keine zeit mir das weiter anzuschauen. also dann erst mal viel spass … und glück *g*

#19

Schade. :frowning: Ich hatte mich schon so an Deine Hilfe gewöhnt. Ein bischen Unterstützung tut schon gut bei solchen Projekten, die unter Zeitdruck stehen.
Ich hoffe mal, daß ich später wieder mit Deiner Unterstützung rechnen kann.

Gruß

Thomas