CSS: Altbilgiyi bir sayfanın altına yapıştırmaya zorlama

Bazılarınız hemen Ryan Fait'in yapışkan altbilgisini hazırlayacaksınız, ancak kullandığım budur ve düzgün çalışmıyor.CSS: Altbilgiyi bir sayfanın altına yapıştırmaya zorlama

Sayfanın yakınlaştırılması ve çıkarılması altbilgiyi "çıkarır". http://jsfiddle.net/C2u3C/

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Andrew Louis</title> 
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" /> 
    <link rel="stylesheet" href="about-me.css" type="text/css" /> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="javascript/jqueryscript.js"></script> 

<body> 
    <br> 
    <h2>Andrew Louis</h2> 

    <div class="wrapper"> 
     <div class="subtitle"> 
      About Me 
      <div class = "subtitle-text"> 
      <br> <!--Spacing between image and subtitle --> 
      <img align="center" src="images/Profile.jpg" /><br><br> 
      <p>Synth sriracha wes anderson blog etsy, pickled truffaut street art. Brooklyn wolf sriracha trust fund fap. Retro chillwave readymade master cleanse. Mixtape carles pop-up ennui, viral DIY freegan fingerstache post-ironic williamsburg organic hella single-origin coffee lomo you probably haven't heard of them. Pickled biodiesel vinyl flexitarian narwhal occupy fanny pack, butcher forage lo-fi marfa iphone wayfarers. Gastropub aesthetic brooklyn, mcsweeney's carles wayfarers pop-up viral wolf thundercats. Put a bird on it brunch direct trade dreamcatcher kale chips, before they sold out pour-over tofu chillwave fixie 8-bit flexitarian typewriter.</p> 


      <br><p> Words and stuff </p> 

      <br> 
      </div> 
    </div> 

    <div class="push"></div> 
    </div> 
    <div class="footer"> 
     <p>Copyright © 2012 Andrew Louis</p> 
    </div> 
</body> 
</head>

CSS:

/*The New Stuff Begins Here*/ 

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    clear:both; 
    height: 100px; /* .push must be the same height as .footer */ 
} 
.footer{ 
    font-family: 'Lobster1.3Regular'; 
    color:white; 
    text-align: center; 
    line-height: 25px; 
    background:#D04D21; 
} 
/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/ 

h2{ 
    font-family:'WindsongRegular'; 
    font-size:33px; 
    color:#D04D21; 
    text-align:center; 
} 

.subtitle{ 
    float:left; 
    width:700px; 
    font-family:'Lobster1.3Regular'; 
    text-shadow: 0 0 1px rgba(0,0,0,0.5); 
    color:#D04D21; 
    position: absolute; 
    font-size:60px; 
    top: 4%; 
    left: 0px; 
    height: 1px; 
    text-align:left; 
    margin-left:150px; 
    margin-right:50px; 
} 

.subtitle-text p{ 
    text-align:left; 
} 

.subtitle-text{ 
    border-right:2px solid; 
    padding-right:55px; 
    float:left; 
    border-right:2px solid rgba(0,0,0,0.2); 
    width:700px; 
    font-family:'MuseoSlab500Regular'; 
    text-align:center; 
    /*margin-left:50px; 
    margin-right:50px;*/ 
    font-size:20px; 
    color:#D04D21; 
} 
.subtitle-text img{ 
    padding:3px; 
    border-top: 3px dashed #D04D21;/*#000000;*/ 
    border-bottom:3px dashed #D04D21;/*#000000;*/ 
    border-left:3px dashed #D04D21;/*#000000;*/ 
    border-right:3px dashed #D04D21;/*#000000;*/ 
</html>

kaynak

2012-06-27 Louis93

"altbilgi "unsticks" ve dışarı sayfasını yakınlaştırma" - hangi tarayıcı (ler) in? – thirtydot

Altbilgilerle oynuyordum ve sonunda üstbilgi ve altbilgi arasında

kullanarak bir nesne olarak sona erdi. Http://www.cdsan.com adresinde sahip olduğum bilgilere göz atabilirsiniz. Denediğim ya da sihirbazlık gösterdiğim diğer tüm varyantlar tarayıcılardan bazıları. –

@thirtydot Hepsinde! – Louis93

cevap

nedeni, alt yazı sınıfınızdaki position:absolute; ve float:left;. Mutlak konumlandırma kaldırıldıktan ve float temizledikten sonra sorun gider. Altyazının tam olarak nerede görünmesini istediğinize bağlı olarak, başka seçenekler de mevcut olmalıdır.

CSS:

.subtitle{ 
    float:left; 
    width:700px; 
    font-family:'Lobster1.3Regular'; 
    text-shadow: 0 0 1px rgba(0,0,0,0.5); 
    color:#D04D21; 
    text-align:left; 
} 

.footer, .push { 
    clear:both; 
    height: 100px; /* .push must be the same height as .footer */ 
}

Live DEMO

kaynak

2012-06-27 01:07:09

** + 1 **. – arttronics

Bunu kullanabilirsiniz: Burada canlı bir test durumu var

.footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
}

http://jsfiddle.net/C2u3C/2/

kaynak

2012-06-27 00:42:06 bfavaretto

Sabit olarak ayarlarsanız içeriği kapsar. –

Evet, içeriğiyle örtüşüyor, iyi bir çözüm olsa da. – Louis93

@JoshMein Evet, sanırım soruyu yanlış anladım, OP'nin farklı bir etki aradığı anlaşılıyor. Mükemmel cevap için – bfavaretto

İlgili konular