nicht angemeldet
Inhalt geht über div hinaus
0 0 0 
Der Martin
0 0 Der Martin
0 0 Der Martin
0 0 0 Der Martin
0 
MudGuard
Inhalt geht über div hinaus
Hallo,
Ich benutze Joomla und habe versucht ein Templates zu entwickeln. Leider geht der Inhalt immer über den Content- Bereich hinaus.
<?php
/**
* @version $Id$
* @package Joomla!
* @copyright Copyright (C) 2009 Joomla!-nafu. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
// Verhindern, dass diese php-Datei direkt aufgerufen wird
defined('_JEXEC') or die('Restricted access');
$app = JFactory::getApplication();
//Parameter des Templates laden
$templateparams = $app->getTemplate(true)->params;
$sitename = $app->getCfg('sitename');
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<style type="text/css">
#header {
height: 230px;
width: 1024px;
background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/header1.jpg);
background-repeat: no-repeat;
position: static;
border: 0px;
}
#content{
height: 100%
width: 800px;
/*min-height: 400px;*/
background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/content.jpg);
background-repeat: repeat-y;
/*position: static;*/
border: 0px;
/*float:left;*/
padding:15px;
padding-bottom: 20px;
margin: 15px auto;
overflow:hidden;
}
#footer {
height: 45px;
width: 1024px;
background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/footer.jpg);
background-repeat: no-repeat;
position: static;
border: 0px;
}
</style>
</head>
<body onload="window.scrollTo(0, 45);">
<div id="container">
<div id="header">
<h1 class="sitename">
<?php/*
echo $app->getCfg('sitename')."<br>"; //Seitenname aus der Konfiguration ausgeben
echo $templateparams->get('sitetitle')."<br>"; //Seitenname Template-Parameter
echo $templateparams->get('sitedescription'); //Beschreibung Template-Parameter
*/?>
</h1>
</div>
<div id="main">
<div id="links">
<jdoc:include type="modules" name="position-7" style="xhtml" />
</div>
<div id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<?php
// Dieses Div wird nur eingebunden, wenn Module mit der Position position-2 vorhanden sind
if ($this->countModules( 'position-2' )) : ?>
<div id="rechts">
<?php // Diese Module werden nur nach einem Login angezeigt
$user = &JFactory::getUser();
$userid = $user->get('id');
If ($userid > 0) : ?>
<jdoc:include type="modules" name="position-2" style="xhtml" />
<!-- ansonsten werden dieses Module angezeigt -->
<?php else : ?>
<jdoc:include type="modules" name="position-1" style="xhtml" />
<?php endif ?>
</div>
<?php endif; ?>
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="none" />
<p class="copy">© <?php echo $sitename; ?> <?php echo date('Y');?> </p>
</div>
</div>
</body>
</html>
/**
* @version $Id$
* @package Joomla!
* @copyright Copyright (C) 2009 Joomla!-nafu. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
body { /* ist der ganze Bildschirm */
background-color: #ffffff; /* Hintergrundfarbe */
color:Black; /* Schriftfarbe */
font-family:Verdana,Generis,Arial,Helvetica,sans-serif; /* Schrift-Familie */
font-size:10pt; /* Schrifttgröße */
}
#container { /* umfasst den ganzen Inhalt, also haeder, main mit content und menue */
border: 0px; /* Rand um container, hilfreich beim Aufbau der Seite */
margin:5px auto; /* Abstand rundherum und Platzierung horizontal in der Mitte */
width:1024px; /* Breite */
}
<!--/*#header { /* Für den Kopf */
/*background-color: #00BFFF;
border:thin solid #0000CD; /* zum Aufbau besser verschiedene Farben verwenden */
/*width:1000px;
}*/-->
.sitename { /* Klasse für dem Seitennamen, gibt der Schrift Farbe und Größe */
color: #ffffff;
font-size:20pt;
}
.copy {float:right;
}
#main { /* Hauptbereich/Haupt-Slice, umfasst die Slices links, content, rechts */
background-color: #ffffff;
border: 0px;
overflow:hidden; /* Damit der ganze Inhalt angezeigt wird */
width:1024px;
margin:15px auto;
}
#links { /* Linke Spalte (Joomla-Standard: Hauptmenue, Quellen ... Anmeldung */
background-color:#ffffff;
border: 1px solid black;
float:left; /* Setzt den Slice nach links */
width:18%;
height: 80%;
padding: 15px;
margin: 15px;
margin-left: 0px;
}
/*#content{ /* Slice für den Content */
/*width:90%;
overflow:hidden;
}*/
#rechts { /* rechte Spalte (Joomla-Standard: Umfragen ... Werbung */
background-color:#ffffff;
border:thin solid #ffffff;
float:right; /* Setzt den Slice nach rechts */
}
Ich hoffe ihr könnt mir helfen.
-
Hallo,
Ich hoffe ihr könnt mir helfen.
nicht so. Stell's online, damit man sich das mal ansehen kann.
vg ichbinich
--
Kleiner Tipp:
Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...-
Hallo,
Ich hoffe ihr könnt mir helfen.
nicht so. Stell's online, damit man sich das mal ansehen kann.
vg ichbinich
Hier Bitteschön: Website
LG
Jake-
Hi,
Hier Bitteschön: Website
der Inhalt läuft nicht über das div-Element hinaus. Gib dem Element mal einen Rahmen, dann erkennst du's deutlich. Oder nimm Firebug und schaus dir damit an.
Aber das Hintergrundbild ist "nur" 700px breit und füllt daher nicht die ganze Breite des Elements aus.Nebenbei: Verkaufst du eigentlich auch Lupen? Die Schrift mit 9px ist ja fast nicht mehr zu lesen.
Ciao,
Martin--
Die Natur ist gnädig: Wer viel verspricht, dem schenkt sie zum Ausgleich ein schlechtes Gedächtnis.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
Hier Bitteschön: Website
der Inhalt läuft nicht über das div-Element hinaus. Gib dem Element mal einen Rahmen, dann erkennst du's deutlich. Oder nimm Firebug und schaus dir damit an.
Aber das Hintergrundbild ist "nur" 700px breit und füllt daher nicht die ganze Breite des Elements aus.Nebenbei: Verkaufst du eigentlich auch Lupen? Die Schrift mit 9px ist ja fast nicht mehr zu lesen.
Ciao,
MartinDem Inhalt als Content habe ich nun 700px gegeben, aber es klappt immer noch nicht?
#content{ height: 100% width: 700px; /*min-height: 400px;*/In Fireburg steht das sich firefox denn Wert 762.683px für die Breite selber errechnet?
LG
Jakob-
Hallo,
Dem Inhalt als Content habe ich nun 700px gegeben
nein, hast du nicht. ;-)
#content{
height: 100%
width: 700px;
/min-height: 400px;/Schau genau hin. Der Wert, den du der height-Eigenschaft zuweist, ist "100%\n width: 700px". Sogar das Syntax-Highlighting hier im Forum zeigt, dass da etwas nicht stimmt. > In Fireburg steht das sich firefox denn Wert 762.683px für die Breite selber errechnet? Ja, weil er keine gültige Vorgabe findet. Übrigens ist die Angabe height: 100% auch wirkungslos, solange das übergeordnete Element div#main keine feste Höhe hat. Denn 100% bedeutet ja nur: 100% der Höhe, die das Elternelement hat. Da sich dieses Element aber nach seinem Inhalt richtet, ist die 100%-Angabe fürs Kindelement witzlos. Ciao, Martin -- Zwei Mäuse treiben's miteinander. Sagt der Mäuserich: "Hoffentlich ist nicht wieder alles für die Katz." Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
Dem Inhalt als Content habe ich nun 700px gegeben
nein, hast du nicht. ;-)
#content{
height: 100%
width: 700px;
/min-height: 400px;/> > Schau genau hin. Der Wert, den du der height-Eigenschaft zuweist, ist "100%\n width: 700px". Sogar das Syntax-Highlighting hier im Forum zeigt, dass da etwas nicht stimmt. > > > In Fireburg steht das sich firefox denn Wert 762.683px für die Breite selber errechnet? > > Ja, weil er keine gültige Vorgabe findet. > Übrigens ist die Angabe height: 100% auch wirkungslos, solange das übergeordnete Element div#main keine feste Höhe hat. Denn 100% bedeutet ja nur: 100% der Höhe, die das Elternelement hat. Da sich dieses Element aber nach seinem Inhalt richtet, ist die 100%-Angabe fürs Kindelement witzlos. > > Ciao, > Martin > Vielen vielen Dank! Ich glaub ich stell mich irgendwie doof an: wenn ich bei padding 15px angebe, müsste der Innenabstand doch 15px betragen? Aber warum geht es über das Bild hinaus? LG Jakob P.S. was bedeutet eigentlich auto bei padding?-
Hi,
Hallo,
[...]
Ciao,
Martinbitte zitiere sinnvoll, nicht einfach das gesamte Vorposting. Danke.
Ich glaub ich stell mich irgendwie doof an: wenn ich bei padding 15px angebe, müsste der Innenabstand doch 15px betragen? Aber warum geht es über das Bild hinaus?
Das verstehe ich nicht ganz. Ja, padding:15px bedeutet 15px Abstand zwischen dem Inhalt und dem Rahmen (border), auch wenn der Rahmen nicht sichtbar ist. Allerdings bedeutet width:700px, dass der *Inhalt* 700px breit sein soll. Das padding kommt zur Gesamtbreite, die das Element nachher einnimmt, noch dazu. Vielleicht meintest du das.
Für das Hintergrundbild gilt ein vereinbartes padding übrigens nicht, das heißt, das Hintergrundbild beginnt immer direkt am Rand.
P.S. was bedeutet eigentlich auto bei padding?
Es bedeutet "automatisch". ;-)
Nein, im Ernst: Für padding ist die Angabe "auto" IMO sinnlos, denn sie ist gleichbedeutend mit dem Defaultwert 0.So long,
Martin--
Zwei Mäuse treiben's miteinander. Sagt der Mäuserich: "Hoffentlich ist nicht wieder alles für die Katz."
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Das verstehe ich nicht ganz. Ja, padding:15px bedeutet 15px Abstand zwischen dem Inhalt und dem Rahmen (border), auch wenn der Rahmen nicht sichtbar ist. Allerdings bedeutet width:700px, dass der *Inhalt* 700px breit sein soll. Das padding kommt zur Gesamtbreite, die das Element nachher einnimmt, noch dazu. Vielleicht meintest du das.
Dabei sollte man noch anmerken, dass das bei
box-sizing: content-box;der Fall ist, nicht aber beiborder-box.MfG
bubble--
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye-
Danke :D
es funktioniert... -
Hallo,
Das verstehe ich nicht ganz. Ja, padding:15px bedeutet 15px Abstand zwischen dem Inhalt und dem Rahmen (border), auch wenn der Rahmen nicht sichtbar ist. Allerdings bedeutet width:700px, dass der *Inhalt* 700px breit sein soll. Das padding kommt zur Gesamtbreite, die das Element nachher einnimmt, noch dazu. Vielleicht meintest du das.
Dabei sollte man noch anmerken, dass das beibox-sizing: content-box;der Fall ist, nicht aber beiborder-box.ja, guter Punkt. Allerdings war content-box viele Jahre lang die einzige Option und ist auch heute noch der Defaultwert.
Ciao,
Martin--
F: Wer waren die ersten modernen Politiker?
A: Die Heiligen drei Könige. Sie legten die Arbeit nieder, zogen teure Klamotten an und gingen auf Reisen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
Hi,
Nein, im Ernst: Für padding ist die Angabe "auto" IMO sinnlos, denn sie ist gleichbedeutend mit dem Defaultwert 0.
Nicht ganz. auto ist kein gültiger Wert für padding. Die Angabe ist also gleichbedeutend mit "keine Angabe zu padding".
Der Unterschied zeigt sich, wenn für das Element an anderer Stelle bereits padding-Vorgaben gemacht werden - padding:0px; überschreibt diese bei ausreichender Specificity, padding:auto; nicht.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
-
-
-
-
-
-