[es] - pomoc oko web aplikacije

Laki123

Član broj: 16706
Poruke: 98
*.adsl-a-8.sezampro.rs.

+4 Profil

^{17.02.2010. u 11:53 - pre 172 meseci}

Dizajn je najbolje da uradiš u CSS. Najlakše je ako koristiš master page, da u njega ubaciš CSS fajl u <head>, obično se koristi poseban CSS fajl, ako se ne varam dovoljno je samo da prevučeš CSS fajl u Sorce deo master page. Posle u body delu, tj. form delu, ubacuješ <div> elemente.

Evo npr. kako izgleda jedan gotov master page (neke delove koje dodaje visual studio sam izbacio).

Code:

head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="okvir">

    <div id="gornji">
    </div>

    <div id="meni">
        <ul>
            <li><a href="Glavna.aspx">Glavna strana</a></li>
            <li><a href="Pomocna.aspx">Pomocna strana</a></li>
            <li><a href="Kontakt.aspx">Kontakt</a></li>
        </ul>
    </div>
    <div id="levo">
        <h1>Dobrodošli</h1>
    </div>
    <div id="srednji">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div id="donji">
      autor programa...
    </div>
    </div>
    </form>
</body>
</html>

CSS fajl StyleSheet.css

Code:

body  {
    margin: 0;
    padding: 0;
    background-image:url('./slike/Pozadina.jpg'); /*gradient pozadina*/
    background-repeat:repeat-x; /*slika se ponavlja samo po horizontali*/
}

#okvir  { /*ovo je okvir cele strane*/
    margin: auto; /*glavni okvir cele strane ce biti centriran*/
    width: 800px;
    background-color: White;
}

#gornji    { /*ovo je deo gde ce biti prikazana slika naslova*/
    width: 800px;
    height: 100px;
    position: relative;
    background-image: url(./slike/Naslov.jpg);
    border-bottom: 2px solid #000000;
}

#meni  { /*ovo je horizontalni meni*/
    width: 800px;
    height: 30px;
    position: relative;
    background-color: #3EB2DC;
    border-bottom: 2px solid #000000;
}

#meni ul {
    margin: auto;
    margin: 0;
    padding: 0;
    list-style: none; /*ne prikazuje kruzic*/
}

#meni li {
    float: left;
    border-left: 1px solid #4E9CE9;
}

#meni li a {
    display: block;
    width: 132px;
    height: 22px;
    padding-top: 8px;
    color: #000000;
    text-align: center;
    text-decoration: none; /*nece biti podvuceno*/
    font-size: 14px;
    font-family: Verdana;
}

#meni li a:hover{
    color: #ffffff;
    background-color: #68CEE5;
    text-decoration: underline;
}

#srednji
{ /*ovo je deo gde ce biti prikazan glavni sadrzaj, s obzirom da koristimo master page stavili smo  <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> i </asp:ContentPlaceHolder>*/
    float: left;
    width: 590px;
    padding: 20px;
}

#levo
{   /*ovo je vertikalni meni, u njega nisam nista stavljao ali moze da se koristi umesto horizontalnog*/
    float:left;
    width: 130px;
    padding: 20px;
    background-color: #EFF3FB;
}

#donji  { /*ovo je donji deo gde mogu biti prikazane informacije o autoru*/
    clear: both;
    background-color: Silver;
    text-align: center;
    border-top: 1px solid #000000;
}

Ove komentare u CSS možeš izbrisati, to sam dodao da bih pojasnio neke delove.
Na sledećem linku ima jedan dobar primer za pravljenje menija u CSS.

Odgovor na temu