Dropdown Menü

[etux]

So, also im Menü treten diverse Fehler auf. Du sagst, ich baue grundsätzlich mein Menü falsch auf,

Dein Layout meinte ich damit.

Wenn ich das richtig interpretiert habe, kritisiertst du, dass ich in meine liste divs reinpacke und diese quasi als Tabellenzeilen verwende?!

In welcher Liste hast Du denn DIVs rein gepackt?
Nein, auch hier meinte ich damit Dein gesamtes Layout.

Was ist daran falsch, wie kann ich meine Darstellung sonnst erreichen?

Es sind reichlich leere Elementen nur zu Design-Zwecken da. Riesige Bilder, die mit dem Inhalt Deines Dokuments nichts zu tun haben …
In dem Du die Elemente nutztest, die zur Darstellung Deines Seiten-Inhalts notwendig sind.

@font-face, scheint ziemlich zufällig zu funktionieren, gibt es keine Alternative?

Was meinst Du mit „zufällig“? Bei weitem nicht alle Browser unterstützen das. Aber zufällig!?
Bulletproof @font-face syntax Paul Irish

Soll ich deiner Meinung nach, das gesammte Menü nochmals aufbauen, oder ist das alte noch zu retten?

Das Menü ja – Dein Template solltest Du neu bauen.

So, ziemlich viele fragen, sorry!
Falls du ein Paar Antworten weist, wäre ich dir sehr Dankbar, wenn du zu den Vorschlägen gleich n'beispiel-code posten kannst, da ich die ganze geschichte nur hobby-mässig mache, brauche ich immer praktische ansätze um zu verstehen;)

Ich unterstütze Dich gerne dabei, aber Dir alles beibringen – das muss Du schon selber machen.
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

Was willst Du mit Deinem Layout erreichen? Vielleicht kann ich Dir ein Grundgerüst bauen, damit Du nicht bei Null anfängst.

[Unearth]

Hi etux

Ok, also du sagst, die Idee mein Layout, mit diversen divs, welche leer sind oder nur ein Bild enthalten aufzubauen ist falsch!

Ok, also grundsätzlich hab ich dieses Design als ziel: http://js-steckborn.ch/lukassite/Layout004-t.jpg (menüpunkte in der 2'ten ebene auch mit einem blauen Button-Bild hinterlegt!)

Die website sollte in der mitte einen Content mit einer bestimmten Breite haben (z.B. 800px) und gesamthaft scrollbar sein!
Das Bild oben sollte man austauschen können.
Im Hintergrund (blau), ist ein vertikaler Verlauf drinn!
Die website sollte im Firefox wie auch IE funktionieren!

So das ist glaub ich alles!

Ich wäre sehr gespannt darauf zu hören, wie man das mit weniger divs und css aufwand oder besser gestalten könnte? Wenn du mir dazu vieleicht ein Grundgerüst bauen kannst wäre ich dir sehr dankbar!



Nun zum Menü

Ich werde das menü nochmals bauen, da ich ehrlich gesagt, die übersicht im css langsam verloren habe!


Danke für den link zum @font-face! Mit zufällig meinte ich, das IE8 an einem Computer die schrift anzeigt, am nächsten Morgen, mit dem gleiche Computer ohne updates etc ohne veränderung der Wesite nicht mehr!
das tutorial werd ich am montag angehen, dann hab ich widermal nen Tag zeit!


Vielen Dank für die hilfreichen Antworten!

Grüsse Unearth

[etux]

Du denkst zu sehr designlästig. Design kommt erst später...

Kommen noch Elemente in die Seitenstruktur hin zu. Falls ja – welche und in welcher Reihenfolge im Quelltext? Bleibt es bei der einen Spalte, oder wird es ein Zwei- oder Dreispalter?
Soll Footer bei wenig Inhalt am unteren Rand des Browsers kleben bleiben.

Bis jetzt kann ich grob folgendes erkennen:

Site-Name / Logo
Haupt-Navigation
Inhalt
Footer

Entspricht das Deiner Vorstellungen von der Seitenstruktur?

[Unearth]

Hi eteux

nein Es bleibt bei einem Einspaltigen Content, welches ich mit den Typo3 Seiteninhalten gestalten werde.

Der Footer soll bei wenig Inhalt am unteren Rand des Browsers kleben bleiben und bei viel Ihnhalt, zuunterst unter dem Ihnhalt stehen.

Was ich noch gerne hätte, wäre ein Breadcrumb menü! (http://www.mortox.de/typo3-tipps/typ...umb-menue.html)


Richtig die Seitenstruktur soll aus:

Site-Name / Logo
Haupt-Navigation
Breadcrump-Menu (sie befinden sich hier: z.B. Angebot > Segeln)
Inhalt
Footer

bestehen, das ist alles!

Grüsse Unearth

[etux]

Diese Reihenfolge der Elementen hast Du jetzt (s. Vorlage unten) :

header
mainNav
contentWrap
--breadCrumb
--Inhalt
footer

Da Du ein BreadCrumb hast, kannst Du die Reihenfolge der Elementen im Quelltext ändern.
BreadCrumb enthält u.A. auch den Site-Name, wenn Du Deine root-Seite entsprechend benennst. So ist es unproblematisch, wenn contentWrap an erster Stelle im Quellcode steht. Du müsstest in diesem Fall nur H1 im header mit einem passenden Element austauschen.

contentWrap
--breadCrumb
--Inhalt
footer
header
mainNav

An der CSS-Datei brauchst Du nichts ändern, egal welche der zwei Varianten Du nimmst.
Auslagern kannst Du sie jetzt oder später. Zum Posten ist es einfacher alles (html und CSS) in einer Datei.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Content-Language" content="de" />
	<meta name="language" content="de" />
	<title>Unearth-Template</title>
<style type="text/css">
* { margin: 0; padding: 0; border: none; list-style-type: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100.01%; font-weight: normal; }
html {
	height: 100%;
	font-size: 100.01%;
}
body {
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	line-height: 1.4;
}
div#header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 200px;
	background-color: #bbb;
}
div#header h1 {
	width: 800px;
	height: 100%;
	margin: 0 auto;
	background-color: #eee;
}
div#mainNav {
	position: absolute;
	left: 0;
	top: 200px;
	width: 100%;
	height: 50px;
	background-color: #aaa;
}
div#mainNav ul {
	width: 800px;
	height: 100%;
	margin: 0 auto;
	background-color: #bbb;
}
div#mainNav ul li {
	display: inline;
}
div#contentWrap {
	width: 800px;
	min-height: 100%;
	margin: 0 auto;
	background-color: #eee;
}
p#breadCrumb {
	padding-top: 250px;
}
div#content {
	padding-bottom: 50px;
}
div#footer {
	height: 50px;
	margin-top: -50px;
	background-color: #bbb;
}
div#footer p {
	width: 800px;
	height: 100%;
	margin: 0 auto;
	background-color: #ccc;
}
</style>
<!--[if lte IE 7]><style type="text/css">
* html body {
	font-size /**/: x-small;
	text-align /**/: center;
}
* html div#header h1,
* html div#mainNav ul,
* html div#contentWrap,
* html div#footer p {
	text-align /**/: left;
}
* html div#mainNav ul {
	margin /**/: 0;
}
* html div#contentWrap {
	height: 100%;
}
</style><![endif]-->
</head>
<body>

<div id="header"><h1>Site-Name (Logo)</h1></div>
<div id="mainNav"><ul><li>Haupt-Navigation</li></ul></div>
<div id="contentWrap">
	<p id="breadCrumb">breadCrumb</p>
	<div id="content">Inhalt</div>
</div>
<div id="footer"><p>Footer</p></div>

</body>
</html>

P.S.: Manche Elemente sind nur vorläufig formatiert. Später wird das geändert, wenn Du (wir) beispielsweise die Navis formatieren.
Menüs - ich würde Dir eher die von Georg empfehlen:
http://www.just2b.com/mein-typo3/css...own-menue.html

[Unearth]

Hi eteux

Sorry das ich länger nicht geanteortet habe, war in den Ferien in ne Skihütte im Wallis ohne i-net! ;)
Hoffe hattest auch schöne festtage und bist gut gerutscht!

Ok, also der Code sieht schonmal sehr hübsch aus!

Mir ist es eigentlich recht wenn die Reihenfolge so ist, wie man sie sieht:

header
mainNav
contentWrap
--breadCrumb
--Inhalt
footer


Jetzt, folgende grundsätzliche Fragen:

Das Logo(Bild oben) wird jetzt mit typoscript eingebaut oder wie?

Und das restliche Layout, weisser Hintergrund, Farbverlauf im Hintergrund Schatten links rechts etc, wird jetzt alles noch mit typoskript gemacht oder wird die html noch erweitert?

Grüsse Unearth

[etux]

Das Logo(Bild oben) wird jetzt mit typoscript eingebaut oder wie?

Normalerweise ja. Denn das Logo gehört zum Inhalt einer Seite. So hast Du die Möglichkeit es auch generell zu verlinken (Link zeigt auf die Startseite) und nur auf der Startseite den Link mit einem beispielsweise strong-Element zu ersetzen.
Allerdings ist Dein Logo vielmehr ein Banner. Daher würde ich es als Hintergrundbild einbinden.

Und das restliche Layout, weisser Hintergrund, Farbverlauf im Hintergrund Schatten links rechts etc, wird jetzt alles noch mit typoskript gemacht oder wird die html noch erweitert?

Alle Hintergrund-Farben und -Bilder werden über CSS definiert, da sie nicht zum Inhalt der Website gehören. Sollten die schon vorhandene Elementen dafür nicht ausreichen, kommen zusätzliche hin zu. Aber keine leere Elementen – die neue werden verschachtelt.

Einige Hintergrundbilder sind unnötig groß und/oder zerstückelt. Bevor Du Dich aber daran machst, die Bilder zu bearbeiten und sie den entsprechenden Elementen zu zuordnen, überlege mal ob das wirklich nötig ist. Es ist ja reine Geschmack-Sache, aber rechtfertigt das Ergebnis den Aufwand?

Überlege dann, wie Du und welche einzelnen Bilder zu einem zusammenbaust, die dann horizontale oder vertikale Wiederholung erlauben. Welchen Elementen könnte man die zuordnen? Usw....

Ich denke, es ist Dir nicht wirklich geholfen, wenn ich Dir die fertige Lösung poste. Zum Thema Hintergrund-Bilder und -Farben dürfte einiges in „Little Boxes“ zu finden sein. Link s. Vorpost oben. Soweit ich kann, helfe ich Dir natürlich, falls Du nicht weiter kommst.