Niz | Puni Prikaz

Cvetan · 08.12.2012. 23.04

Radim seminarski iz internet tehnologija i hteo bih da napravim raspored na stranici kao na slici. Znači hoću da centriram raspored a da na velikim rezolucijama sa strane bude prazan prostor tipa kada se maksimizuje prozor brauzera. Hoću da sve ide do kraja ekrana, a da sadržaj bude centriran. Ali mi ne uspeva već mi razvuče meni do kraja ekrana.

Evo slike i html i css fajlova.

index.html

Kod:

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <link rel="stylesheet" type="text/css" href="stil.css" />

    </head>

    <body>

        <div id="kontejner">

            <div id="header"></div>

            <ul id="nav">

                <li><a href="#">Stavka 1</a></li>

                <li><a href="#">Stavka 2</a></li>

                <li><a href="#">Stavka 3</a></li>

                <li><a href="#">Stavka 4</a></li>

                <li><a href="#">Stavka 5</a></li>

            </ul>

            <div id="main"></div>

            <div id="footer"></div>

        </div>

    </body>

</html>

stil.css

Kod:

root { 

    display: block;

}

body{

    text-align: center;

}

#kontejner{

    margin-left: auto;

    margin-right: auto;

    text-align: left;

    display: block;

}

#nav {

    list-style: none;

    margin: 0;

    padding: 0;

    height: 40px;

    background:    -moz-linear-gradient(top, red 0%, black 100%);

    line-height: 40px;

}

#nav li {

    display: inline;

    float: left;

    position: relative;

    height: 40px;

}

Da li moram da stavim širinu da bih ovo postigao ili može nekako da se stavi da stranica uzme širinu "koliko joj treba" da se tako izrazim. To jest hteo bih da ne definšem fiksnu širinu a da postignem ovo što sam naveo.

**promis** · 09.12.2012. 00.31

Zar ne želiš ovo da postigneš?

Cvetan · 09.12.2012. 00.45

Ne ne pogrešno sam bio iscrtao sliku pa sam zamenio. Confused

Hoću i da mi ova traka sa strane navigacionog menija ide do kraja ekrana.

**promis** · 09.12.2012. 01.02

Zar to nije onda ovo

Ne vidim kako je moguće napraviti to što si ti nacrtao. Osim da dodaš još dva "div" levo i desno u "nav" redu.

Cvetan · 09.12.2012. 01.07

Jeste u pravu si to je ovo. To hoću. Crte sam povukao da bi se videlo da je meni centriran.

**promis** · 09.12.2012. 01.13

Citat: Ali mi ne uspeva već mi razvuče meni do kraja ekrana.

Pa zar nije tako na skici?
Zar ti ne treba i jedan "div" za "nav" u kome su "ul"?
I zar ne treba da ti je u kontejneru tekst centriran, a ne levo?

Cvetan · 09.12.2012. 01.27

A misliš da stavim još jedan div za meni? Znači da ne ide posle header diva ul nego još jedan div pa unutar njega neuređenu listu da stavim?

A stavio sam text-align: center pomerio mi je samo header u centar, meni je ostao uz levu stranu.

**promis** · 09.12.2012. 01.33

Da. Ul u meni divu.

Cvetan · 20.12.2012. 23.47

Evo ovo je najbolje što sam uspeo da napravim. Ako imam div kontejer, tj. ako nisu direktno u bodyju ne mogu da imam traku sa leve i desne strane navigacije. No i ovako dobro izgleda. Smile

Kod:

body {

    margin:0;

    padding:0;

    text-align: center;

    background-image: url(../slike/bg.jpg);

    background-repeat: no-repeat;

    background-position: center ;

    background-attachment: fixed;

}

#kontejner {

    margin-left: auto;

    margin-right: auto;

    text-align: left;

    width: 1000px;

    display: block;

    padding-top: 5px;

}

#meni ul, #meni li, #meni a {

    margin:0;

    padding:0;

    position: relative;

}

Hvala promis pomoglo je ono za dodatni div. Smile

Niz \| Puni Prikaz [Rešeno] CSS -centriranje cele strane
Autor	Poruka