(verschoben) Joomla Modulposition verändern

**Blade85** · 08.04.2008 11:03

Hallo an alle!

Arbeite mit Joomla 1.0.15 und habe mir das trentco Template besorgt!
Jetzt wollte ich eine zusätzliche Menüposition hinzufügen (das ich auch geschafft habe),
jedoch ist mein Problem das ich das Modul nicht auf die Linke Seite der Page bekomme!

Das Modul selbst habe ich mit Hilfe der Joomla Tutorials erstellt,
und das hat auch super geklappt!
Jedoch bekomme ich die Modulposition nicht dorhin wo ich sie gerne hätte
(ich weiß das es im Stylesheet definiert wird, jedoche sehe ich mich da nicht ganz raus)
Das ganze sieht jetzt so aus:

Jedoch hätte ich gerne die Position left genau gegenüber der Position right,
und das Bild sollte mittig bleiben!

Das Stylesheet sieht folgendermaßen aus:

Code:

BODY#body{
	margin:0;
	padding:0;
	text-align: center;
	background: #000;
}

body, td, th, tr, p, div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
	line-height: 145%;
}

#home_module div,
#home_module p {
	color: #666;
}

#right div,
#right p {
	color: #fff;
}

.moduletable {
	margin: 0;
	padding: 10px;
}

#content .moduletable {
	padding-left: 0;
}

p {
	margin:0;
	padding: 10px;
	padding-left: 0;
}

#left p {
	padding-left: 10px;
}

#wrapper {
	position: relative;
	width: 740px;
	margin: 0 auto;
	text-align: left;
}

#header {
	position: relative;
	height: 110px;
}

#logo {
	position: absolute;
	top: 60px;
	left: 0;
	width: 210px;
	height: 120px;
}

#menu {
	position: absolute;
	right: 190px;
	bottom: 10px;
}

#wrapper_content {
	float: left;
	width: 537px;
	background: #fff;
	padding-top: 10px;
}

#right {
	width: 200px;
	float: left;
}

#right .moduletable {
	padding-top: 180px;
	padding-left: 0;
}

#right p {
	padding: 10px;
}

#home_img {
	width: 535px;
	height: 388px;
	text-align: center;
}

#home_module {
	float: right;
	width: 315px;
}

#in_img {
	height: 115px;
	padding: 10px;
	padding-top: 0;
}

#left {
	float: left;
	width: 200px;
}

#left .moduletable {
	padding-top: 40px;
	text-align: right;
}

#content {
	float: left;
	width: 300px;
}

#content-padding {
	padding: 10px;
}

#footer {
	text-align: left;
}

#footer_module {
	float: left;
	width: 230px;
}

#footer_module div,
#footer_module p {
	color: #999;
	font-size: 10px;
}

#footermenu .moduletable-bottom {
	padding: 10px;
	padding-top: 8px;
}

#footermenu {
	float: left;
	width: 200px;
	text-align: right;
}

#logo img {
	display: block;
}

.space {
	height: 50px;
}

.clear {
	clear: both;
}


/* GENERAL PURPOSE STYLES */

a, a:link, 
a:active, 
a:visited {
	color: #9B0F05;
	text-decoration: none;
}

a:hover, a.active {
	text-decoration: underline;
}

table.moduletable {
	padding: 0;
	margin: 0;
	width: 100%;
	margin-bottom: 5px;
	font-weight: normal;
}

#header2 .moduletable {
	padding: 0;
	margin: 0;
}

.inputbox {
	margin-right: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	border: 1px solid #ddd;
}

.contentpane {
	padding-left: 0;
	padding-right: 0;
}

.contentpaneopen {
	width: 90%;
	margin: 0;
	padding: 0;
	border: none;
	font-size: 10px;
	font-weight: normal;
}

.contentdescription {
	font-size: 11px;
	color: #333;
	text-align: left;
}

.sectiontableentry1 {
	background-color: #fff;
}

.sectiontableentry2 {
	background-color: #f9f9f9;
}

.small {
  font-size: 9px;
  text-decoration: none;
  font-weight: normal;  
}

form {
	padding: 0;
	margin: 0;
}

#footer .moduletable-bottom {
	color: #999;
}

#footer .mainlevel-bottom {
	color: #999;
}

#footer a, 
#footer a:link, 
#footer a:visited  {
	font-size: 10px;
	padding-left: 10px;
	padding-right: 10px;
	color: #999;
	text-transform: lowercase;
}

#footer a:hover, 
#footer a#active_menu-bottom {
	text-decoration: underline;
}

.componentheading ,
.contentheading {
	font-size: 13px;
	color: #E13D0C;
	font-weight: bold;
	padding: 0;
	margin: 0;
	padding-bottom: 5px;
	text-transform: lowercase;
}


/* new tags */

h1, h2, h3, h4 {
	margin: 0;
	padding: 10px;
	padding-bottom: 0;
	padding-left: 0;
}

h1 {
	font-size: 14px;
}

h2 {
	font-size: 13px;
	color: #333;
}

h3 {
	font-size: 12px;
}

#home_module_content h3 {
	display: none;
}

#left h3 {
	padding-right: 0;
	padding-bottom: 5px;
	text-transform: lowercase;
}

#right h3 {
	background: url(../images/right_h3.jpg) no-repeat left top;
	padding: 5px;
	padding-left: 10px;
	text-transform: lowercase;
	height: 24px;
}

#footer h3 {
	display: none;
}

h4 {
	font-size: 11px;
	color: #333;
}

ul { 
	margin: 2px;
	padding: 6px;
	padding-left: 15px;
}

li {	
	list-style: none;
	list-style-image: url(../images/arrow.png);
	padding-left: 1px;
	line-height: 150%;
}

ul.arrow1 li,
ul.arrow2 li {
	padding-left: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
}

ul.arrow1,
ul.arrow2  {	
	line-height: 150%;
	padding-bottom: 3px;
	margin-top: 2px;
}

ul.arrow1 li {	
	list-style-image: url(../images/arrow1.jpg);
}

ul.arrow2 li {
	list-style-image: url(../images/arrow2.jpg);
}

#left ul {
	margin: 0;
	padding: 0;
	padding-left: 10px;
}

#left ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
}

#left ul li a, 
#left ul li a:link, 
#left ul li a:visited {
	text-decoration: underline;
	line-height: 20px;
	font-size: 11px;
	color: #666;
}

#left ul li a:hover,
#left ul li a:active {
	color: #E13D0C;
}


/* primary menu - at the top of this site */


#menu ul, 
#menu li {
	list-style-type:none;
	list-style-image:none;
	padding: 0;
	margin: 0;
}

#menu ul li {
	float: left;
	line-height: 30px;
}

#menu a, 
#menu a:link, 
#menu a:visited  {
	font-size: 11px;
	color: #C9C0A3;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 30px;
	text-transform: lowercase;
}

#menu ul li a:hover,
#menu ul li a#active_menu {
	text-decoration: underline;
}

img {
	border: 0;
}

Hoffe das mir dabei jemand helfen kann!
Mfg Blade

EDIT ON:
Ups habe das leider in die falsche Sektion gepostet!
Könnte das bitte jemand in die Joomla 1.0 Templates und Design kopieren!Danke
Habe ich übersehen!
Sorry!
EDIT OFF

**Blade85** · 09.04.2008 08:51

Keiner eine ahnung dazu?
Mfg Blade

**RedRaptor** · 09.04.2008 09:20

die css is zwar schön und gut aber die index.php wäre mir lieber

...ich vermute mal das nämlich ein object im gleichen container liegt und das (in der index.php) über bzw vor der menuposition. dieses object hat eventuell (bzw sehr warscheinlich) einen float.
mit css kannste da nix hinpositionieren...das müsste nämlich dann in der index.php geschehen.

MFG

**Blade85** · 09.04.2008 10:09

Hallo!
Danke für die Antwort!
Die index.php sieht folgendermaßen aus:

Code:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!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">
<head>
	<?php if($my->id) { initEditor(); } ?>
	<meta **********="Content-Type" content="text/html;><?php echo _ISO; ?>">
	<?php mosShowHead(); ?>
	<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\" >"; ?>
</head>

<body id="body">
	<div id="wrapper">
		<div id="header">
			<div id="logo"><?php echo "<a href=\"$GLOBALS[mosConfig_live_site]\"><img src=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/logo.jpg\" alt=\"image\" width=\"125\" height=\"40\">"; ?></a>
			</div>
			<div id="menu"><?php mosLoadModules ('user1',-2); ?></div>							
		</div><!-- end header div -->

		<div id="wrapper_content">
			<?php if($option=="com_frontpage") 
				{
					echo "<div id=\"home_img\">						
						<img src=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/home_img.jpg\" alt=\"image\" width=\"518\" height=\"388\">
					</div>
					<div id=\"home_module\">"; mosLoadModules ('user2',-2); echo "</div>";
				}						
			else { 
					echo "<div id=\"in_img\">
						<img src=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/in_img.jpg\" alt=\"image\" width=\"518\" height=\"115\">
					</div>"; ?>
					<div id="content">								
						<div id="content-padding">
							<?php //mosLoadModules ('abovemain',-2); ?>
							<?php mosMainBody(); ?>						
							<?php mosLoadModules ('belowmain',-2); ?>							
						</div>
					</div>							
			<?php }?>						
				<div class="clear"></div>
			</div><!-- end wrapper_content div -->
			<div id="right"><?php mosLoadModules ('right',-2); ?></div>
			<div class="clear"></div>
                        <div id="left"><?php mosLoadModules ('left',-2); ?></div>
			<div class="clear"></div>

			<div id="footer">
				<div id="footer_module"><?php mosLoadModules ('user3', -2 ); ?></div>
				<div id="footermenu"><?php mosLoadModules ('bottom', -2 ); ?></div>
			</div>			
		</div><!-- end wrapper div -->
		<div class="space"></div>
</body>
</html>

Hoffe das das weiterhilft!
Mfg Blade

**RedRaptor** · 09.04.2008 15:02

jupp...sagte ich ja..da liegt im div container "header" ein bild (im div "logo") und erst dann kommt die modulopsition

umtauschen, den div "logo" wegmachen" oder eine absolute positionierung geben....dann gehts

MFG

**Blade85** · 09.04.2008 15:55

Hallo!
Danke für die Antwort!
Das Logo habe ich bereits als absolut mit dem Stylesheet positioniert
(wie oben zu sehen)
Funktioniert jedoch nicht so wie ich das möchte!
Und wie meinst du das mit dem umtauschen?
Versteh ich jetzt nicht ganz!
Hab mich zwar auch schon bei SelfHTML schlaumachen wollen,
jedoch nichts passendes dazu gefunden!
Hoffe auf eine konstruktive Antwort!
Danke schonmal
Mfg Blade

**RedRaptor** · 09.04.2008 16:25

PHP-Code:


]<div id="header">

    <div id="logo"><?php echo "<a href=\"$GLOBALS[mosConfig_live_site]\"><img src=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/logo.jpg\" alt=\"image\" width=\"125\" height=\"40\">"; ?></a>

    </div>

    <div id="menu"><?php mosLoadModules ('user1',-2); ?></div>                            

</div><!-- end header div -->

so sieht dein header jetz aus

und so soll er dann aussehen:

PHP-Code:


<div id="header">

            

    <div id="menu"><?php mosLoadModules ('user1',-2); ?></div>

     <div id="logo"><?php echo "<a href=\"$GLOBALS[mosConfig_live_site]\"><img src=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/logo.jpg\" alt=\"image\" width=\"125\" height=\"40\">"; ?></a>

    </div>            

       

</div><!-- end header div -->

hoffe das war hilfreich

MFG

**Blade85** · 09.04.2008 20:16

Hallo und danke für die detailierte Antwort!
Habe das ganze jetzt mal eingebaut uns so interpretiert das ich left als position genommen habe!
Der code sieht jetzt so aus:

PHP-Code:


<div id="menu"><?php mosLoadModules ('left',-2); ?></div>

Das Menü ist zwar jetzt auf der linken seite, jedoch schaff ich es nicht,
es richtig zu positionieren!
Mit welchen Parametern positionier ich das richtig (im Stylesheet oder?),
und verändere die Größe!?
Denn noch sieht es so aus:

Hoffe das das jetzt die letzte Frage ist, und ich den Rest selbst hinbekomme!
Danke nochmals!
Mfg Blade

**RedRaptor** · 10.04.2008 06:48

ja richtig mit den stylsheets.

schau dir mal im css den container "#logo" an. ich schätze der hat eine width von 100% und einen float oder sowas. Der container schiebt dir nämlich deinen "#menu" container nach unten.

Tipp: Installiere dir für den FF die addons Webdeveloper und Firebug. Die helfen dir deine container anzusprechen bzw du weist leichter wo du hand anlegen musst.

MFG

**Blade85** · 14.04.2008 17:18

Hi Red Raptor!
Danke für den Hinweis mit Firebug und Webdeveloper, der hat mir viel geholfen!
Jetzt hab ichs hinbekommen so wie ich das wollte!

Danke MFG
Blade

Thema: (verschoben) Joomla Modulposition verändern

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

(verschoben) Joomla Modulposition verändern

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen