Module mit Css formatieren

Moderator: Sisko1990

Forum rules
Forumregeln
Locked
bang
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Dec 18, 2005 9:49 pm

Module mit Css formatieren

Post by bang » Mon Jan 09, 2006 1:07 am

Ich habe ein neues Menu erstellt.
Dann erstellt Joomla automatisch ein Module.
Dieses Module hat die Parameter

Menu Class Suffix 
Module Class Suffix

hier soll man CSS-Klassen eingeben können.
Ich habe in der Template_css.css

Eine CSS-Klasse und ID erstellt.
den Namen auch in Menu Class Suffix und Module Class Suffix eingetragen.
Passiert, aber nichts! Gebe ich es falsch ein?

Kann mir jemand bitte helfen.

 
User avatar
stars
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Mon Nov 07, 2005 12:57 pm
Location: Munich
Contact:

Re: Module mit Css formatieren

Post by stars » Mon Jan 09, 2006 11:52 am

Versuche im Quellcode den Selektor mit dem von Dir definierten Suffix zu finden und dann kennst Du
auf welchen Bereich die CSS eine Auswirkung hat.  Und dann probieren und testen ...
 

bang
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Dec 18, 2005 9:49 pm

Re: Module mit Css formatieren

Post by bang » Mon Jan 09, 2006 10:14 pm

Leider erstellt das Module "Tabellen"

wo drinne steht

und --> ist die Klasse "mainlevel"

In der CSS-Datei schreibe ich

td.mainlevel { text-algin:center } --> Geht nicht

Schreib ich td { text-algin:center } --> funktioniert es.
Kann es so aber nicht verwenden, weil es mir alle td auf center setzt.

Was kann jetzt noch machen?

User avatar
stars
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Mon Nov 07, 2005 12:57 pm
Location: Munich
Contact:

Re: Module mit Css formatieren

Post by stars » Tue Jan 10, 2006 2:02 am

bang wrote:
td.mainlevel { text-algin:center } --> Geht nicht

Schreib ich td { text-algin:center } --> funktioniert es.
Zunächst mal nur zur formalen Richtigkeit:
1.) achte auf die richtige Schreibweise "align" und nicht algin
2.) in CSS muss jede Zeile mit einem Semikolon ";" abgeschlossen werden!

Nochmals das mit dem Suffix. Hast Du dies weiter verfolgt, diese werden von Dir in den Parametern der
Module definiert  z.B. _xyz und dann findest Du im Quelltext z.B. mainlevel_xyz, das Du mit dem Stylesheet
ansprechen kannst.

bang
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Dec 18, 2005 9:49 pm

Re: Module mit Css formatieren

Post by bang » Tue Jan 10, 2006 6:03 pm

Sorry mit align und den Semikonlons.

Das vor dem Suffix mainlevel steht habe
ich jetzt verstanden.

Ich kann das Module auch ansprechen.
Nur nicht mit den Parameter .mainlevel_Suffix {text-align:center;}.

Weil das Module als Tabelle ausgeben wird und
bei bla steht und derSuffix definition
steht im link Link.

Was machen? wollte ich nicht definieren, weil
alles was ist dann mittig steht.

Ratlosigkeit

User avatar
stars
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Mon Nov 07, 2005 12:57 pm
Location: Munich
Contact:

Re: Module mit Css formatieren

Post by stars » Tue Jan 10, 2006 10:19 pm

Was willst Du also genau bewirken mi der Formatierung?
Mit  align=left  wird nur festgelegt dass der Text linksbündig anfängt,
was bei Tabellen sinnvoll ist.

Dir bleiben aber noch einige andere Attribute zur Gestaltung
z.B. Rand (margin) und Auffüllung (padding):

Code: Select all

.mainlevel_xyz {
	margin-right: 5px;
	margin-left: 5px;
	padding-right: 10px;
	padding-left: 10px;	
	}

bang
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Dec 18, 2005 9:49 pm

Re: Module mit Css formatieren

Post by bang » Tue Jan 10, 2006 10:40 pm

Ich möchte gerne, dass der Text in der Mitte steht.

Danke für die Hilfe

User avatar
stars
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Mon Nov 07, 2005 12:57 pm
Location: Munich
Contact:

Re: Module mit Css formatieren

Post by stars » Wed Jan 11, 2006 12:36 am

Du kannst zwei Selektoren in CSS kombinieren und ihnen dann einen anderen
Wert zuweisen. z.B in dem HTML Beispiel ist als rot definiert dann aber
ist blau, weil zusammen als blau definiert werden:

Code: Select all

<html>
<head>
<title>CSS Demo</title>
<style type="text/css">
<!--
b {
	color: red;
}
p b {
	color: blue;
}
-->
</style>
</head>
<body>
<b>Farbe Rot</b>
<p>Farbe Schwarz <b> Farbe Blau</b></p>
</body>
</html>

bang
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Dec 18, 2005 9:49 pm

Re: Module mit Css formatieren

Post by bang » Wed Jan 11, 2006 12:41 am

Super! Danke für den Tipp.

Ich versuche mich gerade am Design.
Ich weiß es passt jetzt nicht direkt hierein.

Habe hier wohl ein Css-Expert (stars ).  ;)
Deshalb frage ich einfach mal.

Ist es Sinnig ein Design ohne Tabellenstruktur
zu machen?

Weil ich bin ganz schön am kämpfen.
Und bin Css-Anfänger!!!

User avatar
stars
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Mon Nov 07, 2005 12:57 pm
Location: Munich
Contact:

Re: Module mit Css formatieren

Post by stars » Wed Jan 11, 2006 2:32 am

bang wrote: Ist es Sinnig ein Design ohne Tabellenstruktur
zu machen?
Die moderne und elegantere Variante besteht nicht in den Tabellen sondern in der Verwendung von Containern
also den .. Tags. Ich habe mich in letzter Zeit viel damit herumgeschlagen und für eine einfache Lösungen
ist dies auch recht brauchbar. Bei komplexeren Projekten ist jedoch das Verhalten der Browser nicht mehr nachzuvollziehen.
Vermutlich sind das noch die Startprobleme der Browser. Lässt sich aber weitgehend durch work-around und trixen lösen.

Zur Verzweiflung treibt eiem jedoch die fehlende kompatibilität zwischen den Browsern vorallem Firefox und MS Internet Explorer
haben unterschiedliche Definitionen für das das Boxen-Modell. Hier gibt es zwar gut dokumentierte Hacks aber das sind Klimmzüge, die
einem das Leben noch zusätzlich erschweren. Daher bin ich in letzter Zeit wieder zu den Tabellen zurückgekehrt.

Da Joomla alles in Tabellenform ausgiebt führt dies schnell zu Tabelle in Tabelle in Tabelle etc. und Keiner blickt mehr durch
inklusive die Browser.
Daher mein Tip packe alles in eine einzige Tabelle - ohne Ausnahme -, damit hier nicht schon die Tabellen-Konfusion anfängt.
Hier gebe ich Dir auch ein kleines Beispiel:


Image

und hier die Tabellen-Datei als HTML Code

Code: Select all

<html>
	<head>
		<title>Tabellen für Joomla-Template</title>
		<link href="css_datei.css" rel="stylesheet" type="text/css">
	</head>

    <body>
	<table width="680" border="0" cellpadding="0" cellspacing="0">
    		<tr>
        			<td width="160" rowspan="2" valign="top" id="logo">Logo</td>
        			<td height="60" valign="top" id="bild">Bild</td>
    		</tr>
    		<tr>
        			<td height="30" valign="top" id="pathway">Pathway</td>
    		</tr>
    		<tr>
       			 <td height="290" valign="top" id="menue">Menue</td>
        			 <td valign="top" id="mitte">Mitte</td>
    		</tr>
    		<tr>
        			 <td height="30" colspan="2" valign="top" id="footer">Footer</td>
    		</tr>
	</table>
    </body>
</html>
sowie die dazu passende CSS-Datei, gib ihr den Namen "css_datei.css", damit sie von der obigen
HTML - Datei erkannt wird.

Code: Select all

#logo {
	background: #0099CC;
}

#bild {
	background: #6633FF;
}

#pathway {
	 background: #FFFF00;
}

#menue {
	background: #00FF99;
}

#mitte {
	background: #FFCCCC;
}

#footer {
	background: #00FFFF;
}

and you are on the road ...

Peter

User avatar
stars
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Mon Nov 07, 2005 12:57 pm
Location: Munich
Contact:

Re: Module mit Css formatieren

Post by stars » Wed Jan 11, 2006 10:36 am

Hallo bang,

Mir kommt gerade die Idee, wenn Du möchtest, poste ich Dir auch eine einfache
Variante mit Container! Du kannst dann mit beiden experimentieren.

bang
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Dec 18, 2005 9:49 pm

Re: Module mit Css formatieren

Post by bang » Thu Jan 12, 2006 12:14 am

Ich möchte gerne ein Vorschlag mit div.

Kann man





















diese Struktur in div hinbekommen?
Also drei spaltig geht ja. habe aber leider noch nicht
die Möglichkeit in 3 Zeilen zuteilen.

Danke auch für den Css-Experte.
Ich möchte ungerne mit Tabellen arbeiten.

Super Forum!  :-[

User avatar
stars
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Mon Nov 07, 2005 12:57 pm
Location: Munich
Contact:

Re: Module mit Css formatieren

Post by stars » Thu Jan 12, 2006 2:18 pm

Hier der Code für das gleiche Template wie oben abgebildet jedoch nun als  DIV Variante.
Vorweg sieht man hier gut schon den Unterschied zwischen den Browsern Firefox und MS Internet Explorer:

  Image    Image

Und hier der Quellcode der DIV-Container Variante:

Code: Select all

<html>
<head>
<title>DIV-Container für Joomla Template</title>
<link href="css_datei.css" rel="stylesheet" type="text/css">

</head>
<body>
  <div id="container">
		    <div id="logo">
		        logo	
                     </div>	
		    <div id="bild">
			      bild
		    </div>
		    <div id="pathway">
			      pathway
		    </div>
	   <div id="central">
		    <div id="menue">
		        menue
		    </div>
		    <div id="mitte">
			    mitte
		     </div>
	  </div>
		    <div id="footer">
		        footer
		    </div>
  </div>
</body>
</html>

Die CSS-Datei  ist fast die gleiche es sind noch diei Div-Selektoren  Container und Central
hinzugekommen. Und einige height und width Definitionen sind statt im Table-Tag in der
CSS-Datei.

Code: Select all

#container {
	width: 680px;
}

#central {
	height: 290px;
}

#logo {
	background: #0099CC;
	float: left;
	height: 90px;
	width: 160px;
}
#bild {
	background: #6633FF;
	height: 60px;
}
#pathway {
	background: #FFFF00;
	height: 30px;
}
#menue {
	background: #00FF99;
	width: 160px;
	float: left;
	height: 100%;
}
#mitte {
	background: #FFCCCC;
	height: 100%;
}

#footer {
	background: #00FFFF;
	clear: left;		
}
</div>
Viel Spass beim hacken.

Servus
Peter

bang
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Dec 18, 2005 9:49 pm

Re: Module mit Css formatieren

Post by bang » Thu Jan 12, 2006 8:53 pm

Vielen Dank Stars!

Servus

1schrotti1
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Aug 16, 2007 8:14 am

Re: Module mit Css formatieren

Post by 1schrotti1 » Thu Aug 16, 2007 8:21 am

Hallo,

bin neu in der Szene. Blicke noch nicht so richtig durch.

Warum wird mir die Zelle nicht mit gelber Hintergrundfarbe angezeigt?

danke den Hotlinern, die mir auf die Sprünge helfen!!









   


   
        dummy
       
   
   










#logo {background: #fefece;}



1schrotti1
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Aug 16, 2007 8:14 am

Re: Module mit Css formatieren

Post by 1schrotti1 » Thu Aug 16, 2007 1:16 pm

Kann der Fehler schon im Link der HTML liegen?





   
   


Die Datei tabelle.css wird erst gar nicht angesprochen. Warum der Link da nicht hinführt verstehe ich nicht. Stimmt vielleicht die Syntax nicht?

Gruß

Udo

User avatar
StephanK
Joomla! Explorer
Joomla! Explorer
Posts: 292
Joined: Fri Aug 19, 2005 2:10 pm
Location: Germany - Eppelheim
Contact:

Re: Module mit Css formatieren

Post by StephanK » Sat Aug 18, 2007 2:17 pm

Hi Udo,



Zunächst mal versuche mit /> abzuschliessen.
Und dann glaube ich das es eine URL sein muss, kein Dateilink. Da bin ich mir allerdings nicht ganz sicher, ein Versuch ist es aber sicherlich wert.

 

Locked

Return to “Installation und erste Schritte 1.0.x”