Module mit Css formatieren

bang · 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.

stars · 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 · 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?

stars · 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 · 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

stars · 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 · 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

stars · 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 · 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!!!

stars · 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:

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

stars · 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 · 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!

stars · 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:

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 · Post by **bang** » Thu Jan 12, 2006 8:53 pm

Vielen Dank Stars!

Servus

1schrotti1 · 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 · 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

StephanK · 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.

The Joomla! Forum™

Module mit Css formatieren

Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren

Re: Module mit Css formatieren