Slo-Tech

» »

[CSS]Pozicioniranje footer diva

[CSS]Pozicioniranje footer diva

amaze646 ::

Pozdravljeni

Spet se pojavljam z novim problemom glede postavitve elementov. Na strani imam header, content in ostalo loceno, tako da ima vsak segment svoj "glavni" div, ki potem vsebuje nadaljne elemente. Najprej je header, potem div za prikaz zadnjih slik, za njem content in nazadnje naj bi prisel se footer. Problem pa se pojavi, da mi footer noce postaviti na konec strani. Namesto, da bi bil na koncu, obstane takoj za divom za zadnje slike. Kar hocem bolje prikazuje spodnja slika. Koda vem, da je dalec od lepe ampak ok, se se lovim. Css od galerije zadnjih slik ne bom pripenjal, ker gre za jqueryjev plugin in je ogromno css-ja. Kolikor sem testiral nima povezave z mojim problemom. Na sliki pucica prikazuje kam naj bi prisel footer in kje je sedaj. Torej, kje bi lahko bil problem? Aja in glavni div za header ima position: relative, ker imam v notranjosti headerja par elementov postavljenih absolutno. Ker je header skos staticen, nebi smelo biti tezav.


 test

test




HTML:

Koda:
<div id="mycarousel" class="jcarousel-skin-moja"> 
    <ul> 
        <li><img src="gallery/500.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/cerkva-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0004.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0053.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0069.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0119.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0177_BW.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/glavni-trg.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/hdr_2.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/jagode.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/kitara_clean_1.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/kontrastna_1-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/love.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/slika.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/speed3.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/zarnca_finish.jpg" alt="cerkva"  height="65" /></li> 
    </ul> 
</div> 
<div id="mainContent"> 
   <div id="mainContentLeft" class="content"></div> 
        <div id="mainContentCenter" class="content"> 
          <div id="mainContentWarper"> 
            <p>asdasdsad</p> 
              <p>asd</p> 
              <p>asd</p> 
              <p>as</p> 
              <p>sd</p> 
              <p>sd</p> 
              <p>sd</p> 
              <p>sd</p> 
          </div> 
        </div> 
     <div id="mainContentRight" class="content"></div> 
</div> 
<div id="mainContentBottom"> 
    <div id="mainContentBottomLeft"><img src="img/content_kot_levo.png" alt="levo" /></div> 
    <div id="mainContentBottomCenter"></div> 
    <div id="mainContentBottomRight"><img src="img/content_kot_desno.png" alt="desno" /></div> 
</div> 
<div id="footer"></div>




CSS:

Koda:
/* ==== Main Content === */ 
#mainContent { 
   width: 100%; 
} 
#mainContent #mainContentLeft { 
   background-image: url(../img/content_levo.png); 
   background-repeat: repeat-y; 
   width: 40px; 
   background-position: right; 
   float: left; 
} 
#mainContent #mainContentRight { 
   background-image: url(../img/content_desno.png); 
   background-repeat: repeat-y; 
   width: 30px; 
   background-position: left; 
   float: left; 
} 
#mainContent  div#mainContentCenter { 
   background-image: url(../img/content_bg.png); 
   background-repeat: repeat-x; 
   width: 93.5%; 
   float: left; 
   background-color: #FFFFFF; 
} 
#mainContentCenter  #mainContentWarper  { 
   padding: 5px; 
} 
div#mainContentBottom /* ==== Main Content Bottom === */ 
{ 
   width: 100%; 
   z-index: 1; 
} 
#mainContentBottom #mainContentBottomLeft { 
   width: 40px; 
   float: left; 
   text-align: right; 
} 
#mainContentBottom #mainContentBottomRight { 
   width: 30px; 
   float: left; 
} 
#mainContentBottom   #mainContentBottomCenter { 
   width: 93.5%; 
   float: left; 
   height: 35px; 
   background-image: url(../img/content_bottom.png); 
   background-repeat: repeat-x; 
} 
#footer    { 
   height: 50px; 
   width: 100%; 
   background-color: #00FF00; 
} 

bluefish ::

Footer po koncu vseh ostalih elementov ali vedno na dnu?

JayKay ::

dve možnosti:
1) glavnemu div-u ki je neposredno pred footerjem (se pravi mainContentcontent) v css-u daj clear:both
2) na dnu mainContent diva daj v prazen div z recimo class .clear in pol v css-u daj clear:both;

amaze646 ::

JayKay in blueFish hvala vama za odgovore. JayKay sem preizkusil, kar si mi napisal ampak se zadeva ne popravi. Div footer imam se kar na vrhu, namesto spodaj.

@blueFish: footer naj bi bil na koncu vseh elementov in se bi premikal skladno z ostalimi divi. Se pravi z vsebino in, da je pac vedno na dnu kjer footer mora biti :).

amaze646 ::

Bom dal kar celotno kodo sem in prikazal kako naj bi zgledalo.

Zgledalo naj bi takole. Se pravi footer je spodnji "trak" oziroma zadnji div na katerega kaze puscica.




Naredi mi pa tole. Spodnji oziroma footer div mi vedno spravi na oznaceno mesto, neglede na to kar sem probal je vedno isto. Puscica kaze kje je footer div.




Tole je celoten HTML:
</head>
<body>
<div id="header">
  <div id="nav">
      <ul>
        <li><a href="#"><img src="img/domov.png" alt="Home" width="133" height="77" /></a></li>
        <li><a href="#"><img src="img/omeni.png" alt="O Meni" width="129" height="77" /></a></li>
        <li><a href="#"><img src="img/novice.png" alt="Interesi" width="122" height="77" /></a></li>
        <li><a href="#"><img src="img/blog.png" alt="Blog" width="111" height="77" /></a></li>
        <li><a href="#"><img src="img/galerija.png" alt="Galerija" width="138" height="77" /></a></li>
        <li><a href="#"><img src="img/kontakt.png" alt="Kontakt" width="160" height="77" /></a></li>   
      </ul>
 </div>
  <div id="login">
    <div class="box" id="loginMiddle">
      <div id="loginButton"><img src="img/login_button.png" alt="login button" width="88" height="47" /></div>
                <div class="loginBg" id="uname"><img src="img/loginbox_left.png" alt="login left"/>
               	  <div class="loginWarper"><img src="img/loginbox_right.png" alt="login right"/></div>
                </div>
                <div class="loginBg" id="pass"><img src="img/loginbox_left.png" alt="login left"/>
               	  <div class="loginWarper"><img src="img/loginbox_right.png" alt="login right"/></div>
                </div>
            <div id="loginRegistration">Niste registrirani? <span style="color:#2d5225">Registracija!</span></div>
        </div>
  <div id="loginBottom">
       <div id="loginArrow" class="bottomArrowUp"></div>
       		<input id="loginUp" type="image" alt="bottom" src="img/loginbox2.png"  />
    </div>
  </div>
  <div id="search">
    <div class="box" id="searchMiddle">
      <div id="searchBar"><img src="img/searchbar_left.png" alt="search left" width="4" height="30" />
            	<div id="searchButton"><img src="img/searchbar_button.png" alt="search button" /></div>
              	<input name="searchInput" type="text" class="textbox" id="searchInput" />
      </div>
   </div>
       <div id="searchBottom">
            <div id="searchArrow" class="bottomArrowUp"></div>
            <input type="image"  alt="bottom" id="searchUp"  src="img/loginbox2.png"  />
       </div>
  </div>
  <div id="logo"><img src="img/logo.png" alt="logo" width="257" height="59" /></div>
</div>
<div id="mycarousel" class="jcarousel-skin-moja">
    <ul>
   	  <li><img src="gallery/500.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/cerkva-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0004.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0053.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0069.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0119.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0177_BW.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/glavni-trg.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/hdr_2.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/jagode.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/kitara_clean_1.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/kontrastna_1-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/love.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/slika.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/speed3.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/zarnca_finish.jpg" alt="cerkva"  height="65" /></li>
    </ul>
</div>
<div id="mainContentWarper">
    <div id="mainContent">
        <div id="mainContentLeft" class="content"></div>
            <div id="mainContentCenter" class="content">
              <div id="mainContentWarper">
                <p>asdasdsad</p>
                  <p>asd</p>
                  <p>asd</p>
                  <p>as</p>
                  <p>sd</p>
                  <p>sd</p>
                  <p>sd</p>
                  <p>sd</p>
              </div>
            </div>
        <div id="mainContentRight" class="content"></div>
        <div id="mainContentBottom">
            <div id="mainContentBottomLeft"><img src="img/content_kot_levo.png" alt="levo" /></div>
            <div id="mainContentBottomCenter"></div>
            <div id="mainContentBottomRight"><img src="img/content_kot_desno.png" alt="desno" /></div>
        </div>
    </div>
	<div id="footer"></div>
</div>
</body>
</html>


Tole je celoten CSS:
@charset "utf-8";
/* CSS Document */

/* ==== Global === */

body {
	background-color: #000000;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-image: url(../img/main_bg.png);
}
input {outline: none;}
li {list-style-type: none;}



/* ==== Classes === */

.box {
	background-image: url(../img/loginbox_bg.png);
	background-repeat: repeat-y;
}
.bottomArrow {
	position: absolute;
	left: 125px;
	background-image: url(../img/down.png);
	background-repeat: no-repeat;
	height: 9px;
	width: 9px;
}
.bottomArrowUp {
	position: absolute;
	left: 125px;
	background-image: url(../img/up.png);
	background-repeat: no-repeat;
	height: 9px;
	width: 9px;
}
.boxMiddle  {
	height: 78%;
	background-image: url(../img/loginbox_bg.png);
	background-repeat: repeat-y;
	width: 100%;
}
.loginWarper {
	width: 3px;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.loginBg {
	background-image: url(../img/loginbox_center.png);
	background-repeat: repeat-x;
	height: 21px;
	width: 140px;
	position: absolute;
}
.textbox {
	outline: none;
	border: none;
	background: transparent;
}


/* ==== Header === */

#header {
	height: 218px;
	background-image: url(../img/bg.jpg);
	background-repeat: repeat-x;
	width: 100%;
	position: relative;
}

#header #logo {
	position: absolute;
	top: 20px;
	left: 34px;
}




/* ==== Main Menu === */


#header  div#nav {
	position: absolute;
	bottom: 20px;
	left: 15%;
	width: 850px;
	height: 77px;
	display: inline;
}


/* ==== Login Box === */
#header div#login {
	width: 254px;
	float: right;
	margin-right: 20px;
	position: relative;
}
#login #loginMiddle {
	height: 100px;
}
#login #loginBottom #loginTitle {
	color: #B47E86;
}
#loginMiddle  #uname {
	position: relative;
	left: 10px;
	bottom: 35px;
}
#loginMiddle  #pass {
	position: relative;
	bottom: 30px;
	left: 10px;
}
#loginMiddle #loginButton {
	position: relative;
	width: 88px;
	height: 47px;
	top: 12px;
	left: 155px;
}
#loginMiddle #loginRegistration {
	position: absolute;
	bottom: 25px;
	height: 14px;
	left: 10px;
	color: #18484c;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	width: 100%;
}



/* ==== Search Box === */

#header  div#search {
	width: 254px;
	float: right;
	margin-right: 20px;
	position: relative;
}
#search  #searchMiddle {
	height: 70px;
	position: relative;
}
#search #searchBottom #searchTitle {
	color: #62cb4c;
}
#searchBar #searchInput {
	width: 155px;
	height: 30px;
	position: absolute;
	top: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #365B55;
}
#searchBar #searchButton {
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#search   div#searchBar   {
	height: 30px;
	background-image: url(../img/searchbar_bg.png);
	background-repeat: repeat-x;
	width: 225px;
	position: relative;
	left: 15px;
	top: 20px;
}
#nav img {
	border: none;
	outline: none;
}
#nav a {
	border: none;
	outline: none;
}
#nav li {
	display: inline;
	margin-left: -4px;
}
#nav ul {
	display: inline;
}
div#mainContent /* ==== Main Content === */
 {
	width: 100%;
	clear: both;
}
#mainContent #mainContentLeft {
	background-image: url(../img/content_levo.png);
	background-repeat: repeat-y;
	width: 40px;
	background-position: right;
	float: left;
}
#mainContent #mainContentRight {
	background-image: url(../img/content_desno.png);
	background-repeat: repeat-y;
	width: 30px;
	background-position: left;
	float: left;
}
#mainContent  div#mainContentCenter {
	background-image: url(../img/content_bg.png);
	background-repeat: repeat-x;
	width: 93.5%;
	float: left;
	background-color: #FFFFFF;
}
#mainContentCenter  #mainContentWarper  {
	padding: 5px;
}
div#mainContentBottom /* ==== Main Content Bottom === */
 {
	width: 100%;
	z-index: 1;
}
#mainContentBottom #mainContentBottomLeft {
	width: 40px;
	float: left;
	text-align: right;
}
#mainContentBottom #mainContentBottomRight {
	width: 30px;
	float: left;
}
#mainContentBottom   #mainContentBottomCenter {
	width: 93.5%;
	float: left;
	height: 35px;
	background-image: url(../img/content_bottom.png);
	background-repeat: repeat-x;
}
#footer    {
	height: 96px;
	width: 100%;
	background-color: #00FF00;
}
.clear {
	clear: both;
}

Major ::

clear moraš nastaviti na #footer.
IT Developer & Photography enthusiast.

amaze646 ::

Super, hvala vam fantje. Div je postavilo spodaj zdej. Zdej pa sam se eno vprasanje. A je varjanta, da ta div nekoliko postavim pod content div, kot je v moji prejsnji objavi na sliki prikazano.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Koda za sliko

Oddelek: Izdelava spletišč
11748 (585) Uros!no
»

Lampp problem

Oddelek: Izdelava spletišč
71108 (1011) Slovenia13
»

3 divi v divu in float

Oddelek: Izdelava spletišč
101348 (1232) alexa-lol
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
132182 (2048) Road Runner
»

CSS in začetniški problemi

Oddelek: Izdelava spletišč
71005 (821) t3hn0

Več podobnih tem