Inhalte der Site verschieben sich

Webdesign & Technik HTML & CSS
1

Hallöchen,

ich suche schon seit Tagen nach einer passenden Lösung meines Problems, jedoch konnten Google und auch die Forensuche mir nicht richtig weiterhelfen, es gibt zwar mehrere Lösungsvorschläge, jedoch funktioniert einfach nix :frowning:
Ich bin blutiger Anfänger und habe mir HTML, CSS, etc durch das Internet etwas beigebracht.
Nun zum Thema:
Ich habe mir eine Homepage erstellt: schatzkiste.bplaced.net/
Jetzt ist es so, dass die Inhalte der Page, je nach Auflösung des PCs anders positioniert werden. Ich habe schon alles versucht, aber es will nicht klappen :frowning:
Vielleicht kann jemand von euch meinen Fehler finden?

HTML-Code:

[code]

Kitty's Schatzkiste a.class_1 { display:block; background-image:url(http://schatzkiste.bplaced.net/shop1.jpg); width:260px; height:60px } a.class_1:hover { background-image:url(http://schatzkiste.bplaced.net/shop2.jpg); } a.class_2 { display:block; background-image:url(http://schatzkiste.bplaced.net/blog1.jpg); width:260px; height:60px } a.class_2:hover { background-image:url(http://schatzkiste.bplaced.net/blog2.jpg); } a.class_3 { display:block; background-image:url(http://schatzkiste.bplaced.net/facebook1.jpg); width:260px; height:60px } a.class_3:hover { background-image:url(http://schatzkiste.bplaced.net/facebook2.jpg); } div#Info { font-size: 0.9em; font-family: arial; position: absolute; top: 200px; left: 800px; width: 50px; } div#Info strong { font-size: 1.33em; margin: 0.2em 0.5em; } div#Info p { font-size: 1em; margin: 0.5em; } div#Inhalt { font-size: 0.9em; font-family: arial; position: absolute; top: 30%; left: 36%; width: 22%; } div#Inhalt h1 { font-size: 1.5em; margin: 0 0 0.5em; } div#Inhalt h2 { font-size: 1.2em; margin: 0.2em 0; } div#Inhalt p { font-size: 1em; margin: 1em 0; }
Test

[/code]

CSS:

[code]body
{
background-color: #cccccc;
background-image: Url(http://www.schatzkiste.bplaced.net/bilder/layout.jpg);
background-repeat:no-repeat;
background-position: center;

background-attachment: fixed;
}
[/code]

Ich danke euch schonmal im Voraus!
Liebe Grüße :wink2:

2

Tja, was für eine Markierungssuppe.

Daß sich die Anzeige danach richtet, wie groß der Darstellungsbereich ist und welche
Schriftgröße am browser eingestellt ist, ist sinnvoll und wünschenswert.
Der Autor bastelt einfach ein Layout, welches so flexibel ist, daß das kein Problem darstellt.

Zu deiner Markierungssuppe:
Da solltest du erstmal einen Validator drüberlaufen lassen.
Das Element link gehört etwa oben ins Element head.
Angaben in deinem lokalen Dateisystem wie ‘file:///C:/Users’ sind sinnlos, am besten das ganze
base streichen.

Deine Probleme mit der Positionierung dürften zum guten Teil daran liegen, daß du für eine
Gruppe von Elementen eine Positionierung in % angegeben hast, das bezieht sich dann
natürlich auf die Größe des Elternelementes (und letztlich gegebenenfalls auf die Größe des
Darstellungsbereiches).
Nützlicher sind bei Elementen, die Text enthalten, Größenangaben in den Einheiten em und ex.
Bei Elementen, die nur Pixelgraphik enthalten, kann auch px eine sinnvolle Einheit sein.

Etwa ist der Text ‘Test’ offenbar absolut in px positioniert - für Text ist px aber nicht sinnvoll.

Wo willst du da eigentlich noch Inhalt unterbringen, wenn der ganze Kram in einem
winzigen, zentrierten Guckloch angeordnet ist - besser also erstmal weniger CSS und mehr
Inhalt und dem Inhalt Raum zur Anzeige lassen.

3

Mh… sorry, aber viel verstanden habe ich leider nicht.

Also zum Verständnis:
Die Homepage soll nur die 3 Link-Buttons enthalten und rechts, wo bisher “Test” steht soll nur eine kleine Beschreibung hin.

Ich hatte den Bereich für die Links vorher auch in px definiert, aber das änderte alles nichts an der Situation.

[quote]Zu deiner Markierungssuppe:
Da solltest du erstmal einen Validator drüberlaufen lassen.
Das Element link gehört etwa oben ins Element head.
Angaben in deinem lokalen Dateisystem wie ‘file:///C:/Users’ sind sinnlos, am besten das ganze
base streichen.[/quote]
diesen Teil habe ich nun nicht wirklich verstanden… wie gesagt, ich bin wirklich blutiger Anfänger :cry:

4

Was hoffmann dir sagen will: Eigne dir erstmal die Grundlagen von HTML und CSS bzgl. Aufbau und Strukturierung an. Etma mit de.selfhtml.org/
Erstelle dir deine Seite und überprüfe mit einem Validator, wie etwa validator.w3.org/, ob deine Seite noch Fehler enthält.
Wenn ich das richtig sehe, soll das eine reine Weiterleitungsseite werden? Bitte vergewissere dich, ob das mit den AGB, denen du zugestimmt hast, konform geht. Ich glaube irgendwie nicht.

5

Ja, wie man (X)HTML richtig verwendet, solltest du schon lernen.
Als Alternative zum etwas in die Jahre gekommenen selfhtml noch ein wikibook über XHTML:
de.wikibooks.org/wiki/Websiteentwicklung:_XHTML

Wenn ich das richtig verstehe, möchtest du die Verweise ohne Text (sollte ergänzt werden),
die in #Inhalt stehen und den Text ‘Test’, der in #Info steht mittels CSS stabil relativ zueinander
positionieren. Dazu sollten jedenfalls beide im selben positionierten Element enthalten sein,
dann kann man beides relativ zu diesem Element positionieren, indem man, wie du es gemacht
hast, position: absolute verwendet. Mit top, bottom, left, right kann man dann die
Positionsangabe machen, damit die Abstände zueinander stabil sind, also entweder immer
gleich oder aber einheitlich skalieren, wird man also für beides passende Einheiten verwenden,
etwa für beides die Einheit em oder für beides %.

Damit du das in endlicher Zeit hinbekommst, mußt du aber auch Grundlagen von CSS lernen,
sonst wird das vermutlich nichts, gibt es etwa auch bei selfhtml. Bei mir gibt es da auch ein paar
Anleitungen und Übungen, die allerdings auch schon etwas älter sind, hierfür wird es aber
vermutlich reichen.

6

Nagut, dann lösche ich das ganze wieder :slight_smile:

Trotzdem danke!