Wątek przeniesiony 2014-08-13 21:00 z Webmastering przez dzek69.

Strona nie skaluje się do wielkości przeglądarki.

0

Witam,
Mam oto taką stronę, trochę przykładów zaczerpniętych z książki a trochę z Internetu. Niestety brakuje mi jeszcze wiedzy na temat programowania w html i css, dlatego wychodzi mi strona, która się nie skaluje do szerokości przeglądarki tapeta się zmniejsza a menu robi się dwu poziomowe zamiast jedno. Czy mógłby ktoś, podzielić się swoją wiedzą co zrobiłem nie tak.

1x poprawnie wyświetlająca się strona

2x brak skalowania

<!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" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Kaer Morhen Army</title>

<div id="header">

<div id="nav">
<center><img src="logo.gif" alt="wow"></center>
<!--<link href="zero.css" type="text/css" rel="stylesheet"> -->
<style type="text/css">


html { 
  background: url(back.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }


 
ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	position: absolute;
	left: 430px;
	top: 200px;
	margin: auto;
}

ul li {
	float: left;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: transparent #25b #25b #9ce;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	width: 98px;
	text-align: center;
	padding: 5px 0;
	font-weight: bold;
	background-color: #27c;
	color: #00008B;
	border-top: 10px solid #25b;
}

ul a:hover {
	background-color: #191970; 	
	color: #ffff;
	border-top: 20px solid #26d;
}

/* ]]> */
</style>
<ul class="menu_poziome">
<li><a href="czcionki.html">Czcionki</a></li>
<li><a href="tekst.html">Tekst</a></li>
<li><a href="tlo.html">Tło</a></li>
<li><a href="marginesy.html">Marginesy</a></li>
<li><a href="obramowanie.html">Obramowanie</a></li>
</ul>
</body>
</html>
0

masz w css position:absolute dla ul, to jak się ma skalować?

0

Określiłeś na sztywno pozycję menu w CSS, więc nie dziw się, że cokolwiek nie zrobisz to te menu tam zostanie. Co innego gdybyś tą pozycję określił w %, nie w px.

0

Dzięki za odpowiedzi. Jeśli chodzi o skalowanie się strony i nie zmienianie wielkości to chodzi o responsywność? Czy może o coś innego? Bo szczerze mówiąc nie potrzebuje aby strona była responsywna… Czy mógł by ktoś podsunąć jakiś pomysł, bo delikatnie mówiąc utknąłem w miejscu.

0

No... skalowanie strony to moze nie do końca responsywność, ale "ciepło". Już jesteśmy w okolicach. Responsywność można zrobić bez skalowania. Ogólnie - żeby stronia się skalowała wszystko musi być albo % albo relatywnie, albo automatycznie i do tego jeszcze jednostkami em,en i podobnymi a nie pikselami :)

0

Próbowałem z układami o stałej szerokości px i szczerze mówiąc najlepiej to wyglądało tylko, żeby dostosowywało się do rozdzielczości było by ok. Układy elastyczne robiłem w % i em w przypadku zmiany rozdzielczości okna, sekcje strony znacząco się różnił od planowanego. Więc sam już nie wiem...

background-image:url(back.jpg);
background-repeat:no-repeat;
background-size: 85.5em 38em;
padding: 2em;

body {
background-image:url(back.jpg);
background-repeat:no-repeat;
background-size:1400px 610px;
padding:15px;}
1

eeee... background dajesz na cover albo na 100% itp, padding na em jest ok.

1 użytkowników online, w tym zalogowanych: 0, gości: 1