✔ Abstand vom unteren Rand

Status
Nicht offen für weitere Antworten.
S

sKATERchen

Mitglied
Hi,
ich habe einen Container, unterteilt in Header, Footer und dazwischen den Content mit links, mitte und rechts.
Links habe ich ne feste Navigation, in der Mitte steht der Inhalt, der aber auf jeder Seite eine andere länge hat (und somit eben auch das Fenster nach unten zieht) um im rechten Teil habe ich eine Grafik in einem eigenen Div. Dieser Grafik will ich nun aber eine feste Position von unten geben. Sie soll also immer etwa 30px über dem Header schweben oder meinetwegen auch mit dem Ende des Textes vom mitte-div bündig abschließen.

Ich habe hier was gelesen vom negativen margin-top, aber das läuft nicht, da schiebt er die Grafik sogar noch hoch in den Header.
 
Poste doch mal den HTML- und CSS-Code der Seite, damit wir einen Einblick in das CSS-Layout gewinnen.
 
ich wollte jetzt nicht den ganzen Quelltext und das ganze css-Script posten, das währe ellenlang geworden. Ich hoffe nur, ich habe jetzt nichts wichtiges gestrichen. Der HTML-Teil jedenfalls ist der komplette Container.

Code: 
* {
    padding : 0px;
    margin : 0px;
}

html, body{
    width: 100%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; /* Für Zentrierung in älteren Browsern wichtig: */
    text-align: center;
    background-image: url(../images/bg.gif);
    color: #000160;
}


/* ===================================== C O N T A I N E R =======================================*/
div#container {
    margin: 0 auto;  /* Zentrierung */
    text-align: left;
    width: 760px;
    height:100%;
    background-image: url(../images/bg.gif);
}


/* ===================================== C O N T E N T =======================================*/
div#content{
    float: left;
    margin: -1px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 760px;
/*    background-color: #F4F9FF;*/
    background-color:white;
}


/* ===================================== C O N T - L I N K S =======================================*/
div#contentL{
    float:left;
    margin: 10px 0px 0px 10px;
}

div#contentLTitel {
    text-decoration: none;
    display: block;
    width:180px;
    border-bottom: solid 0px Navy;
    text-align: left;
    color: #000160;
    margin: 5px 20px 0px 0px;
    font-weight: normal;
    font-size: 0.71em;
}

div#contentLTitel a {
    text-decoration: none;
    display: block;
    width:180px;
    border-bottom: solid 2px #990000;
    border-right: solid 0px navy;
    text-align: left;
    color: #000160;
/*    background-color: #DFEFFF;*/
    margin: 0px 0px 0px 10px;
    padding:0px 5px 2px 5px;
    font-weight: normal;
/*    font-size: 0.71em;*/
}




/* ===================================== C O N T - M I T T E =======================================*/
div#contentMText{
    float: left;
    width:340px;
    margin:0em 0px 0px 20px;
    border:solid 0px #000080;
}





/* ===================================== C O N T - R E C H T S =======================================*/
div#contentR{
    float:right;
    padding : 0px;
    margin : 20px 0px 0px 0px;
    border:solid 0px #000080;
}

div#contentRImage{
    display: block;
    width:120px;
    margin: 0px 0px 0px 0px;
    text-align:right;
    font-weight: bold;
/*    font-size: 0.8em;*/
}





/* ===================================== C O N T - M I T T E  =======================================*/

.contentMTitel{
    display: block;
    background-color: #000080;
    background-image: url(../images/bgTitel.gif);
    width: 340px;
    text-align: left;
    color: #F5F5F5;
    margin: 10px 0px 0px 0px;
    padding: 2px 4px 4px 0.5px;
    font-weight: bold;
    font-size: 0.8em;
}

.contentMInhaltA {
    width:340px;
    font-size: 0.71em;
    margin:10px 0px 0px 10px;
}

.contentMInhaltB {
    width: 340px;
    font-size: 0.71em;
    margin:10px 20px 20px 15px;
    text-align: left;
}

.contentMInhaltB li{
    margin: 0em 0em 0em 10px;
/*    list-style-type: circle;*/
    list-style-image: url(../images/denker.jpg);
}


/* ===================================== F O O T E R =======================================*/
div#footer{
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 50px; 
    background-color: #ffffff /*    background-image: url(../images/index_13.jpg);*/
}

div#footerText{
    margin: 5px 0px 0px 140px;
    font-size:0.7em;
    color:#000080;
}

div#footerBanner {
    clear:both;
    margin:0px 0px 0px 166px;
    height:60px;
    width:468px;
}
HTML: 
<div id="container">

<!--==== H E A D E R ================-->
    <div id="header">
        <div id="HeaderTopA">
        </div>

        <div id="HeaderNavi">
            <div class="HeaderText"><a href="index.html">Home</a></div>
            <div class="HeaderText"><a href="index.html">text</a></div>
            <div class="HeaderText"><a href="index.html">text</a></div>
            <div class="HeaderText"><a href="disc.html">text</a></div>
            <div class="HeaderText"><a href="index.html">text</a></div>
        </div>

    </div><!--header-->
<!--********************************** -->



<!--==== C O N T E N T ================-->
    <div id="content">

         <div id="contentL">
            <div id="contentLTitel">text
            </div>
            <div id="contentLTitel"><a href="html/angebot.html">text</a>
            </div>
            <div id="contentLTitel"><a href="html/referenz.html">text</a>
            </div>
            <div id="contentLTitel"><a href="html/kontakt.html">text</a>
            </div>
            <div id="contentLTitel"><a href="html/kontakt.html">text</a>
            </div>
            <div id="contentLTitel"><a href="html/kontakt.html">text</a>
            </div>
            <div id="contentLTitel"><a href="html/kontakt.html">text</a>
            </div>
            <div id="contentLTitel"><a href="html/kontakt.html">text</a>
            </div>
        </div> <!--contentR-->



        <div id="contentMText">
            <div class="contentMTitel">text text text
            </div>

            <div class="contentMInhaltA">
text text text
            </div>

            <div class="contentMInhaltB">
                <ul>
                    <li>text</li>
                    <li>text</li>

                </ul>
            </div><!--contentMInhaltB-->
            <div class="contentMInhaltA">
text text
            </div><!--contentMInhaltA-->
        </div><!--contentMText-->



        <div id="contentR">
             <img src="http://www.tutorials.de/forum/images/denker_a.jpg" width="150" height="168" border="0" alt="">
        </div> <!--contentR-->

    </div> <!--content-->

<!--********************************** -->


<!--==== F O O T E R ================-->

    <div id="footer">
        <div class="footerline">
        </div>


        <div class="TXTfooter">Home
        </div>
    </div><!--footer-->

</div> <!--container-->
 
Hat sich erledigt, ich habe eine ganz simple Lösung gefunden.

Ich habe einfach zwischen content und footer einen eigenen Container angelegt, darin ein div.
Mit position:absolute; und negativem margin-top zieht sich das Bild nun immer mit der Seitenlänge mit.

Code: 
div#contentR{
    float:right;
    padding : 0px;
    margin : 0px 0px 0px 610px;
    width:168px;
    border:solid 0px #000080;
}

div#contentRImage{
    position:absolute;
    clear:both;
    width:150px;
    height:168px;
    margin: -168px 20px 0px 0px;
    background-image: url(../images/denker_a.jpg);

HTML: 
...
</div> <!--content-->


<!--********************************** -->
    <div id="contentR">
        <div id="contentRImage">
        </div>
    </div>

<!--==== F O O T E R ================-->

    <div id="footer">...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück