Jak ustawić tekst w css?

Dla specjalistów Webmastering
#1

cześć

 

jak ustawić tekst w css od dołu by nie wychodził po za tło lub granice?

#2

Wykorzystaj bloki tzw. “div” i nadaj klasę w dokumencie html. Potem CSS.

#3

To mój kod:

<html>
<head>
  <title>www</title>

<style>
.polozeniestrony {
  margin:0 auto;
  width:1000px;
 position:relative; top:-25px;
  min-height: 500px;
  }

.header,.glowny {
  position:relative;
  float:left;
  clear:both;
  width:1000px; }

.header {
background: no-repeat url('logo1.jpg');
background-size:1000px 250px;

  height:250px;
   position:relative;
   top:0px;
  }
.menupoziome{
background: no-repeat url('menu.jpg');
 width: 1000px;
 height: 50px;
 color: white;
 font-size: 20px;
 font-family: tahoma;
 position:relative; top:5px;
}

.zawartosc{
height: 800px;
width: 1000px;
float: left;
background: no-repeat url(logo.jpg);
background-size:1000px 800px;
color: white;
font-family: tahoma;
font-size: 20px;
position:relative; top:10px;
}

.tekst,h1{font-size:15px;
margin: 30px;
color: white;
}
.zawartosc h1
{
color: white;
font-style: italic;
}
.footer
{font-family:tahoma;
width: 1000px;
height: 70px;
float: left;
color: white;
background: no-repeat url(stopka.jpg);
position:relative; top:15px;

}
.footer p
{
height: 80px;
width:1000px;
clear:both;
}

.menupoziome .menu {
  position:absolute;
  top:0;
  margin-left: 40px;
  margin:0;
  padding-top:0;
  height:40px;
  list-style:none; }
 
.menupoziome .menu li {
  display:block;
  float:left;
  clear:none;
  margin-left:25px;
  padding:0 0 0 0;  
  height:40px;
  line-height:40px;}
 
.menupoziome .menu li a {
  color:#fff;
  text-decoration:none;
   }


.glowny {
float:left;
clear:none;
width:1000px;
}

</style>
</head>
<body>
<div class="polozeniestrony" id="top">
<div class="header"></div>
<div class="glowny">
        <div class="menupoziome">
          <ul class="menu">
           <li><a href="#">Strona Glowna</a></li>
        <li><a href="#">Ryby</a></li>
        <li><a href="#">Rosliny</a></li>
        <li><a href="#">Inne zwierzeta</a></li>
        <li><a href="#">Sprzet</a></li>
        <li><a href="#">Galeria</a></li>
        </ul>
        </div>
      <div class="zawartosc">
      <div class="tekst">
      <h1>Strona Glowna</h1>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>
      <p>Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.Jakis, tekst pierwszy.</p>     
</div>
      </div>
      <div class="footer">
      <p>Stopka</p>
      </div>
      </div>
</div>
 
</div>
</div>
</body>
</html>
#4

Jeśli chodzi Tobie o to, że stopka zasłania część treści, zawsze możesz ją “przepchnąć” marginesem, np. dolnym dla zawartości, o wartości wysokości stopki:

.zawartosc {margin-bottom: 70px;}

Zadziała jeśli nie ma gdzieś w reszcie jakiegoś “zonka”.

PS. Tak z ciekawości, podstawę strony masz z sieci, czy pisałeś ją sam?

#5

Strony podstawowe pisze sam niestety…