Seitenausrichtung Template mit CSS

**SirBerberitz** · 27.12.2005 13:22

Hallo liebe Gemeinde,

habe mich jetzt nach wochenlanger Suche nach einem passenden CMS fuer Mambo bzw Joomla entschieden.

Ich benutze im Moment das template "lite-blue-grey-v2"

Da ich mich leider mit CSS basierten Layouts nicht so gut auskenne, eine kleine Frage an die Pros.

Koennte mir evtl jemand sagen, welcher Eintrag hier fuer die Breite der jeweiligen Bereiche verantwortlich ist?

Moechte - in der Tabellen Schreibweise gesprochen - left: 15%, middle: 70%, right: 15% haben.

Bekomme das hier einfach nicht hin.

Anbei die template_css.css dieses Templates.

Code:

body {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	margin: 0px 0px 5px 0px;
}
#pageContainer {
	border: solid 1px #fff;
	border-width: 0 1px;
	margin: 0px 20px 10px 20px;		
	min-width: 60em;
	width: auto;
}
* html #pageContainer {
	/* \*/
	word-wrap: break-word;
	/* verhindert float-Probleme beim IE/Win*/
}
#header {
	margin:0; 
	padding:0.5em 1em;
}
.banner {
	float: left;
	border: 1px solid #cccccc;
}
.headerbox {
	border: 0px solid #cccccc;
	padding: 5px 3px 5px 5px;
}
#outerContainer {
	border-left: 16em solid #FFFFFF;
	border-right: 16em solid #FFFFFF;
	padding: 0px 3px 5px 2px;	
}
#innerContainer {
	border-width: 0 1px;
	background: #FFFFFF;
	margin: 0;
	width: 100%;
	z-index: 1;
}
#left, #middle, #right, #wrap {
	overflow: visible;
	position: relative;
}
#wrap {
	float: left;
	margin: 0 -1px 0 0;
	width: 100%;
	z-index: 3;
}
#middle {
	float: right;
	margin: 0;
	width: 100%;
	z-index: 5;
}
#left{
	float: left;
	margin: 0 1px 2px -16em;
	width: 150px;
	z-index: 4;
}
#right {
	float: right;
	margin: 0 -16em 0 1px;
	width: 150px;	
	z-index: 2;
}
#footer {
	border-top: 1px solid #cccccc;
}
.cleaner {
	clear:both;
}
td {
	font-size: 9pt;
	color: #0C4176;
}
#sitename {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: x-large;
	font-weight: bold;
}
.pathway {
	font-size: 8pt;
	line-height: 20px;
	color: #0C4176;
	margin: 5px 5px 5px 5px:
}
.pathway a:link, a:visited{
	color: #003466;
	text-decoration: none;
}
.user {
	border: 1px solid #cccccc;
	width: 155px;
	float: right;
	margin: 20px 5px 5px 5px;
	background-color: #E6E6E6;
	padding: 3px 3px 1px 3px;
}
.small {
	font-size: 8pt;
	color: #999999;
	text-align: right;
}
ul#mainlevel-nav {
	list-style: none;
	color: #DBDEE0;
	padding: 0px;
	margin: 0px;
	background-color: #003466;
}
ul#mainlevel-nav li a{
  color: #DBDEE0;
  display : block;
  padding-left : 10px;
  padding-right : 10px;
  margin : 0;
  width : auto !important;
  width : 15%;
  font-size : 11px;
  line-height : 21px;
  font-weight: bold;
  float: left;
}
table.moduletable th {
	font-size: 10pt;
	text-align: center !important;
	margin-top: 10px;
	line-height: 20px;
}
table.moduletable td {
	font-size: 9pt;
	padding-left: 4px;
	padding-right: 0px;
}
a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background-color: #E6E6E6;
	color: #5A5A5A;
	font-weight: bold;
	width: 160px;
	padding-left: 10px;
	line-height: 20px;
	vertical-align: middle;
	border-bottom: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
}
a.mainlevel:hover {
	text-decoration: underline;
}
a#active_menu {
	color: #003466;
}
a#active_menu:hover {
	text-decoration: none;
}
a.sublevel:link, a.sublevel:visited {
	padding-left: 6px;
	color: #003466;
	font-size: 8pt;
}
a:link, a:visited {
	color: #2269B6;
	text-decoration: none;
}
.inputbox {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	background-color: #ffffff;
	border: 1px solid #9CB2C7;
	color: #4784C3;
	padding-left: 2px;
}
.button {
	color: #4784C3;
	border-right: 2px solid #C6C6C6;
	border-bottom: 2px solid #C6C6C6;
	border-left: 2px solid #FFFFFF;
	border-top: 2px solid #FFFFFF;
	background-color: #E0E0E0;
	font-size: 8pt;
}
.componentheading {
	padding-left: 10px;
	color: #333333;
	font-size: 10pt;
	text-transform: uppercase;
	font-weight: bold;
	width: auto;
	line-height: 20px;
	border-top: 1px solid #5A5A5A;
	border-bottom: 1px solid #5A5A5A;
	vertical-align: middle;
}
.contentdescription {
	font-size: 9pt;
	color: #333333;
	padding-top: 5px;
}
.contentpaneopen {
	text-align: justify;
}
ul {
	margin: 2px;
	padding-left: 0px;
	list-style: none;
}
li {
	line-height: 15px;
	padding-left: 15px;
	background: url(../images/indent2.png) no-repeat;
	background-position: 0px 4px;
}
.contentheading {
	color: #333333;
	font-weight: bold;
	line-height: 15px;
	border-bottom: 1px solid #333333;
}
table.toolbar td {
	color: #2269B6 !important;
}
.sectiontableheader {
	color: #333333;
	font-size: 10pt;
	line-height: 16px;
	font-weight: bolder;
}
.sectiontableentry1 {
	background: #F2F2F2;
	color: #333333;
	padding: 5px 0 5px 0;
}
.sectiontableentry2 {
	background: #FFFFFF;
	color: #333333;
	padding: 5px 0 5px 0;
}
.category {
	display: inline;
	padding-left: 6px;
}
.back_button {
	line-height: 16px;
	padding-left: 15px;
	background: url(../images/back.png) no-repeat;
	background-position: 0px 4px;
	background-color: #FFFFFF;
	text-align: center;
	border: 2px solid #CCCCCC;
	color: #333333;
	font-size: 9pt;
	margin-top: 10px;
	margin-left: 30px;
	float: left;
}
.mosimage {
	border: 1px solid #cccccc;
	margin: 2px 2px 2px 2px;
}
.frontpageheader {
	text-align: center;
	font-weight: bolder;
	font-size: larger;
}
.modifydate {
	font-size: 7pt;
	color: #666666;
}
.content_rating {
	color: #333333;
	font-size: xx-small;
	text-align: right;
}
.content_vote {
	color: #333333;
	font-size: xx-small;
	text-align: right;
}
.clr {
	clear: both;
}
.pagenavcounter {
	font-size: 8pt;
	color: #003466;
}
.createdate {
	font-size: 7pt;
	text-align: right;
	color: #003466;
}
.pagenav_prev {
	font-size: 8pt;
	color: #003466;
}
.pagenav_next {
	font-size: 8pt;
	color: #003466;
}
.readon {
	font-size: 8pt;
}
.toclink {
	font-size: 8pt;
}
a.toclink:link, a.toclink:visited {
	color: #5A5A5A;
	font-weight: bold;
}
a.toclink:hover {
	text-decoration: underline;
}
.contenttoc {
	border: 2px solid #003466;
	padding: 5px 2px 2px 5px;
	background: #E6E6E6;
}
.footer {
	font-size: 8pt;
	text-align: right !important;
	margin-top: 6px;
	margin-right: 10px;
}
.right {
	border: 1px solid #cccccc;
  	margin: 0px 10px 0px 0px;
	padding: 2px 2px 5px 2px;
	background: #F2F2F2;
	width: 150px;
}
.left {
   border: 1px solid #cccccc;
	background: #F2F2F2;
	margin: 10px 0px 10px 0px;
	padding: 2px 2px 5px 2px;
	width: 150px;
}
.mainbody {
	border: 1px solid #cccccc;
	margin: 0;
	padding: 5px;
	width: 100%;
}
.sectiontablefooter {
	color: #5A5A5A;
	font-size: 9pt;
}
.syndicate {
	padding: 0px 0px 0px 20px;
}
.top {
	line-height: 20px;
	text-align: right;
	background: url(../images/top.png) no-repeat;
	float: right;
	line-height: 20px;
	padding-left: 15px;
	background-position: 0px 7px;
}
.mosimage_caption {
	color: #003466;
	font-size: 8pt;
	border-top: 1px solid #cccccc;
	background-color: #F2F2F2;
}
.buttonheading {
	border: 1px solid #cccccc;
	padding: 2px 2px 2px 2px;
}
.searchbar {
	font-size: 9pt;
	line-height: 25px;
	background-color: #0066cc;
	color: #F5F5F5;
	text-align: right;
	padding-left: 15px;
	padding-right: 15px;
	vertical-align: middle;
}
.date {
	font-size: 8pt;
	color: #ffffff;
	text-align: left;
	float: left;
	font-weight: bold;
}

und die dazugehoerige index.php

Code:

*schnipp*

				<div class="headerbox">
	
						<?php if ( $user1 > 0 ) { ?>
							<div class="user">
								<?php if (mosLoadModules ('user1')) { ?><?php mosLoadModules ( 'user1' ); }?>
							</div>
						<?php } ?><?php if ( $user2 > 0 ) { ?>
							<div class="user">
								<?php if (mosLoadModules ('user2')) { ?><?php mosLoadModules ( 'user2' ); }?>
							</div>
						<?php } ?>

					</div>
  				</div>
<!-- kopfteil 2 -->
	<div class="pathway">
		<?php mosPathWay(); ?>
	</div>
	
	
	<div class="searchbar">
			<div class="date">
				<?php echo mosCurrentDate(); ?>
			</div>
				<form action="index.php" method="post">Seite durchsuchen:
  				<input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>"  onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
    			<input type="hidden" name="option" value="search" />
				</form>
	</div>	
	
  <div id="outerContainer"> 
    <div id="innerContainer"> 
      <div id="wrap">
<!-- mittelteil -->
        <div id="middle">
			<div class="mainbody"> 
          		<?php mosMainBody(); ?><br />
			</div>
			<div class="top">
				<a href="<?php echo sefRelToAbs($_SERVER['REQUEST_URI'])."#up"; ?>">nach oben</a>
			</div>
		</div>
<!-- linke Seite -->
        <div id="left" class="left"> 
          <?php mosLoadModules ( 'left' ); ?>
        </div>
      </div>
<!-- rechte Seite -->
	  	<?php	if ( $right > 0 ) {	?>
      		<div id="right">
	  			<div class="right"> 
        			<?php if (mosCountModules('right')) { ?><?php mosLoadModules ( 'right' ); }?>
				</div>
      		</div>
		<?php } ?>
		
*schnipp*

Hoffe auf Hilfe und danke im voraus!

SirBerberitz

**nfr** · 27.12.2005 16:54

Bei diesem Template handelt es sich um ein fließendes Layout, bei dem die beiden Seitenteile jeweils 16em einnehmen und der mittlere Contentbereich den restlichen Platz der Seite einnimmt. Dieser ist je nach Auflösung entsprechend groß oder klein.
Bei einem floating (fließenden Layout) werden keine festen Breiten angegeben. Änderungen musst Du hier im outercontainer vornehmen.

**SirBerberitz** · 27.12.2005 22:04

Danke nfr,

damit kann ich erst mal arbeiten!

Gruss

SirBerberitz

**upstream** · 17.01.2006 13:44

Was verstehst du unter komplett?
Ein Template besteht in der Regel aus einer index.php Seite in der das Grundgerüst definiert ist. Dazu gibts noch eine template_css.css Datei. Diese regelt, wie das Grundgerüst auszusehen hat. Also Grössen, Farben +++
Und dann natürlich noch die Bilder.
Nimm doch einfach mal das Joomla-Standardtemplate und schau dir den Quelltext der index.php und die css Datei an um zu verstehen wie das Zusammenspiel ist.

**Chrischtoph** · 29.04.2006 12:40

Moin,

Wollte kein neues Thema anfangen, weil´s letzt endlich um das gleiche Template geht.

Ich habe das Problem, dass das Template mit dem IE richtig dargestellt wird, mit dem Firefox die Seite allerdings in die Breite gezogen wird. D.h. man kann plötzlich nach rechts scrollen, der Header zieht sich in die Breite (passt also plötzlich nicht mehr auf den Bildschirm) obwohl ich width auf 100% stehen habe.

Hoffe mir kann einer einen Tipp geben, wo ich schauen muss, damit ich die Sache in Griff bekomme.

MfG christoph

**upstream** · 29.04.2006 17:17

Zitat von Chrischtoph

Hoffe mir kann einer einen Tipp geben, wo ich schauen muss, damit ich die Sache in Griff bekomme.

Kann man denn die Seite mal sehen? Denn sonst ist ein bischen wie die Nadel im Heuhaufen...

**Chrischtoph** · 30.04.2006 10:45

Hat sich erledigt! Habe im .pagecontainer irgendwie die min-width verstellt!

Trotzdem danke!!!

LG christoph

Thema: Seitenausrichtung Template mit CSS

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Seitenausrichtung Template mit CSS

Ähnliche Themen

div problem mit template

Problem mit angepasstem Template

CSS Problem mit der Navigation!!!

Probleme beim Layout mit CSS.

Fester DIV mit CSS - Riesen kniffliges Problem bei IE

Lesezeichen

Lesezeichen

Berechtigungen