Jake: 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">&copy; <?php echo $sitename; ?> <?php echo date('Y');?>&nbsp;&nbsp;</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.

  1. 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...
    1. 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

      1. 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:(
        1. 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

          Dem 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

          1. 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:(
            
            1. 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?
              
              1. Hi,

                Hallo,
                [...]
                Ciao,
                Martin

                bitte 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:(
                1. 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 bei border-box.

                  MfG
                  bubble

                  --
                  If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
                  1. Danke :D
                    es funktioniert...

                  2. 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 bei box-sizing: content-box; der Fall ist, nicht aber bei border-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:(
                2. 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.