Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem mit Template“

D

DarkLuggi

Guest

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:



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:
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>


    <div id="top" class="top1"><jdoc:include type="modules" name="top" style="xhtml" /></div>

    <div id="pathway" class="pathway1"><jdoc:include type="module" name="breadcrumbs" /></div>

    <div id="content" >
    
    <div  id="left">
    <div id="left_oben"></div>
    <div id="left_inhalt"><jdoc:include type="modules" name="left" style="xhtml" /></div>
    <div id="left_unten"></div>
    </div>
    
    <div  id="center" >
    <div id="center_oben"></div>
    <div id="center_inhalt"><jdoc:include type="component" /></div>
    <div id="center_unten"></div>
    </div>
    
    <div  id="right" >
    <div id="right_oben"></div>
    <div id="right_inhalt"><jdoc:include type="modules" name="right" style="xhtml" /></div>
    <div id="right_unten"></div>
    </div>
    
    <div  id="footer" ><jdoc:include type="modules" name="footer" style="xhtml" /></div>
    
    </body>

und hier mein css code:

Code:
body{
background-color:#000000;
}

#top{
height:150px;
background-color:#006600;
}

#pathway{
padding-left:275px;
background-color:#0000FF;
height:25px;
}

#content{
}

#left{
padding-left:50px;
float:left;
width:200px;
background-color:#0000FF;
}

#left_oben{
background-image:url(../images/menuo.png);
height:16px;
}

#left_inhalt{
padding-left:12px;
background-image:url(../images/menum.png);
background-repeat:repeat-y;
}

#left a:visited{
background-image:url(../images/buttonlink.png);
color:#FFFFFF;
text-decoration: none;
}

#left a:hover{
background-image:url(../images/buttonlink.png);
color:#000000;
text-decoration: none;
}

#left_unten{
background-image:url(../images/menuu.png);
height:15px;
}

#center{
min-height:525px;
background-color:#00FF00;
width:750px;
float:left;
}

#center_oben{
}

#center_inhalt{
}

#center_unten{
}

#right{
float:left;
width:200px;  
background-repeat: no-repeat;
background-color:#FF0000;
}

#right_oben{
background-image:url(../images/menuo.png);
height:16px;
}

#right_inhalt{
padding-left:6px;
background-image:url(../images/menum.png);
background-repeat:repeat-y;
}

#right_unten{
background-image:url(../images/menuu.png);
height:15px;
}

#footer{
padding-left:210px;
clear:both;
background-color:#000099;
}

#mainlevel:link{
background-color:#000000;
}

.pathway {
  text-align: left;
  font-size: 0.8em;
  color:#000000;
}
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 von einem Moderator:

sokie

Mod | Web

AW: Problem mit Template

versuch es mal damit am Anfang der CSS Datei alle margins und Paddings füralleElemente auf 0 zu setzen:
Code:
*{
  padding: 0;
  margin:0;
}
(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.
 
D

DarkLuggi

Guest

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:
*{
  padding: 0;
  margin:0;
}

body{
background-color:#000000;
}

#top{
height:150px;
background: center;
background-color:#006600;
background-repeat:no-repeat;
}

#pathway{
padding-left:275px;
background-color:#0000FF;
height:25px;
}

#content{
}

#left{
padding-left:50px;
float:left;
width:200px;
background-color:#0000FF;
}

#left_oben{
background-image:url(../images/menuo.png);
height:16px;
}

#left_inhalt{
padding-left:12px;
background-image:url(../images/menum.png);
background-repeat:repeat-y;
}

#left_unten{
background-image:url(../images/menuu.png);
height:15px;
}

#center{
min-height:525px;
background-color:#00FF00;
width:750px;
float:left;
}

#center_oben{
}

#center_inhalt{
}

#center_unten{
}

#right{
float:left;
width:200px;  
background-repeat: no-repeat;
background-color:#FF0000;
}

#right_oben{
background-image:url(../images/menuo.png);
height:16px;
}

#right_inhalt{
padding-left:6px;
background-image:url(../images/menum.png);
background-repeat:repeat-y;
}

#right_unten{
background-image:url(../images/menuu.png);
height:15px;
}

#footer{
padding-left:210px;
clear:both;
background-color:#000099;
}

.pathway {
  text-align: left;
  font-size: 0.8em;
  color:#000000;
}

a.mainlevel:link, a.mainlevel:visited, a.mainlevel:activated{
background-color:#999999;
color:#FF0000;
text-decoration:none;
}

a.mainlevel:hover{
background-color:#666666;
color:#CC0000;
text-decoration:none;
}

ich hätte wohl auch schon so ne halbe Lösung:

Code:
#left a:link, a:visited, a:activated{
background-color:#999999;
color:#FF0000;
text-decoration:none;
}

#left a:hover{
background-color:#666666;
color:#CC0000;
text-decoration:none;
}
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?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.157
Beiträge
2.581.864
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben