CSS Darstellung <span> Unterlinie

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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.

  • 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



    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>TC System</title>
    5. <meta name="author" content="Florian Braeuer" />
    6. <meta name="publisher" content="Florian Braeuer" />
    7. <meta name="copyright" content="Florian Braeuer, 2007 http://www.timechange.de" />
    8. <meta name="description" content="TC Systems by Florian Braeuer" />
    9. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    10. <style type="text/css">
    11. <!--
    12. body {
    13. text-align: center;
    14. margin: 5px 5px 15px;
    15. background-color: #E2E2E2;
    16. }
    18. #AcpContent {
    19. width:760px;
    20. margin:0px auto;
    21. text-align:left;
    22. background-color: #E2E2E2;
    23. }
    25. #AcpTop {
    26. height: 80px;
    27. padding: 5px;
    28. background-color: #FFFFFF;
    29. border: 1px solid #4488D4;
    30. }
    32. #AcpMenu {
    33. font-family: Verdana, Arial, Helvetica, sans-serif;
    34. font-size: 11px;
    35. border: 1px solid #4488D4;
    36. width: 150px;
    37. float: left;
    38. margin: 10px 0px;
    39. padding: 0px 1px 10px 5px;
    40. background-color: #FFFFFF;
    41. }
    43. #AcpMenu a {
    44. display: block;
    45. color: #000066;
    46. text-decoration: none;
    47. padding: 2px 1px 2px 12px;
    48. border-right-width: 0px;
    49. border-bottom-width: 1px;
    50. border-top-width: 0px;
    51. border-left-width: 0px;
    52. border-color: #FFFFFF;
    53. border-style: dashed;
    54. }
    56. #AcpMenu a:hover {
    57. border-right-width: 1px;
    58. border-bottom-width: 1px;
    59. border-top-width: 0px;
    60. border-left-width: 0px;
    61. border-style: dashed;
    62. border-color: #4488D4;
    63. color: #CCCCCC;
    64. }
    66. #AcpMenu p {
    67. border-top-width: 1px;
    68. border-right-width: 0px;
    69. border-bottom-width: 1px;
    70. border-left-width: 0px;
    71. border-style: dotted;
    72. border-color: #CCCCCC;
    73. font-weight: bold;
    74. margin: 1px;
    75. padding: 4px;
    76. margin-top: 7px;
    77. }
    79. #AcpMain1 {
    80. font-family: Verdana, Arial, Helvetica, sans-serif;
    81. font-size: 11px;
    82. border: 1px solid #4488D4;
    83. background-color: #FFFFFF;
    84. width: 565px;
    85. float: right;
    86. padding: 0px 0px;
    87. margin: 10px 0px;
    88. }
    90. #AcpMain1 div {
    91. color: #4488D4;
    92. border-top-width: 0px;
    93. border-right-width: 0px;
    94. border-bottom-width: 1px;
    95. border-left-width: 0px;
    96. border-style: dashed;
    97. border-color: #000000;
    98. font-weight: bold;
    99. font-size: 12px;
    100. padding: 4px;
    101. padding-left: 12px;
    102. margin-top: 7px;
    103. line-height: 22px;
    104. width: 100%;
    105. }
    106. #AcpMain1 blockquote {
    107. color: #787878;
    108. font-style: italic;
    109. padding-left: 10px;
    110. }
    112. #AcpMain blockquote {
    113. color: #787878;
    114. font-style: italic;
    115. padding-left: 10px;
    116. }
    118. /*
    119. #AcpMain p {
    120. float: left;
    121. margin-left: 20px;
    122. margin-right: 20px;
    123. padding-left: 5px;
    124. font-size:12px;
    125. border-bottom: dashed;
    126. border-bottom-width: 1px;
    127. border-left: dashed;
    128. border-left-width: 1px;
    129. display: inline;
    130. }
    131. */
    133. #AcpMain input {
    134. float: left;
    135. margin-left: 150px;
    136. display: block;
    137. }
    139. -->
    140. </style>
    142. </head>
    144. <body>
    145. <div id="AcpContent">
    147. <div id="AcpTop">
    148. <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" />
    149. </div>
    150. <div id="AcpMenu">
    151. <p><img src="images/minus.gif" alt="" border="0" /> News</p>
    152. <a href="http://timechange.de">123 Test</a>
    153. <a href="http://timechange.de">123 Test</a>
    155. <a href="http://timechange.de">123 Test</a>
    156. <a href="http://timechange.de">123 Test</a>
    158. <p><img src="images/minus.gif" alt="" border="0" /> News</p>
    159. <a href="http://timechange.de">123 Test</a>
    160. <a href="http://timechange.de">123 Test</a>
    161. <a href="http://timechange.de">123 Test</a>
    163. <a href="http://timechange.de">123 Test</a>
    165. </div>
    166. <div id="AcpMain1">
    167. <div><img src="http://timechange.de/tc_admin/recode/Design/images/top_login.png"/> Authentifizierung erforderlich</div>
    168. <blockquote> Bitte melden Sie sich an, um die volle Administration zu sehen.</blockquote>
    169. </div>
    171. </div>
    172. </body>
    173. </html>
    Alles anzeigen

  • So ?????

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>TC System</title>
    5. <meta name="author" content="Florian Braeuer" />
    6. <meta name="publisher" content="Florian Braeuer" />
    7. <meta name="copyright" content="Florian Braeuer, 2007 http://www.timechange.de" />
    8. <meta name="description" content="TC Systems by Florian Braeuer" />
    9. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    10. <style type="text/css">
    11. <!--
    12. body {
    13. text-align: center;
    14. margin: 5px 5px 15px;
    15. background-color: #E2E2E2;
    16. }
    18. #AcpContent {
    19. width:760px;
    20. margin:0px auto;
    21. text-align:left;
    22. background-color: #E2E2E2;
    23. }
    25. #AcpTop {
    26. height: 80px;
    27. padding: 5px;
    28. background-color: #FFFFFF;
    29. border: 1px solid #4488D4;
    30. }
    32. #AcpMenu {
    33. font-family: Verdana, Arial, Helvetica, sans-serif;
    34. font-size: 11px;
    35. border: 1px solid #4488D4;
    36. width: 150px;
    37. float: left;
    38. margin: 10px 0px;
    39. padding: 0px 1px 10px 5px;
    40. background-color: #FFFFFF;
    41. }
    43. #AcpMenu a {
    44. display: block;
    45. color: #000066;
    46. text-decoration: none;
    47. padding: 2px 1px 2px 12px;
    48. border-right-width: 0px;
    49. border-bottom-width: 1px;
    50. border-top-width: 0px;
    51. border-left-width: 0px;
    52. border-color: #FFFFFF;
    53. border-style: dashed;
    54. }
    56. #AcpMenu a:hover {
    57. border-right-width: 1px;
    58. border-bottom-width: 1px;
    59. border-top-width: 0px;
    60. border-left-width: 0px;
    61. border-style: dashed;
    62. border-color: #4488D4;
    63. color: #CCCCCC;
    64. }
    66. #AcpMenu p {
    67. border-top-width: 1px;
    68. border-right-width: 0px;
    69. border-bottom-width: 1px;
    70. border-left-width: 0px;
    71. border-style: dotted;
    72. border-color: #CCCCCC;
    73. font-weight: bold;
    74. margin: 1px;
    75. padding: 4px;
    76. margin-top: 7px;
    77. }
    79. #AcpMain1 {
    80. font-family: Verdana, Arial, Helvetica, sans-serif;
    81. font-size: 11px;
    82. border: 1px solid #4488D4;
    83. background-color: #FFFFFF;
    84. width: 565px;
    85. float: right;
    86. padding: 0px 0px;
    87. margin: 10px 0px;
    88. top: 3px;
    89. position: relative;
    90. }
    92. #bla1 {
    93. color: #4488D4;
    94. border-top-width: 1px;
    95. border-right-width: 0px;
    96. border-bottom-width: 0px;
    97. border-left-width: 0px;
    98. border-style: dashed;
    99. border-color: #000000;
    100. font-weight: bold;
    101. font-size: 12px;
    102. padding: 4px;
    103. padding-left: 12px;
    104. margin-top: 7px;
    105. line-height: 22px;
    106. width: 515px;
    107. position: relative;
    108. left: 40px;
    109. }
    110. #bla {
    111. color: #4488D4;
    112. border-top-width: 0px;
    113. border-right-width: 0px;
    114. border-bottom-width: 1px;
    115. border-left-width: 0px;
    116. border-style: none;
    117. border-color: #000000;
    118. font-weight: bold;
    119. font-size: 12px;
    120. padding: 4px;
    121. margin-top: 0px;
    122. line-height: 22px;
    123. width: 100%;
    124. position: relative;
    125. left: 10px;
    126. }
    127. #AcpMain1 blockquote {
    128. color: #787878;
    129. font-style: italic;
    130. padding-left: 10px;
    131. }
    133. #AcpMain blockquote {
    134. color: #787878;
    135. font-style: italic;
    136. padding-left: 10px;
    137. }
    139. /*
    140. #AcpMain p {
    141. float: left;
    142. margin-left: 20px;
    143. margin-right: 20px;
    144. padding-left: 5px;
    145. font-size:12px;
    146. border-bottom: dashed;
    147. border-bottom-width: 1px;
    148. border-left: dashed;
    149. border-left-width: 1px;
    150. display: inline;
    151. }
    152. */
    154. #AcpMain input {
    155. float: left;
    156. margin-left: 150px;
    157. display: block;
    158. }
    160. -->
    161. </style>
    163. </head>
    165. <body>
    166. <div id="AcpContent">
    168. <div id="AcpTop">
    169. <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" />
    170. </div>
    171. <div id="AcpMenu">
    172. <p><img src="images/minus.gif" alt="" border="0" /> News</p>
    173. <a href="http://timechange.de">123 Test</a>
    174. <a href="http://timechange.de">123 Test</a>
    176. <a href="http://timechange.de">123 Test</a>
    177. <a href="http://timechange.de">123 Test</a>
    179. <p><img src="images/minus.gif" alt="" border="0" /> News</p>
    180. <a href="http://timechange.de">123 Test</a>
    181. <a href="http://timechange.de">123 Test</a>
    182. <a href="http://timechange.de">123 Test</a>
    184. <a href="http://timechange.de">123 Test</a>
    186. </div>
    187. <div id="AcpMain1">
    188. <div id="bla"><img src="http://timechange.de/tc_admin/recode/Design/images/top_login.png"/> Authentifizierung erforderlich</div>
    189. <div id="bla1"></div>
    190. <blockquote> Bitte melden Sie sich an, um die volle Administration zu sehen.</blockquote>
    191. </div>
    193. </div>
    194. </body>
    195. </html>
    Alles anzeigen

  • 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!

    Quellcode

    1. #bla {
    2. color: #4488D4;
    3. border-top-width: 0px;
    4. border-right-width: 1px;
    5. border-bottom-width: 0px;
    6. border-left-width: 0px;
    7. border-style: dashed;
    8. border-color: #000000;
    9. font-weight: bold;
    10. font-size: 12px;
    11. padding: 4px;
    12. margin-top: 0px;
    13. line-height: 22px;
    14. width: 525px;
    15. position: relative;
    16. left: 10px;
    17. }
    Alles anzeigen

  • 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.