Css jednostavan template u postocima

Pozdrav svima!
Ima li netko možda kakav primjer templatea rađenog pomoću css-a koji koristi postotke kako bi bio jednako prikazan u svim preglednicima, a trebao bi ovako izgledati nekako…

Znači ukupna širina sajta je 100%…
Udaljenost lijevog elementa od vrha 37%, a od lijevog ruba 10%… na desnom elementu sve isto, samo udaljenost od desnog ruba mora biti 10%…
I footer bi trebao biti naprimjer 10% od donjeg ruba…

Zna netko?

Ja sam nešto uspio i lijeva i desna kolona mi dobro funkciniraju, ali mi se footer uvijek raspadne…

Hvala

Posalji svoj kod, pa cemo ti pomoci da prepravis ga.

Pozdrav

Za sada imam html…

<body>
<div id="container">

<img src="./images/background.jpg" id="bg">

<div class="colmask doublepage">
	<div class="colleft">
		<div class="col1">
			<!-- Column 1 start -->
			<h2>Neki tekst
</h2>
			<!-- Column 1 end -->

		</div>
		<div class="col2">
			<!-- Column 2 start -->
			<h2>Neki tekst</h2>
			<!-- Column 2 end -->

		</div>
	</div>
</div>
<div id="footer">
	<div id="footerleft">
    Neki tekst
    </div>
    <div id="footerright">
    Neki tekst
    </div>
</div>

</div>
</body>

i css…

body {
		margin:0;
		padding:0;
		border:0;			
		width:100%;
		height: 100%;
		background-color: #000;
	}
#bg {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	}
.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;
		overflow:hidden;
	}
	.col1 h2{
		text-align: center;
		margin-left: 50%;
		margin-top: 47%;
		width: 45%;
		font-family: Garamond;
		font-size: 20px;
		line-height: 26px;
		font-weight: 500;
		color: #9c8654;
	}
	.col2 h2{
		text-align: center;
		margin-left: 5%;
		margin-top: 55%;
		width: 45%;
		font-family: Garamond;
		font-size: 20px;
		line-height: 26px;
		font-weight: 500;
		color: #9c8654;
	}
#footer {
		 position:absolute;
  		 bottom:0;
		 width: 99%;
  		 color: #9c8654;
	}
	#footer p {
		margin-top: 200px;
		padding:10px;
	}
	#footerleft {
		width: 50%;
		float: left;
		text-transform: uppercase;
		font-size: 20pt;
		padding-left: 50px;
	}
	#footerright {
		width: 40%;
		float: right;
		font-size: 20pt;
		text-align: right;
		padding-right: 50px;
		margin-top: 35px;
	}

Sve je dobro, samo što mi footer ne ode skroz na dno preglednika, već ostane dosta iznad… to je kad 100% visine stranice po njemu… ali je slika u pozadini puno veća od tih 100% po visini…

Kada na #bg stavim umjesto bottom:0 - top:0 , footer se dobro prikazuje, ali mi onda odreže dio pozadinske slike, točnije vrh te slike…

Hvala unaprijed na pomoći!

Mozes poslati sliku?
Hocel ti visina stranice biti visina slike?
Sta ako se pojavi sadrzaj koji ima vecu visinu od visine slike? scroller da se pojavi?

Ne, ja sam odredio da je širina slike uvijek 100% pa vjerojatno zbog tog nastaju problemi…
Rezolucija slike je 2000x1250…

Htjeo sam da vidim kakva je slika, da bi ti mogao predloziti bolje resenje nego da kacas sliku od 2000x1250px :S

ruzno izgleda ako rastezes je i smanjujes u % ovisno o korisniku koliko rez. ima. Na sta ce liciti ta slika? Stavis joj fiksne dimenzije.

Pogledaj npr. kako je to google.com rijesio sa pozadinskom slikom, a da ispadne otprilike dobro.

Btw. koliko zauzima ta slika?

A za footer evo imas npr. ovdje primjer:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Dobro izgleda slika, jer je uvijek 100% ekrana… a automatski se i visina mijenja kako bi omjer visine - širine ostao isti…

Na slici su neke osobe tako da nemogu složit da se ponavlja…

Slika je oko 1mb… manje ne može, a da kvaliteta ne bude lošija…

[quote=“Robert.Kavgic”]Dobro izgleda slika, jer je uvijek 100% ekrana… a automatski se i visina mijenja kako bi omjer visine - širine ostao isti…

Na slici su neke osobe tako da nemogu složit da se ponavlja…

Slika je oko 1mb… manje ne može, a da kvaliteta ne bude lošija…[/quote]

S obzirom na različite omjere ekrana (Aspect ratio) 4:3, 16:9, 8:5, 5:3 nisam siguran da će ti slika uvijek biti na 100% ekrana. Moj ti je savjet da smanjiš sliku na neku popularnu rezoluciju, dodaš na rubove gradient na neku boju koja će biti pozadina i centriraš body. A i 1 MB je previše za background.


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja