PHP Portal » PHP Forum » Entwicklung » Webdesign mit HTML, CSS sowie Javascript » Bilder um einen Bereich einfügen wie einen Rahmen

Bilder um einen Bereich einfügen wie einen Rahmen 

von
Neuling
Zitat
Hallo,
ich würde gerne um einen Bereich, also ein Blockelement (div), Bilder hinzufügen, die dann wie ein Rahmen wirken.

Ich habe versucht einzelne div container in einander zu verschachteln, da ja jedes div ein Blockelement ist, dürfte das gehen, doch es funktioniert nicht.
Würdet ihr bitte schauen ob ich es richtig gemacht habe:

Erstmal meine body css(welcher zu vernachlässigen ist)

Code
1
2
3
4
5
6
body { color: black; background-color: white; font-size: 100.01%; font-family: Helvetica,Arial,sans-serif; margin: 0; padding: 1em; min-width: 41em; /* für neuere Browser */


Jetzt der Versuch die Bilder wie einen Rahmen wirken zu lassen:

Html Code:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="headerout"> <div id="links1"> <div id="links2"> <div id="links3"> <div id="mitte1"> <div id="mitte2"> <div id="rechts1"> <div id="rechts2"> <div id="rechts3"> <div id="headerin"> </div><!--close div id="headerin--> </div><!--close div id="rechts3--> </div><!--close div id="rechts2--> </div><!--close div id="rechts1--> </div><!--close div id="mitte2--> </div><!--close div id="mitte1--> </div><!--close div id="links3-->
für die ungekürzte Fassung bitte einloggen


und jetzt die css:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div#headerout { height:100%; width:100%; } /*Der Container der die Bilder anzeigen soll die dann für den Header-Inhalt dienen*/ div#links1 { height:10%; width:10%; text-align:left; margin-top:0%; margin-left:0%; background-image:url(layout/png/layout-content/oben-links.png); } /*Bild für die Ecke oben links*/ div#links2 { height:80%; width:10%; text-align:left; margin-top:10%;
für die ungekürzte Fassung bitte einloggen


Die Bilder werden überhaupt nicht angezeigt. Würdet ihr mir bitte helfen.

Würdet ihr das auch so machen und die einzelnen div's in einander verschachteln oder doch Inlineelemente in die div's verschachteln wie z.B. span's oder doch etwas ganz anderes?

Danke sehr.

Werbung

Re: Bilder um einen Bereich einfügen wie einen Rahmen 

von
Neuling
Zitat
Etwas wage deine Beschreibung.

Schau mal unter
http://www.ohne ... ar.net/0021.php
http://www.fran ... lderrahmen.html

Ob das sowas ist was du suchst.

Mfg Splasch

Re: Bilder um einen Bereich einfügen wie einen Rahmen 

von
Neuling
Zitat
Hallo Splasch,

danke für deine Antwort, doch ich suche nach einer Möglichkeit um Bilder/Grafiken um einen Bereich anzuordnen so das sie wie ein Rahmen für diesen Bereich wirken, also das genaue Gegenteil der Möglichkeit die in deinen Links beschrieben wird.

Ich gebe dir ein Beispiel mit einer Grafik:

Re: Bilder um einen Bereich einfügen wie einen Rahmen 

von
Neuling
Zitat
Hab kaum Zeit, Grössen musst du dir selbst anpassen:

Code
1
2
3
4
5
6
7
8
9
<div id="apDiv1" style="position: absolute; left: 15px; top: 18px; width: 110px; height: 23px;">links1</div> <div id="apDiv2" style="position: absolute; left: 131px; top: 18px; width: 116px; height: 23px;">mitte1</div> <div id="apDiv3" style="position: absolute; left: 253px; top: 18px; width: 138px; height: 23px;">rechts1</div> <div id="apDiv4" style="position: absolute; left: 15px; top: 43px; width: 110px; height: 23px;">links2</div> <div id="apDiv5" style="position: absolute; left: 131px; top: 43px; width: 116px; height: 23px;">center</div> <div id="apDiv6" style="position: absolute; left: 253px; top: 43px; width: 138px; height: 23px;">rechts2</div> <div id="apDiv7" style="position: absolute; left: 15px; top: 68px; width: 110px; height: 23px;">links3</div> <div id="apDiv8" style="position: absolute; left: 131px; top: 68px; width: 116px; height: 23px;">mitte3</div> <div id="apDiv9" style="position: absolute; left: 253px; top: 68px; width: 138px; height: 23px;">rechts3</div>

Re: Bilder um einen Bereich einfügen wie einen Rahmen 

von
the Boss
Zitat
ich würde das Ganze doch eher etwas dynamisch gestalten

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="box"> <div class="top"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="center"> <div class="left"></div> <div class="content">hier kommt der Inhalt rein</div> <div class="right"></div> </div> <div class="bottom"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </div>

Die Klassen right und left werden absolut rechts und links positioniert (dazu muss box eine Positionierung haben)
und die einzelnen Teile kannst du im CSS gut über die Klassen ansprechen

links-oben zB: .top.left { ... }

Re: Bilder um einen Bereich einfügen wie einen Rahmen 

von
Neuling
Zitat
Ich habe die Seite mal online gestellt:

http://www.internet-stranica.org/test/

Doch wie bekomme ich die Abstände zwischen den inline Elementen weg, gibt es auch eine Möglichkeit damit der IE7 die div's als inline elemente abzeigt?

Edit: Hab einen weg gefunden wie man die block elemente auch im ie als inline angezeigt bekommt, ohne float benutzen zu müssen, die Methode steht in der css auf der oben verlinkten website.

Doch jetzt wie bekomme ich die Abstände weg .

Re: Bilder um einen Bereich einfügen wie einen Rahmen 

von
the Boss
Zitat
Abstand, weil die linken Elemente bei dir 43px breit sind, aber das Bild nicht?

Wozu hast du da die Klassen centerleft und so?
Einfach immer left etc angeben, und im Stylesheet die Klassen OHNE Leerzeichen notieren

".top.left" bedeuted: alle Elemente, welche beide Klassen zugewiesen bekommen haben.

Hat den Vorteil, du kannst alle linken Elemente einfach per .left defineren, alle oberen mit .top, usw.

also sowas

Code
1
2
3
4
.left { width: 15px; } .top { height: 20px; } .right { width: 25px; } .bottom { height: 30px; }


damit hat die Ecke .top.left automatisch Höhe und Breite

Schnellantwort