| Autor |
Beitrag |
Bergmann89
 
Beiträge: 1742
Erhaltene Danke: 72
Win7 x64, Ubuntu 11.10
Delphi 7 Personal, Lazarus/FPC 2.2.4, C, C++, C# (Visual Studio 2010), PHP, Java (Netbeans, Eclipse)
|
Verfasst: Mo 31.05.10 18:30
Hey,
ich sitz grad vor nem Problem bei dem ich nich weiter weiß. Ich will ein Bild als Hintergrund haben, das ich beim Größenänderung an die neue Größe anpasst. Hier erstma der Code dazu:
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:
112:
113:
114:
| <%@ Master
Language="C#"
AutoEventWireup="true"
CodeBehind="admin.master.cs" %>
<!DOCTYPE html 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" >
<head id="Head1" runat="server">
<title>Lagerverwaltung - Administrator</title>
<style type="text/css">
#Form
{
height: 529px;
width: 949px;
}
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
img#bg
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
} /*<< 1 >>*/
#NaviBG
{
position:relative;
top:0;
left:0;
width:100%;
height:400px;
z-index:1;
}/*<< 2 >>*/
#MainBG
{
position:relative;
top:0;
left:0;
width:100%;
height:400px;
z-index:1;
}/*<< 3 >>*/
#Content
{
position:relative;
z-index:1;
}/*<< 4 >>*/
#NaviContent
{
position: relative;
top: -400px;
z-index:2;
height: 0px;
}/*<< 5 >>*/
#MainContent
{
position: relative;
top: -400px;
z-index:2;
height:0px;
}/*<< 6 >>*/
</style>
</head>
<body>
<img src="/ASPX/images/lager.jpg" alt="background image" id="bg" />
<div id="Content">/*<< 7 >>*/
<form ID="Form" runat="server">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="height: 300px;">
/*[...]*/
<tr>
<td bgcolor="#1F2B73" style="width: 2px"></td>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="top" style="height: 95px; width: 100%">
<tr>
<td valign="top" bgcolor="White" style="width:160px;">
<img id="NaviBG" src="/ASPX/images/leftnavi.jpg" alt="NaviBackground" />
<div id="NaviContent">/*<< 8 >>*/
<table border="0" cellspacing="0" cellpadding="5">
/*[...]*/
</table>
</div>
</td>
<td valign="top" align="center">
<img id="MainBG" src="/ASPX/images/leftnavi.jpg" alt="MainBackground" />
<div id="MainContent">/*<< 9 >>*/
<asp:contentplaceholder id="CPH1" runat="server"></asp:contentplaceholder>
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="#9E392F" style="width: 2px"></td>
</tr>
/*[...]*/
</table>
</form>
</div>
</body>
</html> |
Nun zur Erläuterung des Problems: Wie man sieht habe ich einen Bild definiert (siehe Highlight 7), mit den Maßen [100%, 100%] (siehe Highlight 1) das über die ganze Seite geht. Darüber liegt dann der eigentliche Inhalt in einem DIV-Tag (siehe Highlight 4). Das funktiniert auch so wie es soll. Nun würde ich aber gern auch in der Tabelle ein Bild als Hintergrund haben, welches sich bei Größenänderung mit anpasst. Also hab ich mir erstmal wieder eine Image definiert (siehe Highlight 8 bzw. 9). Die hat die Maße [100%, 400px] (sihe Highlight 2 bzw. 3). Da hab ich dann versucht, wie bei dem anderen Hintergrund, den Inhalt mit dem DIV-Tag drüber zu legen, aber hier musste ich die Höhe noch anpassen, da der Inhalt sonst unter dem Bild wäre (siehe Highlight 5 bzw. 6). Wenn ich im Bild eine 100% Höhe nehme verhält es sich so, wie ich es gern hätte. Aber dann ist der Inhalt unter dem Bild, bzw nicht am oberen Rand der Tabelle.
Weiß jmd wie ich das Bild als Hintergrund in die Tabelle bekomm, so das es sich verzerrt un der Inhalt trotzdem richtig angezeigt wird? Würd mich riesig freun...
MfG & Thx Bergmann _________________ Ich weiß nicht viel, lern aber dafür umso schneller^^
|
|
danielf
Beiträge: 1012
Erhaltene Danke: 24
Windows XP
C#, Visual Studio
|
Verfasst: Mo 31.05.10 18:57
Hallo,
über das Position Attribute kannst du angeben, wie die Position der Element reagieren. Wie genau der Wert mit anderen Element zusammenspielen dafür spickel ich immer hier.
Position absoult mit einem passenden Eltern-Element sollte die gewünschten Eigenschaften haben.
Gruß
|
|
Bergmann89 
Beiträge: 1742
Erhaltene Danke: 72
Win7 x64, Ubuntu 11.10
Delphi 7 Personal, Lazarus/FPC 2.2.4, C, C++, C# (Visual Studio 2010), PHP, Java (Netbeans, Eclipse)
|
Verfasst: Mo 31.05.10 20:30
Hey,
das hat mir schon ein bischen weiter geholfen, allerdings will es immer noch nich so richtig. Die DIV-Tags orentieren sich irgdnwie nicht an den Tabellenspalten/-Zeilen sondern am Content-DIV. Kann eine Tabelle denn kein Elternelement sein?!
MfG & Thx Bergmann
_________________ Ich weiß nicht viel, lern aber dafür umso schneller^^
|
|
danielf
Beiträge: 1012
Erhaltene Danke: 24
Windows XP
C#, Visual Studio
|
Verfasst: Mo 31.05.10 20:51
Ein Eltern-Element muss positioniert sein, damit sich die absoulte Position darauf bezieht. Versuch mal bei dem TR-Tag das Attribut position auf relativ zu setzen. Was auf jedenfall Funktioniert, ist wenn du noch ein Container div pro Zelle machst.
|
|
Bergmann89
Beiträge: 1742
Erhaltene Danke: 72
Win7 x64, Ubuntu 11.10
Delphi 7 Personal, Lazarus/FPC 2.2.4, C, C++, C# (Visual Studio 2010), PHP, Java (Netbeans, Eclipse)
|
Verfasst: Mo 31.05.10 21:24
Ahh, perfekt. Vielen Dank. Für alle die auch auf der Suche nach der Lösung sind, oder sein sollten:
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:
| <style type="text/css">
#NaviBG
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
#MainBG
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
#NaviContent
{
position: relative;
top: 0px;
z-index:2;
height: 100%;
}
#MainContent
{
position: relative;
top: 0px;
z-index:2;
height: 100%;
}
</style>
<table border="0" cellspacing="0" cellpadding="0" align="top" style="height:100px; width:100%">
<tr>
<td valign="top" bgcolor="White" style="width:180px; height:100%;">
<div style="position:relative; width:100%; height:100%;">
<div id="NaviContent">
<table border="0" cellspacing="0" cellpadding="5" style="height:100%">
/*[...]*/
</table>
</div>
<div style="width:100%; height:100%; position:absolute; top:0px;">
<img id="NaviBG" src="/ASPX/images/leftnavi.jpg" alt="NaviBackground" />
</div>
</div>
</td>
<td valign="top" align="center">
<div style="position:relative; width:100%; height:100%;">
<div id="MainContent">
<asp:contentplaceholder id="CPH1" runat="server"></asp:contentplaceholder>
</div>
<div style="width:100%; height:100%; position:absolute; top:0px;">
<img id="MainBG" src="/ASPX/images/leftnavi.jpg" alt="MainBackground" />
</div>
</div>
</td>
</tr>
</table> |
€: MIST, zu früh gefreut. Jetzt hab ich zwar, das der Hintergrund un der Inhalt sich so verhalten wie ich will, aber jetzt ändert sich die Größe der Tabelle nicht mehr, wenn der Inhalt zu groß wird -.-
€2: im InetExplorer hauts erst recht nich hin, mit FF gings bis jetzt ja einigermaßen...
€3: jetzt is es so wie es sein soll^^ HAb den Code oben angepasst... Nochma Danke für die Hilfe.
MfG Bergmann _________________ Ich weiß nicht viel, lern aber dafür umso schneller^^
|
|
|
