Einzelnen Beitrag anzeigen
  #5 (permalink)  
Alt 11.04.2007, 13:27
RoToRa RoToRa ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Alien Beitrag anzeigen
wenn ich das design nun zerschneide in einen header, content und footer, kannst du mir dann jetzt weitere tips geben, wie ich das ganze am besten in container packe,
Genau das ist das wichtigeste beim Arbeiten mit "Trennung von Inhalt und Präsentation": die Strukturierung des Inhalts. Du solltest den Layout erstmal vergessen (oder zumindest in den Hinterkopf schieben) und erstmal reines, striktes (X)HTML schreiben um die Inhalt zu strukturieren. In deinem Fall ist es recht einfach:

Code:
<div id="alles">
<h1>Hotel Adler</h1>
<div id="kopf">
  <ul id="sprachen">
    <li><a href="..">Deutsch</a></li>
    <li><a href="..">English</a></li>
    ...
  </ul>
  <ul id="hauptmenue">
     <li><a href="...">Home</a></li>
     <li><a href="...">Ausstattung</a></li>
     ...
  </ul>
</div>
<ul id="untermenue">
   <li><a href="...">Willkommen</a></li>
   ...
</ul>
<div id="inhalt">
...
</div>
<ul id="fussmenue">
   <li><a href="...">AGB</a></li>
   ...
</ul>
</div>
Zitat:
diese mittig positioniere
Suche in dem Forum oder bei Google: css zentrieren - Google Search
Ergibt z.B.: FAQ Bubax.net – Elemente mit CSS zentrieren

Zitat:
und alle genau untereinander?
Das passiert ganz von alleine.

Zitat:
das scheint mir kompliziert zu werden.
Die Struktur ist einfach. Das Design in CSS umzusetzen ist als (CSS-)Anfänger jedoch mit viel Lernarbeit verbunden, aber gerade dieses Layout würde ich nicht als komplizert bezeichnen.

Hier die ersten Ansätze:
- Der Hotel-Name ist in meine Code oben Text. Als Anfänger ist es warscheilich am einfachsten, wenn du dort stattdessen direkt die entsprechende Grafik einsetzt (<img ...>), ansonsten schau die sogenannte "Image-Replacement"-Technologien an:
image-replacement - Google Search
- Ansonsten dden Hotel-Namen (also das H1) rechts floaten.
- Die Menüs sollen horizontal dargestellt werden. Siehe dazu beispielsweise: Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Arbeite ausserdem unser FAQ-Thread durch: http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html

Ganz grobes, erstes, ungetestetes CSS:
Code:
* {
   margin: 0; padding: 0;
}
#alles {
   width: 740px; /* entsprechend anpassen; besser wäre jedoch eine eine flexibele Breite */
   margin: 0 auto; /* Siehe "Zentrieren mit CSS" */
}
h1 {
   width: 270px; /* Auch nur geraten */
   float: right.
}
#untermenue {
   clear: right;
}
#untermenue, #fussmenue {
   background-color: #D7C69B;
   border: 1px solid #A2997C;
}
#sprachen li, #hauptmenue li, #untermenue li, #fussmenue li {
   display: inline; /* Alternativ float:left, das kommt auf diverse Umstände drauf an. */
}
#inhalt {
   border: 1px solid #A2997C;
   background-color: #F2E7C7
   background-image: url("blumen.gif"); /* Hier NUR das Blumenmuster, NICHT den gesamten Hintergrund */
}
Zitat:
Ich sollte noch erwähnen, dass die seite vier Menüs enthalten wird.
Die Anzahl der Menüs ist irrelevant fürs CSS.

Zitat:
Hier das design als Prototyp, allerdings in Tabellen aufgebaut:

Hotel Adler in Frankfurt am Main
Drück mal Strg-[+] in Firefox zwei-, dreimal. Das sollte bei der Umsetzung verhindert werden.

Zitat:
Hoffe mir kann einer konkretere Tips geben. Ungefähr bringt mir nichts
Dafür haben die wenigsten hier warscheinlich Zeit - ich habe schon viel zu viel Zeit verschwendet . Wenn du es Stück für Stück machst (erstmal das umsetzten was ich angedeutet habe), sehen wir weiter.

Robin
Mit Zitat antworten