• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Websitecheck Layout ....

Status
Für weitere Antworten geschlossen.
V

VistaMax

Neues Mitglied
Hallo,

wollte euch auch mal meine erste selbst erstellte Website vorstellen.
Muss dazu sagen, beschäftige mich erst seit Anfang Januar mit dem
Thema und hatte vor nie was damit am Hut und finde jetzt immer gefallen
daran. Die Seite ist wohl alles andere als perfekt, aber ich hoffe ihr könnt mir noch paar gute tipps geben. ich habe z.B. ein Problem mit der Seite u. IE5

Das ist Lüneburg
 
also für die erste seite sieht die top aus!
ich wäre stolz gewesen wenn meine erste hp nur annähernd so ausgesehen hätte!
die farben sind nicht ganz mein fall, aber sonst siehts eigentlich ganz ok aus.
en Tipp: versuche deine seite valid zu halten The W3C Markup Validation Service
Gruß KY
 
also für die erste seite sieht die top aus!
ich wäre stolz gewesen wenn meine erste hp nur annähernd so ausgesehen hätte!
die farben sind nicht ganz mein fall, aber sonst siehts eigentlich ganz ok aus.
en Tipp: versuche deine seite valid zu halten The W3C Markup Validation Service
Gruß KY
Zum Vergrößern anklicken....

Hey vielen DANK dafür !!! :smile:
Macht auch irgendwie voll Spaß....

Ok danke für den Tipp, werde das gleich mal testen!
 
Ich kann die Seite jetzt nicht nicht so streng bewerten, weil du Anfänger bist, also: Nicht so ernst nehmen:wink:

POSTITIV:
  • Viele anschauliche Bilder
  • Sieht sowohl im Internetexplorer, Mozilla Firefox und Opera gleich aus
  • Übersichtlich und strukturiert aufgebaut

NEGATIV:
  • Der Validator will das Dokument nicht überprüfen, weil keine Zeichenkotierung angegeben wurde
  • Navigation: Links anderen Farben geben (z.b. wird der link lila wenn man ihn besucht hat
  • Mit dem Opera kann ich auf der Seite unter dem Text nochmal 1 meter weiter hinunterscrollen, im firefox und internetexplorer OK
  • Verwendet Tabellen zur Gestaltung

Fazit:
Eine gut aufgebaute und übersichtliche Website. Für einen Anfänger sehr gut ausgearbeitet.

Note(Nach Schulnotensystem):
3+

Mach weiter Webdesign, du lernst schnell, wie man sieht. Und dann wird aus einer 3+ eine 1 :wink:
 
Ie5

VistaMax schrieb:
Hallo,
ich habe z.B. ein Problem mit der Seite u. IE5
Zum Vergrößern anklicken....
Ja der ist störrisch.
Ich würde ihm eine weitere css geben in der alle position und float werte aufgehoben werden:
HTML: 
* {
position : static;
float : none;
}
Dann mal sehen wie es aussieht.
Wenn das schon mal funktioniert hat und alles hübsch untereinander steht,
kannst du alles neu ausrichten.
Die css-Datei für Internet Explorer unter vers. 6 kannst du so einbinden:
HTML: 
  <!--[if lt IE 6]>
  <style type="text/css">@import url(extrawurst-ie5.css);</style>
  <![endif]-->
Die Datei muß nach allen anderen css-Anweisungen Eingebunden werden,
weil sie sonst sofort wieder überschrieben wird.
 
@neuroleptika

Vielen Dank, werde ich heute sofort ausprobieren!


@Html-Profi

Danke auch dir für das Feedback.

nur was meinst du mit:

Der Validator will das Dokument nicht überprüfen, weil keine Zeichenkotierung angegeben wurde
Zum Vergrößern anklicken....

Was muss ich da tun? Wo gebe ich die Zeichenkotierung an?

Gruss VM
 
einfach einen meta tag angeben:
Code: 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Das gehört zwischen:

Code: 
<head>
.
.
.
</head>
 
VistaMax schrieb:
Was muss ich da tun? Wo gebe ich die Zeichenkotierung an?
Zum Vergrößern anklicken....
Dein meta-tag zu content-type hat 'nen Fehler.

So sollte es gehen:
Code: 
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />


N43


P.S: Ihr meint wohl Kodierung, beim anderen würde man voll in die Sch... greifen ;)
 
Ups, da ist was schief gelaufen:
HTML: 
<meta http-equiv="content-type" content="text" charset="iso-8859-1&quot;">
so ist's richtig:
HTML: 
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

Meine Tips:
  • CSS-Daten in externe Datei ausbinden
  • in tourist.html sind riesige Abstände zwischen den einzelnen Texten. Wieso? Hervorgerufen wird das ganze durch z.B.
  • HTML: 
    <td height="1000" width="800" valign="top">
  • die aktiven Links bei dir in der Navi sind nicht anklickbar. Soweit, sogut. Jedoch würde ich ihnen weiterhin text-decoration:underline zuweisen, damit es ersichtlich ist, dass es eigentlich doch Links sind. In der Navigation würde ich unter Umständen sogar besuchten und nicht besuchten Links die gleiche Farbe geben. Wenn du dies so machst, dann gebe auch den aktiven Links diese Farbe und mache sie stattdessen fett um sie abzugrenzen. (persönliche Meinung)
  • die große Grafik in der index stört. Hier eventuell breite und dafür weniger hohe Grafik einbinden. Von mir aus, reicht aber auch die Grafik im Header.
  • es werden an den unnötigsten Stellen Tabellen verwendet. Ich stelle dir einmal einen Ausschnitt der info.html vor und zeige wie sie verbessert werden kann:
Code: 
<h2><a name="kontakt1"></a>Bürgeramt</h2>
<p class="back2index"><a href="#menue">Zurück zur Übersicht</a></p> <p><b>Bürgeramt Lüneburg</b><br>
Bardowicker Straße<br>
2321335 Lüneburg</p>

<p>Telefon:   	04131 309-0<br>
Fax:   	04131 309-630<br>
E-Mail:   	<a href="mailto:[email protected]">[email protected]</a><br>
<a href="http://www.lueneburg.de/?baum_id=24&amp;inhalt_id=12126" target="_blank">Info Bürgeramt Lüneburg</a></p>
In die CSS-Datei kommt dann noch:
Code: 
h2 {
 font-weight:bold;
};
.back2topic {
 float:right;
}
wenn du "font-family:arial,verdana,sans" in der CSS in den body {} schreibst, dann sparst du dir die ganzen "font-family"s in den anderen Klassen.

In der gleichen Datei habe ich
Code: 
<p><a name="menue" </a></p>
Es müsste aber heißen
Code: 
<a name="menue"></a>
die p-tags kannst du weglassen und das ganze vor folgende Zeile stellen:
Code: 
<table cellpadding="4" border="2" cellspacing="0" width="800" bgcolor="#33FF66">
Das brauchst du weder in die Tablle reinschreiben, noch eigene Tabellenzellen etc dafür schreiben.

Ich hoffe ich konnte dir ein wenig helfen. Wenn du noch mehr Hilfe brauchst, so stehen wir dir jederzeit zu Verfügung ;-) . Aber bitte nicht nachts anrufen :D.

Korny
 
Positition Fixed

Das Hauptproblem sind nicht die Browser, sondern die Auflösung bzw. der zur Verfügung stehende Platz.

Internet Explorer 6 (sp1):
http://css-spalten.red-rod.net/test/IE6sp1.png
Internet Explorer 5.5:
http://css-spalten.red-rod.net/test/IE5.5.png
(Auflösung: 1024*768)

IE5 lohnt sich nicht zu zeigen.

Das Problem wird sein, daß der Abstand von position: absolute bzw. fixed vom oberen Bildschirmrand bemessen wird und das scrollen für den Bereich praktisch abgeschaltet ist.
Ich weiß noch, daß ich dir mal Tips zu position: fixed gegeben habe. Aber ich weiß leider nicht mehr welche.
Ich bin jetzt müde und habe auch morgen keine Zeit.
Du könntest den Abstand nach oben (top) verringern. oder die Navigation von unten (bottom) ausrichten.
 
neuer Rohentwurf

Ich habe jetzt mal versucht das ganze etwas dynamischer zu gestalten,
um nicht das Problem mit der Auflösung zu haben.

Habe hier mal ein Roh-Entwurf:

Dreispaltiges Layout mit Kopf- und Fußzeile

Mein Problem, wie kann ich die rechte Infoleiste auf Höhe der linken Navigationsleiste fixieren????
Ich bekomm das mit dem code nicht hin...!
Wer kann mir helfen?

Viele Grüße
 
margin-top

Müßte so gehen:
Code: 
  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
    margin: 180px 0 0 1.1em; /*180px anpassen*/
    padding: 0;
    background-color: #eee;
   border: 1px dashed silver;
  }

Ich finde das Gelb eigentlich nicht schlecht. Dafür mag ich den grünen Rahmen um das Titelbild nicht so gerne.
 
Zuletzt bearbeitet:
Ich habe div#Info geschrieben. es muß div#info heißen.
Soll das eigentlich mit scrollen oder stehen bleiben?
 
Zuletzt bearbeitet:
Ja super, jetzt ist es auf der Höhe. Super!!!!

Stimmt jetzt scrollt es mit...
Ja die Box sollte fixiert sein, also nicht mitscrollen.

Hast du da auch noch eine Lösung?? Weil ich hatte schon mal
versucht den FIXIERT-Code von der Navi-Leiste rechts dort zu übertragen, hat aber nicht funktioniert.

Gruss
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben