Limitiertes Position Fixed

Mona · Post by **Mona** » Wed 29. Jul 2009, 21:52

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;
	
}

Post by **Oliver Georgi** » Wed 29. Jul 2009, 22:30

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.

Mona · Post by **Mona** » Wed 12. Aug 2009, 17:16

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>

Mona · Post by **Mona** » Mon 28. Dec 2009, 14:26

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?

Post by **Oliver Georgi** » Mon 28. Dec 2009, 14:34

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.

Mona · Post by **Mona** » Mon 28. Dec 2009, 15:11

okay...

habe aber bereits versucht den footer mit min-height zu definiere...oder meinst Du was anderes?

Post by **Oliver Georgi** » Mon 28. Dec 2009, 17:54

solange der "fixed" positioniert ist, nützt das nichts

Limitiertes Position Fixed

Limitiertes Position Fixed

Re: Limitiertes Position Fixed

Re: Limitiertes Position Fixed

Re: Limitiertes Position Fixed

Re: Limitiertes Position Fixed

Re: Limitiertes Position Fixed

Re: Limitiertes Position Fixed