Layout: Main um 10px verschoben

**PeDo** · 25.02.2012, 12:14

Hallo da draußen,

kurz zu Eurer Info. Ich habe vor ca. einem Monat die Pflege ds folgenden Internetauftritts übernommen.
www.margo-oswald.de

Leider bekomme ich vom Vorgänger keine Infos, musste mich also selbst durchbeissen. Ich bin kein Newbie, aber auch nicht diejenige, die aus der Hand programmieren kann.

Nun zu meinem Problem:
Vor ein paar Tagen habe ich einen neues Modul angelegt und dieses in die Seite eingefügt. Da ich mit der Darstellung nicht zufrieden war, habe ich das kurzerhand wieder deaktiviert. Danach war das komplette Layout der Seite verschoben. Ich habe dann versucht herauszufinden, wie das passieren konnte. Festgestellt habe ich, dass im fe_page.tpl einiges nicht in Ordnung war. Ich hatte mir bei der Übernahme ein Backup aller Scripte gemacht, sodass ich das fe-page.tpl einigermaßen wieder herstellen konnte.

Leider verschob sich das "main" trotzdem um 10px. Ich abe das zunächst einigermaßen aufgefanfen, indem ich "left" über das xBasix.css definiert habe und nicht über das Seitenlayout.

Kann sich das mal jemand ansehen? Und was braucht Ihr dafür? Das fe_page.tpl sieht jetzt so aus:

<?php echo $this->doctype;?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language;?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset;?>" />
<title><?php echo $this->pageTitle;?> - <?php echo $this->mainTitle;?></title>
<base href="<?php echo $this->base;?>" />
<meta name="description" content="<?php echo $this->description;?>" />
<meta name="keywords" content="<?php echo $this->keywords;?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link href="tl_files/zuHause.css" rel="stylesheet" type="text/css" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>
</head>

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onLoad="<?php echo $this->onload; ?>"<?php endif; ?>>

<div id="wrapper">

<?php if ($this->header): ?>
<div id="header">
<img src="tl_files/pics/foto.png" style="height:140px;width:154px;" alt="Bild von Margó Oswald"/>
<h1>Ich begleite Sie in ein erfüllendes Leben</h1>
<a href="http://www.margo-oswald.de"><img src="tl_files/pics/regenbogen_schrift.png" style="margin-left:115px;margin-top:15px;" alt="regenbogen"/></a>
<div class="inside">
<?php echo $this->header; ?>
</div>
</div>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>

<div id="container">
<?php if ($this->left): ?>

<div id="left">
<div class="inside">
<?php echo $this->left; ?>
</div>
</div>
<?php endif; ?>
<?php if ($this->right): ?>

<div id="right">
<div class="inside">
<?php echo $this->right; ?>
</div>
</div>
<?php endif; ?>

<div id="main">
<div class="inside">
<?php echo $this->main; ?>
</div>
<?php echo $this->getCustomSections('main'); ?>
<div id="clear"></div>
</div>

<?php echo $this->getCustomSections('after'); ?>
<?php if ($this->footer): ?>

<div id="footer">
<div class="inside">
<?php echo $this->footer; ?> </div>
</div>
</div>
<?php endif; ?>


<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />


</div>
<?php echo $this->mootools; ?>

<script type="text/javascript">
<![CDATA[//><!]]>
</script>

</body>
</html>

Ja, und ich weiß, left und right sind noch abgehackt. Das habe ich so übernommen und komme da später noch drauf zurück.

Bin dankbar für jeden Tipp.

Grüße,
Petra

**rednex** · 25.02.2012, 12:20

Habs mir aus Zeitmangel nur ganz kurz die Seite angeschaut, und demnach auch gerade keinen Tipp für Dein Problem.

Aber was mir aufgefallen ist... verkleiner mal die Bilder... die .png-Dateien sind unverhältnismäßig groß!

**bizon** · 25.02.2012, 12:42

Hallo,

nimm bei #main die width-Anweisung komplett raus, dann passt es wieder.
Live getestet mit Firefox und Firebug

EDIT: hab nochmal genauer nachgesehen:

#main {width:...} löschen
#main {left: 10px} löschen

#main{margin-right:210px;} eintragen

**swinde** · 25.02.2012, 12:49

Hallo Petra,

zwei Sachen sind mir an der Seite aufgefallen:

1. DIV #main liegt in deiner fe_page.tpl ausserhalb vom #container, dies ist im Standardtemplate nicht so.
2. Da du unter 1. dem Standard entgegen arbeitest, entsteht dieser Versatz durch das contao.css.

Code:

#main 
{
  position: relative;
}

deaktiviere dochmal deine fe_page.tpl und benutze die Originale Datei. Es macht eigentlich keinen Sinn Main aus dem Container heraus zu lösen.

Installiere dir das Firefox Plugin "Firebug" und sehe selbst.

Mit freundlichen Grüßen
Steffen Winde

**PeDo** · 25.02.2012, 15:49

... und ich habe stundenlang DIVs eingefärbt um zu sehen, wo das was fehlt.

Ihr seid meine Helden. Vielen, vielen Dank.

Ich habe die Original fe_page.tpl genommen und meine Kopfinfos reingepackt. Dann musste ich nur noch den #footer mit in den #wrapper packen und jetzt sitzt alles wieder. Getestet mir Firebug (kannte bisher nur den Web Developer - also vielen Dank für den Tipp) und alles prima.

Ihr habt mein WE gerettet.

Grüße,
Petra