Homepage Darstellung sehr unterschiedlich

Asoturk · 4. Mai 2013

Hallo

hier erstmal der Problemfall

http://schuetzenverein-ettenheim.de

worum gehts?

Diese Seite funktioniert super unter Chrome. Alles wird richtig angezeigt. Ränder sind bündig. Bilder wo sie sein sollen etc.

Unter Firefox oder IE sieht das alles schon ein wenig katastrophal aus. Schriftart. Floats sind wo sie grad Lust haben etc.
einfach mal anschauen. man sieht sofort den Unterschied.

Gibts die ultimative Schriftart?
wieso sind die Kästchen unterschiedlich groß/lang/breit/hoch???
kann man da irgend was machen, dass meine Kenntnisse nicht übersteigt?

habe ein CSS StyleSheet wo eigentlich alles definiert ist.

Danke!

Howcountry · 4. Mai 2013

Komisch sieht bei mir im Chromium, Opera und FF absolut identisch aus. Hast Du vl. screenies wo das Problem zu erkennen ist?
Das einzige was auffällt ist ,dass Impressum ist in einen neue Zeile gerutscht bei allen dreien.

rawlf · 4. Mai 2013

Falls du dir nicht sicher bist, ob deine Seite auf verschiedenen Systemen richtig dargestellt wird, probiere es mal hiermit:
http://browsershots.org

Für gleichmäßige Darstellung kann ich dir Normalize empfehlen:
http://necolas.github.io/normalize.css/

Das kannst du entweder direkt im HTML-Code oder im vorhandenen CSS-File einbinden, siehe hier:
http://www.cssnewbie.com/css-import-rule/

Seby007 · 4. Mai 2013

sieht bei mir im FF und Chrome auch gleich aus... Alle Browser auf neuestem Stand??

Lawnmower · 4. Mai 2013

Zoom bei allen Browsern auf 100% (Rücksetzen mit Ctrl+0)? Mit dem Mausrad ist da schnell mal was unabsichtlich verstellt...

Gentlem4n · 4. Mai 2013

Magst du vllt Screenshots erstellen? Damit ließe sich dir bestimmt besser helfen.

Asoturk · 4. Mai 2013

Schrift ist leicht gestreckt bei beiden. aber das macht nichts.
geht um die Anordnung der Bilder.
links Chrome. Rechts FF

kleine Bemerkung:
Virtual Machine - Ubuntu - Firefox
da siehts bis auf den Impressum Button auch normal aus

bin für heute Off. hoffe ich bekomme ein paar Hilfen. Danke aufjedenfall schonmal!!!

Daaron · 4. Mai 2013

1: Deine Navigation hat keine sinnvoll definierte Breite. Je nachdem, wie im jeweiligen Zielsystem die Schrift dargestellt wird, erscheinen die Links länger oder schmaler. Bei mir (Ubuntu 12.10, Chromium Daily) rutscht das Impressum z.B. runter. Die ganze Navi musst du anders lösen, eleganter, flexibler.
2: Deine Dokumente haben ein Byte Order Mark (BOM). Das führt garantiert zu Problemen. Besorg dir einen anständigen Editor.
3: Innerhalb des <body> sind keine Stylesheets erlaubt.
4: <script> benötigt IMMER einen type
5: Deine Ausrichtung ist Scheiße, weil du keine Breite vorgegeben hast, sondern einfach auf Gott oder sonstwas vertraust, dass es wohl stimmen wird. Tut es aber sehr selten. Wofür gibts wohl prozentuale Längenangaben in CSS?
6: Da fehlt definitiv ein Clearfix, z.B.: .pre-spoiler {clear: both;}

Zu einem anständigen, modernen Look fehlt eh noch eine ganze Menge, dazu sag ich mal nix weiter.

Asoturk · 5. Mai 2013

ich hab sowas noch nie vorher gemacht

deswegen wären ein paar sinnvolle Hilfen gut.

1. Wie?
2. Welchen?
3. ok.
4. ok. die Scripts sind nicht von mir. Google Analytics zB ist nicht mein Eigen. was soll ich da ändern?
5. Ich hab eine breite vorgegeben? in Pixel und margin ist auf auto, damits in der Mitte steht. oder nicht?
6. ok. Danke!

Diese HP ist für mich zum ,,spielen" und hauptsächlich lernen. Ein toller Look kommt später

Daaron · 5. Mai 2013

Asoturk schrieb:
1. Wie?

Viele Wege führen nach Rom... nur deiner ist eine Sackgasse.
Gib dem Elternelement des <ul> 100% Breite und dem <ul> n "margin: 0 auto;" um es zu zentrieren. Die Hintergrundfarbe der Nav landet dann nicht in den <li>'s, sondern im Elternelement des <ul>.

2. Welchen?

Notepad++, Geany, Gedit,....

4. ok. die Scripts sind nicht von mir. Google Analytics zB ist nicht mein Eigen. was soll ich da ändern?

Die Art und Weise, wie du den Script-Tag in dein HTML-Gerüst einbindest. Es heißt nicht "<script>" sondern "<script type="...">"

5. Ich hab eine breite vorgegeben? in Pixel und margin ist auf auto, damits in der Mitte steht. oder nicht?

Nein, hast du nicht. Die 3 <div>'s, bei denen du float: left; als Inline-Style mitgegeben hast, haben keine definierte Breite. Hätten sie eine (z.B. 33.3%), dann hättest du ja auch kein Problem.

Diese HP ist für mich zum ,,spielen" und hauptsächlich lernen. Ein toller Look kommt später

Man spielt nicht an Live-Auftritten herum. Damit erreicht man nur eines: man versaut sich den Ruf.

Asoturk · 5. Mai 2013

Das war nun eine richtige Hilfe

Danke Daaron!
Werde es mal versuchen.

eine Frage hätte ich noch.
Kann man Vorlagen in HTMl irgend wie einbinden? zB eine Vorlage für die Navigation, damit ich die nicht ständig auf jeder Seite ,,neu" bearbeiten muss.

zu 1) so?


<div>

<ul id="nav" class="dropdown dropdown-horizontal" style="width:100%">
<li class="dir">Schnellzugriff
<ul style="margin: 0 auto">
<li><a href="schuetzenhaus/default.html">Öffnungszeiten</a></li>

weil da passiert nichts.
oder in dem CSS sheet?

Daaron · 5. Mai 2013

Wenn du wiederkehrende Elemente (Kopf, Fuß, Navi,...) in mehreren Seiten verwenden willst, dann geht das nur über serverseitige Scriptsprachen wie PHP oder Server Side Includes.

In dem Punkt muss man sich früh überlegen: Ist meine Seite sehr klein? Muss ich, nachdem sie fertig ist, nicht mehr viel daran machen? Dann reicht statisches HTML. In allen anderen Fällen sollte man halt auf serverseitige Generierung mit PHP, Perl, Python, Ruby, Node.JS, ASP.NET,... setzen.

Asoturk · 5. Mai 2013

mhm ok. dann hab ich in den nächsten Ferien wenigstens was zu tun

danke

der Code den ich drüber gepostet hab. ist das richtig?

Daaron · 5. Mai 2013

Nö...
1.) warum arbeitest du so oft mit Inline-Styles? Das ist extrem dämlich. Was ist, wenn du dieselbe Änderung jetzt an 5 Seiten vornehmen musst?
2.) <div style="width:100%;"><ul style="margin:0 auto;">... <- so herum sollte es sich anständig positionieren... nur eben dann ohne Inline-Styles sondern anständigen Klassen und IDs.

Asoturk · 5. Mai 2013

ok danke.
wie gesagt hab ich noch NIE irgend etwas in der Art gemacht. ich weiß demnach nicht wie man es ,,richtig" macht und freu mich über jede Hilfe.

ich hab so Klassen zB
.auto-style2 {
text-align: center;
height:20px;
}

kann ich die denn auch für andere Seiten importieren? das wäre natürlich ultra gut

Daaron · 5. Mai 2013

Du kannst problemlos über verschiedene Domains hinweg auf einheitliche Stylesheets zugreifen, so funktioniert das ja z.B. mit Google Fonts. Wenn du also einmalig ein Framework für all deine Projekte geschrieben hast, dann kannst du selbiges zentral lagern und überall einbinden.
Ist aber nicht effektiv. Effektiver ist, pro Domain möglichst wenige separate Dateien auszuliefern. Eine Datei mit 15KByte lädt tatsächlich trotzdem schneller als 2 mit je 7KB.

Und um nochmal darauf hinzuweisen: Auch wenn bei <script> ein leeres type-Attribut möglich ist, wäre es korrekt, da auch den korrekten Type reinzuschreiben. Alles andere kann zu unerwarteten Ergebnissen führen.

Asoturk · 5. Mai 2013

ok, danke!
aber komisch dass das Google Script kein Type hat. hab das ja direkt von Google

dann schreib ich da mal text/javascript rein

das heißt, ich kann in mein CSS Sheet alle Klassen reinschreiben (Schriftgrößen etc) und diese dann von jeder Seite nutzen?
das wollte ich eh schon alles mal vereinheitlichen

du meintest oben mal dass die HP nicht modern aussieht, ist ja auch richtig, hättest du mir ein Beispiel oder besser eine Vorlage für etwas professionelleres? ich hab ,,damals" einfach mal drauf los gemacht und das erstbeste genommen

Daaron · 5. Mai 2013

Asoturk schrieb:
das heißt, ich kann in mein CSS Sheet alle Klassen reinschreiben (Schriftgrößen etc) und diese dann von jeder Seite nutzen?
das wollte ich eh schon alles mal vereinheitlichen

Es geht, aber es macht oftmals eben keinen Sinn. Es gibt sehr wenig, dass man sinnvoll über verschiedene Projekte hinweg verwenden kann. Für diese Sachen zusätzliche DNS-Auflösungen und Requests zu starten ist Zeitverschwendung bei deinen Klienten.

du meintest oben mal dass die HP nicht modern aussieht, ist ja auch richtig, hättest du mir ein Beispiel oder besser eine Vorlage für etwas professionelleres? ich hab ,,damals" einfach mal drauf los gemacht und das erstbeste genommen

Nö, aber bei Themeforrest kannst du deinen Kaufrausch ausleben und gute fertige Templates für ~20$ abgreifen.

Was deiner Seite definitiv fehlt: Schatten, abgerundete Elemente, Transparenzen, Verläufe, flüssige Animationen,... und dann wäre ja noch das leidige Smartphone-Problem. Was macht deine Seite bei niedrigen Auflösungen/kleinen Bildschirmen?

Asoturk · 6. Mai 2013

ok, verschiedene Projekte hab ich keine. Ich mach die Seite ja nur fürn Verein und in meiner freien Zeit.

normalerweise sollte die Seite immer gleich groß sein. falls in den Monitor nicht passt muss gescrollt werden. auf meinen beiden Bildschirmen passt das allerdings perfekt. 22" und 19"
auf dem Galaxy S2 passt die Seite perfekt rein. hat sogar noch einen Rand rechts.
aber ich glaube es ist gar nicht so einfach eine Erkennung für Mobilgeräte einzubauen? bzw müsste ich ja dann nochmal eine neue HP für Mobile machen oder?

Gentlem4n · 16. Mai 2013

Nein, du brauchst keine extra Website erstellen. Das kannst du über das CSS steuern:
Ein Anfang zum einlesen:
http://www.com-magazin.de/praxis/webdesign/webseiten-fuer-mobilgeraete-erstellen-7555.html

Homepage Darstellung sehr unterschiedlich

Ensign

Lt. Junior Grade

Newbie

Commander

Maître de cuisine Pro

Gentlem4n

Gast

Ensign

Fleet Admiral

Ensign

Fleet Admiral

Ensign

Fleet Admiral

Ensign

Fleet Admiral

Ensign

Fleet Admiral

Ensign

Fleet Admiral

Ensign

Gentlem4n

Gast

Ähnliche Themen