Boardunity & Video Forum

Boardunity & Video Forum (https://boardunity.de/)
-   Programmierung und Datenbanken (https://boardunity.de/programmierung-datenbanken-f23.html)
-   -   html-Box erstellen mit Layout wie Windows-Fenster (https://boardunity.de/html-box-erstellen-layout-windows-fenster-t4755.html)

eBoy 22.03.2007 10:34

html-Box erstellen mit Layout wie Windows-Fenster
 
Hallo Zusammen,

ich bastle gerade an einer HTML-Box, die vom Aufbau her wie ein Windows-Fenster aussehen soll.

Die ganze Box befindet sich in einem Container (.box). Darin findet sich ein DIV mit der Klasse ".boxHeader", die nochmal 2 DIVs aufnehmen soll. Diese beiden DIVs sind dann ".boxTitle" (float: left) und ".boxNav" (float: right, soll z.B. Links zum minimieren oder schließen aufnehmen).
Der Hintergrund soll durchgehend von boxHeader bereitgestellt werden.
Darunter soll sich dann der eigentliche Inhalt der Box in ".boxContent" wieder finden.

Mein Code, der am nähesten am Erfolg dran ist/ war:
Code:

.box { background: none; display: block; margin-bottom: 1em; }
.boxHeader { position: relative; background: #CDCB97; }
.boxTitle
    { float: left; background: transparent; color:gold; font-weight: bold; }
.boxNav
    { float: right; background: transparent; color: gold; font-weight: bold; }
.boxContent { clear:both; background: #FFFEB0; color: black; padding: 0.5em; }

Code:

<div class='box'>
    <div class="boxHeader">
        <div class="boxTitle">Überschrift</div>
        <div class="boxNav">Nav/div>
    </div>
    <div class="boxContent">Inhalt</div>
</div>

Problem bei diesem Code ist, dass der Hintergrund von boxHeader nicht angezeigt wird (fehlt einfach).

Die gesamte Seite besteht aus dem YAML-Framework (3-Spalten-Layout) und den oben erwähnten Boxen, die die Spalten der Seite füllen sollen.

Hat jemand einen Tipp für mein Problem oder gar eine bessere Idee der Umsetzung?


Grüße

eBoy

eBoy 22.03.2007 10:48

Danke das Problem hat sich erledigt...
Dieses Thema kann gelöscht werden.
Es musste in einem Fall lediglich die Höhe der Titelzeile definiert werden.

Mikelbeatz 26.11.2007 17:05

Hallo meboy ich habe mal eine frage an dich du hast ja codes anzeigen lassen in ein extra fenster wie kann ich mir so ein fenster machen ich will auf meiner webseite einen banner anbieten aber wenn ich den code so eingebe kommt ja der banner zum vorschein ihc brauche aber son fenster wie du es hier auch reingepostet hast wer schön wenn du mir sagen könntest wie du das gemacht hast thx

eBoy 26.11.2007 19:33

Da hast du aber ein altes Thema rausgekramt *g*
Ohne Benachrichtigung hätte ich den Beitrag auch gar nicht mehr gesehen ;)

Ich habe kein komplett neues Fenster geöffnet, sondern per CSS diese "Box" in den Vordergrund (vor der eigentlichen Seite) erscheinen lassen. Der eigentliche Seiteninhalt wurde dadurch lediglich verdeckt.

Wie ich das gemacht habe, kann ich dir so aus dem stehgreif gar nicht mehr sagen (habe mich seitdem nicht mehr damit beschäftigt).

Mach dich mal über Positionierung mittels CSS schlau. Dazu kann man mit CSS auch in Ebenen Arbeiten und so Fenster/ Popups im Vordergrund erzeugen.
Die Gestaltung des Fensters musst du dann per HTML/ CSS natürlich selbst vornehmen.

Mikelbeatz 26.11.2007 20:25

wie kann ich denn die box in den vordergrund stellen kannst du mir das bitte erklären iwe du das gemacht hast es ist erlich serh wichtig für mich ichhabe mir eine myspace seite gemacht und will mein banner anbieten kannst ja ma draufklicken
MySpace.com - Mc Asah (NEUER TRACK) - DE - Hip Hop / Rap - www.myspace.com/mcasah2

shob 26.11.2007 20:27

Off-Topic:

Ich habe das dumpfe Gefühl, dass Mikelbeatz von den

Code:

Code-Tags
redet. Falls ja: einfach die spitzen Klammern mit &lt; bzw. &gt; ersetzen.

eBoy 26.11.2007 20:32

Ich müsste das selbst wieder googeln... Sorry.
Positionieren mit CSS geht über das Attribut "position". Das im Vordergrund anzeigen musst du dir suchen.
Außer jemand anders hat das im Kopf....

@pvna:
Ich habe auch momentan keine Zeit mir überhaupt anzuschauen, was er genau meint ;)
Komme ja selbst seit Monaten gar nicht mehr zum Proggen :(


Gruß

Mikelbeatz 26.11.2007 20:51

ich versuche nochmal zu erklären was ich genau vorhabe!
ich habe einen eigenen banner entworfen möchte ihn jetzt auf meiner seite anbieten so das ihn sich andere auch auf deren seite machen können aber wenn ich ihn ganz normal rein poste erscheint ja der banner aber der code soll angezeigt werden so das man ihn kopieren kann ich brauche so ein fenster wie oben bei eboy!

gfc 27.11.2007 12:08

Ein Hoch auf die Interpunktion...

Mikelbeatz 30.11.2007 00:06

kann mir denn keiner sagen wie das funktioniert?ich möchte das unbedingt wissen kann mir bitte einer weiter helfen?

shob 30.11.2007 15:52

Einfach mal lesen? Guckst du Beitrag #6.

backlashforblow 08.08.2011 12:22

Sprechen Sie über "Code-Tags" ?


Wedding Hairstyles


Alle Zeitangaben in WEZ +1. Es ist jetzt 17:03 Uhr.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25