Molim savjet za css

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 &copy; notice</footer>
                   </section>
                </aside>
            </section>
        </footer>
    </body>
</html>

hvala svima na odgovorima :blush:

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 :blush:

<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 :blush:

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

and ? :smiley:


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Profit Monkey