rahmen um div legen :: webwork-community.net

Forum » Auszeichnungssprachen » rahmen um div legen

Antworten

rahmen um div legen

beule

Otto-Normal-Poster

Beiträge: 92

Erstellt am: 10.10.2005 09:56

hallo zusammen

also ich hab follgende frage:

ich möchte um mein div einen rahmen legen, dafür habe ich 8 bilder, eins für jeden ecken und jeweils eins pro seite. nun die frage, wie ich dass jetzt am besten mache. als background-images kann ich sie ja nicht einbinden, es gibt ja kein background-top-left-images oder so.
also wie macht man das normalerweise?
danke
gruss beule

Profil E-Mail Editieren Zitieren

progrookie

Fachidiot

Beiträge: 128

Erstellt am: 10.10.2005 13:04

Mein Ansatz wäre das Du für die 4 Ecken jeweils eine Klasse machst.
Danach könntest Du dir einen Table-Template bauen, in dem du nur noch die Überschrift und den Inhalt hinein machst.

Zum Beispiel:

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: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37:

 $output    ="<table class='content' cellpadding='0' cellspacing='0' border='0' width='" .$Breite ."' align='" .$Align ."'>\n"
            // Header
            ."<tr>"
            ."  <td class='TableEckeLinksOben' height='7'></td>"
            ."  <td class='TableOben'></td>"
            ."  <td class='TableEckeRechtsOben' height='7'></td>"
            ."</tr>\n"

            // Überschrift
            ."<tr>"
            ."  <td class='TableLinksHeader' width='7'></td>"
            ."  <td class='TableHeader' align='" .$AlignHeaderUeberschrift ."'><img src='" .$HeaderSymbol ."' alt='' border='0'>" .$HeaderKopf ."</td>"
            ."  <td class='TableRechtsHeader' width='7'></td>"
            ."</tr>\n"
 
            ."<tr>"
            ."  <td class='TableLinks' width='7' height='5'></td>"
            ."  <td height='5'></td>"
            ."  <td class='TableRechts' width='7' height='5'></td>"
            ."</tr>\n"

            // Content
            ."<tr>"
            ."  <td class='TableLinks' width='7'></td>"
            ."  <td>" .$tdInhalt ."</td>"
            ."  <td class='TableRechts' width='7'></td>"
            ."</tr>\n"

            // Footer
            ."<tr>"
            ."  <td class='TableEckeLinksUnten' height='6' ></td>"
            ."  <td class='TableUnten' height='6'></td>"
            ."  <td class='TableEckeRechtsUnten' height='6'></td>"
            ."</tr>\n"
            ."</table>\n";
 
 return $output;

---

Diese Nachricht wurde geändert von: progrookie

Profil E-Mail Website Editieren Zitieren

beule

Otto-Normal-Poster

Beiträge: 92

Erstellt am: 10.10.2005 14:16

hey progrookie
danke für deine antwort.
das mit den tabellen habe ich mir schon überlegt, aber ich möchte eigentlich ein tabellen freies layout machen.

Profil E-Mail Editieren Zitieren

Netbuster

Fachidiot

Beiträge: 128

Erstellt am: 10.10.2005 14:17

Beispiel von Selfhtml:

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: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52:

<style type="text/css">
<!--
/* hier beginnt das für die Box relevante CSS  */

div {
	margin:0;
}

.ro {
	background:url(roundedbox_ro.gif) top right no-repeat;
}

.lo {
	background:url(roundedbox_lo.gif) top left no-repeat;
}

.ru {
	background:url(roundedbox_ru.gif) bottom right no-repeat;
}

.lu {
	background:url(roundedbox_lu.gif) bottom left no-repeat;
}

.inhalt {
	margin:0;
	padding:2.5em 2.5em 3.5em 2.5em;
}

.inhalt p {
	margin:0;
	padding:0;
}

-->
</style>
<body>
<h1>Beispielseite "Runde Ecken" </h1>
<h2>Fertige Box </h2>
<div class="ro"> 
  <div class="lo">
    <div class="ru"> 
      <div class="lu"> 
        <div class="inhalt"> 
          <p>Hier dann der Text.</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

Diese Nachricht wurde geändert von: Netbuster

Profil Editieren Zitieren

	Antworten