You are not logged in.

  • Login

CSS Darstellung <span> Unterlinie

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

ZeitenWandel

Trainee

  • "ZeitenWandel" started this thread

Posts: 24

  • Send private message

1

Saturday, February 3rd 2007, 11:43pm

CSS Darstellung <span> Unterlinie

Hallo.
Habe derzeit ein kleines großes Problem.
Und zwar wird bei der Seite: Link - klick mich
Ich möchte oben bei der Überschrift "Authentifizierung erforderlich" das Bild links neben der Schrift haben, aber die Linie (border) soll erst unter der Schrift anfangen und beiim Boxen-Ende auch enden.
Ich bekomm das irgendwie nicht hin. Quellcode ist ja per "Quelltext anzeigen" sichtbar.

Vielen Dank im voraus.

Matrixstyle

Intermediate

Posts: 122

  • Send private message

2

Sunday, February 4th 2007, 12:05am

Hallo,

du möchtest von den Standart deiner Seite abweichen, wenn ich das richtig verstanden habe. Meinst du das so? Wenn ja habe ich für die Box einfach einen anderen ID=Namen vergeben und etwas angepasst. Schau einfach mal.

Gruß
Stephan



HTML 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TC System</title>
<meta name="author" content="Florian Braeuer" />
<meta name="publisher" content="Florian Braeuer" />
<meta name="copyright" content="Florian Braeuer, 2007 http://www.timechange.de" />
<meta name="description" content="TC Systems by Florian Braeuer" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
 <!--
body {
	text-align: center;
	margin: 5px 5px 15px; 
	background-color: #E2E2E2;
}
 
#AcpContent {
	width:760px; 
	margin:0px auto; 
	text-align:left; 
	background-color: #E2E2E2;
}
 
#AcpTop {
	height: 80px;
	padding: 5px;
	background-color: #FFFFFF;
	border: 1px solid #4488D4;
}
 
#AcpMenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #4488D4;
	width: 150px;
	float: left;
	margin: 10px 0px; 
	padding: 0px 1px 10px 5px;
	background-color: #FFFFFF;
}
 
#AcpMenu a {
	display: block;
	color: #000066;
	text-decoration: none;
	padding: 2px 1px 2px 12px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-color: #FFFFFF;
	border-style: dashed;
}
 
#AcpMenu a:hover {
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-style: dashed;
	border-color: #4488D4;
	color: #CCCCCC;
}
 
#AcpMenu p {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-style: dotted;
	border-color: #CCCCCC;
	font-weight: bold;
	margin: 1px;  
	padding: 4px;
	margin-top: 7px;
}
 
#AcpMain1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #4488D4;
	background-color: #FFFFFF;
	width: 565px;
	float: right;
	padding: 0px 0px;  
	margin: 10px 0px;  
}
 
#AcpMain1 div {
	color: #4488D4;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-style: dashed;
	border-color: #000000;
	font-weight: bold;
	font-size: 12px;
	padding: 4px;
	padding-left: 12px;
	margin-top: 7px;
	line-height: 22px;
	width: 100%;
}
#AcpMain1 blockquote {
	color: #787878;
	font-style: italic;
	padding-left: 10px;
}
 
#AcpMain blockquote {
	color: #787878;
	font-style: italic;
	padding-left: 10px;
}
 
/*
#AcpMain p {
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 5px;
	font-size:12px;
	border-bottom: dashed;
	border-bottom-width: 1px;
	border-left: dashed;
	border-left-width: 1px;
	display: inline;
}
*/
 
#AcpMain input {
	float: left;
	margin-left: 150px;
	display: block;
}
 
-->
</style>
 
</head>
 
<body>
<div id="AcpContent">
 
	<div id="AcpTop">
		<a href="logout.php" title=""><img src="images/top_logout.png" border="0" alt="" align="left" /></a><img src="images/logo.png" border="0" alt="" align="right" />
  	</div>
  	<div id="AcpMenu">
    	<p><img src="images/minus.gif" alt="" border="0" /> News</p>
    <a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
 
	<a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
 
	<p><img src="images/minus.gif" alt="" border="0" /> News</p>
    <a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
 
	<a href="http://timechange.de">123 Test</a>
 
  	</div>
  	<div id="AcpMain1">
  	  <div><img src="http://timechange.de/tc_admin/recode/Design/images/top_login.png"/> Authentifizierung erforderlich</div>
		<blockquote> Bitte melden Sie sich an, um die volle Administration zu sehen.</blockquote>
  </div>
 
</div>
</body>
</html>

ZeitenWandel

Trainee

  • "ZeitenWandel" started this thread

Posts: 24

  • Send private message

3

Sunday, February 4th 2007, 12:31am

Nein, das meinte ich nicht.
Das Icon soll links neben die Überschrift und der border-bottom soll unter der Überschrift beginnen und nach rechts bis zum Rand gehen. Das Icon soll border-bottom-los sein!

Matrixstyle

Intermediate

Posts: 122

  • Send private message

4

Sunday, February 4th 2007, 12:50am

So ?????

HTML 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TC System</title>
<meta name="author" content="Florian Braeuer" />
<meta name="publisher" content="Florian Braeuer" />
<meta name="copyright" content="Florian Braeuer, 2007 http://www.timechange.de" />
<meta name="description" content="TC Systems by Florian Braeuer" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
 <!--
body {
	text-align: center;
	margin: 5px 5px 15px; 
	background-color: #E2E2E2;
}
 
#AcpContent {
	width:760px; 
	margin:0px auto; 
	text-align:left; 
	background-color: #E2E2E2;
}
 
#AcpTop {
	height: 80px;
	padding: 5px;
	background-color: #FFFFFF;
	border: 1px solid #4488D4;
}
 
#AcpMenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #4488D4;
	width: 150px;
	float: left;
	margin: 10px 0px; 
	padding: 0px 1px 10px 5px;
	background-color: #FFFFFF;
}
 
#AcpMenu a {
	display: block;
	color: #000066;
	text-decoration: none;
	padding: 2px 1px 2px 12px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-color: #FFFFFF;
	border-style: dashed;
}
 
#AcpMenu a:hover {
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-style: dashed;
	border-color: #4488D4;
	color: #CCCCCC;
}
 
#AcpMenu p {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-style: dotted;
	border-color: #CCCCCC;
	font-weight: bold;
	margin: 1px;  
	padding: 4px;
	margin-top: 7px;
}
 
#AcpMain1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #4488D4;
	background-color: #FFFFFF;
	width: 565px;
	float: right;
	padding: 0px 0px;
	margin: 10px 0px;
	top: 3px;
	position: relative;
}
 
#bla1 {
	color: #4488D4;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-style: dashed;
	border-color: #000000;
	font-weight: bold;
	font-size: 12px;
	padding: 4px;
	padding-left: 12px;
	margin-top: 7px;
	line-height: 22px;
	width: 515px;
	position: relative;
	left: 40px;
}
#bla {
	color: #4488D4;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-style: none;
	border-color: #000000;
	font-weight: bold;
	font-size: 12px;
	padding: 4px;
	margin-top: 0px;
	line-height: 22px;
	width: 100%;
	position: relative;
	left: 10px;
}
#AcpMain1 blockquote {
	color: #787878;
	font-style: italic;
	padding-left: 10px;
}
 
#AcpMain blockquote {
	color: #787878;
	font-style: italic;
	padding-left: 10px;
}
 
/*
#AcpMain p {
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 5px;
	font-size:12px;
	border-bottom: dashed;
	border-bottom-width: 1px;
	border-left: dashed;
	border-left-width: 1px;
	display: inline;
}
*/
 
#AcpMain input {
	float: left;
	margin-left: 150px;
	display: block;
}
 
-->
</style>
 
</head>
 
<body>
<div id="AcpContent">
 
	<div id="AcpTop">
		<a href="logout.php" title=""><img src="images/top_logout.png" border="0" alt="" align="left" /></a><img src="images/logo.png" border="0" alt="" align="right" />
  	</div>
  	<div id="AcpMenu">
    	<p><img src="images/minus.gif" alt="" border="0" /> News</p>
    <a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
 
	<a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
 
	<p><img src="images/minus.gif" alt="" border="0" /> News</p>
    <a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
	<a href="http://timechange.de">123 Test</a>
 
	<a href="http://timechange.de">123 Test</a>
 
  	</div>
  	<div id="AcpMain1">
  	  <div id="bla"><img src="http://timechange.de/tc_admin/recode/Design/images/top_login.png"/> Authentifizierung erforderlich</div>
      	<div id="bla1"></div>
		<blockquote> Bitte melden Sie sich an, um die volle Administration zu sehen.</blockquote>
  </div>
 
</div>
</body>
</html>

ZeitenWandel

Trainee

  • "ZeitenWandel" started this thread

Posts: 24

  • Send private message

5

Sunday, February 4th 2007, 1:00am

Da fehlt nun der Strich an der rechten Seite, aber der kommt auch nicht, wenn ich "border-right-width: 1px;" eingebe..

Matrixstyle

Intermediate

Posts: 122

  • Send private message

6

Sunday, February 4th 2007, 1:08am

Für was möchtest du da eine Strich haben? Habe es etwas umgebaut mit Containern, so das die gestrichelt Line einen eigenen hat und dann oben, vorher war er unten. Du musst bei "bla" und "bla1" nun die Einstellungen machen!

Cascading Style Sheets

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

#bla {
	color: #4488D4;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-style: dashed;
	border-color: #000000;
	font-weight: bold;
	font-size: 12px;
	padding: 4px;
	margin-top: 0px;
	line-height: 22px;
	width: 525px;
	position: relative;
	left: 10px;
}

ZeitenWandel

Trainee

  • "ZeitenWandel" started this thread

Posts: 24

  • Send private message

7

Sunday, February 4th 2007, 1:20am

Ich hab es nun so halbwegs hinbekommen..
http://timechange.de/tc_admin/recode/Design/test.htm
Ich möchjte nun einfach die Linie unter der Überschrift bis zum Ende hin haben.

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

8

Sunday, February 4th 2007, 9:51am

mach doch einfach unter das <span> eine Trennlinie.

HTML Code

 
1

<hr style="border:0px;border-bottom:1px dashed #000000;" />
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

ZeitenWandel

Trainee

  • "ZeitenWandel" started this thread

Posts: 24

  • Send private message

9

Sunday, February 4th 2007, 4:59pm

<hr> unterstützt allerdings "border-right-width" nicht..
Die Idee hatte ich bereits..

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

10

Sunday, February 4th 2007, 5:05pm

Wenn das 100% breit sein soll, ist das doch auch egal, oder? Sieht man dann nicht mehr.

naja.. ich sehe du hast versucht dem span eine feste Breite zuzuordnen.
Der einzige Unterschied zwischen span und div ist eben, dass span kein Blockelement ist und man ihm daher keine Breite zuordnen kann.

Wenn du jetzt display:block einfügst, dann solltest du dein Ergebnis haben.
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Similar threads

Tagging

Social bookmarks