Benötige etwas Hilfe für richtige Ausrichtung

[Jonas]

Hi Leute,

auf meiner Seite Programmer's Cave gibt es noch 2 Probleme, die Überschrift wird
zu niedrig angezeigt und ich weiß nicht wie ich  das ändern kann :(
Außerdem gibt es ein mir nicht verständliches Problem mit dem footer.
Hier noch ein link zum CSS Style und jetzt noch einer zur index.htm link. (Die beiden Files sind in einem Paste-Bin gehostet.)

MfG Jonas ;-)

[Gunnar Bittersmann]

@@Jonas:

nuqneH

auf meiner Seite Programmer's Cave

Nein, deine Seite ist http://programmers-cave.square7.ch/programmers-cave/. Warum verlinkst du unsinnigerweise ein Frameset? Und was soll dieses unsinnige Frameset überhaupt?

gibt es noch 2 Probleme,

Es sind mehr. Die Seite ist krank, Diagnose: Divitis.

Das Element div[@class="site"] ist völlig überflüssig.

die Überschrift

Auf deiner Seite ist keine Überschrift.

wird zu niedrig angezeigt

Bei '.header img { vertical-align:bottom }' sollte man sich nicht wundern, wenn die Unterkanten von Bild und Schrift (Zeilenbox) auf einer Linie liegen.

Außerdem gibt es ein mir nicht verständliches Problem mit dem footer.

Wenn linker und rechter Container dieselbe Höhe haben, der rechte aber zusätzlich noch oben und unten jeweils 5 Pixel Padding … Das Box-Modell [CSS2 §8] kennst du?

Qapla'

[Jonas]

Hi Leute!

@Gunnar Bittersmann:
Wo ist da ein unsinniges Frameset bzw. was ist damit gemeint?
Das site-Element dient als Container für die anderen Elemente
und hat eine andere Hintergrundfarbe als das body-Element.

Ich habe nun einen DOCTYPE eingefügt, die Überschrift in ein h1-Element gepackt und 'expample' in example geändert. Erfreulicherweise hat sich
das 'footer-Problem' nun von selbst gelöst. Mein verbliebenes Problem
ist nun, dass die Grafik nicht mehr rechts am Rand 'überstehend' angezeigt
wird sondern in der nächsten Zeile, wie kann ich die Grafik rechts an den Rand überstehend bekommen? (Programmer's Cave)

MfG Jonas

[Der Martin]

Hallo,

Wo ist da ein unsinniges Frameset bzw. was ist damit gemeint?

na dieses Frameset hier auf http://www.programmers-cave.net/programmers-cave, in dem nur ein einziges Frame den gesamten Platz einnimmt und in Wirklichkeit von http://programmers-cave.square7.ch/programmers-cave kommt:

<frameset rows="*" style="border: 0px;">  
  <frame frameborder="0" src="http://programmers-cave.square7.ch/programmers-cave" name="dj9812u3jeq02" scrolling="auto">  
  <noframes>  
    <h2>Ihr Browser unterstützt leider keine Frames!</h2><br><br>  
    <h3>Klicken sie <a href="http://programmers-cave.square7.ch/programmers-cave">hier</a> um zu der Seite die sie angesteuert haben zu gelangen</h3>  
  </noframes>  
</frameset>

Dadurch, dass nur ein einziges Frame bildfüllend angezeigt wird, ändert sich zwar nichts an der Darstellung, aber du drückst dem Besucher alle Nachteile von Frames aufs Auge - ganz besonders den, dass die Adresszeile des Browsers die ganze Zeit unverändert bleibt und so die Navigation und Orientierung empfindlich behindert wird.

Ich habe nun einen DOCTYPE eingefügt, die Überschrift in ein h1-Element gepackt und 'expample' in example geändert. Erfreulicherweise hat sich das 'footer-Problem' nun von selbst gelöst.

Und da du immer noch keine Angaben zur Zeichencodierung machst, lauert das nächste Problem schon hinter der nächsten Hecke auf dich, sobald du Umlaute oder andere Nicht-ASCII-Zeichen hast.

Mein verbliebenes Problem ist nun, dass die Grafik nicht mehr rechts am Rand 'überstehend' angezeigt wird sondern in der nächsten Zeile

Ja, und die Schrift läuft auch noch weit nach rechts aus dem Container.

wie kann ich die Grafik rechts an den Rand überstehend bekommen? (Programmer's Cave)

Indem du sie zum Beispiel nach rechts floaten lässt.

Und dass du mir ein Werbe-Popup an den Kopf schmeißen willst, sobald ich mal versehentlich JS noch aktiv habe, gibt deiner Seite auf meiner Bewertungsskala deutliche Minuspunkte. Okay, so hat der Popup-Blocker wenigstens auch mal etwas zu tun.

Ciao,
 Martin

[Jonas]

Hi Martin,

Ich habe als meta-Element eine Angabe über die Zeichenkodierung gemacht (Latin-1), außerdem habe ich den Frame entfernt. Die Werbepopups tun mir
leid, ich nehme an, dass sie durch den kostenlosen Hoster square7.ch verursacht werden. Die Grafik ist nun nach rechts gefloatet also:

.header img {
  float: right;
}

Was allerdings extrem komisch aussieht und auch nicht so gedacht ist.
Die Grafik soll ja eigentlich auf der unteren rechten Ecke vom header liegen,
so dass sie ein Stück in den content ragt und außerhalb von site.
klick
Hoffe du verstehst was ich meine ;-)

MfG Jonas

[Der Martin]

Hallo Jonas,

Die Werbepopups tun mir leid

mir auch. ;-)

ich nehme an, dass sie durch den kostenlosen Hoster square7.ch verursacht werden.

Davon gehe ich auch aus.

Die Grafik soll ja eigentlich auf der unteren rechten Ecke vom header liegen, so dass sie ein Stück in den content ragt

Sie soll tatsächlich in den Content-Block hineinragen? Hmm ...
Da würde ich die Grafik als Kind des h1-Elements notieren, und innerhalb dieses Elements absolut mit top: 0; right: -100px; ausrichten (nur ein Schätzwert). Die Überschrift bekommt dann soviel padding-right, dass der Rest des Bildes gerade so dort hinpasst.

Ich hatte zum Testen:

<h1>Programmer's Cave<img src='image.png'></h1>

h1  
 { margin: 0 160px;  
   border: 1px solid #FF8080;  
   position: relative;  
 }  
h1 img  
 { position: absolute;  
   top: 0;  
   right: -128px;  
 }

Den border für h1 hatte ich nur, um die Abmessungen des Elements zu visualisieren.

So long,
 Martin

[Jonas]

Hi Martin,
Wozu das margin und position: relative ?
Ich habe es jetzt so gemacht:

.header h1 img {
  position: absolute;
  top: 30px;
  right: 125px;
}

Hoffe, dass es bei so aussieht wie bei mir^^

MfG & Schönen Abend Jonas ;-)

[Der Martin]

Hallo,

Wozu das margin und position: relative ?

ein wenig margin, um rechts Platz zu schaffen - normalerweise würde h1 ja die gesamte Breite einnehmen, und wenn ich dann das Bild noch aus dem Element herauspositioniere, entsteht ein horizontaler Scrollbalken. Also mach ich das h1 lieber etwas schmaler (margin).
Die Angabe von position:relative sorgt dafür, dass die absolute Positionierung des Kindelements sich auf das h1-Element bezieht. Lies im Zweifelsfall nochmal nach, wie absolute Positionierung funktioniert, und woran sie sich orientiert.

.header h1 img {
  position: absolute;
  top: 30px;
  right: 125px;
}

Und kein position:relative; für h1? Dann bezieht sich die Position (right, top) auf das Browserfenster. Das kann passen, muss aber nicht.

Ciao,
 Martin

[Der Martin]

Hallo,

auf meiner Seite Programmer's Cave gibt es noch 2 Probleme

nein, mehr. Erstens lautet die URL in Wirklichkeit http://programmers-cave.square7.ch/programmers-cave/, zweitens fehlt eine DOCTYPE-Angabe (du schickst die Browser also hemmunglos in den Quirks Mode), drittens gibt es nicht den leisesten Hinweis auf die verwendete Zeichencodierung - weder im HTTP-Header, noch als meta-Element.

die Überschrift wird zu niedrig angezeigt und ich weiß nicht wie ich  das ändern kann :(

Welche Überschrift? Meinst du den Schriftzug "Programmer's Cave", den du in ein nichtssagendes div-Element verpackt hast? Eine Überschrift wäre beispielsweise ein h1-Element.

Die sogenannte "Überschrift" liegt übrigens mit dem Bild, das direkt danach folgt, auf einer Grundlinie - zumindest Firefox sieht das so. Opera richtet beides -also Text und Bild- an der Oberkante aus. Da du selbst keine Angaben dazu machst, dürfen die Browser hier nach eigenem Ermessen raten, zumal du sie mit dem Quirks Mode dazu ermutigst.

Dass der Schriftzug auch nach rechts über den Rand des div-Elements und damit über das sichtbare Kästchen hinausgeht, sieht auch nicht aus wie gewollt. Das ist das Problem mit festen Größen: Du weißt nie im Voraus, wie groß die beim Besucher verwendete Schrift tatsächlich wird.

Außerdem gibt es ein mir nicht verständliches Problem mit dem footer.

Gut. Dann verrate uns bloß nicht, welches. ;-)

Hier noch ein link zum CSS Style und jetzt noch einer zur index.htm link. (Die beiden Files sind in einem Paste-Bin gehostet.)

Warum? Du hast die Seite online, die Quellcodes sind also mühelos "live" einsehbar.
Einen netten Tippfehler hast du noch drin: "expample" gefällt mir. :-)

So long,
 Martin

[Jonas]

Hallo,

dankeschön für die Tips, die ich versuchen werde umzusetzen.
Dass ich die Begriffe teilweise falsch verwende tut mir leid,
ich bin noch nicht so erfahren im Feld der Websitegestaltung/CSS.

MfG Jonas ;-)