Positionierung von Elementen (etwas mehr zum lesen)

[manyana]

Ja hallo erstmal

Vorneweg, bis vorgestern hatte ich mich noch nie ernsthaft mit CSS beschäftigt bis ein sehr guter Freund mich gefragt hat, ob ich ihm eine Webseite erstellen kann da sein Budget ziemlich knapp ist um es über einen Profi erstellen zu lassen. Nun ja, um es kurz zu fassen. Das Layout der Seite habe ich mit Gimp erstellt, das Ganze "gesliced" und nun versuche ich krampfhaft die Stücke mittels CSS und Dreamwaver zu einem Ganzen zusammenzufügen. Ich habe die letzten Tage auch ziemlich viel über CSS gelesen- es ist ja auch äußerst umfangreich - auch ein Videotraining von video2brain mir angeschaut aber es ist doch nicht so einfach wie ich es mir vorgestellt habe und deshalb würde ich gerne diesbzüglich der Positionierung der einzelnen Elemente des Headers an dieser Stelle ein paar Fragen stellen.

Der Header beinhaltet 3 horizontale Bereiche.

Der erste Bereich hat 2 Bereiche, wovon der erste Bereich eine Navigation enthält.
Der zweite Bereich ist eine Grafik.
Der 3 Bereich enthält eigentlich nur eine Navigation.

Laut dem Videotraining fängt man damit an einen Div-Container zu erstellen und weist diesem die Größe der Seite zu. In diesem Container erstellt man laut Videotraining dann die weiteren Divs für die Bereiche Header, Body und ggfls. Footer zu. Diese Divs enthalten dann die Elemente (Grafiken, etc.) welche widerrum in Divs verpackt sind. Was meinen erstellten Header betrifft wären das ja 6 Div-Tags alleine für den ersten Bereich, 1 Div-Tag für den zweiten Bereich und 8 Div-Tags für den dritten Bereich. (Ich habe ja jeden einzelnen Button von den Navigationsleisten ausgeschnitten)

Ich habe dies über diesen Weg auch ganz gut hingekriegt aber ein Freund (Screen-Designer mit gaaanz wenig Zeit, leider) meinte wohl, dass es so sehr umständlich wäre. Die Positionierung der Elemente könnte auch ohne Hauptcontainern erfolgen und was die Navigation betrifft könnte man über UL-Listen realisieren.

Ich würde mich sehr freuen, wenn mir jemand hier sagen könnte, was ich bei der Positionierung falsch gemacht habe und wie ich es besser machen könnte.

Danke schön

MfG,
manyana

[sejuma]

Vorweg: Ein, zwei Tage um CSS zu lernen ist wirklich etwas wenig.
Und so ne Website stampft man ohne größere Vorkenntnisse auch nicht so aus dem Boden.

Ansonsten hast du das Pferd von hinten aufgezäumt, indem du mit den Grafiken angefangen hast.
Die richtige Vorgehensweise wäre folgende:

1. Den HTML-Quelltext möglichst semantisch korrekt aufbauen.
Dazu die zur Verfügung stehenden HTML-Elemente zweckentsprechend verwenden und nicht für alles Divs verwenden. Das führt zur sogenannten unüberschaubaren "Div-Suppe". Divs sind größere Bereiche einer Seite ("division"), die einheitlich formatiert werden.
Insofern war auch der Hinweis mit der Navi als UL-Liste richtig.


2. Nach der unformatierten HTML-Struktur formatierst und positionierst du die einzelnen Elemente mit CSS.

3. Das Slicen von Grafiken ist so eine Sache: Oft kommen dabei viel mehr Stücke heraus, als man tatsächlich braucht. Das wiederum hängt mit 1. zusammen.

Konkret hilft dir das vermutlich jetzt nicht weiter. Aber zum autofahren brauchst du auch nen Führerschein und für jeden Beruf eine Ausbildung.
Insofern befasse dich also zunächst etwas näher mit HTML und CSS, erstelle zunächst kleine Übungsseiten und mach nicht gleich ein Großprojekt in Form einer gewerblichen Seite.

[manyana]

Hallo sejuma,

vielen Dank für Dein Feedback, es enthält konstruktive Kritik, zumindest teilweise

Ich habe mich an Deinen Empfehlungen gehalten und mir die letzten Tage CSS intensiv "angeschaut", und zahlreiche Tutorials im Netz besucht.

Natürlich ist es eine richtige Vorgehensweise sich (in diesen Fall CSS) anzueignen, aber es gibt Leute, die machen vieles nach "learning by doing" und das klappt auch ganz gut MIttlerweile habe ich die Grafik anständig in Teilen ausgeschnitten (nicht "gesliced") und per CSS positioniert. Auch das Menu ist nun einer UL-Liste gewichen

Nun würde ich gerne die Liste mit den Links irgendwie über den Buttons positionieren (siehe Grafik) kannst Du (oder jemand anderes) mir bitte diesbezüglich Hilfestellung geben? Muss
ich dafür die UL in einen DIV "packen"?

Viele Grüße,
manyana

[sejuma]

Wenn ich dich recht verstanden habe, soll nun der Linktext auf die Buttons wandern.
Dazu reicht eine einheitliche Liste.
Einen Div brauchst du dafür nicht. Du kannst die Formatierungen direkt dieser Liste zuweisen, indem du einen speziell definierten ID verwendest.

Beispiel:
CSS

Code: Alles auswählen

#headnavi {Styleangaben}

HTML:

Code: Alles auswählen

<ul id="headnavi">
<li>...</li>
<li>...</li>
</ul>

Die Grafiken weist du dann entweder #headnavi li oder #headnavi a als Hintergrundgrafiken zu.

Eine Anleitung findest du hier:
http://www.ohne-css.gehts-gar.net/0072.php
http://www.ohne-css.gehts-gar.net/0073.php

"Learning by doing" ist übrigens auch meine bewährte Methode. Nur sollte man dabei das "learning" nicht ganz vernachlässigen
Aber du bist ja nun offensichtlich auf dem richtigen Weg.

[manyana]

Jetzt bin ich etwas durcheinander

Du schreibst : #Einen Div brauchst du dafür nicht. Du kannst die Formatierungen direkt dieser Liste zuweisen, indem du einen speziell definierten ID verwendest.#

Das hatte ich doch schon:

HTML
<ul id="navibereich">
<li id="navi01"><a href="index1.html">Startseite</a></li>
<li id="navi02"><a href="trauerfall.html">Im Trauerfall</a></li>
<li id="navi02"><a href="vorsorge.html">Vorsorge</a></li>
<li id="navi02"><a href="kontakt.html">Kontakt</a></li>
</ul>

CSS
#navibereich li {
display: inline;
list-style-type: none;
}

#navibereich {
padding: 4px 0;
margin: 0;
}

#navibereich a {
color:#600;
text-decoration:none;
padding: 4px 23px;
}

Die Grafik wohin die Linkliste "wandern" soll ist in einem DIV absolute positioniert:
<div id="header"><img src="img/header.jpg" width="1020" height="106" /></div>

Ich habe dich so verstanden, dass Du meinst (Du kannst die Formatierungen direkt dieser Liste zuweisen...) der Linkliste einen Hintergrund zuzuweisen ich möchte aber der Liste keinen Hintergrund zuweisen sondern sie wie einen Layer über die absolute positionierte Grafik legen.
Oder habe ich es nicht richtig verstanden?

Hat das was ich machen will vielleicht mit floating oder z-index zu tun?

PS: Ich bin noch am Anfang mit diesem CSS-Zeug, gestern Nacht verfolgten mich im Traum farbige große Boxen und riefen wirres Zeug

[sejuma]

Du musst nur etwas umdenken, nämlich einfacher denken: Die "Kunst" korrekter HTML-Semantik besteht im Weglassen.
Demzufolge ist dein header überflüssig.

Weise dessen Grafik dem ID #navibereich als Hintergrundgrafik zu. Achte auf den richtigen Pfad zur Grafik, ausgehend vom "Standort" deiner CSS-Datei.

Code: Alles auswählen

#navibereich {
background-image: url(pfad_zur _Grafik);
padding: 4px 0;
margin: 0;
width: 1020px;
height: 106px;
line-height: 106px;
}

Dann gib #navibereich noch einen entsprechenden padding-left-Abstand, um den ersten Link korrekt zu positionieren. Ziehe diesen Wert vom der width ab.
Lass bei li das display: inline; weg und ersetze es durch

Code: Alles auswählen

float: left;

Gib ferner li eine Breite, die der eines "Button-Segments" entspricht.
Dann müsste es vom Groben her eigentlich passen.

Falls nicht, poste für das "Feintuning" bitte einen Link zur Seite, damit man alles im Zusammenhang sieht.

[manyana]

Danke schön, hat funktioniert, mit 2 Navigationsleisten (siehe Grafik A) Allerdings habe ich die Listen in Div`s gepackt, nur so konnte ich leider das Ganze positionieren was natürlich auf meinen bescheidenen CSS-Kenntnissen zurückzuführen ist.

In der angehängten Grafik B ist die zweite Navi-Leiste, das hat wie gesagt auch ganz gut geklappt, ich würde gerne jedoch ganz rechts ebenfalls einen Link setzen, geht es über den gleichen Weg?

Eine letzte Frage
Wie kann man in der leeren Box neben dem Bild einen 2-3 "zeiliegen" Text mit ausschließlich dekorativen Charakter plazieren?

Danke schön im Voraus!

Viele Grüße,
manyana