Umgestaltung einer Website: HTML ---> CSS

[ThrashAnthems]

Hallo zusammen,

wir haben für unser Restaurant eine Homepage, welche damals vom Ersteller überwiegend mit Tabellen layoutet wurde und vorallem dadurch nicht gerade handlich ist. Außerdem wurde auch viel mit Word gepfuscht, wie weit dies im Endeffekt eingegriffen hatte, kann ich jedoch nicht sagen.

Die Homepage ist erreichbar unter http://www.restaurant-clyne.de.

Jetzt habe ich angefangen, die Homepage umzugestalten, weg von den Tabellen, hin zu einem CSS-Layout, in welches ich auch standardkonform alles gestalterische (also auch die kompletten Grafiken) auslagern möchte.

Das bisherige Ergebnis ist unter http://www.restaurant-clyne.de/clyne_v2/index.html zu sehen. Das alte Layout konnte ich also bisher weitestgehend übernehmen, es gibt nun 6 div-Container (Header, Navigation, den Mittelbereich der jeweils einen Container für die linke Grafik und den Inhaltsbereich umschließt und die Fußzeile).

Derzeit hänge ich bei den folgenden 2 Problemen fest:
1. Positionierung des mittleren Bereiches:
wie gesagt umgibt dort ein Container zwei weitere Container für die Grafik (links) und den Inhalt (rechts). Wenn der Inhaltsbereich wächst, passt sich der umschließende Container mit an und da dieser einen weißen Hintergrund hat, wächst die Grafik links optisch mit.
Wenn jedoch die Grafik links größer ist als der Inhalt, dann wächst sie aus dem Container heraus und es sieht so aus, wie jetzt.
Wie kann ich das am besten lösen?

Problem Nummer 2: die Navigation.
Die Navigation besteht eigentlich aus einzelnen Grafiken, die auch noch unterschiedlich groß sind. Ich habe es bislang nicht geschafft, diese vernünftig einzufügen, was, wie ich es mittlerweile begriffen habe, wohl daran liegt, dass Links Inline-Elemente sind und nicht angepasst werden können..


Für Hilfe wäre ich sehr dankbar!


Gruß

[sejuma]

Den div #links brauchst du nicht.
Weise die Grafik dem #mitte zu und gib diesem einen min-height-Wert, z.B. so (Grafikpfad noch anpassen, habe hier die komplette URL verwendet):

#mitte {
min-height: 400px;
width: 620px;
background-image: url(http://www.restaurant-clyne.de/clyne_v2/img/index_side_zeiten.gif);
background-repeat: no-repeat;
background-color: #ffffff;
}

Grafik-Buttons kannst du einfügen wie z.B. hier beschrieben:
http://www.ohne-css.gehts-gar.net/0022.php
Aus meiner Sicht sind die jedoch nicht zwingend erforderlich. Mit entsprechenden Hover-Angaben zu den Links lässt sich der Effekt auch annähernd erreichen, siehe z.B. hier http://www.ohne-css.gehts-gar.net/0003.php

[ThrashAnthems]

Hallo sejuma,

vielen Dank, das hat mir schon einmal sehr geholfen. Auf die Idee mit der Mitte bin ich gar nicht gekommen.
Kleine Frage noch dazu: wird der Background ohne weitere Befehle automatisch links oben Platziert? Und behält er dies dann auch als feste Position?
Jede Unterseite hat außerdem eine andere Grafik links. Gebe ich der div mit der ID="mitte" dann am Besten zusätzlich eine Klasse oder anstelle der ID eine Klasse? Oder wie löse ich das am Besten?

Zum Thema Navigation gebe ich dir im Prinzip Recht, die Grafiken braucht man eigentlich nicht. Ich habe jetzt entsprechend die Hintergrundgrafik für die Navileiste bearbeitet und könnte die Links nun eigentlich einfügen. Jetzt habe ich das Problem, dass ich die Navi-Liste nicht vom rechten Rand wegbekomme, so dass sie mittig in dem Kasten ist. Versucht habe ich es mit padding, wenn ich dies jedoch für <a> setze, ist logischerweise zwischen jedem Link eine entsprechend große Lücke. Wenn ich es nur auf <a> mit der ID="navi6" beschränke, zeigt es keine Wirkung. Was kann ich da tun?

[sejuma]

Wenn das auf jeder Seite eine andere Grafik ist (sorry, hatte ich nicht bemerkt), dann wäre dein Vorschlag mit Klassen zwar machbar, aber ziemlich umständlich und deshalb zu aufwendig.

In diesem Fall bietet sich folgende Lösung an:

Entferne wieder die Hintergrundgrafik von #mitte.

Definiere in CSS:

#links {
float: left;
}

Füge dann die Grafik im HTML-Teil an dieser Stelle wie folgt ein:

  <div id="mitte">
<!-- Container Mitte -->
	<img id="links"src="http://www.restaurant-clyne.de/img/index_side_neu.gif" alt="Home">

Auf den anderen Seite verwende dann an dieser Stelle jeweils eine andere Grafik.

Das Navi-Problem sollte sich damit lösen lassen:

#navi ul {
margin: 0 15px 0 0;
}

[ThrashAnthems]

Hallo sejuma,

die Navigation schaut jetzt so aus, wie sie soll (abgesehen davon, dass sich die aktive Seite noch nicht entsprechend abhebt.

Die verschiedenen Grafiken links habe ich nun doch über Klassen definiert und zwar folgendermaßen:

HTML:

<div id="mitte" class="mitte_index">
<div id="mitte" class="mitte_ueber">
.
.
.

Und im CSS sieht das nun folgendermaßen aus:

#mitte {
   min-height: 400px;
   width: 620px;
   margin: 27px 0 0 0;
   background-color: #ffffff;
   }
   
#mitte.mitte_index {
   background-image: url(../img/index_side.gif);
   background-repeat: no-repeat;
   background-color: #ffffff;
}

#mitte.mitte_ueber {
   background-image: url(../img/ueber_side.gif);
   background-repeat: no-repeat;
   background-color: #ffffff;
}

.
.
.

Ist vom Aufwand her sogar noch in Ordnung.


Zusätzlich habe ich nun noch einen zusätzlichen Container um die bisherigen erstellt, der die Seite nun zentriert.

Wie kann ich nun denn noch dem Header beispielsweise einen Text hinterlegen, der angezeigt wird, wenn das Bild (background-image) nicht angezeigt wird oder das Stylesheet deaktiviert ist?

Wie würdest du die bisherige Umsetzung im allgemeinen bewerten?

[sejuma]

Einen Alternativtext für Hintergrundgrafiken gibt es m.W. nicht.
Aber was spricht denn dagegen, die Headergrafik direkt im HTML-Code als image einzubinden? Diesem kannst du dann einen Alternativtext zuweisen. Damit wird auch der div #kopf überflüssig.

Die bisherige Umsetzung ist recht ordentlich.
Was du noch vermeiden solltest sind die vielen <br>, die als Abstandhalter missbraucht werden.
Packe den Text besser in Absätze

<p>Text</p>

und weise - falls erforderlich dann p individuelle margins oder paddings zu.

[ThrashAnthems]

Guten Morgen,

dagegen spricht eigentlich nicht, außer, dass ich mich strikt an die Standards halten wollte und wirklich die Grafiken vom HTML-Quelltext fernhalte und diese nur im Stylesheet einbinden wollte.

Mit den <br> stimmt natürlich. Bei der Karte habe ich das schon entsprechend abgeändert und jeden Punkt auf der Karte in einen eigenen Absatz gepackt. Wobei das bei der Karte bei vielen Änderungen fast schon unhandlich ist.