Forum PHP.pl > CSS - Wysrodkowanie strony+ automatyczne powiekszanie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: CSS - Wysrodkowanie strony+ automatyczne powiekszanie

Forum PHP.pl > Forum > Po stronie przeglądarki

pajdakks

13.01.2010, 16:26:48

Witam mam problem, ponieważ nie wiem jak wyśrodkować stronę i jak zrobić żeby środek mi się sam rozszerzał, dokładnie chodzi o ten blok #glowna-03.
Mam nadzieję, że mi ktoś pomoże ;p. Pozdrawiam

[XML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>glowna</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<style type="text/css">
<!--
 
#Table_01 {
 
text-align: center; 
text-align: center; 
position:absolute;
left:0px;
top:0px;
width:400px;
height:768px;
}
 
#glowna-01_ {
background-image: url("images/glowna_01.gif");
position:absolute;
left:0px;
top:0px;
width:400px;
height:31px;
}
 
#glowna-02_ {
background-image: url("images/glowna_02.gif");
position:absolute;
left:0px;
top:31px;
width:20px;
height:696px;
}
 
#glowna-03_ {
background-color:#2CA3DA;
background-repeat: repeat-x;
position:absolute;
left:20px;
top:31px;
width:361px;
height:696px;
}
 
#glowna-04_ {
background-image: url("images/glowna_04.jpg");
position:absolute;
left:381px;
top:31px;
width:19px;
height:696px;
}
 
#glowna-05_ {
background-image: url("images/glowna_05.gif");
position:absolute;
left:0px;
top:727px;
width:400px;
height:41;
}
 
-->
</style>
</head>
<div id="Table_01">
<div id="glowna-01_">
</div>
<div id="glowna-02_">
</div>
<div id="glowna-03_">
 
</div>
<div id="glowna-04_">
</div>
<div id="glowna-05_">
</body>
</html>
[XML] pobierz, plaintext

Volume

13.01.2010, 16:34:36

Po co CI tam position? Zrob to po przez float i bedzie Ci latwiej. Position nie wysrodkujesz - nadales mu wszystkie wymiary i wypozycjonowales, a do Twojego celu zupelnie nie tedy droga....

Poza tym jesli chcesz zeby strona Ci sie dopasowywala do wielkosci okna to jdnostki w %.

pajdakks

13.01.2010, 16:41:09

Czyli muszę usnąć :

[XML] pobierz, plaintext 
position:absolute;
[XML] pobierz, plaintext

?
I co dalej ? ;p

Volume

13.01.2010, 17:26:10

Przeanalizuj sobie to:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>glowna</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<style type="text/css">
<!--
* {
margin:0;
padding:0;
} 
body {
  text-align: center;
}
#all {
  width: 800px;
  text-align: left;
  margin: 0 auto;
}
 
#top {
background: red;
height: 50px;
}
 
#left {
background: yellow;
width: 100px;
float: left;
}
 
#cent {
background-color:#2CA3DA;
width: 600px;
float: left;
}
 
#right {
background: green;
width: 100px;
float: left;
}
 
#stopka {
background: orange;
clear: both;
}
 
-->
</style>
</head>
<div id="all">
  <div id="top">top</div>
  <div id="left">left</div>
  <div id="cent">
  cent cent cent cent cent cent cent cent cent cent cent cent cent cent 
  cent cent cent cent cent cent cent cent cent cent cent cent cent cent
  cent cent cent cent cent cent cent cent cent cent cent cent cent cent 
  cent cent cent cent cent cent cent cent cent cent cent cent cent cent
  </div>
  <div id="right">right</div>
  <div id="stopka">stopka</div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Osiagniecie tabelowego modelu (display:table-cell) w css jest mozliwe ale nie wszystkie przegladarki sobie z tym radza wiec najlepiej kombinowac dodatkowo po przez obrazki w tle.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.