Anzeige

Problem mit Template

Problem mit Template | PSD-Tutorials.de

Erstellt von DarkLuggi, 24.10.2008.

  1. DarkLuggi

    DarkLuggi Noch nicht viel geschrieben

    Dabei seit:
    12.08.2007
    Beiträge:
    15
    Problem mit Template
    Hi alle zusammen,

    ich versuche mich seite einigen Wochen ein bisschen mit Webdesign und Joomla. Zurzeit bastle ich mein eigenes Template und habe jetzt ein problem mit dem design des Menüs:

    [​IMG]

    Diese zwei Lücken sollten da eigentlich nicht sein :'(.
    (bitte keine kommentare zu dem design. die farben sind nur dafür da, damit ich mich ein bisschen besser zurechtfinde
    bin halt noch n Newbie ;) )
    hier mal mein index.php datei:
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    4. <jdoc:include type="head" />
    5. <link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
    6. <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    7. </head>
    8.  
    9.  
    10.     <div id="top" class="top1"><jdoc:include type="modules" name="top" style="xhtml" /></div>
    11.  
    12.     <div id="pathway" class="pathway1"><jdoc:include type="module" name="breadcrumbs" /></div>
    13.  
    14.     <div id="content" >
    15.    
    16.     <div  id="left">
    17.     <div id="left_oben"></div>
    18.     <div id="left_inhalt"><jdoc:include type="modules" name="left" style="xhtml" /></div>
    19.     <div id="left_unten"></div>
    20.     </div>
    21.    
    22.     <div  id="center" >
    23.     <div id="center_oben"></div>
    24.     <div id="center_inhalt"><jdoc:include type="component" /></div>
    25.     <div id="center_unten"></div>
    26.     </div>
    27.    
    28.     <div  id="right" >
    29.     <div id="right_oben"></div>
    30.     <div id="right_inhalt"><jdoc:include type="modules" name="right" style="xhtml" /></div>
    31.     <div id="right_unten"></div>
    32.     </div>
    33.    
    34.     <div  id="footer" ><jdoc:include type="modules" name="footer" style="xhtml" /></div>
    35.    
    36.     </body>
    37.  
    und hier mein css code:

    Code (Text):
    1.  
    2. body{
    3. background-color:#000000;
    4. }
    5.  
    6. #top{
    7. height:150px;
    8. background-color:#006600;
    9. }
    10.  
    11. #pathway{
    12. padding-left:275px;
    13. background-color:#0000FF;
    14. height:25px;
    15. }
    16.  
    17. #content{
    18. }
    19.  
    20. #left{
    21. padding-left:50px;
    22. float:left;
    23. width:200px;
    24. background-color:#0000FF;
    25. }
    26.  
    27. #left_oben{
    28. background-image:url(../images/menuo.png);
    29. height:16px;
    30. }
    31.  
    32. #left_inhalt{
    33. padding-left:12px;
    34. background-image:url(../images/menum.png);
    35. background-repeat:repeat-y;
    36. }
    37.  
    38. #left a:visited{
    39. background-image:url(../images/buttonlink.png);
    40. color:#FFFFFF;
    41. text-decoration: none;
    42. }
    43.  
    44. #left a:hover{
    45. background-image:url(../images/buttonlink.png);
    46. color:#000000;
    47. text-decoration: none;
    48. }
    49.  
    50. #left_unten{
    51. background-image:url(../images/menuu.png);
    52. height:15px;
    53. }
    54.  
    55. #center{
    56. min-height:525px;
    57. background-color:#00FF00;
    58. width:750px;
    59. float:left;
    60. }
    61.  
    62. #center_oben{
    63. }
    64.  
    65. #center_inhalt{
    66. }
    67.  
    68. #center_unten{
    69. }
    70.  
    71. #right{
    72. float:left;
    73. width:200px;  
    74. background-repeat: no-repeat;
    75. background-color:#FF0000;
    76. }
    77.  
    78. #right_oben{
    79. background-image:url(../images/menuo.png);
    80. height:16px;
    81. }
    82.  
    83. #right_inhalt{
    84. padding-left:6px;
    85. background-image:url(../images/menum.png);
    86. background-repeat:repeat-y;
    87. }
    88.  
    89. #right_unten{
    90. background-image:url(../images/menuu.png);
    91. height:15px;
    92. }
    93.  
    94. #footer{
    95. padding-left:210px;
    96. clear:both;
    97. background-color:#000099;
    98. }
    99.  
    100. #mainlevel:link{
    101. background-color:#000000;
    102. }
    103.  
    104. .pathway {
    105.   text-align: left;
    106.   font-size: 0.8em;
    107.   color:#000000;
    108. }
    109.  
    110.  
    Ich konnte leider keinen Fehler finden der diese Lücke hervorruft.
    Ich nehme mal an, dass daran liegt, das da links ein modul reingeladen wird.
    Ich habe einmal den befehl
    <jdoc:include type="modules" name="left" style="xhtml" />
    weggelassen und dem container noch eine höhe gegeben dann war die lücke weg.
    Hoffe ihr könnt mir helfen...
    schon mal danke im vorraus!
     
    Zuletzt bearbeitet: 24.10.2008
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Problem mit Template
    AW: Problem mit Template

    versuch es mal damit am Anfang der CSS Datei alle margins und Paddings füralleElemente auf 0 zu setzen:
    Code (Text):
    1.  
    2. *{
    3.   padding: 0;
    4.   margin:0;
    5. }
    6.  
    (hier könnte es dazu kommen, dass es das design ein bisschen zerhaut - die fehlenden paddings, margins dann entsprechend an den Elementen nachtragen).

    andererseits haben auch die module entsprechende selektoren (klassen,id) die man über css formatieren kann.
     
    #2      
  3. DarkLuggi

    DarkLuggi Noch nicht viel geschrieben

    Dabei seit:
    12.08.2007
    Beiträge:
    15
    Problem mit Template
    AW: Problem mit Template

    Hat geklappt :):):)
    vielen Dank für die schnelle Antwort!!!
    [​IMG]
     
    #3      
  4. DarkLuggi

    DarkLuggi Noch nicht viel geschrieben

    Dabei seit:
    12.08.2007
    Beiträge:
    15
    Problem mit Template
    AW: Problem mit Template

    Ich komm direkt mal mit dem nächsten Problem:
    Ich versuche gerade das Hauptmenü zu editieren
    doch irgendwie reagiert joomla auf "a.mainlink:..." nicht
    alles andere funktioniert soweit
    und wenn ich jetzt alle links auf der Seite mit "a:link..." editieren will ändern sich auch die links im menü

    hier jetzt nochmal der css code:

    Code (Text):
    1.  
    2. *{
    3.   padding: 0;
    4.   margin:0;
    5. }
    6.  
    7. body{
    8. background-color:#000000;
    9. }
    10.  
    11. #top{
    12. height:150px;
    13. background: center;
    14. background-color:#006600;
    15. background-repeat:no-repeat;
    16. }
    17.  
    18. #pathway{
    19. padding-left:275px;
    20. background-color:#0000FF;
    21. height:25px;
    22. }
    23.  
    24. #content{
    25. }
    26.  
    27. #left{
    28. padding-left:50px;
    29. float:left;
    30. width:200px;
    31. background-color:#0000FF;
    32. }
    33.  
    34. #left_oben{
    35. background-image:url(../images/menuo.png);
    36. height:16px;
    37. }
    38.  
    39. #left_inhalt{
    40. padding-left:12px;
    41. background-image:url(../images/menum.png);
    42. background-repeat:repeat-y;
    43. }
    44.  
    45. #left_unten{
    46. background-image:url(../images/menuu.png);
    47. height:15px;
    48. }
    49.  
    50. #center{
    51. min-height:525px;
    52. background-color:#00FF00;
    53. width:750px;
    54. float:left;
    55. }
    56.  
    57. #center_oben{
    58. }
    59.  
    60. #center_inhalt{
    61. }
    62.  
    63. #center_unten{
    64. }
    65.  
    66. #right{
    67. float:left;
    68. width:200px;  
    69. background-repeat: no-repeat;
    70. background-color:#FF0000;
    71. }
    72.  
    73. #right_oben{
    74. background-image:url(../images/menuo.png);
    75. height:16px;
    76. }
    77.  
    78. #right_inhalt{
    79. padding-left:6px;
    80. background-image:url(../images/menum.png);
    81. background-repeat:repeat-y;
    82. }
    83.  
    84. #right_unten{
    85. background-image:url(../images/menuu.png);
    86. height:15px;
    87. }
    88.  
    89. #footer{
    90. padding-left:210px;
    91. clear:both;
    92. background-color:#000099;
    93. }
    94.  
    95. .pathway {
    96.   text-align: left;
    97.   font-size: 0.8em;
    98.   color:#000000;
    99. }
    100.  
    101. a.mainlevel:link, a.mainlevel:visited, a.mainlevel:activated{
    102. background-color:#999999;
    103. color:#FF0000;
    104. text-decoration:none;
    105. }
    106.  
    107. a.mainlevel:hover{
    108. background-color:#666666;
    109. color:#CC0000;
    110. text-decoration:none;
    111. }
    112.  
    ich hätte wohl auch schon so ne halbe Lösung:

    Code (Text):
    1.  
    2. #left a:link, a:visited, a:activated{
    3. background-color:#999999;
    4. color:#FF0000;
    5. text-decoration:none;
    6. }
    7.  
    8. #left a:hover{
    9. background-color:#666666;
    10. color:#CC0000;
    11. text-decoration:none;
    12. }
    13.  
    das sieht dann aber nicht einheitlich aus, weil der hintergrund sich dann nach der länge des eintrages im menü richtet

    ich würde lieber a.mainlevel benutzen und ich würde gerne wissen warum das bei mir nicht klappt
    hat jemand ne Idee wie man das Problem lösen könnte?
     
    #4      
x
×
×
teststefan