• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild am unteren Footer positionieren

G

Grinarn

Neues Mitglied
Moin Moin,

ich bin recht neu im Webseiten Design und versuche gerade unsere laufende Joomla Seite neu zu designen und ohne Joomla auszubauen.

Bisher habe ich folgendes entworfen:
Naehschule im Vivo

Genau geht es bei meiner Frage um die Dame links unter dem Menü. Eigentlich soll sie immer am unteren Footer andocken, also quasi auf dem roten Footer unten stehen.
Aber wie zu sehen ist, sobald man mehr Text einfügt, geht der Footer runter aber das Bild bleibt stehen.

Wie kann ich dem bild mitteilen, dass es immer unten bleibt.

Für Tipps bin ich dankbar. Hab schon rumprobiert, aber nicht das richtige gefunden.

Danke und Gruß,
Grinarn
 
Mir ist gerade noch aufgefallen, dass im IE der Footer unten nach rechts rausgeschoben wird.

Zur besseren Hilfe, hier mal der Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Naehschule im Vivo</title>
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>  
      <div id="main">
      
        <div id="banner">
          <img src="images/headervivo5.jpg" alt="VIVO Logo" />
        </div>
        
        <div id="navbar">
        
        </div>
        
        <div id="leftmenue">
          <br/>
          <div id="menudivider">
            Informationen 
          </div>       
        
          <ul>
            <li>Start</li>
            <li>X</li>
            <li>X</li>
            <li>X</li>
            <li>X</li>
            <li>X</li>
          </ul>
          
          <div id="menudivider">
            Kurse 
          </div>
          
          <ul>
            <li>Test2</li>
            <li>X</li>
            <li>X</li>
          </ul>
          <br/>
          <img src="images/vivodame3.jpg" class="vivodame" />
        </div>
        
        
        <div class="content">
          <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 
<br/> 
          </p>
        </div>
        
        <div id="footer">
           &copy; Nähschule im VIVO - Bahrenfelder Straße 260 - 22765 Hamburg - Ottensen im VIVO - Tel.: 0172-4568588 - Email: [email protected]
        </div>
        
      </div>
  </body>
</html>

Und die CSS dazu:
Code: 
@charset "utf-8";

html, body, #main {
    min-height            : 100%;
    width                : 100%;
    height                : 100%;
    overflow            : auto;
}

html>body, html>body #content {
    height                : auto;
}

body {
    margin                : 0px;
    font-family            : Arial, Helvetica, sans-serif;
    font-size            : 12px;
    font-weight            : normal;
    color                : #000000;
    text-align            : center;
}

#main {
    margin                : 21px 0px 21px 0px;
    padding                : 0px;
    height                : auto;    
    position            : absolute;
    top                    : 0px;
    left                : 50%;
    width                : 900px;
    margin-left            : -450px;
    overflow            : hidden;
}

#banner {
    width                : 900px;
    height                : 135px;
    margin                : 0px 0px 3px 0px;
    padding                : 0px;
    float                : left;
}

#footer {
    width                : 900px;
    height                : 21px;
    position            : absolute;
    bottom                : 0px;
    margin                : 0px 0px 0px 0px;
    padding                : 0px;
    line-height            : 21px;
    background-image    : url(../images/footer_red.jpg);
    background-position    : center;
    background-repeat    : no-repeat;
    text-align            : center;
    font-family            : Arial, Helvetica, sans-serif;
    font-size            : 12px;
    font-weight            : normal;
    color                : #FFFFFF;
    clear                : left;
}

#navbar {
    width                : 900px;
    max-width            : 900px;
    height                : 29px;
    margin                : 0px;
    padding                : 0px;
    float                : left;
    background-image    : url(../images/navbar.gif);
    background-repeat    : no-repeat;
}

/* Menue Linke Seite */

#leftmenue {
    width                : 200px;
    max-width            : 200px;
    height:100%;
    margin                : 0px;
    padding                : 0px;
    float                : left;
    text-align            : left;
}

#menudivider {
    width                : 170px;
    height                : 20px;
    padding                : 0px 0px 0px 30px;
    background-image    :url(../images/menu_divider_red.jpg);
    background-position    :center;
    background-repeat    :no-repeat;
    text-align            : left;
    font-family            : Arial, Helvetica, sans-serif;
    font-size            : 14px;
    line-height            : 20px;
    font-weight            :700;
    color                : #FFFFFF;
}


/*-------------------*/

.content {
    width                : 700px;
    margin                : 0px 0px 0px 0px;
    padding                : 0px 0px 0px 0px;
    float                : right;
    text-align            : left;
}

.content p {
    padding                : 20px 10px 0px 10px;
    
}


.vivodame {
    vertical-align:text-bottom;
}

Langsam verzweifel ich ein wenig.
 
Stelle den HTML-code am Schluss etwas um:

Code: 
Sed porttitor.
          </p>
		</div>
<div id="footer">
		   © Nähschule im VIVO - Bahrenfelder Straße 260 - 22765 Hamburg - Ottensen im VIVO - Tel.: 0172-4568588 - Email: [email protected]

 <img style="position: absolute; bottom: 30px; left: -10px;" src="images/vivodame3.jpg" class="vivodame">
		</div>

	  </div>

CSS:

Code: 
#footer {
	width				: 900px;
	height				: 21px;
	position			: relative;
	clear: both;
	line-height			: 21px;
	background-image	: url(../images/footer_red.jpg);
	background-position	: center;
	background-repeat	: no-repeat;
	text-align			: center;
	font-family			: Arial, Helvetica, sans-serif;
	font-size			: 12px;
	font-weight			: normal;
	color				: #FFFFFF;

}

Den #main zentriere besser so:

Code: 
#main {
	margin			: 21px auto;
	padding			: 0px;
	height			: auto;	
	width				: 900px;
	overflow			: hidden;
}

Beachte jedoch, dass die Bildpositionierung gefährlich werden kann, wenn der Inhalt von #content nicht genügend hoch ist. Dann kann es zur Überlappung der Grafik mit der Navi kommen.
 
Hi,

das funktioniert zwar, ist allerdings nicht so wie ich es mir wünsche. Im Grunde möchte ich, das die beiden DIVs (leftmenu und content) immer die gleiche Länge haben.
Dann soll das Bild in dem leftmenu DIV ganz unten platziert werden.

Ist dies auch möglich?

Gruß Grinarn
 
Du könntest das noch dem #main zuweisen:
Code: 
background: url(../images/vivodame3.jpg) bottom left no-repeat;
Aber auch diese Variante kann bei zu geringem #content die Navi überlagern.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben