Thursday, July 29th 2010, 1:34pm UTC+2

You are not logged in.

  • Login
  • Register

[CSS-Goodies] Layer

undefined

Super Moderator

Posts: 4,248

Location: Germany

1

Monday, August 18th 2003, 6:15pm

[CSS-Goodies] Layer

Es wurde vor kurzem in einem Beitrag das Thema Tabellen oder Layer angesprochen!
Über Vorteile - Nachteile - veraltet und nicht veraltet. Daher möchte ich einmal Kurz eine kleines Tutorial zu diesem Thema Schreiben. Aber zuvor zum Streit-Thema ob Tabellen verwenden oder nicht. Ich sage aus Erfahrung - Primär sind Tabellen zu verwenden weil sie zum einen Leicht zu Formatieren sind und zum anderen ohne weiteres dynamisch an eine Seite angepasst werden können ohne das Layout zu sprengen. Einen Verzicht von Layern würde ich jetzt nicht befürworten weil zum einen - gerade was Templates betrifft eine große Bereicherung sind und sie einen entscheidenden Vorteil besitzen auf den wir Später noch kommen werden. Mein Fazit des ganzen ? die Mischung machts. ;)
Wie bei jedem erstellen einer Webseite steht die Planung an vorderster stelle. Dies gilt besonders dann ? wenn man mit Layern arbeiten möchte. Denn das Arbeiten mit Layern besitzt einen entscheidenden Nachteil der manchmal fatale folgen mit sich ziehen kann. Nämlich dann - wenn Änderungen von Nöten sind ? sprich Seitenupdate. Jeder der schon etwas länger Webseiten erstellt und dann Seiten von Kunden Ändern muss weis das es Mühsam sein kann bis man sich wieder zurecht findet. Und wenn man einen bock (Fehler) drin hat, kann dies einen schon mal zum verzweifeln bringen. Schritt eins sollte also erst einmal ein gezeichneter Style oder Grafik sein damit der Kunde sich eine genaues Bild von dem machen kann was er kauft. Späterer Änderungen sind Kostenaufwendig und werden bis zu einem gewissen Grad von einem selbst getragen. Das sollte man sich immer vor Augen halten wenn man nicht Pleite gehen will. ;) Ich habe in dem Beispiel Template beides verwendet. Obwohl - Ich betone - so etwas wie hier nie machen würde :D Es soll halt eine Beispiel sein und mehr nicht. Einer der großen Vorteile von Layern ist jener das man Grafiken,Tabellen,Embeds und Layer überlappen kann. Dies geschieht mit z-index. Ich habe hierzu Beispiele mit eingefügt. Die entscheidung wann man Layer einsetzt nicht nur eine Stylefrage sondern auch eine Browser Kompatibilitäts und Kostenfrage.

PHP Source code

 
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

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
                <head>
                    <title>
                        TESTS
                    </title>
                    <link href="stylesheet.css" rel="stylesheet" type="text/css">
                </head>
                <body>
                    <table border="0" cellspacing="10" cellpadding="2" align="center" class="haupttabelle">
                        <tr align="left" valign="top">
                            <td width="780" align="left" valign="top">
                                <div class="layera">
                                            Text oder anderer Inhalt ........
                                </div>
                                <div class="layerb">
                                            Text oder anderer Inhalt ........
                                </div>
                                <div class="layerc">
                                            Text oder anderer Inhalt ........
                                </div>
                                <div class="layerd">
                                    <p>
                                            Text oder anderer Inhalt ........
                                    </p>
                                </div>
                                <div class="textdiv">
                                    <table border="0" cellspacing="1" cellpadding="1" class="tableinhalt">
                                        <tr>
                                            <td>
                                            text ........
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </body>
            </html>

CSS FILE:

PHP Source code

 
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

b,em {
    color: #FFFF66;
    font-family: Arial;
    font-size: 12px;
}

body {
    margin: 0;
    color: #000000;
    font-family: Arial;
    font-size: 12px;
}

table,td * p {
    color: #FFFFFF;
    font-family: Arial;
    font-size: 12px;
}

tt,strong,p {
    color: #000000;
    font-family: Arial;
    font-size: 12px;
}

.haupttabelle {
    background-image: url(background.JPG);
    background-position: top;
    background-repeat: no-repeat;
    height: 500px;
    width: 780px;
    z-index: 0;
}

.layera {
    background-color: #CC9900;
    color: #000000;
    height: 100px;
    left: 20px;
    margin-right: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    position: absolute;
    text-align: justify;
    top: 10px;
    width: 250px;
    z-index: 3;
}

.layerb {
    background-color: #00FF00;
    color: #000000;
    height: 60px;
    left: 100px;
    position: relative;
    top: 10px;
    width: 450px;
    z-index: 1;
}

.layerc {
    background-color: #FFFFFF;
    color: #000000;
    height: 50px;
    left: 250px;
    position: relative;
    top: -6px;
    width: 400px;
    z-index: 4;
}

.layerd {
    background-color: #0000BB;
    color: #000000;
    height: 180px;
    left: 40px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    position: relative;
    text-align: justify;
    top: 20px;
    width: 150px;
    z-index: 2;
}

.textdiv {
    background-color: #EFEFEF;
    height: 460px;
    left: 202px;
    position: relative;
    top: -183px;
    width: 523px;
    z-index: 5;
    overflow: auto;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-3dlight-color: #EFEFEF;
    scrollbar-arrow-color: #00008B;
    scrollbar-base-color: #87CEFA;
    scrollbar-darkshadow-color: #808080;
    scrollbar-face-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
}
.tableinhalt {
    background-color: #FFFFFF;
    color:#000000;
}
Ansehen
undefined has attached the following file:
Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
PHP Katepart - Speichenrechner - .htpasswd - RPM XDG Tool - Kcmnvview - QTidy
  • Go to the top of the page

undefined

Super Moderator

Posts: 4,248

Location: Germany

2

Tuesday, October 14th 2003, 9:55pm

Mit Css Schatten text Simulieren

PHP Source code

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

<!doctype public "-//w3c//dtd xhtml 1.0 transitional//en"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>CSS Goodies Teil2</title>
<style type="text/css">
 <!--//
 #box { position: absolute; left: 120px; top: 100px; width: auto; height: auto; }
 #top  { position: relative; left: -3px; top: -184px; color: #bb0000; }
 #under { position: relative; left: 0px; top: 0px;  color: #000000;}
 //-->
</style>
</head>
<body>
<div align="left" id="box">
 <div id="under"><h1 style="font-size: 100px; font-family: Arial;">Flashbattle</h1></div>
 <div id="top"><h1 style="font-size: 100px; font-family: Arial;">Flashbattle</h1></div>
</div>
</body>
</html>
Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
PHP Katepart - Speichenrechner - .htpasswd - RPM XDG Tool - Kcmnvview - QTidy
  • Go to the top of the page

undefined

Super Moderator

Posts: 4,248

Location: Germany

3

Saturday, October 18th 2003, 1:12am

Box Spielerei :D

PHP Source code

 
1
2
3
4
5

<?php
 header("Cache-Control: no-store, no-cache, must-revalidate");
 header("Cache-Control: post-check=0, pre-check=0", FALSE);
 header("Pragma: no-cache");
?>

ActionScript-Quelltext

 
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Auf zu klappen</title>
<script language="JavaScript1.2" type="text/javascript">
<!--
  var imMoment = false;
  function klappaktion()
  {
   if (document.getElementById)
   { 
     document.getElementById("BOX").style.display = imMoment ? "" : "none";
   } else if (document.all) {
     document.all.BOX.style.display = imMoment ? "" : "none";
   }
   
   if(imMoment)
   {
    var Te = "Schliessen";
    var rL = document.getElementById("linkauf").firstChild.nodeValue.length;
    document.getElementById("linkauf").firstChild.replaceData(0, rL, Te);
   } else {
    var Te = "Öffnen";
    var rL = document.getElementById("linkauf").firstChild.nodeValue.length;
    document.getElementById("linkauf").firstChild.replaceData(0, rL, Te);
   }
   imMoment = !imMoment;
 }
//-->
</script>
</head>

ActionScript-Quelltext

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<body>
<a href="javascript:klappaktion();" id="linkauf">Öffnen</a>
<div id="BOX">
  <table border="0" cellpadding="0" cellspacgin="0">
    <tr>
      <td style="width: 320px; height: 50px; text-align: center; vertical-align: middle; border: 1px groove; text-transform: uppercase;">
       was kugst du? was kugst du? was kugst du?
      </td>
    </tr>
   </table>
 </div>
<script language="Javascript" type="text/javascript">
 <!--
  klappaktion();
 // -->
</script><br>
Anklicken ;)
</body>
</html>
Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
PHP Katepart - Speichenrechner - .htpasswd - RPM XDG Tool - Kcmnvview - QTidy
  • Go to the top of the page