Page 1 of 1
Limitiertes Position Fixed
Posted: Wed 29. Jul 2009, 21:52
by Mona
Hallo zusammen
Ich habe kein spezifisches phpwcms bezogenes Problem, aber evtl kann mir trotzdem jemand weiterhelfen.
Unter folgendem Link sieht ihr eine Website die mit phpwcms erstellt worden ist.
http://www.mr-multimedia.ch/cms/index.php?tontechnik
Mein Problem bezieht sich nun auf das Logo das links unten positioniert ist. Das Logo soll immer, egal welche Browsergrösse/Bildschirmgrösse unten links positioniert bleiben. Dies ist mir auch gelungen mit untenstehenden Code. Wird nun das Browserfenster arg verkleinert, läuft das Logo über die linke Menuleite drüber (was nicht wirklich schön aussieht). Nun meine Frage, ist es möglich zu definieren, dass das Logo bis zu einem bestimmten Punkt darf und weiter nicht?
Bin um jeden Hinweis dankbar, denn dies überfordert leider meine Kenntnisse.
Grüsse Mona
Code: Select all
#footer {
height:45px;
width:auto;
clear:both;
position:fixed;
bottom:17px;
margin-left: 50px;
}
Re: Limitiertes Position Fixed
Posted: Wed 29. Jul 2009, 22:30
by Oliver Georgi
Nein, nicht auf der Basis. Fixed heißt fixed. Es wird sich also immer über den dahinterliegenden Inhalt schieben.
Du musst den Footer halt auf position: absolute setzen und dem Inhalt eine Mindeshöhe geben. Dann wird, wenn der Platz nicht reicht, das Logo im Scrollbereich des Browsers verschwinden. Dem Elternelement des Footers musst Du dann noch position: relative geben.
Re: Limitiertes Position Fixed
Posted: Wed 12. Aug 2009, 17:16
by Mona
Danke Oliver für Deine Antwort...war "leider" einwenig im Urlaub deshalb meine verspätete Nachricht.
Ich habs versucht mit Footer absolute und dem Hauptelement relative....habs aber leider nicht hinbekommen
Ich bin so frei und poste hier den Code...falls jemand die Zeit nehmen will und kann...
CSS
html{
height: 100%;
}
body{
height: 100%;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
background: #0040B6 url(
http://www.mundr.ch/images/background.gif) repeat-x;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
div,p,ul,li,a{
margin: 0;
padding: 0;
}
p{
margin-bottom: 10px;
}
#leftborder, #rightborder{
height: 980px;
background: #0040B6;
}
#leftborder{
background: url(
http://www.mundr.ch/images/bg-left.gif) no-repeat;
}
#rightborder{
background: url(
http://www.mundr.ch/images/bg-right.gif) no-repeat top right;
}
#main{
background-image: url(
http://www.mundr.ch/images/bg-main.gif);
line-height: 150%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background-color: #ffffff;
background-repeat: repeat-y;
margin: 0 auto;
text-align: left;
width: 800px;
position:relative;
}
#top1{
height: 14px;
margin: 0px 15px 0px 15px;
background-color: #000000;
}
#top2{
height: 29px;
margin: 0px 15px 0px 15px;
background-color: #000000;
background: url(
http://www.mundr.ch/images/top.gif) no-repeat right;
}
#top3{
height: 7px;
}
#header{
height: 200px;
}
#header img{
margin-left: 15px;
}
#content{
float: left;
width: 500px;
margin: 23px 45px 0px 45px;
}
#content2{
float: left;
width: 266px;
margin: 20px 0px 0px 45px;
}
#bilder{
float: left;
width: 234px;
margin: 20px 0px 0px 0px;
}
#contentleft{
float: left;
width: 150px;
margin: 23px 0px 0px 33px;
}
#border{
float: left;
}
#footer {
height:45px;
width:auto;
clear:both;
position:absolute;
bottom:17px;
margin-left: 50px;
min-height:200px;
}
#footer_right{
background: url(
http://www.mundr.ch/images/logo.gif);
background-repeat:no-repeat;
/*background-position:right;*/
height:45px;
width:240px;
}
<html>
<body>
<div id="main">
<div id="leftborder">
<div id="rightborder">
<div id="top1"></div>
<div id="top2"><div class="nlu_horiz1">{NAV_LIST_UL:F,0,1,act_path,active}</div></div>
<div id="top3"></div>
<div id="header"><img src="
http://www.mundr.ch/images/home.jpg" alt="" /></div>
<div id="content-container">
<div id="contentleft">
<div class="nlu_navi1"><br>
{LEFT} </div>
</div>
<div id="content">
<p>{CONTENT}</p>
</div>
</div>
</div><div id="footer">
<div id="footer_right">
</div>
</div>
</div>
</div>
</body>
</html>
Re: Limitiertes Position Fixed
Posted: Mon 28. Dec 2009, 14:26
by Mona
Hallo zusammen
Ich habe vor ein paar Monaten diesen Post hier gestartet...
habe mich dann aber nicht mehr darum gekümmert. Jetzt bin ich an einer anderen Webseite und benötige die gleiche Hilfe nochmals.
Kann mir jemand weiterhelfen?
Re: Limitiertes Position Fixed
Posted: Mon 28. Dec 2009, 14:34
by Oliver Georgi
Direkt ist das nicht möglich, soweit ich weiß. Es müsste aber möglich sein, das an einem umschließenden Layer absolut zu positionieren, der über eine min-height verfügt.
Re: Limitiertes Position Fixed
Posted: Mon 28. Dec 2009, 15:11
by Mona
okay...
habe aber bereits versucht den footer mit min-height zu definiere...oder meinst Du was anderes?
Re: Limitiertes Position Fixed
Posted: Mon 28. Dec 2009, 17:54
by Oliver Georgi
solange der "fixed" positioniert ist, nützt das nichts
