tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
846
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 15.03.06 16:06 #1
    's KATERchen 's KATERchen ist offline Mitglied Bronze
    Registriert seit
    Feb 2005
    Beiträge
    28
    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.
     
  2. 15.03.06 16:14 #2
    Maik Tutorials.de Gastzugang
    Poste doch mal den HTML- und CSS-Code der Seite, damit wir einen Einblick in das CSS-Layout gewinnen.
     
  3. 15.03.06 19:28 #3
    's KATERchen 's KATERchen ist offline Mitglied Bronze
    Registriert seit
    Feb 2005
    Beiträge
    28
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

    * {
    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-Code:
    <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-->
     
  4. 17.03.06 17:48 #4
    's KATERchen 's KATERchen ist offline Mitglied Bronze
    Registriert seit
    Feb 2005
    Beiträge
    28
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    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-Code:
    ...
</div> <!--content-->


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

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

    <div id="footer">...
     
« Einfaches Layout Problem | Den Style des Labels einer Optgroup ändern »

Ähnliche Themen

  1. Fixieren am unteren Rand
    Von mike4004 im Forum CSS
    Antworten: 14
    Letzter Beitrag: 21.08.07, 23:11
  2. Abstand zur unteren Kante definieren
    Von Ogre im Forum CSS
    Antworten: 3
    Letzter Beitrag: 24.06.05, 19:18
  3. Tabelle bis an den unteren Rand des IE
    Von vendy im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 05.05.05, 14:51
  4. div am unteren rand fixieren
    Von casr im Forum Javascript & Ajax
    Antworten: 6
    Letzter Beitrag: 28.04.05, 13:58
  5. flimmern am unteren rand
    Von dado26 im Forum Videoschnitt, Videotechnik & -produktion
    Antworten: 3
    Letzter Beitrag: 15.02.05, 17:34