[Chfm]

Hi!
Bin ganz neu hier und auch relativ neu im CSS-Programmieren.
Was haltet ihr von der Seite?
Klick
Design soll so sein, es geht mehr um den Code.
Gruß
Christian

[Thielo]

Zum Code gibt es nicht viel zu sagen, da er ja kaum vorhanden ist...
Nur:
a) position absolute ist unnütz bei dem was du baust
b) es sollten net mehrere h1 auf einer Seite sein..
c) Du benutzt ein leeres div um Textinhalte darzustellen

Orientier dich beim Coden am Design. Wie du es am besten strukturieren kannst.

[behalx]

Die Links würde ich weiter nach oben positionieren und das padding der den <ul><li></li>...</ul> links erhöhen und vll. fett machen. Ansonsten gefällt mir das Design.

[Webcoder]

Zitat von Thielo

Zum Code gibt es nicht viel zu sagen, da er ja kaum vorhanden ist...

Dem stimme ich voll zu!
Trotzdem gibt es einen Fehler im CSS. Falls du dort Blocksatz haben willst nutze die Eigenschaft justify.

Zitat von Thielo

...
b) es sollten net mehrere h1 auf einer Seite sein
...

Auf der Startseite konnte ich gar kein h1-Element entdecken, was auch nicht wirklich gut ist. Du solltest dir mal die Funktion einzelner Elemente durchlesen, damit du weißt wozu man sie einsetzen soll. Denn dein Probetext ist mit keiner Überschrift ausgezeichnet, was es bei Absätzen eigentlich auch nicht geben sollte.


Auch komme ich nicht drum herum noch 2 weitere Anmerkungen los zu werden.
Die Öffnungszeiten widersprechen sich, Montags bis Freitags schließt Mittwoch mit ein!
Die Adresse ist als Hintergrundbild dargestellt, was sehr ungünstig ist, da sie im Textbrowser (Sreenreader) nicht zu sehen (lesen) ist. Gerade bei einer Apotheke sollte Barrierefreiheit groß geschrieben werden, im Hinblick auf die Kundschaft. Also am besten als Text in einem Footer umsetzen, oder zumindest als Grafik mit allen Daten im alt-Attribut.


Gruß
Webcoder

[Chfm]

Vielen Dank für die vielen Antworten.
Ich werde die Tipps beherzigen und euch die aktualisierte Version wieder vorstellen.
Gruß
Christian

[Chfm]

So, hab jetzt nochmal einiges geändert und das soll jetzt das Enddesign sein.
Klick
Ich häng mal die css-Codes hier an.

@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
html { /* erzwingt Scrollbar im Firefox */
  height: 101%;
}
body {
	font-family: "Arial Black", Gadget, sans-serif;
	background-color: #a3a0a9;
}
#logo {
	
	padding-top:94px;
}
	
#wrapper {
	background-image:url(../images/hintergrund.gif);
	position: relative;
	width: 1267px;
	height: 856px;
	background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
}
#banner {
	position: relative;
	width: 1267px;
	height: 180px;
	}
#navi {
	float:left;
	width: 740px;
	height: 540px;
}
#Text-Oeffnungszeiten {
	margin-left:742px;
	width: 382px;
	min-height: 328px;
	text-align: right;
	color: #7e6f8a;
}
#Text-Startseite {
	margin-left:742px;
	width: 382px;
	min-height: 328px;
	text-align:right;
	color: #7e6f8a;
	font-size: large;
}
#Text-Kontakt {
	margin-left:742px;
	width: 382px;
	min-height: 328px;
	text-align:right;
	color: #7e6f8a;
	font-size: small;
}
#Text-Service {
	margin-left:742px;
	width: 382px;
	min-height: 328px;
	text-align:left;
	color: #7e6f8a;
	font-size: large;
	line-height: 125%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}
#fussbereich {
	position: relative;
	clear: both;
	font-size: 10pt;
	text-transform: uppercase;
	padding-left: 875px;
	color: #7e6f8a;
	font-weight: normal;
}
#fussbereich p{
	font-size:small;
	text-transform:lowercase;
	color: #b5afc4
}
#Text-Oeffnungszeiten p1 {
	font-size: x-large;
	font-weight: bold;
}
#Text-Oeffnungszeiten p p2 {
	font-size: large;
}
form {
  background-color: #eee;
  width: 342px; /* Breite des Formulars */
  padding: 20px;
  border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
textarea {
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
  height: 7em;
}
input:focus,
textarea:focus {
	background-color: #d9d9d9;
}

@charset "UTF-8";

ul#Apotheke_menu {
	margin-top: 227px;
	width: 400px;
	margin-left: 332px;
}

ul#Apotheke_menu li
{
	list-style-type:none;
	font-size: 100%;
	text-align: left;
	cursor: pointer;
	height: 35px;
	position: relative;
	width: 195px;
	background-color: #fff;
	color: #7e6f8a;
	text-decoration: none;
	margin-bottom: 10px;
	line-height: 35px;
}
ul#Apotheke_menu li a {
	display: block;
	color: inherit;
	text-decoration: none;
	padding-left: 5px;
}

ul#Apotheke_menu span li
{
	background-color: #7e6f8a;
	color: #fff;

}
ul#Apotheke_menu li ul
{
	margin: 0px;
	padding: 0px;
	top: 0px;
	left: 195px;
	position: absolute;
}

/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul#Apotheke_menu li>ul
{
	display: none;
	top: 0em;
}

ul#Apotheke_menu li:hover 
{
	background-color:#7e6f8a;
	color:#FFF;
}
 
ul#Apotheke_menu li:hover>ul, ul#Apotheke_menu li>a ul
{
	display: block;
	top: 0em;
}

/* Workaround fuer den IE 7 */
*:first-child+html ul#Apotheke_menu ul
{
    background-color:silver; padding-bottom:0.4em;
}

ul#Apotheke_menu li ul li 
{
	width: 195px;
}

[efwe]

die grafische typowolke finde ich eher verwirrend und so aschgrau wie traurig...

[Webcoder]

Zitat von Chfm

So, hab jetzt nochmal einiges geändert und das soll jetzt das Enddesign sein.
...

Warum validierst du deine Seite nicht wenn du Änderungen vornimmst?

Du hast einen Schreibfehler im address-Tag. Solche Flüchtigkeitsfehler lassen sich durch Validation schnell entdecken.

Meiner Auffassung nach ist

Herzlich Willkommen in der ...

eine Überschrift und kein Absatz, also dafür lieber das h2-Tag nutzen.
Die rechtsbündige Schriftausrichtung ist schlecht lesbar und sollte wenn überhaupt nur für kurze Texte genutzt werden.

Außerdem fehlt mir ein kleiner Absatz mit Text in dem vielleicht steht welche Leistungen die Apotheke bietet. Oder warum ich gerade sie nutzen soll und nicht eine der unzähligen anderen Apotheken in Kaiserslautern. Kein Text zu haben ist auch nicht besonders gut für Suchmaschinen.


Auf der Service Seite fehlt auch eine Überschrift (h2) welche die Liste mit Serviceleistungen auszeichnet.
Zum Beispiel:

Unser Service
für Sie

In Anlehnung an die Startseite könntest du den Text ja auch rechtsbündig ausrichten.


Gleiches gilt bei den Öffnungszeiten, diese sind eigentlich Inhalt und sollten in einer Definitionsliste stehen. Dazu käme dann eine Überschrift (z.B.: Unsere Öffnungszeiten).


Ich habe noch weitere Ideen was die Umsetzung der Seite betrifft, aber letztlich ist es deine Seite und nicht ich soll sie machen sondern du.

[Chfm]

Vielen Dank für die vielen Tipps!
Ich hab jetzt soweit ich das sehe alles beherzigt und werde der Apothekerin nochmal sagen, dass es noch einen Text benötigt über die Apotheke.
Habe jetzt auch alles validiert!
Ich hoffe jetzt ist es für euch vom Code her auch vertretbar!
Klick

@charset "utf-8";
/* CSS Document */
/* =======================================
1. Kalibrierung und Restauration
======================================= */
* { padding: 0; margin: 0; }
html { /* erzwingt Scrollbar im Firefox */
  height: 101%;
}
/* =======================================
2. Allgemeine Styles
======================================= */
body {
	font-family: "Arial Black", Gadget, sans-serif;
	background-color: #a3a0a9;
}
#logo {
	padding-top:94px;
}
/* Abstand nach unten */
h2, p, ul, ol{ margin-bottom: 1em; }
/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0; }

/* Abstand von links */
li { margin-left: 1em; }
/* =======================================
3. Styles für die Layoutbereiche
======================================= */	
#wrapper {
	background-image:url(../images/hintergrund.gif);
	position: relative;
	width: 1267px;
	height: 856px;
	background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
}
#banner {
	position: relative;
	width: 1267px;
	height: 180px;
	}
#navi {
	float:left;
	width: 740px;
	height: 540px;
}
#Text-Oeffnungszeiten {
	margin-left:742px;
	width: 382px;
	min-height: 328px;
	text-align: left;
	color: #7e6f8a;
}
#Text-Oeffnungszeiten dl dt {
	font-size: x-large;
}
#Text-Oeffnungszeiten dl dd {
	font-size: large;
}
#Text-Startseite {
	margin-left:742px;
	width: 382px;
	min-height: 328px;
	text-align:right;
	color: #7e6f8a;
	font-size: large;
}
#Text-Kontakt {
	margin-left:742px;
	width: 382px;
	min-height: 328px;
	text-align:right;
	color: #7e6f8a;
	font-size: small;
}
#Text-Service {
	margin-left:742px;
	min-height: 328px;
	color: #7e6f8a;
	font-size: large;
	line-height: 125%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}

#fussbereich {
	position: relative;
	clear: both;
	font-size: 10pt;
	text-transform: uppercase;
	padding-left: 875px;
	color: #7e6f8a;
	font-weight: normal;
}
#fussbereich address {
	font-style: normal;
}
#fussbereich address p{
	font-size:small;
	text-transform:lowercase;
	color: #b5afc4
}

/* =======================================
4. Sonstige Styles
======================================= */
/* Das Kontaktformular */
form {
  background-color: #eee;
  width: 342px; /* Breite des Formulars */
  padding: 20px;
  border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
textarea {
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
  height: 7em;
}
input:focus,
textarea:focus {
	background-color: #d9d9d9;
}

@charset "UTF-8";
/* CSS Document */
ul#Apotheke_menu {
	margin-top: 227px;
	width: 400px;
	margin-left: 332px;
}

ul#Apotheke_menu li
{
	list-style-type:none;
	font-size: 100%;
	text-align: left;
	cursor: pointer;
	height: 35px;
	position: relative;
	width: 195px;
	background-color: #fff;
	color: #7e6f8a;
	text-decoration: none;
	margin-bottom: 10px;
	line-height: 35px;
}
ul#Apotheke_menu li a {
	display: block;
	color: inherit;
	text-decoration: none;
	padding-left: 5px;
}

ul#Apotheke_menu li span
{
	display: block;
	background-color: #7e6f8a;
	color: #fff;

}
ul#Apotheke_menu li ul
{
	margin: 0px;
	padding: 0px;
	top: 0px;
	left: 195px;
	position: absolute;
}

/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul#Apotheke_menu li>ul
{
	display: none;
	top: 0em;
}

ul#Apotheke_menu li:hover 
{
	background-color:#7e6f8a;
	color:#FFF;
}
 
ul#Apotheke_menu li:hover>ul, ul#Apotheke_menu li>a ul
{
	display: block;
	top: 0em;
}

/* Workaround fuer den IE 7 */
*:first-child+html ul#Apotheke_menu ul
{
    background-color:silver; padding-bottom:0.4em;
}

ul#Apotheke_menu li ul li 
{
	width: 195px;
}

Gruß
Christian

[take_a_7]

Gefällt mir persönlich gut, passt von den Farben auch zum Thema Apotheke.
Allerdings würde ich, wie schon weiter oben im Thread erwähnt, das Menü weiter nach oben machen und auch den Seiteninhalt mehr nach links. Also insgesamt weniger Abstand.

Dann würde ich noch den blöden Scrollbar-Hack weglassen, das sieht einfach nicht schön aus, wenn man scrollt, und die Seite bewegt sich nur die paar Pixel nach unten, obwohls gar nicht nötig wäre. Ich würde aus CSS3 "overflow-y:scroll;" nehmen, wenn du unbedingt ne Scrollbar willst. (Meine Persönliche Meinung )

Noch zwei Kleinigkeiten:

• Die Hintergrundfarbe beim focus im Kontaktformular finde ich zu dunkel.
• Ich würde die aktuelle Seite im Menü nicht verlinken ("Deppenlink")

gruß,
take