Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

css

Options
  • 15-08-2011 8:07pm
    #1
    rocky raccoon
    Registered Users Posts: 223 ✭✭


    can anyone please offer some advice.

    relativily inexperienced in web design. trying to add a vertical drop down hoover over menu in dreamweaver. i was trying to create style sheets.

    i have the layout done for the level 2 to appear when level 1 heading is hoovered over. however there seems a jump between the level one and the level two to the extent that the pointer cannot reach the 2nd level before it disappears.

    also the headings in one of the 2nd level boxes are bunched together and i am unable to increase the height of this box.

    anyone?


Comments

  • Options
    #2
    Fanny Cradock
    Registered Users Posts: 10,245 ✭✭✭✭Fanny Cradock


    You should post the code.


  • Options
    #3
    rocky raccoon
    Registered Users Posts: 223 ✭✭rocky raccoon


    here is the css. i found a step by step website that had a hoover over for a horizontal dropdown and i tried to create a vertical drop down.

    ul.dropdown {
    background-color: #ffffff;
    float: left;
    list-style-image: none;
    list-style-type: none;
    position: relative;
    z-index: 597;
    margin: 0px;
    padding: 0px;
    height: 500px;
    }
    ul.dropdown a:link {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: none;
    background-color: #FFF;
    }
    ul.dropdown a:hover {
    background-color: #FFF;
    text-decoration: underline;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000;
    }
    ul.dropdown li {
    line-height: 1.3em;
    vertical-align: middle;
    float: right;
    margin-top: 0px;
    padding-top: 7px;
    padding-right: 30px;
    padding-bottom: 7px;
    padding-left: 10px;
    border-bottom-width: 1px;
    border-bottom-style: none;
    border-bottom-color: #000;
    list-style-image: none;
    list-style-type: none;
    border-right-style: none;
    text-decoration: none;
    }
    ul.dropdown li:hover > ul {
    visibility: visible;
    left: 100%;
    position: absolute;
    }

    text {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    }
    .dropdown li {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    }
    ul.dropdown ul {
    background-color: #FFF;
    margin: auto;
    width: 200px;
    position: absolute;
    visibility: hidden;
    z-index: 598;
    top: auto;
    float: right;
    list-style-image: none;
    list-style-type: none;
    height: 1000px;
    text-align: right;
    }
    ul.dropdown li:hover {
    background-color: #FFF;
    position: relative;
    z-index: 599;
    }


  • Options
    #4
    Malice
    Registered Users Posts: 15,065 ✭✭✭✭Malice


    What does the HTML that's referencing the CSS look like?


  • Options
    #5
    rocky raccoon
    Registered Users Posts: 223 ✭✭rocky raccoon


    i got it sorted earlier today, thanks. is amending css style sheets the easiest way to create drop down menus in dreamweaver?


  • Options
    #6
    Fanny Cradock
    Registered Users Posts: 10,245 ✭✭✭✭Fanny Cradock


    Your css is bloated. For example, you only need to select the font-family once. Putting multiple font-family commands in defeats the purpose of css.

    Additionally, you can shorted some of the code. Instead of having -

    padding-top: 0px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 10px;

    you can use the shorthand version

    padding: 0 10px 1px 5px;

    You start at the top (0 in the example) and move clockwise.


  • Advertisement
  • Options
    #7
    rocky raccoon
    Registered Users Posts: 223 ✭✭rocky raccoon


    i take your point fanny. i see that the font type is specified in at least four locations. to be honest my knowledge of css is very very limited. it frustrated the hell out of me and i just tried everything until it looked kind of like what i was looking for. the ul, li, etc is something i need to read up on. do you reccommend any particular site for learning css.

    do i only need on entry for the font type, i haven't a clue which ones to ommit.


  • Options
    #8
    Malice
    Registered Users Posts: 15,065 ✭✭✭✭Malice


    The key is in the name - Cascading Style Sheets. Styles cascade downwards so, for example, if you define a font style for your <body> tag it'll be inherited by stuff within the body tag. In the same way if you define a font style for a <div> it'll be inherited by child divs.
    Depending on which browser you're using to preview your work you should be able to examine what styles are being applied and add and remove them to see what happens.


  • Options
    #9
    ivanc
    Registered Users Posts: 125 ✭✭ivanc


    Zen Garden is always interesting to look at when thinking about CSS.


  • Options
    #10
    Fanny Cradock
    Registered Users Posts: 10,245 ✭✭✭✭Fanny Cradock


    rocky raccoon wrote: »
    i take your point fanny. i see that the font type is specified in at least four locations. to be honest my knowledge of css is very very limited. it frustrated the hell out of me and i just tried everything until it looked kind of like what i was looking for. the ul, li, etc is something i need to read up on. do you reccommend any particular site for learning css.

    do i only need on entry for the font type, i haven't a clue which ones to ommit.

    As Malice said the key is the cascading part. Think of the rules you enter as being like a waterfall. The higher up the water (css rules) starts the wetter the rock-face (your website) gets. Crap analogy but it hopefully illustrates the simple point that if you set a rule for the parent then it will trickle down to the children.

    If you happened to be using just one font then you would put this at the very beginning of your css file - usually in the body section.

    body{font-family: Helvetica;}

    This means that all the text contained within the body (basically your whole site) will have the Helvetica type. If you wanted to add a second or third font type then you would set individual css rules for these.

    body{font-family: Helvetica;}
    #leftContent{font-family: Arial; color:#fff}
    #rightContent{font-family: Sans-Serif; color:#fff}
    #bottomContent{color:#fff}

    The above rules say that your entire site will have the default font of Helvetica. However, css rule for <div id="leftContent"> and <div id="rightContent"> will overwrite this meta-rule - but just for themselves. They are localised rules so only apply within their own <div>. That's why the content of <div id="bottomContent"> which has no font-family set will not be impacted the rules set in the #leftContent and #rightContent. Instead, the font-family rule set in the body will impact it.

    W3C school is a handy resource for learning about a number of web languages, including css. It's has a handy inbrowser [I realise that's not a word :pac:] editor that allows you to fiddle around with examples and see how this impacts the elements on the screen. If you want a good written resource then Bulletproof Web Design is recommended. (You might be able to pick it up second-hand in Chapters on Parnell Street)


  • Options
    #11
    rocky raccoon
    Registered Users Posts: 223 ✭✭rocky raccoon


    thanks for all that. it will keep me busy.


  • Advertisement
  • Options
    #12
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Bear in mind that the font doesn't always cascade into table cells in older browsers, so body, td {font-family: Helvetica;} is a good idea if you're covering the older ones. (Haven't tested this lately on newer browser versions)


Advertisement