Textausrichtung für Modul in joomla! festlegen

dreesi · 6. Juli 2008

Hallo,

ich bin dabei ein Template für eine joomla! Webpage zu erstellen. Auch da benötigt man eine css-Datei.

Ich möchte gerne die Textausrichtung in einem Modul anders festlegen, weiss aber nicht wie.

Ich hab mal nen Screenshot dazugelegt.
http://www.drees.dk/test/Bild1.jpg

Folgenden Eintrag gibt es in in der css-Datei:

Code

/*Einstellung für den Layer Modul_1*/




#modul_1 table.moduletable{




text-align:left;}  




#modul_1 ul li{ 




padding:0px;




margin:0px;




list-style:




}

Alles anzeigen

Ich hab auch schon mit den Einträgen ein wenig "rumgespiel", konnte aber lediglich die Aufzählungszeichen verändern.

Ich wäre sehr dankbar, wenn mir jemand einen Tipp geben könnte wie ich die Überschrift "Neuigkeiten" genauso ausrichten kann wie die Überschrift "Menu".

Gruss

dreesi[/code]

Ginnic · 6. Juli 2008

Leider verstehe ich nicht wirklich was Du ändern möchtest...

dreesi · 6. Juli 2008

Also,

die Überschrift "Menu" ist mit den Menupunkten linksbündig ausgerichtet. So soll es sein.

Die Überschrift "Neuigkeiten" ist zu den Aufzählungen zu weit links verrutscht.

Ich möchte das "Neuigkeiten" und die Aufzählungen darunter linksbündig an einer Linie ausgerichtet sind. Oder anders ausgedrückt, die Überschrift "Neuigkeiten" soll weiter nach rechts "geschoben" werden.

Ich hoffe ich habe mich verständlich genug ausgedrückt :oops:

Gruss

dreesi

Peter Gedamke · 6. Juli 2008

nee, nicht so ganz :wink:

kann es sein, dass bei dir die Eingabe "float:left" gemeint ist - also gleich, als wie man das einzugeben hat, wenn man <li - Eingaben in eine horizontale Reihe bekommen möchte?

dreesi · 6. Juli 2008

irgendwie reden wir aneinander vorbei. Mit float hab ich auch schon "experimentiert". Hat mir bei meinem Problem auch nicht geholfen. Vielleicht hab ich den Befehl auch falsch benutzt. :roll:

Würde es Sinn machen die beiden Template Dateien hier zu zeigen (index.php und die komlpett css-Datei)?

Hab mit Gimp das Problem mal grafisch gelöst. So sollte es mal aussehen:

http://www.drees.dk/test/Bild2.jpg

Gruss

dreesi

PS: Danke im übrigen für die echt fixen Antworten!!!

Peter Gedamke · 6. Juli 2008

da es sich dabei um seitliche Abstände handelt, hast du es auch mit "margin-left" etc. versucht?
Sonst - sollte die Seite noch nicht online stehen - gebe vielleicht auch mal deine html-Eingaben dazu hier ein
- - - - -
dein oben geschriebener Style ist mir jetzt nicht ganz nachvollziehbar -
hast du die Einträge nun tabellen- oder listenmässig vorgenommen?

bei
list-style:
}
fehlen da mal die näheren Angaben

dreesi · 6. Juli 2008

Ich glaub am schlausten ist es beide Dateien mal zu zeigen. Ich hab joomla! über xampp auf meinem Rechner laufen, kann also nix online zeigen

hier die index.php

PHP

<?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">




<?php echo "<?xml version=\"1.0\"?>"; ?>




<html xmlns="http://www.w3.org/1999/xhtml">




<head>




<title><?php echo $mosConfig_sitename; ?></title>




<meta http-equiv="Content-Type" content= "text/html; <?php echo _ISO; ?>" />




<?php




if ($my->id) {




include ("editor/editor.php");




initEditor();




}




?>




<?php mosShowHead(); ?>




<link href="<?php echo $mosConfig_live_site; ?>/templates/sg/css/template_css.css" rel="stylesheet" type="text/css" />




<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />




</head>




<body>




<center>




<div id="container">




<div id="title">




<h1><?php echo $mosConfig_sitename; ?> </h1>




<div id="search"><?php mosLoadModules ( "user4" ); ?> </div>




</div>




<div id="center_table">




<div id="left" style="clear:right;">




<?php mosLoadModules ( 'left' ); ?>




</div>




<div id="right">




<?php mosLoadModules ( "right" ); ?>




</div>




<div id="modul_1">




<?php mosLoadModules ( 'user1' ); ?>




</div>




<div id="content">




<?php mosPathWay(); ?><br/><br/>




<?php mosMainBody(); ?><br/><br/>




</div>




</div> 




<div id="bottom"><div id="bottom_text">




Copyright ©  <a href="http://www.test.de"




 target="_blank">www.test.de</a>




<a href=" <?php echo $mosConfig_live_site;?>" accesskey="1">




<?php echo $mosConfig_sgluenen; ?>




</a>




</div>




</div>




</div>




</center>




</body>




</html>

Alles anzeigen

und hier die css-Datei

Code

/*Allgemeine Einstellungen*/




body {




background-color: #B4DDFF;




font-family:Verdana;




font-size:11px;




}




/*Einstellungen für die Anzeige der Überschriften*/




h1 {font-size:16px;color:#638CB2; margin-bottom:0px;text-shadow:#FFFFFF 2px;}




h2 {font-size:15px;color:#000000;}




h3 {font-size:14px;color:#000000;}




/*Einstellungen für die Anzeige der Links*/




a:link, a:visited, a:active, a:hover{




text-decoration:none;




font-weight:bold;




color:#5F8AAF;




font-size:11px;




cursor:crosshair;




}




a:active, a:hover{




text-decoration:none;




color:#FE8B1F;




}




/*Der Container schließt die ganze Seite ein und bestimmt deren Breite*/




#container{




width:90%;




font-family:Verdana;




font-size:11px;




background-color:#B4DDFF;




}




/*In diesem Layer wird der Seitentitel ausgegeben*/




#title {




background:url(../images/header2.jpg) no-repeat;




background-color:#B4DDFF;




text-align:center;




height:160px;




border-bottom:10px solid #B4DDFF;




margin-bottom:20px; /*Abstand zum Content Container*/




}




#title h1 {




padding-top:153px;




}




/*Einstellungen zum Suchmodul*/




#search {




float:right;




width:212px;




padding-right:40%;




}




#search table.moduletable {




padding-left:100px;




border:0px solid #91B5CE;




background-color:#91B5CE;




}




#search .inputbox {




border:0px;




color:#000000;




background-color:#628bb1;




}




#search .button {




border:1px solid #D8E5EB;




color:#000000;




background-color:#B4DDFF;




}




/*Einstellungen für den center_table*/




#center_table {




padding:2px;




}




/*Einstellung für den Layer Modul_1*/




#modul_1 table.moduletable{




text-align:left;}  




#modul_1 ul li{ 




padding:0px;




margin:0px;




list-style:




}




/*Einstellungen für die beiden Layer neben dem Content*/




#left, #right {




line-height:15px;




}




#left {




width:15%;




float:left;




}




#right {




width:20%;




float:right;




}




/*Einstellungen für den Content Layer*/




#content {




float:left;




width:55%;




margin-left:3%;




text-align:left;




font-family:Verdana;




font-size:11px;




border: 0px dashed #C3C3C3;




margin-bottom: 10px;




padding-left: 5px;




padding-right: 5px;




overflow:hidden; /*damit z.B. bei Suchabfragen Überlange URL's nicht das Layout zerstören*/




background-color:#FFFFFF;




}




#content h1 {




font-weight:bold;




font-family:Verdana;




font-size:12px;




color:#FE8B1F;




} 




/*Einstellungen für den untersten Layer*/




#bottom {




clear:both;




background:url(../images/bottom_right.gif) no-repeat right;




background-color:#91B5CE;




height:34px;




border-top:4px solid #B4DDFF;




margin-top:20px;




vertical-align:bottom;




}




#bottom_text {




padding:7px;




}




/*Einstellungen speziell fÃŒr Joomla*/




/*Module*/




table.moduletable {




width:100%;




text-align:left;




font-family:Verdana;




font-size:11px;




border: 0px dashed #C3C3C3; /*Rahmen um die einzelnen Module (Menü, Poll, Suchen..) */




margin-bottom: 10px; /*Abstand zwischen den Modulen 10px*/




padding-left:1px; /*Abstand zum Rahmen*/




padding-right:1px;




background-color:#B4DDFF;




}




table.moduletable th { /*Modulüberschrift*/




text-align:left;




font-family:Verdana;




font-size:13px;




background-color:#648AAF;




background:url(../images/menu_top_bg.gif) repeat-x;




color:#FFFFFF;




}




table.moduletable td { /*Modultext, nicht Content*/




text-align:left;




font-size:11px;




font-family:Verdana;




}




/*Content*/




td { /*Contenttext, nicht Modul*/




font-family:Verdana;




font-size:11px;




}




th {




font-family:Verdana;




font-size:11px;




}




p {




font-family:Verdana;




font-size:11px;




}




.contentheading, .componentheading {




font-weight:bold;




font-family:Verdana;




font-size:12px;




color:#FE8B1F;




}




.small {




font-family:Verdana;




font-size:11px;




color:#888888;




}




.createdate {




font-family:Verdana;




font-size:11px;




color:#888888;




} 




/*Navigationsmenu*/




a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover {




display:block;




background-color:#B4DDFF;




text-decoration:none;




font-weight:bold;




color:#5F8AAF;




font-size:11px;




}




a.mainlevel:active, a.mainlevel:hover, a.mainlevel:focus {




display:block;




background-color:#FE8B1F;




color:#FFFFFF;




font-size:11px;




text-decoration:none;




font-weight:bold;




}




a.sublevel:link, a.sublevel:visited, a.sublevel:hover {




display:block;




background-color:#B4DDFF;




text-decoration:none;




font-weight:bold;




color:#5F8AAF;




font-size:11px;




}




a.sublevel:active, a.sublevel:hover, a.sublevel:focus {




display:block;




background-color:#FE8B1F;




color:#FFFFFF;




font-size:11px;




text-decoration:none;




font-weight:bold;




}/*Sonstiges*/




.button {




background-color:#628BB1;




color:#FFFFFF;




font-size:11px;




font-family:Verdana;




border: 1px solid #D8E5EB;




}




.inputbox {




border:0px solid #C3C3C3;




}

Alles anzeigen

Ich hoffe es ist nicht zu unübersichtlich.

Gruss

dreesi

PS: Mit dem Liststyle hast du recht, ich habe damit getestet, und es nicht richtig gelöscht, ändert aber nix an meinem problem.

Peter Gedamke · 6. Juli 2008

hui,

also das ist mir ehrlich ein bischen sehr umfangreich, als dass ich jetzt alles aus dieser Aufstellung für mich nachvollziehbar entnehmen könnte - ich muss sowas besser als Seite visuell betrachten können :wink:

Den erste Part müsste sich eh jemand durchsehen, dem PHP ausreichend geläufig ist
sorry, vielleicht 'ne dumme Antwort, aber kenne meine (leider) fachlichen Grenzen...

dreesi · 11. Juli 2008

Hallo,

danke für eure Hilfeversuche. Hab nichts gefunden um die Textausrichtung zu ändern. :?

Dafür habe ich den div Layer jetzt so angeordnet das es jetzt wenigstens ordentlich aussieht. Und wenn ich ehrlich bin gefällt es mir so auch besser.

Bei weiteren Fragen werde ich euch wieder auf den Geist fallen

Danke

dreesi

Textausrichtung für Modul in joomla! festlegen

Jetzt mitmachen!

Teilen