Grafik um Boxen

      Grafik um Boxen

      Hallo

      ich wünsche allen noch ein Gesundes Neues Jahr.

      Nun zu meiner Frage.

      Ich möchte meine Boxen (Kategorien,Warenkorb,Partner,Bestseller usw.) mit einer Grafik umranden.
      Ich wollte das aber nicht mit einer Tabellenform machen sondern über die div funktion.
      Sowie dann in der css.

      Wo finde ich die datei die für alle Boxen verantwortlich ist? Oder muss ich jede Box einzel umstellen.

      Bleiben die Funktionen der Boxen erhalten wenn ich diese änder?

      Wie muss der Quellcode denn am besten aussehen?

      etwa so?

      Quellcode

      1. <div class=".ro">
      2. <div class=".lo">
      3. <div class=".ru">
      4. <div class=".lu">
      5. <div id=".name">
      6. <div class=".inhalt">
      7. <ul>
      8. </ul>
      9. </div>
      10. </div>
      11. </div>
      12. </div>
      13. </div>
      14. </div>


      Wo füge ich das jetzt ein?

      wie muss jetzt das css aussehen?
      damit habe ich noch meine Probleme
      vor allem mir padding und margin.

      Danke schon mal für eure Antworten.
      Information
      Hallo Supreme,

      so ungefähr könnte der code aussehen, den du in jede box.html (PFAD: /templates/DEIN_TEMPLATE/boxes/..) einfügen musst.
      Deine klassen für "lo" usw werden im stylshett eingetragen und deine Grafiken darin definiert. In den divs wo du deine rahmengrafiken definiert hast kein margin und padding angeben!
      Probiere es einfach mal aus und wenns dann probs gibt melde dich wieder.

      Gruß TiKla
      So ich habe jetzt ne ganze weile rumgetüfftelt aber als sollte alles nicht so gehen wie ich es wollte.

      Wie soll ich es erklären? Ich sage mal so es soll ein Hintergrund sein und darauf noch mal ein weißer Hintergrund bevor die Schrift kommt.

      Hat jemand ne Idee wie ich das verwirklichen kann. Die box.html vielleicht in DW importieren da eine komplette Box erstellen und einarbeiten? aber das geht bestimmt nicht weil zu viele an Daten da dran hängen.

      Vielleicht hat jemand ja eine Iddee wie ich die Grafiken richtig einarbeite.

      hier ein Beispiel: flyeralarm.com

      P.S. gibt es eine Datei die für den Style der Boxen zuständig ist?
      Danke für die Antwort.

      Ich glaube ich steh ein wenig auf dem Schlauch.

      Schau mal bitte ob es so richtig wär das einfügen des div´s.

      Beispeil an der box_login.html

      Quellcode

      1. {config_load file="$language/lang_$language.conf" section="boxes"}
      2. <div class="...top">
      3. <div class="...bot">
      4. <table style="margin-bottom:3px" width="100%" border="0" cellpadding="2" cellspacing="0">
      5. <tr>
      6. <td {php} if($url=nc_get_url_infobox_bg('loginbox'))echo 'style="background-image:url('.$url.')"'{/php} class="infoBoxHeading"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      7. <tr>
      8. <td class="infoBoxHeading_text">{#heading_login#} </td>
      9. <td width="10"></td>
      10. </tr>
      11. </table></td>
      12. </tr>
      13. <tr>
      14. <td style="padding:0px"><img src="images/spc.gif" alt="" width="1" height="3"></td>
      15. </tr>
      16. <tr>
      17. <td class="boxText" align=center>
      18. {$FORM_ACTION}
      19. <table border=0 cellspacing=1 cellpadding=0>
      20. <tr>
      21. <td class="boxText">eMail</td>
      22. <td>{$FIELD_EMAIL}</td>
      23. </tr>
      24. <tr>
      25. <td class="boxText">Passwort </td>
      26. <td>{$FIELD_PWD}</td>
      27. </tr>
      28. <tr>
      29. <td> </td>
      30. <td><img src="images/spc.gif" alt="" width="1" height="2"><br>{$BUTTON}</td>
      31. <td>{$FORM_END}</td>
      32. </tr>
      33. </table>
      34. <!-- <a href="{$LINK_LOST_PASSWORD}">{#text_password_forgotten#}</a>-->
      35. </td>
      36. </tr>
      37. </table>
      38. </div>
      39. </div>


      Den rest muss ich dann in die css eingeben. Welche css muss ich benutzen? Ich denke die unter template? Es gibt ja noch die nc_stylesheet.css.

      Kann ich eigentlich auch zwei Grafiken übereinander legen?
      Jaja, das leideige thema mit dem Internet explorer... Poste mal den Quellcode von der kategorie oder ebaybox. und evntl. nochmal den entsprehcnden part der stylesheet. Da scheint was drin zu sein, was der ie nicht ganz bertsanden hat...

      "Der IE und der Firefox sprechen beide eigentlich die selbe Sprache, aber mit unterschiedlichen Dialekten, daher kommt es öfters zu Mißverständnissen"
      ::: shd-media.de : Downloads &amp; Blog für self-commerce :::

      ::: self-commerce Modul-Entwicklung, Templates, Support :::
      So hier ist der code für box_categories.html

      Quellcode

      1. {config_load file="$language/lang_$language.conf" section="boxes"}
      2. <div id="fly_navigation">
      3. <div class="fly_nav_top"></div>
      4. <div class="fly_nav_mid">
      5. <!--bereich produktsuche -->
      6. <div class="fly_white_box_top"></div>
      7. <div class="fly_white_box_bot">
      8. <table width="100%" border="0" cellpadding="0" cellspacing="0">
      9. <tr>
      10. <td {php} if($url=nc_get_url_infobox_bg('categories'))echo 'style="background-image:url('.$url.')"'{/php} class="infoBoxHeading"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      11. <tr>
      12. <td class="infoBoxHeading_text">{#heading_categories#} </td>
      13. <td width="10"></td>
      14. </tr>
      15. </table></td>
      16. </tr>
      17. <tr>
      18. <td><img src="images/spc.gif" width="1" height="3"></td>
      19. </tr>
      20. <tr>
      21. <td class="infoBox">{$BOX_CONTENT}</td>
      22. </tr>
      23. </table>
      24. <!-- hauptnavigation ende -->
      25. </div>
      26. </div> <!-- fly_nav_mid ende -->
      27. <div class="fly_nav_bot"></div>
      28. </div> <!-- fly_navigation ende -->


      und hier der dazu gehörige code zur stylesheet.css

      Quellcode

      1. @import "../../nc_stylesheet.css.php";
      2. #fly_navigation{
      3. display:block;
      4. float:left;
      5. margin:0 0 0 0;
      6. width:192px;
      7. height:192px;
      8. text-align: left;
      9. overflow:visible;
      10. }
      11. /*
      12. #fly_nav_top -> obere ecken
      13. #fly_nav_mid -> inhalte
      14. #fly_nav_bot -> untere ecken
      15. */
      16. .fly_nav_top{
      17. display:block;
      18. height:8px;
      19. overflow:hidden;
      20. background-image:url(/testshop/images/fly_nav_top.gif);
      21. }
      22. .fly_nav_mid{
      23. display:block;
      24. padding:1px 8px 1px 8px;
      25. background-image:url(/testshop/images/fly_nav_mid.gif);
      26. background-repeat:repeat-y;
      27. overflow:auto;
      28. }
      29. .fly_nav_bot{
      30. display:block;
      31. margin:0 0 8px 0;
      32. padding:0;
      33. height:8px;
      34. overflow:hidden;
      35. background-image:url(/testshop/images/fly_nav_bot.gif);
      36. }
      37. /*
      38. #fly_white_box
      39. */
      40. .fly_white_box_top{
      41. display:block;
      42. height:8px;
      43. margin:0 0 0 0;
      44. background-image:url(/testshop/images/fly_white_box_top.gif);
      45. background-position:top;
      46. }
      47. .fly_white_box_bot{
      48. display:block;
      49. padding:0 8px 8px 8px;
      50. margin:0 0 0 0;
      51. background-image:url(/testshop/images/fly_white_box_bot.gif);
      52. background-position:bottom;
      53. }



      Hoffentlich könnt ihr mir weiterhelfen.
      Vielleicht habe ich auch nur was übersehen.

      Gibt es eigentlich eine Datei die für das aussehen aller Boxen verantwortlich ist?

      Sonst muss ich ja alle bearbeiten oder?
      Hallo Supreme,

      #fly_navigation{ float:left; wird dieses Problem verursachen, dass die Boxen daneben rutschen. Weiß ja nicht wie der Rest aufgebaut ist.

      Wenn du nicht alle Boxen bearbeiten willst könntes du möglicherweise um jede Variable in der index.html (wie zb. {$box_categories} etc. deine divs mit den Grafiken einsetzen. Somit brauchst du nur eine Datei bearbieten.
      Nachteil: Da nicht alle Boxen immer angezeigt werden bzw. manche nur auf "Unterseiten" erscheinen würde der "Rahmen" also immer sichtbar sein.

      Besser wäre schon, wenn du alle boxen bearbeitest, die du im Shop anzeigen lassen willst.

      Gruß TiKla
      Also Tikla ich bedanke mich erstmal für deinen Tip.

      Leider hat er nicht funktioniert.

      Schau dir mal bitte noch mal die css an.

      Im Mozilla Firefox wird alles richtig angezeigt nur im IE7 habe ich ne Trennung in der Box und die bot Grafik ver schiebt sich nach rechts.

      [url www.dream-of-erotic.de[/url]Testshop[/url]

      Quellcode

      1. #dream_navigation{
      2. display:block;
      3. margin:4;
      4. width:192px;
      5. height:auto;
      6. text-align:left;
      7. overflow:hidden;
      8. }
      9. /*
      10. #dream_nav_top -> obere ecken
      11. #dream_nav_mid -> inhalte
      12. #dream_nav_bot -> untere ecken
      13. */
      14. .dream_nav_top{
      15. display:block;
      16. padding:0 0 0;
      17. height:8px;
      18. background-image:url(/images/dream_nav_top.gif);
      19. background-repeat:no-repeat;
      20. }
      21. .dream_nav_mid{
      22. display:block;
      23. padding:0 8 0;
      24. margin:0 0 0 0;
      25. background-image:url(/images/dream_nav_mid.gif);
      26. background-repeat:repeat-y;
      27. }
      28. .dream_nav_bot{
      29. display:block;
      30. padding:0 8 0;
      31. height:8px;
      32. background-image:url(/images/dream_nav_bot.gif);
      33. background-repeat: no-repeat;
      34. }
      35. /*
      36. #fly_white_box
      37. */
      38. .fly_white_box_top{
      39. display:block;
      40. height:8px;
      41. padding:8 8 8 0;
      42. margin:0 0 0 0;
      43. background-image:url(/images/fly_white_box_top.gif);
      44. background-position:top;
      45. background-repeat:no-repeat;
      46. overflow:hidden;
      47. }
      48. .fly_white_box_bot{
      49. display:block;
      50. padding:0 8 8 8;
      51. margin:0 0 0 0;
      52. background-image:url(/images/fly_white_box_bot.gif);
      53. background-position:bottom;
      54. background-repeat:no-repeat;
      55. overflow:hidden;
      56. }
      So jetzt reicht es mir. Also ich habe noch ein wenig gemacht und habe die Box im IE7 ordentlich hinbekommen.
      Nur jetzt ist der Boxeninhalt nicht mehr da wo er soll.

      Im Mozilla sieht die Box nun auch überhaupt nicht mehr aus wie eine Box.

      hier nochmal die css.

      Quellcode

      1. @import "../../nc_stylesheet.css.php";
      2. #dream_navigation{
      3. display:block;
      4. margin:0 0 0 0;
      5. width:auto;
      6. height:auto;
      7. text-align:left;
      8. }
      9. /*
      10. #dream_nav_top -> obere ecken
      11. #dream_nav_mid -> inhalte
      12. #dream_nav_bot -> untere ecken
      13. */
      14. .dream_nav_top{
      15. display:block;
      16. width:210px;
      17. height:8px;
      18. padding:0 0 0 0;
      19. background-image:url(/images/dream_nav_top.gif);
      20. background-repeat:no-repeat;
      21. }
      22. .dream_nav_mid{
      23. display:block;
      24. width:210px;
      25. padding:0 8 0 8;
      26. margin:0 0 0 0;
      27. background-image:url(/images/dream_nav_mid.gif);
      28. background-repeat:repeat-y;
      29. text-align:center;
      30. }
      31. .dream_nav_bot{
      32. display:block;
      33. width:210px;
      34. padding:0 0 0 0;
      35. height:8px;
      36. background-image:url(/images/dream_nav_bot.gif);
      37. background-repeat: no-repeat;
      38. }
      39. /*
      40. #fly_white_box
      41. */
      42. .fly_white_box_top{
      43. display:block;
      44. height:8px;
      45. padding:0 0 0 8;
      46. margin:0 0 0 0;
      47. background-image:url(/images/fly_white_box_top.gif);
      48. background-position:top;
      49. background-repeat:no-repeat;
      50. }
      51. .fly_white_box_bot{
      52. display:block;
      53. padding:0 0 0 0;
      54. margin:0 0 0 0;
      55. background-image:url(/images/fly_white_box_bot.gif);
      56. background-position:bottom;
      57. background-repeat:no-repeat;
      58. }


      und hier geht es zum shop
      Danke bike tuning. Jetzt passt die Box Kategories.

      Nun habe ich gestern noch weitere Boxen so erstellt oder besser gesagt umgewandelt. Nun passt bei den anderen Boxen die Schrift auch nicht.
      Aber wo stell ich den Abstand der Schrift ein.

      Außerdem habe ich die Anordung der Grafiken nicht mehr neu eingeteilt sondern so gelassen aber ich poste noch mal die css.

      Quellcode

      1. @import "../../nc_stylesheet.css.php";
      2. #content{
      3. display:block;
      4. margin:10 0 0 0;
      5. padding:0 0 0 0;
      6. width:210px;
      7. height:auto;
      8. text-align:left;
      9. overflow:hidden;
      10. }
      11. #infobox{
      12. display:block;
      13. margin:10 0 0 0;
      14. padding:0 0 0 0;
      15. width:210px;
      16. height:auto;
      17. text-align:left;
      18. position:relative;
      19. }
      20. #reviews{
      21. display:block;
      22. margin:10 0 0 0;
      23. padding:0 0 0 0;
      24. width:210px;
      25. height:auto;
      26. text-align:left;
      27. position:relative;
      28. }
      29. #newsletter{
      30. display:block;
      31. margin:10 0 0 0;
      32. padding:0 0 0 0;
      33. width:210px;
      34. height:auto;
      35. text-align:left;
      36. position:relative;
      37. }
      38. #information{
      39. display:block;
      40. margin:10 0 0 0;
      41. padding:0 0 0 0;
      42. width:210px;
      43. height:auto;
      44. text-align:left;
      45. position:relative;
      46. }
      47. #search{
      48. display:block;
      49. margin:10 0 0 0;
      50. padding:0 10 0 0;
      51. width:210px;
      52. height:auto;
      53. text-align:left;
      54. position:relative;
      55. }
      56. #lastview{
      57. display:block;
      58. margin:10 0 0 0;
      59. padding:0 0 0 0;
      60. width:210px;
      61. height:auto;
      62. text-align:left;
      63. position:relative;
      64. }
      65. #specials{
      66. display:block;
      67. margin:10 0 0 0;
      68. padding:0 0 0 0;
      69. width:210px;
      70. height:auto;
      71. text-align:left;
      72. position:relative;
      73. }
      74. #newprodukte{
      75. display:block;
      76. margin:10 0 0 0;
      77. padding:0 0 0 0;
      78. width:210px;
      79. height:auto;
      80. text-align:left;
      81. position:relative;
      82. }
      83. #Kundenlogin{
      84. display:block;
      85. margin:10 0 0 0;
      86. padding:0 0 0 0;
      87. width:210px;
      88. height:auto;
      89. text-align:left;
      90. position:relative;
      91. }
      92. #admin{
      93. display:block;
      94. margin:0 0 0 0;
      95. padding:0 0 0 0;
      96. width:210px;
      97. height:auto;
      98. text-align:left;
      99. }
      100. #warenkorb{
      101. display:block;
      102. margin:10 0 0 0;
      103. padding:0 0 0 0;
      104. width:210px;
      105. height:auto;
      106. text-align:left;
      107. overflow:hidden;
      108. }
      109. #dream_navigation{
      110. display:block;
      111. margin:0 0 0 0;
      112. padding:0 0 0 0;
      113. width:210px;
      114. height:auto;
      115. text-align:left;
      116. position:relative;
      117. }
      118. /*
      119. #dream_nav_top -> obere ecken
      120. #dream_nav_mid -> inhalte
      121. #dream_nav_bot -> untere ecken
      122. */
      123. .dream_nav_top{
      124. display:block;
      125. width:210px;
      126. height:8px;
      127. padding:0 0 0 0;
      128. background-image:url(/images/dream_nav_top.gif);
      129. background-repeat:no-repeat;
      130. }
      131. .dream_nav_mid{
      132. display:block;
      133. width:210px;
      134. padding:0 0 0 0;
      135. margin:0 0 0 0;
      136. background-image:url(/images/dream_nav_mid.gif);
      137. background-repeat:repeat-y;
      138. text-align:right;
      139. }
      140. .dream_nav_bot{
      141. display:block;
      142. width:210px;
      143. padding:0 0 0 0;
      144. height:8px;
      145. background-image:url(/images/dream_nav_bot.gif);
      146. background-repeat: no-repeat;
      147. }
      148. /*
      149. #fly_white_box
      150. */
      151. .fly_white_box_top{
      152. display:block;
      153. height:20px;
      154. padding:0 0 0 0;
      155. margin:0 0 0 0;
      156. background-image:url(/images/fly_white_box_top.gif);
      157. background-position:top;
      158. background-repeat:no-repeat;
      159. }
      160. .fly_white_box_bot{
      161. display:block;
      162. padding:0 0 0 0;
      163. margin:0 0 0 0;
      164. height:auto;
      165. background-image:url(/images/fly_white_box_bot.gif);
      166. background-position:bottom;
      167. background-repeat:no-repeat;
      168. }
      169. .right_col_headline {
      170. margin:0 18 0 18;
      171. background-image:url(/images/right_col_headline_special.gif);
      172. background-position:center;
      173. }
      174. #lightbox{
      175. position: absolute;
      176. top: 40px;
      177. left: 0;
      178. width: 100%;
      179. z-index: 100;
      180. text-align: center;
      181. line-height: 0;
      182. }
      183. #lightbox a img{ border: none; }
      184. #outerImageContainer{
      185. position: relative;
      186. background-color: #fff;
      187. width: 50px;
      188. height: 50px;
      189. margin: 0 auto;
      190. }
      191. #imageContainer{
      192. padding: 10px;
      193. }
      194. #loading{
      195. position: absolute;
      196. top: 40%;
      197. left: 0%;
      198. height: 25%;
      199. width: 100%;
      200. text-align: center;
      201. line-height: 0;
      202. }
      203. #hoverNav{
      204. position: absolute;
      205. top: 0;
      206. left: 0;
      207. height: 100%;
      208. width: 100%;
      209. z-index: 10;
      210. }
      211. #imageContainer>#hoverNav{ left: 0;}
      212. #hoverNav a{ outline: none;}
      213. #prevLink, #nextLink{
      214. width: 49%;
      215. height: 100%;
      216. background: transparent url(/images/pixel_blank.gif) no-repeat; /* Trick IE into showing hover */
      217. display: block;
      218. }
      219. #prevLink { left: 0; float: left; background: url(/images/prevlabel.gif) left 15% no-repeat;}
      220. #nextLink { right: 0; float: right; background: url(/images/nextlabel.gif) right 15% no-repeat;}
      221. #prevLink:hover, #prevLink:visited:hover { }
      222. #nextLink:hover, #nextLink:visited:hover { }
      223. #imageDataContainer{
      224. font: 10px Verdana, Helvetica, sans-serif;
      225. background-color: #fff;
      226. margin: 0 auto;
      227. line-height: 1.4em;
      228. }
      229. #imageData{
      230. padding:0 10px;
      231. }
      232. #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
      233. #imageData #caption{ font-weight: bold; }
      234. #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
      235. #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
      236. #overlay{
      237. position: absolute;
      238. top: 0;
      239. left: 0;
      240. z-index: 90;
      241. width: 100%;
      242. height: 500px;
      243. background-color: #000;
      244. filter:alpha(opacity=60);
      245. -moz-opacity: 0.6;
      246. opacity: 0.6;
      247. }
      248. .clearfix:after {
      249. content: ".";
      250. display: block;
      251. height: 0;
      252. clear: both;
      253. visibility: hidden;
      254. }
      255. * html>body .clearfix {
      256. display: inline-block;
      257. width: 100%;
      258. }
      259. * html .clearfix {
      260. /* Hides from IE-mac \*/
      261. height: 1%;
      262. /* End hide from IE-mac */
      263. }