mit Bilder im Content hauts das Format zusammen

[Notabene]

HI

Ich will meine Seite auf komplett CSS umstellen, reine Textinhalte sind auch kein Problem.
Allerdings wenn Bilder mit ins Spiel kommen ist nichts mehr so wie es sein soll

Bei dem Beispiel hier schiebt es den Footer rein, bzw. es sind "unnötige absätze drin

http://www.paedchesdribbler.de/08web/team_dh.htm

Wenn das Fenster scmaler wird als das Bild schiebt es das Bild über den Rahmen hinaus.....

die CSS dazu
http://www.paedchesdribbler.de/08web/pd07.css

Ich hab gesucht und gesucht aber nix gefunden was mich weiterbringt....
-Ich muß auuhc zugeben das mein wissen um CSS ausgesprochen bescheiden ist.....

HIIelfe

[mysql]

@Notabene

Die index.php würde mich auch mal interessieren !!!

Aber versuche mal in deinem footer folgendes:

Code: Alles auswählen

clear: both;

[JamieFraser]

Wie mysql schon schreibt, du brauchst ein clear: both.

Erkläreung: Dein Bild liegt in einem Container - div - der kleiner wie das Bild ist und da dieses mit - float - absolut positioniert wird ist es aus dem Gefüge gerissen. Damit dein Container mitwächst, also wieder um das Bild rumgeht, musst du nach dem Bild ein - clear: both (ich mache das oft in einem br - machen. Dadurch ist das letzte Element in dem Container nicht mehr das Bild, sondern dein br welches sozusagen das - float - wieder auflöst.

[doh]

Hallo erstmal,

bei mir fließt zusätzlich noch der Text des folgenden Beitrags mit ein. Allerdings ist die "clear:both" Funktion bereits in der CSS Datei integriert. Ich poste mal die index.php und die css.

Screenshot (Site ist offline)
http://www.domhils.de/bild.png

Wäre super, wenn Ihr einen Tipp für mich hättet...Danke

Code: Alles auswählen

BODY#body{
   margin:0;
   padding:0;
   text-align: center;
   background-image:url(../images/bknd.jpg);
   background-repeat:repeat;
}

body, td, th, tr, p, div {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000;
   line-height: 145%;
}

#home_module div,
#home_module p {
   color: #666;
}

#right div,
#right p {
   color: #000;
}

#right h3 {
   color: #fff;
}

.moduletable {
   margin: 0;
   padding: 10px;
}

#content .moduletable {
   padding-left: 0;
}

p {
   margin:0;
   padding: 10px;
   padding-left: 0;
}

#left .moduletable,
#left .moduletable_text,
#left .moduletable_menu {
   padding-left: 10px;
}

#wrapper {
   position: relative;
   width: 740px;
   margin: 0 auto;
   text-align: left;
}

#header {
   position: relative;
   height: 110px;
}

#logo {
   position: absolute;
   top: 85px;
   left: 10px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   font-size: 12px;
   font-stretch: condensed;
   font-weight: lighter;
}

#menu {
   position: absolute;
   right: 190px;
   bottom: 10px;
}

#wrapper_content {
   float: left;
   width: 537px;
   background: #fff;
   padding-top: 10px;
}

#right {
   width: 200px;
   float: left;
   padding-top: 115px;
}

#right .moduletable {
   padding-left: 0;
}

#right p {
   padding: 10px;
}

#home_img {
   width: 535px;
   height: 254px;
   text-align: center;
}

#home_module {
   float: right;
   width: 315px;
}

#in_img {
   height: 115px;
   padding: 10px;
   padding-top: 0;
}

#left {
   float: left;
   width: 200px;
}

#content {
   float: left;
   width: 535px;
   min-height: 640px;
}

#content-padding {
   padding: 15px;
}

#footer {
   text-align: left;
}

#logo img {
   display: block;
}

.space {
   height: 50px;
}

.clear {
   clear: both;
}


/* GENERAL PURPOSE STYLES */

a:link,
a:active,
a:visited {
   color: #0033FF ;
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

#header2 .moduletable {
   padding: 0;
   margin: 0;
}

.inputbox {
   margin-right: 5px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #666;
   border: 1px solid #ddd;
}

.sectiontableentry1 {
   background-color: #fff;
}

.sectiontableentry2 {
   background-color: #f9f9f9;
}

.small {
  font-size: 9px;
  text-decoration: none;
  font-weight: normal; 
}

form {
   padding: 0;
   margin: 0;
}

#footer a,
#footer a:link,
#footer a:visited,
#right a:link,
#right a:visited  {
   color: #000;
}

#footer a:hover {
   text-decoration: underline;
}

.componentheading,
.contentheading {
   font-size: 13px;
   color: #000;
   border-top: #222 1px solid;
   line-height: 175%;
   font-weight: bold;
   padding: 0;
   margin: 0;
   padding-bottom: 5px;
   text-transform: lowercase;
}


/* new tags */

h1, h2, h3, h4 {
   margin: 0;
   padding: 10px;
   padding-bottom: 0;
   padding-left: 0;
}

h1 {
   font-size: 14px;
}

h2 {
   font-size: 13px;
   color: #333;
}

h3 {
   font-size: 12px;
}

#left h3 {
   padding-right: 0;
   padding-bottom: 5px;
   text-transform: lowercase;
}

#right h3 {
   background: url(../images/right_h3.jpg) no-repeat left top;
   padding: 5px;
   padding-left: 10px;
   text-transform: lowercase;
   height: 24px;
}

#footer h3 {
   display: none;
}

h4 {
   font-size: 11px;
   color: #333;
}

ul {
   margin: 2px;
   padding: 6px;
   padding-left: 15px;
}

li {   
   list-style: none;
   padding-left: 1px;
   line-height: 150%;
}

#content li {
   list-style-image: url(../images/arrow.png);
}

ul.arrow1 li,
ul.arrow2 li {
   padding-left: 5px;
   padding-bottom: 2px;
   padding-top: 2px;
}

ul.arrow1,
ul.arrow2  {   
   line-height: 150%;
   padding-bottom: 3px;
   margin-top: 2px;
}

ul.arrow1 li {   
   list-style-image: url(../images/arrow1.jpg);
}

ul.arrow2 li {
   list-style-image: url(../images/arrow2.jpg);
}

#left ul {
   margin: 0;
   padding: 0;
   padding-left: 10px;
}

#left ul li {
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-image: none;
}

#left ul li a,
#left ul li a:link,
#left ul li a:visited {
   text-decoration: underline;
   line-height: 20px;
   font-size: 11px;
   color: #666;
}

#left ul li a:hover,
#left ul li a:active {
   color: #222222;
}

/* primary menu - at the top of this site */


#menu ul,
#menu li {
   list-style-type:none;
   list-style-image:none;
   padding: 0;
   margin: 0;
}

#menu ul li {
   float: left;
   line-height: 30px;
}

#menu a,
#menu a:link,
#menu a:visited  {
   font-size: 11px;
   color: #000;
   padding-left: 12px;
   padding-right: 12px;
   text-transform: lowercase;
}

#menu ul li a:hover,
#menu ul li a#active_menu {
   text-decoration: none;
}



img, fieldset {
   border: 0;
}

Code: Alles auswählen

<?php
/**
* @copyright   Copyright (C) 2005 - 2007 Open Source Matters. 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.
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!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; ?>" >

<head>
   <jdoc:include type="head" />   
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/common.css" type="text/css" />
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
   <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/overIE.js"></script>
      <style type="text/css" media="all">
         <?php if ($this->params->get('authorName')=='no') { ?>      .author {display:none}            <?php } ?>
         <?php if ($this->params->get('dateCreated')=='no') { ?>      .createdate {display:none}      <?php } ?>
         <?php if ($this->params->get('dateModified')=='no') { ?>   .modifydate {display:none}      <?php } ?>
         <?php if ($this->params->get('Buttons')=='no') { ?>   .buttons {display:none}      <?php } ?>
      </style>
</head>

<body id="body">
   <div id="wrapper">
      <div id="header">
         <!-- <div id="logo">
         **************************************
         </div> -->
         <div id="menu"><jdoc:include type="modules" name="mainmenu" /></div>                     
      </div><!-- end header div -->

      <div id="wrapper_content">
         <?php if(JRequest::getVar('view') == 'frontpage') {?>
         <div id="home_img">
            <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/home_img.jpg" width="518" height="254" alt="logo" />
         </div>
               <div id="left">
                  <jdoc:include type="modules" name="left" style="xhtml" />
               </div>
               <div id="content">                     
               <div id="content-padding">
                  <div class="module-padding">
                        <jdoc:include type="modules" name="abovemain" style="xhtml" />
                  </div>
                        <jdoc:include type="component" style="xhtml" />                  
                  <div class="module-padding">
                        <jdoc:include type="modules" name="belowmain" style="xhtml" />
                  </div>
               </div>
               </div>                     
            
         <?php } else { ?>
         <div id="in_img">
            <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/in_img.jpg" width="518" height="115" alt="logo" />
         </div>
               <div id="left">
                  <jdoc:include type="modules" name="left" style="xhtml" />
               </div>         
               <div id="content">                        
               <div id="content-padding">
                  <div class="module-padding">
                        <jdoc:include type="modules" name="abovemain" style="xhtml" />
                  </div>
                        <jdoc:include type="component" style="xhtml" />                  
                  <div class="module-padding">
                        <jdoc:include type="modules" name="belowmain" style="xhtml" />
                  </div>
               </div>
               </div>                     
         <?php } ?>

            <div class="clear"></div>
         </div><!-- end wrapper_content div -->
         <div id="right">
                  <jdoc:include type="modules" name="right" style="xhtml" />
         </div>
         <div class="clear"></div>

         <div id="footer">
            <div id="footermenu">
                  <jdoc:include type="modules" name="footer" style="xhtml" />
            </div>
         </div>         
      </div><!-- end wrapper div -->
      <div class="space"></div>
</body>
</html>


[Laus]

Allerdings ist die "clear:both" Funktion bereits in der CSS Datei integriert.

Nur durch das Vorhandensein in der CSS Datei ist es noch nicht getan, sie muss auch im HTML richtig gesetzt sein.
Stell doch Bitte deine Seite zum Testen wieder online oder setze einen Haken bei "HTML in diesem Beitrag deaktivieren" beim Posten und poste der Quelltext noch einmal, denn so wie er jetzt steht ist daraus nichts ersichtlich.

Gruß Xaver

[doh]

Danke für den Hinweis, ich habe das beim Einstellen nicht bemerkt...

Danke im Voraus...
Dom