Bok
Molio bih ako mi netko moze objasniti na koji nacin najbolje mogu napraviti sljedecu stvar.
Znaci da stranica bude 100% width odnosno da npr… background headera bude po cijeloj duljini i tako za svaki dio kao sto su npr… content i footer. I da istovremeno sav sadrzaj unutar navedenih bude max width 1140px. Da ne moram za svaki posebno to upisivati
Hvala
Ako sam dobro shvatio, svaki dio treba posebno napravit.
<header style="width-100%;background:xyz">
<div style="max-width:1140px">
sadrzaj
</div>
</header>
<section style="width-100%;background:xyz">
<div style="max-width:1140px">
sadrzaj
</div>
</section>
<footer style="width-100%;background:xyz">
<div style="max-width:1140px">
sadrzaj
</div>
</footer>
Naravno nemoraš koristit ove header,section,footer, napisao sam ih da te ne zbunjuje puno divova.
<html>
<body>
<head>
<style>
.wrapp {width:100%}
header, nav, article, footer {width:1140px; margin:0 auto}
</style>
</head>
<div class="wrapp">
<header></header>
</div>
<div class="wrapp">
<nav></nav>
</div>
<div class="wrapp">
<article></article>
</div>
<div class="wrapp">
<footer></footer>
</div>
</body>
</html>Ja imamo to ovako nekako definirano.
<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Your Title</title>
<link href="path/to/your/stylesheet/*.css">
<script src="path/to/your/javascript/*.js"></script>
</head>
<body>
<header>
<section>
<h1>Your title</h1>
<h2>Your tagline</h2>
</section>
<section>
<nav>
<ul>
<li>
<a href="#">
Your navigation 1
</a>
</li>
<li>
<a href="#">
Your navigation 2
</a>
</li>
<li>
<a href="#">
Your navigation 3
</a>
</li>
<li>
<a href="#">
Your navigation 4
</a>
</li>
</ul>
</nav>
</section>
</header>
<section>
<header>
<h1>Your section Headline</h1>
</header>
<article>
<p>Your section content</p>
</article>
<footer>
<p>Your section footer</p>
</footer>
</section>
<section>
<header>
<h1>Your section Headline</h1>
</header>
<article>
<p>Your section content</p>
</article>
<footer>
<p>Your section footer</p>
</footer>
</section>
<section>
<header>
<h1>Your section Headline</h1>
</header>
<article>
<p>Your section content</p>
</article>
<footer>
<p>Your section footer</p>
</footer>
</section>
<section>
<header>
<h1>Your section Headline</h1>
</header>
<article>
<p>Your section content</p>
</article>
<footer>
<p>Your section footer</p>
</footer>
</section>
<section>
<header>
<h1>Your section Headline</h1>
</header>
<article>
<p>Your section content</p>
</article>
<footer>
<p>Your section footer</p>
</footer>
</section>
<footer>
<section>
<header><h1>Your section header</h1></header>
<aside>
<ul>
<li>
<a href="#">Your footer nav in sidebar</a>
</li>
<li>
<a href="#">Your footer nav in sidebar</a>
</li>
<li>
<a href="#">Your footer nav in sidebar</a>
</li>
</ul>
</aside>
<aside>
<section>
<header><h1>Your aside article header title</h1></header>
<article>
<p>Your footer text with data for some seo</p>
</article>
<footer><p>Your aside article header title</p></footer>
</section>
</aside>
<aside>
<section>
<header><h1>Contact</h1></header>
<article>
Maybe your contact data as a list.....
</article>
<footer>Maybe © notice</footer>
</section>
</aside>
</section>
</footer>
</body>
</html>hvala svima na odgovorima 
ono što znam da mogu za svaki zasebno odrediti parametre.
evo čisto primjer kako su ovdje to napravili na ovoj stranici ? ( .wrapper )
Skini bootstrap: http://getbootstrap.com/customize/
Odaberi samo grid, ostalo sve odcheckiraj i to je to. Ako se ne razumijes, najbolje ti je koristiti tudje, provjereno rijesenje.
hvala na prijedlogu. ali iskreno baš me zanima gore navedeni primjer.
jer već imam sve posloženo.
hvala još jednom
<div class="container">
<div class="header"></div>
<div class="content"></div>
</div class="footer"></div>
</div>
.container {
max-width: 1140px;
}
.header {
width: 100%;
}
.content {
width: 100%;
}
.footer {
width: 100%;
}
Ja bih to uradio na slican nacin kao @21x , ako sam dobro shvatio sta zelis.
<div class="container">
<div class="header maxwidth"></div>
<div class="content maxwidth"></div>
</div class="footer maxwidth"></div>
</div>
.container {
max-width: 1140px;
}
.maxwidth {
width: 100%;
}
Svakoj sekciji dodas klasu .maxwidth i to bi trebalo biti to.
dal al tada header, content i footer imaju width 1140px. a u onom gorem primjeru su širi od 1140px.
kak to izvesti ?
Ne treba ti max-width za to.
Iskopiraj moj primjer i pokreni ga sa preglednikom da skužiš
kako je jednostavno. Postavi height i background da vidiš
elemente.
header, content, footer, article - imaju 1140px.
Svaki od tih elemenata je unutar wrappera koji
se proteže duž cijelog ekrana ( width:100% ).
Elementi od 1140px su centrirani u sredinu
svakog wrappera pomoću margina ( margin:0 auto ).
I sada, ako ofarbaš npr. footer u istu boju
kao i njegov roditeljski wrapper - dobiješ
iluziju da se footer proteže duž cijelog ekrana,
iako njegova dužina, predivđena sadržaj - iznosi 1140px.
Naslagao sa takvih layouta, evo jedan takav iz 2012.
Preuzmi si sav kod slobodno ako ti odgovara:
http://91.235.171.29/~dizaj/i/layout/
Hvala Horz
razmišljam dal da idem tvojom metodom ili ovom: http://css-tricks.com/full-browser-width-bars/
Using negative margin metoda
kaj vi mislite ? ili mi je svjedno koju odaberem ?
jer su obje metode dobre.
hvala
