Zum Inhalt springen

Extension 2-Coloumns mit CSS layouten

Erstellt am 21. September 2006 · 5 Antworten · letzte Antwort am 22. September 2006

Tags: Frage

fragile74 ·

Hi,

ich möchte auf einer Impressumseite die Angaben wie eine Tabelle (2 Spalten) nur halt in CSS layouten.

Hat da jemand einen Link zu einer Bsp-Seite ? Ich furhwerke seit 2 Stunden mit floats etc. herum und es klappt einfach nicht. Auch die 2-coloumn-Layout Extension hat mir nciht wirklcih geholfen, da er ja die div-Tags elementeweise ausliest und somit z.b. ein static-Layout wieder zerstört.

Thx 4 help

ONeill ·
<div style="float:left;width:100px">
... Inhalt linke Spalte
</div>
<div style="margin-left:100px">
... Inhalt rechtse Spalte ...
</div>

So mal versucht?

fragile74 ·

Hi,

jepp das hab ich als aller erstes versucht. Das Problem ist, daß er ja die einzelnen Impressumsfelder dynamisch aus der DB generiert. Damit wird es beim ersten Durchlauf richtig gelayoutet. die linke Spalte der 2. "Zeile" wird aber wieder relativ zur rechten Spalte der 1. Zeile definiert und damit ergibt sich nach rechts absteigende Treppe bei mir.

bei "position: absolute" schreibt er mir natuerlich alle Zeilen exakt übereinander.

ONeill ·

Ich denke schon dass du dein Problem mit CSS lösen kannst, aber ich blick da nicht durch wie dein Impressum aussieht 🙂 , so dass ich dir da leider nicht helfen kann

fragile74 ·

Es soll so aussehen wie eine klassische Tabelle mit 6 Reihen und 2 Spalten... die sind jeweils leicht mit einer Hintergrundfarbe gefüllt und enthalten in der linken Spalte quasi die Feldnamen (Name,Adresse...) und in der rechten den Inhalt.

Genau das kann ich ja in der 2Coloumns Extension definieren. Für jeweils eine Tabellenzeile habe ihc ein neues Seitenelement einfügen müssen. Diese nun mit CSS so zu formatieren, daß das Tabellen-Layout entsteht, sollte nicht so schwer sein, ist es aber bisher 🙂.. any ideas oder Links zu nem Beispiel ?

fragile74 ·

Sodale, nach einigem hin und her hab ich jetzt eine vernünftige Lösung gefunden... anbei mal die CSS-Datei , die Coloumns lassen sich mit
"div.c2l1d-middle" und "div.c2l1d-left" ansprechen.

Allerdings habe ich dafür im Plugin den Default-CSS-Style aus der ...setup.txt-Datei löschen müssen.

Außerdem mußte ich das Plugin-Layout auf "pure CSS" umstellen, dies ging im TS-Template mit "plugin.tx_fdfx2cols_pi1.templateFile = EXT:fdfx_2cols/tpl.2column.div.html"

Die CSS-Datei

#content_normal_container { 
	position : absolute;
	left : 40px;
	top : 179px;
	width : 912px;
	height: 600px;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 25px;
	background-color : rgb(252,253,253);
	overflow: auto;
	border-top-width: 0px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-style: solid;
	border-color: #8ac2c2;
	
   }

.bodytext {
      
	font-family : Verdana, sanserif;
	text-align: left;
	font-size : 12px;
	color : rgb(79,181,182);
      
	}

div.c2l1d-left {
   float: left;
   margin-left: 6%;
   width: 16%;
   background-color: rgb(229,244,245);

}

div.c2l1d-left p {
      margin: 10px;
	color : rgb(79,181,182);
      font-weight: bold;
}

div.c2l1d-middle a {
	color : rgb(79,181,182);
}

div.c2l1d-middle  {
   background-color: rgb(229,244,245);
   margin-left: 23%;
   width : 28%;


}

div.c2l1d-middle p {
      padding: 10px;
	color : rgb(79,181,182);
      }

DIV.csc-header-n11 h1   {
   position: absolute;
   top: 90px;
   margin-left: 53%;
   font-family : Verdana, sanserif;
   font-size : 15px;
   color : rgb(79,181,182);

}

#disclaimtext   {
   position: absolute;
   top: 115px;
   margin-left: 53%;
   font-family : Verdana, sanserif;
   font-size : 11px;
   text-align: justify;
   color : rgb(79,181,182);
   width: 350px;

}