Nicht mehr ganz neu hier
Hallo zusammen!
Zuallererst muss ich erwähnen, dass ich ein Joomla-Anfänger bin. Ich kenne html und css aber bin auch noch lange nicht perfekt damit. Mag also sein, dass dies eine "dumme" Frage ist, aber ich bin auch nach längerem Suchen auf verschiedenen Seiten und per Google bisher zu keiner Lösung gekommen...
Ich versuche mein eigenes Template zu entwerfen. Ich weiss, dass das normalerweise nicht gerade für Anfänger ist, aber ich lerne gern dazu und probiere Dinge aus. Momentan habe ich eine Art Template-Dummy aus farbigen Flächen bei mir lokal auf XAMPP installiert.
Unter dem horizontalen Hauptmenü habe ich eine weiße Fläche in welcher ich gern die breadcrumbs hätte. Leider werden diese aber im Bereich für den Hauptinhalt angezeigt und ich konnte bisher nicht herausfinden warum.
Ich hoffe Ihr könnt mir da weiterhelfen und ein paar Tipps geben.
Vielen Dank schon mal vorab - und hier wären meine html und css-Dateien:
HTML:
CSS:
So sieht mein Bildschirm momentan aus:
Die größere weiße Fläche ist die wo das Breadcrumb mal erscheinen soll.
Der kleine Kreis zeigt wo sich das Breadcrumb aber nun befindet.
Zuallererst muss ich erwähnen, dass ich ein Joomla-Anfänger bin. Ich kenne html und css aber bin auch noch lange nicht perfekt damit. Mag also sein, dass dies eine "dumme" Frage ist, aber ich bin auch nach längerem Suchen auf verschiedenen Seiten und per Google bisher zu keiner Lösung gekommen...
Ich versuche mein eigenes Template zu entwerfen. Ich weiss, dass das normalerweise nicht gerade für Anfänger ist, aber ich lerne gern dazu und probiere Dinge aus. Momentan habe ich eine Art Template-Dummy aus farbigen Flächen bei mir lokal auf XAMPP installiert.
Unter dem horizontalen Hauptmenü habe ich eine weiße Fläche in welcher ich gern die breadcrumbs hätte. Leider werden diese aber im Bereich für den Hauptinhalt angezeigt und ich konnte bisher nicht herausfinden warum.
Ich hoffe Ihr könnt mir da weiterhelfen und ein paar Tipps geben.
Vielen Dank schon mal vorab - und hier wären meine html und css-Dateien:
HTML:
HTML:
<html>
<head>
<jdoc:include type="head" />
<link href="/GymnasticsUnited/templates/GUneu/css/template.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/system/css/general.css" type="text/css" />
</head>
<body>
<div id="center">
<div id="Bereich1" align="center"><img src="/GymnasticsUnited/templates/GUneu/images/banner1.jpg"></div>
<div id="Bereich2">
<div id="hauptnavi">hauptnavi<jdoc:include type="modules" name="user6" style="xhtml" /></div>
<div id="search">search<jdoc:include type="modules" name="user4" style="xhtml" /></div>
</div>
<div id="Bereich3">breadcrumb<jdoc:include type="modules" name="user8" style="xhtml" /></div>
<div id="Bereich4">
<div id="links">links<jdoc:include type="modules" name="left" style="xhtml" />
<ul class="menu">
<li>TEST</li>
</ul>
</div>
<div id="content">content<jdoc:include type="modules" name="user1" style="xhtml" /></div>
</div>
<div id="Bereich5"><img src="/GymnasticsUnited/templates/GUneu/images/footer.gif"><jdoc:include type="modules" name="syndicate" style="xhtml" /></div>
</div>
</body>
</html>CSS:
HTML:
body {
text-align: center;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background-color: #b5b5b5;
}
/*Zentrierung */
#center {
width:1004px;
margin:0px auto;
}
/*Banner */
#Bereich1 {
border-top: 2px solid #8f8f8f;
border-left: 2px solid #8f8f8f;
border-right: 2px solid #8f8f8f;
text-align: left;
width: 1000px;
height: 200px;
}
/*Main Menu und search */
#Bereich2 {
border-left: 2px solid #8f8f8f;
border-right: 2px solid #8f8f8f;
width: 1000px;
float: left;
}
#hauptnavi {
background-color: Green;
width: 800px;
height: 30px;
float: left;
}
#search {
background-color: Grey;
width: 200px;
height: 30px;
float: right;
}
div.module_suche {
height: 30px;
width: 200px;
background-color: #FFFFFF;
}
/*breadcrumb */
#Bereich3 {
border-left: 2px solid #8f8f8f;
border-right: 2px solid #8f8f8f;
width: 1000px;
background-color: #FFFFFF;
height: 15px;
float: left;
}
div.module_breadcrumb {
color: #000000;
}
/*links und content */
#Bereich4 {
border-left: 2px solid #8f8f8f;
border-right: 2px solid #8f8f8f;
width: 1000px;
float: left;
}
#links {
background-color: Fuchsia;
width: 230px;
float: left;
height: auto;
}
#content {
background-color: Lime;
width: 770px;
float: right;
height: auto;
}
/*footer */
#Bereich5 {
border-bottom: 2px solid #8f8f8f;
border-left: 2px solid #8f8f8f;
border-right: 2px solid #8f8f8f;
width: 1000px;
height: 30px;
float: left;
}So sieht mein Bildschirm momentan aus:
Die größere weiße Fläche ist die wo das Breadcrumb mal erscheinen soll.
Der kleine Kreis zeigt wo sich das Breadcrumb aber nun befindet.
