Html - Objekte Positionieren
Anzeige
#2
geschrieben 19. Oktober 2006 - 12:49
Dürfte aber tricky werden. Stichwort: Größenänderung des Fensters.
#4
geschrieben 19. Oktober 2006 - 13:03
Wenn der bereich mit menü und übersicht immer die gleiche größe haben soll, egal wie groß das browserfenster ist, dann müssen die einzelnen navi-elemente (1, 2, 3, ...) eben nicht absolut zum browserfenster, sondern innerhalb eines als position:relative; definierten div-containers mit fester breite angeordnet werden.
Um das einfacher zu halten, würde ich von der rechten oberen ecke als positionierungsursprung ausgehen, dabei wäre dann aber oben links zwischen fensterrahmen und menüelement 1 sowas wie ein variabel langer freiraum - genauso unten rechts.
#5
geschrieben 19. Oktober 2006 - 13:44
Muss ich denn jetzt für jeden Button im CSS ein Objekt erstellen oder wie schaut das dann in HTML/CSS aus ? Könnt ihr das vielleicht mal kurz beschreiben bzw. ein Beispiel geben ?
Dieser Beitrag wurde von mTc bearbeitet: 19. Oktober 2006 - 13:45
#6
geschrieben 19. Oktober 2006 - 13:53
mTc sagte:
Jupp, am besten trennst du in Klassen für's Aussehen (Ränder, Hintergrund etc.) und in solche für die Positionierung.
For Emails always use OpenPGP. My KeyID: 0xA1E011A4
#7
geschrieben 19. Oktober 2006 - 14:03
Zitat (Graumagier: 19.10.2006, 14:53)
Sorry, das übersteigt etwas meine Kompetenzen bzw. Wissensstand
Kannst du mir bitte vielleicht mal ein Beispiel geben ?
Für die Buttons sollen Grafiken verwendet werden und es soll einen hover- und aktiv-Effekt geben.
#8
geschrieben 19. Oktober 2006 - 14:12
a.button1:link { position:absolute; top:WWpx; left:XXpx; height:YYpx; width:ZZpx; background:url($IMAGE); } a.button1:hover { background:url($IMAGE_HOVER); }
Dieser Beitrag wurde von Graumagier bearbeitet: 19. Oktober 2006 - 14:13
For Emails always use OpenPGP. My KeyID: 0xA1E011A4
#9
geschrieben 19. Oktober 2006 - 14:37
CSS
.btn_startseite { position:absolute; top:5px; left:10px; height:15px; width:15px; background:url(../images/icons/navi_impressum.gif); } a.btn_startseite:hover { background:url(../images/icons/navi_impressum_hover.gif); }
HTML
<class="btn_startseite"> </class>
Aber so Recht wird nix angezeigt
Mein Fehler, man sollte das natürlich in den bereits existierenden Navi-Block schreiben.
#10
geschrieben 19. Oktober 2006 - 14:40
mTc sagte:
Das wundert mich gar nicht. Du solltest dir mal entsprechende Dokumentationen durchlesen.
<div class="btn_startseite"></class>
Ist natürlich alles andere als schön. Würde ich sogar eher mit JavaScript realisieren, dann stellt's zwar nicht jeder Browser dar, aber der Code bleibt ordentlicher.
Schöner wird's natürlich, wenn nur der Hintergrund des Buttons gewechselt werden soll und die eigentliche Beschriftung des Textes als regulärer Text in HTML geschrieben wird.
Dieser Beitrag wurde von Graumagier bearbeitet: 19. Oktober 2006 - 14:44
For Emails always use OpenPGP. My KeyID: 0xA1E011A4
#11
geschrieben 19. Oktober 2006 - 15:24
CSS
#btn_startseite { position:absolute; top:15px; left:10px; }
HTML
<div id="btn_startseite"> <a href="./html/ger_main.html"><img src="./../images/icons/navi_impressum.gif" alt="Startseite" title="Startseite" border="0" width="35px" height="40px"></a> </div>
Dürftet ihr zwar die Hände über den Kopf zusammen schlagen, aber es funktioniert erstmal.
Wie bekomme ich da jetzt aber einen Hover-Effekt, bei dem das Bild ausgetauscht wird ?
Wenn man auf die Grafik klickt, soll sich im Content-CSS-Block eine andere HTML-Seite öffnen. Wie realisiere ich dies ?
#12
geschrieben 19. Oktober 2006 - 15:29
mTc sagte:
So gar nicht. Über background:url($IMAGE); schon. Das ist AFAIK die einzige Möglichkeit, das ganze mit CSS zu realisieren.
mTc sagte:
Gar nicht. PHP und include() sind angesagt. Oder mal ein HTML-Kurs.
For Emails always use OpenPGP. My KeyID: 0xA1E011A4
#13
geschrieben 19. Oktober 2006 - 17:48
#14
geschrieben 20. Oktober 2006 - 08:13
Zitat (Graumagier: 19.10.2006, 16:29)
Es gibt ja in HTML die Möglichkeit Frames etc. anzulegen und damit die Seite wieder in Bereiche zu unterteilen und auf diese in Links mittels target=... zu verweisen, oder ?
Was ich nur nicht verstehe, ich hab die Seite doch schon mittels CSS unterteilt und wenn ich jetzt mit Frames anfange, ist das doch sicher ein großes durcheinander bzw. steht mit dem CSS in Konflikt.
Im Anhang nochmal das aktuelle Layout. Ziel ist es, dass sich im grünen und blauen Bereich die entsprechende Seite öffnet, wenn man im roten auf das jeweilige Symbol klickert.
#15
geschrieben 20. Oktober 2006 - 09:56
mTc sagte:
Ja, aber das will man aus gutem Grund nicht.
For Emails always use OpenPGP. My KeyID: 0xA1E011A4
- ← Rss/atom-reader Auf Basis Php
- Skript/Web-Programmierung
- Suche Eine Lösung Für Get-/include Problem →