jetzt hab ich noch 3Probleme:
1.) wie ich das bild oben der größe vom braunen Kasten anpssen kann.
Brrr, Hooo! Langsam.
Kein CSS ohne HTML. Wir wollen doch erstmal Dein HTML verbessern. Wenn Du jetzt schon das Design machst, musst Du hinterher wieder alles ändern, wenn wir Deinen HTML-Code ändern. Also vergiss mal CSS.
bin ich ein hoffnungsloser Fall?
sollte ich es lassen?
Wenn Du hoffnungslos wärest, würde ich mich nicht bemühen, Dir zu helfen. :-)
Also...Dein Code...
Der Inhalt sagt mir, Du hast eine Überschrift und dazu ein Bild. Das Bild haben wir ja schon gesehen. Es enthält einen Text, der zur Überschrift gehört, bzw. sie darstellt.
Dann gehts schon los...Du hast etwas als Überschrift dritten Grades (warum dritter Grad? Und wo ist der zweite Grad?) eingestellt, was "Home Anime/Managa Japan Login/Regist" heißt. Das ist doch keine Überschrift!? Das ist doch ein Menü? Warum behauptest Du dann in Deinem HTML-Code, es sei eine Überschrift? Das ganze doppelt verpackt in ein sinnloses <div> und das seltsamerweise dann noch als Textabsatz ausgezeichnet. Gehts noch? :-)
Sieht Du gerade selber, was Du da für sinnfreies Zeug verzapft hast? :-)
Danach kommt eine Überschrift, soweit so gut. Aber dann kommt ein Textabsatz, der gleichzeitig eine Überschrift ist - wie bitte?
Und dann werden die ganzen Elemente noch in ein <span> gepackt. Hä?
Also ich fasse zusammen:
Wir brauchen eine Überschrift mit einem Bild.
Wir brauchen ein Menü. Das soll offensichtlich über der Überschrift/dem Bild stehen.
Wir brauchen einen Text.
So sollten Deine Überlegungen jedes Mal sein, wenn Du eine Website erstellt.
Im Editor sieht das dann so aus:
Home Anime/Managa Japan Login/Regist
[Bild] AnimeManga Style
Willkommen auf AnimeMangaStyle!
AnimeMangaStyle ist eine Community, in der sich alle Anime und Manga, sowie Japan Intressenten austoben können.
Die Mitgliedschaft in dieser Community ist kostenlos.
Soweit so gut. Rechtschreibfehler verbesserst Du später ;-)
Jetzt kommt HTML dazu (auf den Header mit Doctype, charset, body usw. verzichte ich hier mal.
Code:
<ul>
<li>Home</li>
<li>Anime/Managa</li>
<li>Japan</li>
<li>Login/Regist</li>
</ul>
<h1><img src="header1.jpg" alt="AnimeManga Style" /></h1>
<h2>Willkommen auf AnimeMangaStyle!</h2>
<p>AnimeMangaStyle ist eine Community, in der sich alle Anime und Manga, sowie Japan Intressenten austoben können.</p>
<p>Die Mitgliedschaft in dieser Community ist kostenlos.</p>
Fertig.
1. Das Menü als Liste ausgezeichnet. Denn ein Menü ist eine Liste von Menüpunkten.
2. Der Header ist die erste Überschrift. Es enthält Content, also muss es als <img> eingebunden werden. Der Text in dem Bild dient gleichzeitig als Alternativtext, damit da was sinnvolles steht, wenn das Bild nicht dargestellt wird.
3. Eine zweite Überschrift, zweiten Grades nur.
4. Der Rest besteht aus zwei Textabsätzen.
Fertig.
Nicht schwer, oder?
In bezug auf HTML ist das
alles. Wirklich!
Und jetzt das Stylesheet - extern natürlich.
Da fehlt mir, was Du möchtest. Du hast in jedem Beitrag immer mal irgendwas reingeworfen, fragst im letzten, wie Du etwas der Größe des braunen Kastens anpassen kannst, ich weiß leider nicht, wo ein brauner Kasten ist.
Geh einfach die Elemente eines nach dem anderen durch und formatier sie nach Deinen Wünschen. So wie Du das Bild mal gepostet hast, wirst Du weder "position" noch "float" brauchen und keine spezielle Form der Positionierung.
Wenn Du unbedingt den vorhandenen Platz im Viewport beschneiden und en Content mittig anzeigen willst, dann brauchst Du noch eine Änderung am HTML-Code. Dazu musst Du alle Elemente der Seite gruppieren, damit Du dieser Gruppe eine feste Breite und einen gleichen Abstand links und rechts geben kannst. Zum Gruppieren gibt es ein Tag: <div>.
Das <div> kommt ganz außen rum um den o.a. Code, z.B. <div id="Content">
Im CSS brauchst Du dann sowas:
Code:
div#Content {
width:20em; /* Feste Breite */
margin:0 auto; /* Abstand oben/unten:0, links/rechts: gleich groß, also horizontal zentriert */
}
Abstände jeglicher Art macht man mit margin (Außenabstand) oder padding (Innenabstand). Wenn man nicht alle Elemente eines Typs formatieren will, vergibt man Klassen (in mehreren Elementen möglich) oder IDs (nur einmal pro Seite erlaubt).
Dein Bild würde ich nicht einer bestimmten Größe anpassen, wenn Browser Bilder skalieren, sieht das immer schlecht aus.
Abstände in Deinem Menü hast Du jetzt. Wenn Du das Menü horizontal willst, nutzt Du entweder "display:inline" für jedes <li> oder "float:left". Wenn Du feste Größen für die Listenelemente angeben willst, brauchst Du float, weil das erstere die Listenpunkte zu Inline-Elementen macht, die kein height/width haben.
Was ist jetzt noch unklar?
Verstehe, was HTML ist, was "Semantik" bedeutet.
Lerne das Box-Model.
Verstehe den Unterschied zwischen Inline- und Block-Element.
Alles andere ist stures Lernen, was welches Tag beschreibt und was welche CSS-Eigenschaft macht.
Alle Klarheiten beseitigt?
