1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS css for freewebs

Discussion in 'Web Development' started by Damian501, Oct 14, 2008.

  1. Damian501

    Damian501 New Member

    Hello my names damian i am new to this forum and would like some help on css for freewebs, what i would like to do is add an css navgation system on my home page for the links, at the moment it looks like this http://www.dcornells-leisure.co.cc . hope someone can help me, many thanks damian

    p.s i would like to add one of these vertical menus to my website, but i dont understand how to add it, heres the link http://www.cssmenumaker.com/vertical_css_menu.php
     
    Damian501, Oct 14, 2008
    #1
  2. indumathi

    indumathi New Member

    hi

    i tried one of those menus. its quite simple:

    1. download the source.
    2. download the images.
    3. paste the html code to ur page(where u want the menu). tht is the div.
    4. attach the css files.

    i hope it works!
     
    indumathi, Oct 15, 2008
    #2
  3. Damian501

    Damian501 New Member

    attach the css files to where, i have already tried putting the html code into the place i need to, with the images uploaded to freewebs and still no luck, i bet am doing sumthing really silly and easyly wrong here lol, just hope i can iron these out, cheerss
     
    Damian501, Oct 16, 2008
    #3
  4. indumathi

    indumathi New Member

    hi

    hey
    1. u put the html code between ur body tags.
    2. copy the css code and put it between head tag.

    EX:
    <head>
    /* V1 */

    *{
    list-style:none;
    margin:0px;
    padding:0px;
    }
    #menu4 {
    width: 200px;
    border-style: solid solid none solid;
    border-color: #D76100;
    border-size: 1px;
    border-width: 1px;
    }

    #menu4 li a {
    height: 32px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
    }

    #menu4 li a:link, #menu4 li a:visited {
    color: #9E3C02;
    display: block;
    background: url(images/menu4.gif);
    padding: 8px 0 0 30px;
    }

    #menu4 li a:hover {
    color: #fff;
    background: url(images/menu4.gif) 0 -32px;
    padding: 8px 0 0 30px;
    }

    #menu4 li a:active {
    color: #fff;
    background: url(images/menu4.gif) 0 -64px;
    padding: 8px 0 0 30px;
    }
    </head>

    <body>
    <div id="menu4">
    <ul>
    <li><a href="#1" title="Home">Home</a></li>
    <li><a href="#2" title="About">About</a></li>
    <li><a href="#3" title="Services">Services</a></li>
    <li><a href="#4" title="Portfolio">Portfolio</a></li>
    <li><a href="#5" title="Store">Store</a></li>
    <li><a href="menu4.zip" title="Download">Download Menu</a></li>
    </ul>
    </div>

    </body>


    i hope it works now!

    but usually people attach css files externally like this:
    <link rel="stylesheet" href="source/style.css" type="text/css"/>

    try out!
     
    indumathi, Oct 16, 2008
    #4
  5. indumathi

    indumathi New Member

    another idea

    let me attached the files tht i downloaded from the site u mentioned! this may help u out!

    store this in ur desktop and open the htm file.
     

    Attached Files:

    indumathi, Oct 16, 2008
    #5
  6. Damian501

    Damian501 New Member

    hey i was looking through my images folder and i came across this, is this where i put the html code ??

    body {
    font:12px verdana, arial;
    color:#b8e5fd;
    min-width: 760px;
    margin: 0px;
    padding: 0px;
    background-color: #000;
    }
    /*
    * Container surrounding all content on the page
    */
    .fw-container {
    margin: 0 auto;
    padding: 0;
    width: 760px;
    border: ;
    overflow:hidden;
    }
    a,
    a:visited {
    color:#57c9fe;
    text-decoration: none;
    }
    a:hover,
    a:visited:hover {
    text-decoration: underline;
    }
    code,pre {
    font-size:12px
    }
    fieldset {
    margin:1em 0;
    padding:1em;
    border:1px solid #CCC
    }
    legend {
    color:#000;
    font-weight:bold;
    }
    label {
    cursor:pointer
    }
    /*
    * This can be used to decorate around any advertisements that appear on the page (non-premium users only)
    * It is STRICTLY forbidden to modify this code as to obstruct the view of the advertisement
    */
    .fw-advertisement,
    #fw-advertisement {
    margin:0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
    width:760px;
    border:0;
    text-align: center;
    background: #000;
    }
    /*
    * Container surrounding Site Title, Small Title, Logo, and home-link
    */
    .fw-head {
    height: 196px;
    margin:0;
    border:0;
    background: #242424 ;
    position:relative;
    }
    /*
    * Site Title
    */
    .fw-head h1 {
    font:bold 26px verdana;
    letter-spacing: -1px;
    color: #fff;
    border: ;
    text-align: left;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    padding:0px;
    margin:0px;
    }
    /*
    * Site Small Title
    */
    .fw-head h3 {
    font:normal 12px arial;
    color: #fff;
    border: ;
    text-align: left;
    position: absolute;
    top: 60px;
    left: 20px;
    z-index: 10;
    padding:0px;
    margin:0px;
    }
    .fw-logo {
    width:760px;
    height:196px;
    }
    .fw-home-link {
    width:0px;
    height:0px;
    display:none;
    }
    hr {
    display:none;
    }
    /*
    * NavBar
    * UL containing all the NavBar links
    */

    .fw-nav-menu {
    background: #242424;
    padding: 10px 20px 10px 20px;
    margin: 0px;
    font-family: arial;
    font-weight: normal;
    color: #57c9fe;
    border-top: solid 1px #000;
    }
    .fw-nav-menu ul {
    margin:0px;
    padding:0px;
    border: ;
    background: transparent;
    list-style:none;
    text-align:left;
    cursor:default;
    }
    /*
    * Individual NavBar LI's
    */
    .fw-nav-menu li {
    margin: 0px 15px 0px 0px;
    display: inline;
    }
    /*
    * Individual NavBar links
    */
    .fw-nav-menu a {
    text-decoration:none;
    }
    would i paste the html code to where the nav links thing is on this page thing ?
     
    Damian501, Oct 19, 2008
    #6
  7. indumathi

    indumathi New Member

    hi

    this is css code not html. you put this in between head tag.

    <head></head>

    or u copy this to a css file and attach it.
     
    indumathi, Oct 19, 2008
    #7