- CSS GENİŞ MENÜLÜ TASARIM

CSS GENİŞ MENÜLÜ TASARIM

TASARIMIN ÜSTÜNE

<ul id="mininav">
   <br>
<li><a href="/Home.htm" class="active">
<span class="home2">Home</span></a></li><li><a href="Url"><span class="home">Nombre</span></a></li>
<li><a href="Url"><span class="home">Nombre</span></a></li>
<li><a href="Url"><span class="home">Nombre</span></a></li>
         </ul>

<div id="news">

<h2 id="latestnews">Box<br></h2>
            <a href="Url"><strong>Nombre</strong></a>   <span class="date">05/8/09</span><br />
            <p>Texto Texto.</p>
            <br />
            <a href="Url"><strong>Nombre</strong></a>   <span class="date">05/8/09</span><br />

<p>Texto Texto.</p>
            <br />
         </div>
      </div>
      
      <div id="right">
         
         <div id="content" class="homepage">

<div id="banner"><img src="http://www.fileden.com/files/2009/8/4/2532798/bannerav1.0.png
" alt="" /></div>

TASARIMIN ALTINA

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}   /* -------------------------------------- */ /* -------  GLOBAL ELEMENTS  ------------ */ body,h1,h2,h3,h4,h5,h6,form,img,span,div,p,ul,li {    margin: 0px;    padding: 0px;    border: 0px; } body {    background: url(http://www.fileden.com/files/2009/8/4/2532798/stripe_12a81d62bfe6aeea3fe6f32408a3e50d.png) #000000 top center;    font: 0.75em Arial;    text-align: center;    color: #3f392e; }  /* span and link styles */ a { color: #000000; } a:hover { text-decoration: none; } .displayblock { display: block; } .floatleft { float: left; } .floatright { float: right; } .yellow { color: #31b004; } .yellowblock {    display: inline-block;    padding: 0px 8px;    background: #9fd78c; }   /* centers the layout */ #centered {    width: 960px;    margin: 0 auto;    text-align: left;    background: url(http://www.fileden.com/files/2009/8/4/2532798/fondotv1.03.png ) 0px 275px; }  /* provides the nice background for the top of the container */ #top {    background: url(http://www.fileden.com/files/2009/8/4/2532798/headerfondov1.03.png) no-repeat;    padding: 30px 29px 0px 62px; }    #top:after {        content: ".";        display: block;        height: 0;        clear: both;        visibility: hidden;    }    #top {       display: inline-block;    }    /* Hides from IE-mac */    * html #top { height: 1%; }    #top { display: block; }    /* End hide from IE-mac */  /* -------------------------------------- */ /* -------  LEFT COLUMN  ---------------- */ #left {    float: left;    width: 317px; }        /* Mini-navigation in the left sidebar */    #left ul#mininav {       list-style: none;       margin-bottom: 25px;    }       #left ul#mininav li {          padding-bottom: 5px;          display: block;       }          #left ul#mininav li a {             color: #2c2b28;             display: block;             text-decoration: none;             padding: 9px 0px 6px 21px;          }             #left ul#mininav li a span {                display: block;                padding-left: 28px;                padding-bottom: 3px;                width: 260px;                background-repeat: no-repeat;                cursor: pointer;             }                /* The icons for the navigation...you can change the paths to whatever icons you have */                #left ul#mininav li a span.home { background-image: url(http://www.websitebullets.com/bullet/216/3.gif); }                                #left ul#mininav li a span.home2 { background-image: url(http://www.websitebullets.com/bullet/204/2.gif); }             #left ul#mininav li a:hover {                background: url(http://www.fileden.com/files/2009/8/4/2532798/botonestv1.03.png) no-repeat bottom left;                text-decoration: underline;             }             #left ul#mininav li a.active {                background: url(http://www.fileden.com/files/2009/8/4/2532798/botonestv1.03.png) no-repeat;                font-weight: bold;             }                #left ul#mininav li a:hover.active {                   background: url(http://www.fileden.com/files/2009/8/4/2532798/botonestv1.03.png) no-repeat;                }        /* Latest news section */                #left #news {       clear: both;       padding-top: 10px;       padding-right: 20px;    }        #left #news .date {          background: #9fd78c;          display: inline-block;          padding: 2px 6px;          color: #000000;       }       #left #news p {          line-height: 1.6em;          font-size: 0.9em;          margin-top: 5px;       }  /* -------------------------------------- */ /* -------  RIGHT COLUMN  --------------- */ #right {    float: right;    width: 534px;    padding-top: 28px; }                    /* Padding and background for homepage and content page respectively */    #content.homepage {       background: url(http://www.fileden.com/files/2009/8/4/2532798/bannerv1.0.png) no-repeat top left;       padding: 36px 29px 0px 1px;    }    #content.subpage {       padding: 140px 29px 0px 19px;    }        /* Banner container with extra margin */    #banner {       margin-bottom: 45px; margin-top: 0px;    }       #banner img {          display: block;       }        /* Header styles */           #right h1 {       font-size: 2.2em;       margin-bottom: 10px;    }    #right h2 {       margin-bottom: 5px;       color: #000000;       font-size: 1.5em;    }    #right h3 {       font: 1.8em Arial;       padding: 27px 20px 17px 15px;    }        /* Paragraph styles */       #right p {       line-height: 2.2em;       margin-bottom: 20px;    }    p.intro {       padding: 5px 4px 0px 6px;       font-size: 1.2em;       line-height: 1.7em;       margin-bottom: 20px;       color: #000000;    }        /* Image styles */    .img1 {       float: left;       padding: 7px;       border: 1px solid #edece1;       display: block;       margin: 3px 25px 0px 0px;    }             /* Bulleted list! */    ul.features {       list-style: none;       padding: 10px 10px 10px 10px;    }       ul.nopad {          padding-top: 0px;       }       ul.features li {          background: url(http://www.websitebullets.com/bullet/216/3.gif) no-repeat 0px 8px;          padding: 7px 5px 7px 30px;          line-height: 1.6em;       }     /* -------------------------------------- */ /* -------  FOOTER  --------------------- */ #footer {    height: 177px;    background: url(http://www.fileden.com/files/2009/8/4/2532798/footertv1.03.png ) no-repeat;    margin: 0 auto;    width: 960px;    margin-bottom: 20px;    color: #ffffff;    text-align: left; }    #footer .copyright {       padding: 35px 0px 0px 75px;    }    #footer h4 {       font-size: 1.5em;       font-weight: normal;    }        /* Mini-navigation in footer */    #footer .nav {       padding-top: 5px;    }       #footer .nav a {          color: #ffffff;          background: #000000;          display: inline-block;          padding: 4px 7px;       }          #footer .nav a:hover {             background: #9fd78c;          }