Allgemeine Verständnisprobleme

html.de-Forum HTML, XHTML & CSS
1

Guten Abend,

seit ein paar Tagen versuche ich mich in das Thema XHTML / CSS einzudenken und zu arbeiten. Allerdings gibt es so manche Logik, die sich mir noch nicht erschlossen hat. (Trotz intensiver Lektüre sowie Videokonsums). Ein Rätsel ist mir zum Beispiel die Verwendung von relativen Angaben, egal ob auf Größeneinheiten oder den CSS Befehl ‚position‘ bezogen. Wenn ich eine Seite in Pixel beschreibe, also zum Beispiel left: 100px;, dann wird die Seite doch je nach Auflösung an einer anderen Stelle der des Bildschirms auftreten, oder? Und eine andere Frage zum Positionbefehl. Was soll das? :smiley: Nein, ganz im Ernst. Vielleicht kann mir nochmal in eigenen, unverfremdeten Worten den Sinn näherbringen. Ich bin dankbar für jede Antwort.

PS: Pardon, falls es für solche Fragen einen Thread gibt. Die Müdigkeit…

2

Kommt drauf an, ob du relative oder absolute Positionierung benutzt.

Hast du auch eine konkretere Frage/ Beispiel?

3

Willkommen.

Sehr gut.

Ein Rätsel ist mir zum Beispiel die Verwendung von relativen Angaben, egal ob auf Größeneinheiten oder den CSS Befehl ‚position‘ bezogen.

Zunächst ist es kein Befehl sondern eine Eigenschaft.

Und dann sollte man sich als Einsteiger möglichst nicht mit „positon“ beschäftigen, denn …

dann wird die Seite doch je nach Auflösung an einer anderen Stelle der des Bildschirms auftreten, oder?

eine Webseite richtet sich nie nach Auflösungen. Sie richtet sich nach dem Platz den ihnen der Browser des Betrachters zugesteht. Und diese Maße entsprechen so gut wie nie den Werten einer Auflösung. Links und rechts fallen immer Ränder weg (unterschiedliche Pixelanzahl), oben und unten stehen bekanntlich auch viele verschiedene Symbolleisten und Hilfmittelchen die den Bereich einer Webseite einschränken.

Und eine andere Frage zum Positionbefehl. Was soll das? :smiley: Nein, ganz im Ernst. Vielleicht kann mir nochmal in eigenen, unverfremdeten Worten den Sinn näherbringen. Ich bin dankbar für jede Antwort.

Ernsthaft? Beschäftige dich zuerst mit allem anderen, nur nicht mit position. Diese Eigenschaft kommt für dich erst später dran, z.B. beim Bau eines Ausklappmenüs. So umgehst Du viele Probleme als Einsteiger und kannst dich ganz auf die vielfältigen Möglichkeiten von CSS ohne diese Eigenschaft konzentrieren.

4

wesshalb sollte man sich nicht mit dem Thema positioning befassen? gerade das absolute positionieren ist eigentlich sehr einfach zu verstehen.

Jedes absolut positionierte Objekt (sprich

,

, usw) richtet sich an dem nächst höheren absolut positionierten Objekt aus. Dazu muss man noch wissen dass das HTML- respektive das body tag ebenfalls absolut ist.
So um das in einem beispiel zu verdeutlichen (das doctype lass ich hier mal weg):

[HTML]

textexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextt

textexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextt

[/HTML] hoffe es ist dir nun ein bisschen klarer.
5

Absolute Positionierung entfernt die betroffenen Elemente aus dem Fluss, dadurch kommt es (wie auch hier) zu häufigen Problemen und Fragen bzgl. der Ausrichtung dieser Elemente, was vor allem in Bezug auf den Viewport für Einsteiger meist nur schwer nachvollziehbar ist. Daher kann ich Einsteigern nur davon abraten damit anzufangen. Das fördert nicht das Verständnis für CSS, es führt eher zu vielen Stirnrunzlern und Fragen die sich dann auch hier im Forum niederschlagen.

6

aber gerade wenn man das absolute positionieren versteht dann dürften sich einige fragen was die kaskadierung angeht ziemlich schnell erübrigen. ergo wenn man die kaskadierung des css versteht versteht man auch die absolute positionierung und umgekehrt.

7

Das Problem ist aber eben das fehlende Verständnis für die absolute Positionierung. Wie man in diesem Topic auch gesehen hat, erschließen sich Einsteigern nicht automatisch die daraus resultierenden Probleme. Das kann man eben umgehen, wenn man auf diese Positionierungen zunächst verzichtet.

8

Also zunächst einmal vielen Dank für die Antworten und die Hilfe. Ich bin im Verlauf meiner Recherche auf die w3cSchool Seite gestoßen. Meiner Meinung erklären sie dort wirklich genial. Äußerst logisch und mit hervorragenden Beispielen sowie dem Online Editor zum nachvollziehen. Ich bin gerade dabei eine Seite zu „machen“, sie ist absolut zweckfrei und dient lediglich der Übung. startpunkt

Den HTML Code könnt ihr ja über die Quellcode Ansicht einsehen, die CSS Datei füge ich hier bei. Ich bitte einfach darum, dass ihr mir erklärt wo gravierende Fehler vorliegen und was möglicherweise instabil/unsicher ist, was Veränderungen betrifft. Also einfach eine kurze Zusammenfassung dessen, was ich falsch gemacht habe.

[CODE]html, body
{
background-color: #c0c0c0;

}

div#header
{
position: relative; left: 41px;
background-image: url(header-bg-whole.jpg); color: white;
width: 500px;
height: 140px;
text-decoration: underline; font-family: Verdana; font-weight: bold;
border: 1px solid gray;

}

div#menu li
{
position: relative;
top: -20px;
float: left; left: 1px;
list-style: none;
background-image: url(nav-bg.jpg);

}

ul a
{

display: block;
color: white; text-align: center; text-decoration: none;
width: 100px;
background-image: url(nav-bg.jpg);
background-color: #666666;

}

ul a:hover
{
background-image: url(nav-bg-hover.jpg);
background-color: #bf8181; color: white;
}

div#content
{
position: relative; width: 500px; left: 41px;
background-color: white; color: black;
border: 1px solid gray;
}

div#content p
{
padding: 5px;
}

div#header h1
{
display: block; width: 200px;
font-size: 14px; font-family: Verdana; font-weight: bolder;
padding: 5px; text-transform: uppercase;
}

div#content h2
{
font-size: 13px; font-family: Verdana; font-weight: bold;
padding: 5px; color: #bf8181;
}

p.pcontent:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
color: gray;
}

.bordered-left
{
border-left: 1px solid gray;
}

.bordered-right
{
border-right: 1px solid gray;
}

h1 a
{
color: white;
}

h1 a:hover
{
color: #e2e2e2;
}[/CODE]

vielen Dank und frohe Weihnachten!

9

Schick gemacht. Also rein vom Quellcode her. Ansehnlich ist was anderes :wink:

Mir fällt nur ein was auf was ich anders machen würde: statt die Abstände nach links mittels position: relative und left zu erreichen, würde ich margin dafür verwenden.

10

Die Seite ist zum Testen da, deshalb sieht sie ein bisschen grausam aus. ;> Also du meinst der Code ist an sich sauber? Das ist schonmal gut. Warum margin, hat das irgendwelche realen Vorteile oder ist es einfach bloß Mode? Und kann mir irgendjemand erklären, warum ich die width auf 502px setzen musste, damit der Header genauso breit ist, wie Navi und Content? Das ist in der von mir geposteten CSS Datei noch nicht, aber wenn man per Firebug die aktuell hochgeladene Seite ansieht schon. Ich kanns mir einfach gar nicht erklären…

11

Keine Mode. Position, egal mit welchem Wert, sollte man nur verwenden, wenn man weiß worum es geht und wenn man mehrere Elemente übereinander schieben möchte. Du möchtest inhaltlich gesehen aber einen Abstand nach links. Dafür ist „margin“ (Abstand) zuständig. Natürlich kannst Du es auch so machen wie Du es jetzt getan hast, das ist aber inhaltlich nicht ganz korrekt, auch wenn es vermutlich zu keinen Problemen in der Anzeige führen wird.

Und kann mir irgendjemand erklären, warum ich die width auf 502px setzen musste, damit der Header genauso breit ist, wie Navi und Content?

In „div#content“ gibst Du zusätzlich zur Breite von 500px auch einen Rahmen (border) an der auf jeder Seite 1 Pixel beträgt. Somit ist die tatsächliche Breite 500 px + 1px (links) + 1px (rechts). Beim Header musst Du nun 502px angeben damit diese Breite erreicht wird und links und rechts alles bündig ist.

12

Tatsache. Ich hab die ganze Zeit gedacht, der Header hätte auch Rahmen. Besten Dank erstmal. Ich bin sicher bis zum nächsten Rästsel ist es nicht mehr lang. :wink:

13

Und es ist soweit. Heute habe ich mal wieder hingesetzt und wollte mal ein Muster erstellen für eine Homepage die sich über die gesamte Breite zieht. Dabei habe ich durch mein Unvermögen leider ca. 1000 Bugs verursacht. Zunächst einmal ist mir nicht klar, warum der Hover-Effekt der Navigation nur im Firefox funktioniert. Dann, wieso bleibt der Footer nicht am Boden? Egal ob ich top: 100%; oder bottom: 0%; eingebe, oder das gleiche mit px angabe, es funktioniert nicht. Weshalb geht der Contentbereich über die Navigation und den Header wenn man näher ranscrollt? Auch sonst, wenn ihr Fehler entdeckt, oder andere Tipps für mich habt, bitte nicht zögern. Titel

mfg

14

Hallo.

Also deine footer hast du absolut positioniert. Damit nimmst du ihn aus dem normalen Textfluss, entferne die absolute Positionierung.
Deinen content hast du auch absolut positioniert. Entferne auch diese Positionierung.

Absolute Positionierungen sind bei deinem einfachen Layout nicht nötig.

Gruss
Elroy

15

Hi,

also ohne die absolute Positionierung macht der Footer was er will, und das ist irgendwo auf der Mitte der Seite rumsitzen. Und hat jemand eine Idee, wieso ich weder per margin noch per padding die Schrift bei der Navigation verrücken kann? Es funktioniert einfach nicht.

PS: Warum füllt die

Navigation nicht die ganze Breite aus, wenn ich die Seite in Opera öffne?

16

Dein Problem ist wie von Elroy bereits erwähnt die absolute Positionierung.
Meine Empfehlung: Fang nochmal komplett neu an und verzichte generell auf absolute Positionierungen. Die heißen so, weil sie meist absolut unnötig sind und viele Probleme verursachen und man sie nur dann verwenden sollte, wenn man sich absolut sicher sind, was sie bedeuten.

Vermeide ferner, prozentuale und Pixeleinheiten zu vermischen, weil man die nicht auf einen gemeinsamen Nenner bringt.

Wenn du nochmal komplett neu anfängst, dann zentriere zunächst wie hier beschrieben: Horizontale Zentrierung mit CSS

Den #header-div brauchst du nicht. Das kannst du direkt bei h1 hinterlegen.

Für die Navi findest du hier eine Anleitung: Horizontale Listennavigation

Den Footer fügst du entweder nach dem Content ein oder kannst du danach immer unten anordnen: http://http://www.ohne-css.gehts-gar.net/0044.php

17

Da die Seite ja nur zum Ausprobieren da ist: kein Problem neu anzufangen. Ich werde das die nächste Zeit sowieso dauernd machen. Ist das Problem bei Pixelangaben aber nicht, dass auf einem anderen Bildschirm oder einer anderen Auflösung die Seite dann wirklich an einer ganz anderen Stelle zu finden ist?

Und vielen Dank.

18

Nein. Gerade bei Pixelangaben bewirkst du ein verlässliches und klakulierbares Layout.
Wenn bestimmte Inhalte je nach Bilschirmfenstergröße (mit Auflösung hat das nichts zu tun) an anderen Stellen dargestellt werden, dann hängt das eben mit der unheilvollen bzw. falsch angewandten absoluten Positionierung zusammen.

19

Ok, und woran könnte liegt es, dass manche Container bei mir auf top left right oder so nicht reagieren, auf margin-top right left etc. jedoch teilweise schon?

20

Vergiss doch einfach mal alles, was mit position und den dazugehörigen top/left/right/bottom-Werten zu tun hat.
Einfach alles löschen.

Ist ähnlich wie in der Schule: Lerne zunächst die Grundrechenarten, bevor du dich an höhere Mathematik wagst.