Splitten des Bodys

anka · 30. Mai 2015

Hallo Graffa

Ich fürchte, du verhedderst dich da gerade ein bisschen .

1. Den DIV "bodyunten" brauchst du nicht

2. verschiebe alles, was sich zwischen <header role="banner" class="header"> und </header> befindet, in den DIV "bodyoben":

Code

<div id="bodyoben">
    <header role="banner" class="header">
        ...
    </header>
</div>

Das müsste zunächst mal reichen. Danach müsste man nur noch das CSS richtig anpassen.

christine2 · 30. Mai 2015

Hallo Graffa23,

aha. Ändert sich ja minütlich - neuer Ist-Stand - neuer Code

Jetzt ist es so: <div id="bodyoben"</div>

Wenn ich es richtig verstehe, dann soll es so aussehen, wie auf dem Bild?

Dann könnte es so in etwa gemacht werden:

Code

<div id="bodyoben"><div class="header-inner clearfix">
                    <a class="brand pull-left" href="/">
                        <span class="site-title" title="Horizont-Praxis">Horizont-Praxis</span>                                            </a>
                    <div class="header-search pull-right"></div>
                </div> </div>

Heißt: Der Titel "Horizont-Praxis", welcher zurzeit unterhalb vom #bildoben ist - diese Klasse in den #bodyoben integrieren. Wenn's so sein soll ...

Gruß, Christine

Edit: upps. Hab jetzt erst gesehen, dass Anka fast zeitgleich geschrieben hat. Muss ich erst noch lesen.
Bin schon weg, sollte ich Blödsinn geschrieben haben.

Graffa23 · 30. Mai 2015

Hallo anka,
Danke für deine Antwort.

Jedoch erzielt leider das mit dem verschieben nicht den gewünschten Effekt.
Der Header wird zwar einschlossen, jedoch wird er nicht von dem Kästchen bzw dem Farblichen Hintergrund hinterlegt.

LG
Graffa23

Graffa23 · 30. Mai 2015

Hallo Christine,
Vielen Dank!

Ja genau so möchte ich es haben, habe dies jetzt mal eingefügt unter unterhalb von div bodyoben jedoch ist es jetzt doppelt gemoppelt.
Wichtig finde ich auch das wirklich nur das Kästchen sozusagen wandert und halt eben den Text oder Bild im Header hinterlegt.

P.S Sry für den Doppelpost.

Liebe Grüße
Graffa23

anka · 30. Mai 2015

Zitat von Graffa23

Der Header wird zwar einschlossen, jedoch wird er nicht von dem Kästchen bzw dem Farblichen Hintergrund hinterlegt.

Ja, weil er sich ausserhalb des DIVs befindet .

Post doch bitte nochmal den (kompletten) Code deiner index.php.

Graffa23 · 30. Mai 2015

Spoiler anzeigen

<?php
/**
* @package Joomla.Site
* @subpackage Templates.protostar
*
* @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$user = JFactory::getUser();
$this->language = $doc->language;
$this->direction = $doc->direction;

// Getting params from template
$params = $app->getTemplate(true)->params;

// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');

if($task == "edit" $layout == "form" )
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' . $this->template . '/js/template.js');

// Add Stylesheets
$doc->addStyleSheet('templates/' . $this->template . '/css/template.css');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="' . JUri::root() . $this->params->get('logoFile') . '" alt="' . $sitename . '" />';
}
elseif ($this->params->get('sitetitle'))
{
$logo = '<span class="site-title" title="' . $sitename . '">' . htmlspecialchars($this->params->get('sitetitle')) . '</span>';
}
else
{
$logo = '<span class="site-title" title="' . $sitename . '">' . $sitename . '</span>';
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
<?php // Use of Google Font ?>
<?php if ($this->params->get('googleFont')) : ?>
<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,h2,h3,h4,h5,h6,.site-title{
font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;
}
</style>
<?php endif; ?>
<?php // Template color ?>
<?php if ($this->params->get('templateColor')) : ?>
<style type="text/css">
body.site
{
border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
}
a
{
color: <?php echo $this->params->get('templateColor'); ?>;
}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary
{
background: <?php echo $this->params->get('templateColor'); ?>;
}
.navbar-inner
{
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
}
</style>
<?php endif; ?>

</head>

<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '');
?>">

<div id="bodyoben"> <jdoc:include type="modules" name="bodyoben" style="xhtml" />
<div class="header-inner clearfix">
<a class="brand pull-left" href="/">
<span class="site-title" title="Horizont-Praxis">Horizont-Praxis</span> </a>
<div class="header-search pull-right"></div>
</div> </div>

<div id="bodyunten"> <jdoc:include type="modules" name="bodyunten" style="xhtml" /></div>
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">

<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="<?php echo $this->baseurl; ?>">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-0" style="none" />
</div>
</div>
</header>
<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="position-1" style="none" />
</nav>
<?php endif; ?>
<jdoc:include type="modules" name="banner" style="xhtml" />
<div class="row-fluid">
<?php if ($this->countModules('position-8')) : ?>

<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>

<?php endif; ?>
<main id="content" role="main" class="<?php echo $span; ?>">

<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />

</main>
<?php if ($this->countModules('position-7')) : ?>
<div id="aside" class="span3">

<jdoc:include type="modules" name="position-7" style="well" />

</div>
<?php endif; ?>
</div>
</div>
</div>

<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>
</p>
<p>
© <?php echo date('Y'); ?> <?php echo $sitename; ?>
</p>
</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

anka · 30. Mai 2015

Versuche es mal damit: