Zitat:
Zitat von Alien
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.
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