Results 1 to 7 of 7

Thread: CSS Explanation Please

  1. #1
    Join Date
    Oct 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Explanation Please

    Hello,

    I don't mind spending money to learn, I just recently purchased 2 CSS books from "sitepoint". My Problem is when you search the examples and cant find what the authors are talking about in their code.

    I need Help Explaining Some CSS code here:

    1. What is ".menu" I cant find it anywhere in the forms or html for that matter only class named menu.

    then you will see he separates allot of stuff re: menu rather then stick it all in one place.

    Code below : I will Comment areas I am confused in , Thanks in Advance

    Code:
    /****************************************************************************/
    /* Site menu styles.                                                        */
    /****************************************************************************/
    
    #menuBar,
    .menu    <---------------------------------.menu
    {
    	background-color: #000000;
    }
    
    #menuBar,
    .menu
    {
    	border: 1px solid #304050; <----why not in same block of code
    }
    
    #menuBar
    {
    	margin-bottom: 1em;
    }
    
    #menuBar a,
    .menu a
    {
    	display: block;
    	font-size: 9pt;
    }
    
    #menuBar table
    {
    	border-collapse: collapse;
    }
    
    #menuBar td
    {
    	border-right: 1px solid #FFFF00;
    	padding: 0px;
    	text-align: left;
    }
    
    #menuBar a  <------I take it the a is a Link or anchor tag
    {
    	height: 100%;
    	padding: 2px 1em;
    }
    
    #menuBar a span.arrow
    {
    	font-size: 8pt;
    }
    
    #menuBar a.hasMenu:hover
    {
    	text-decoration: none;
    }
    
    .menu
    {
    	position: absolute;
    	visibility: hidden;
    	z-index: 1;
    }
    
    .menu a
    {
    	padding: 4px 1.5em;
    }
    
    #menuBar a:active,  .menu a:active, < ---Completely lost here big block code  Nothing Defined Color wise etc
    #menuBar a:hover,   .menu a:hover, < ---Completely lost here big block code
    #menuBar a:focus,   .menu a:focus, < ---Completely lost here big block code
    #menuBar a.ieFocus, .menu a.ieFocus /* For IE browsers. */
    {
    	background-color:   #FFFF00;
    }
    
    .menu .separator
    {
    	border-bottom: 1px solid #FF0000;
    	margin: 2px .5em;
    }
    
    *************************************** Now this author..
    
    This Author Groups things nicely...
    
    #content {
    	margin: 0 auto;
    	padding: 1em 0;
    	width: 500px;
    	background-color:#fff;
    	font-size: 1.125em;
        line-height: 1.75em;
    	text-align: left;
    	}
    a:link, a {
        border-bottom:1px dotted #960;
    	color: #960;
    	text-decoration: none;
    	}
    a:hover {
    	border-bottom:1px solid #960;
    	}
    
    ********************* But he does this DOT THing To 
    
    img.intro {  <----------------------------- See I cant find what it means
    		padding: 4px;
    		border:3px double #ccc;
    		background-color: #fff;		
    		margin:0 -7px;
    		}
    *************************

    My problem is I have a site running that uses the first CSS Script, and Iwant to over haul it now I have a better Idea how this stuff works, but I am not advanced enough when they throw trick bags like ".menu" on me and not talk about it in the Book ...LOL

    Bottom Line I am trying to learn, and end result figure out How I can On Hover change Background Color and text and the opposite colors when menu is idle

    Thanks for Looking
    Last edited by tech_support; 10-06-2007 at 10:10 AM. Reason: code tag wrapping

  2. #2
    Join Date
    Oct 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have a Feeling the .menu in code #1 , is cross linked to the other style sheet

    that's the reason for the .menu but I can't Prove it

    Site uses a Menu Style sheet and a Common Style sheet.

    Wish I could rid this and start over, but I am worried about the measurements, and so forth by chopping it up. If No Solution I may try build new menu from scratch.

    I can Post Both Complete style sheets or email em if someone is willing to explain this to.

    Truth Be told I am afraid of getting my feet wet , when something I run across is something not in my studies as a beginner.

    I have built a couple menu's from what I have learned from books and this site, but I cant afford for this site to go down, many of my forms are dynamic (asp ) seems a font color change in menu , changes stuff on my forms as well ( anchor tags ) Sortable Forms (links)

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    .menu is most likely a class in the markup -- look for, e.g., class=".menu".
    why not in same block of code
    No reason. You can merge them if you want.
    I take it the a is a Link or anchor tag
    An <a> tag, yes. A name without a . (class) or # (ID) beside it is a tag selector.
    Completely lost here big block code Nothing Defined Color wise etc
    This isn't a big block of code, it's a list of selectors -- see the commas?

    This is all pretty basic stuff -- if your book didn't explain it I don't think very much of it. Try this tutorial instead.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Oct 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks , Great Link !!!

    , I re-check many of my ASP pages and none have a class named .menu

    but menubar and menu yes.

    now u see my frustration. Right now The Back ground colors of the menu I have set, and Work Flawless, I just need to change text colors to conform with Color Contrast Checker Found @ http://www.snook.ca/technical/colour...st/colour.html

    Right now when page loads menu text is blue on black border.
    When Hover menu , back ground turns gold or yellowish.

    Text color Stays same always .

    I can Change the Static menu colors another words say I use white text on black back ground of the menu, when page loads no mouse playing yet,

    but what happens is one of my other pages , the table that gets created on the fly , no longer uses the blue text for links ,( if I changed it will then be white text and users either cant see it and certainly wont know to click it.

    so its like I have a <a> anchor tag in the Css linking all clickable links to color Blue, if I try change menu on load text color or I call it static color or in active color......to white then it Jazzes up my other asp pages forms, for only links though ( my other forms have sortable data links).

    I am making this sound so difficult, but I have like well over 16 hrs invested in trying to fix it .

    I'm afraid to delete the .menu stuff an start over even though using CNTRL F and search all my ASP code ( and html) I cant find any .menu

    not even in the java script file.

    I simply Don't understand how it is written , more use to stuff like this ...


    body {
    font-size: 92%;
    }
    #nav {
    margin: 0;
    padding: 0;
    background: #6F6146;
    list-style-type: none;
    width: 767px;
    float: left; /* Contain floated list items */
    }
    #nav li {
    margin: 0;
    padding: 0;
    float: left;
    }
    #nav a {
    float: left;
    width: 127px;
    color: #FFF;
    text-decoration: none;
    line-height: 2.5;
    text-align: center;
    border-right: 1px solid #FFF;
    ................................................
    to me that is more standard way of writing esp for us beginners.

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    , I re-check many of my ASP pages and none have a class named .menu

    but menubar and menu yes.
    The name of the class is "menu". The dot tells the CSS parser that the symbol that follows is a class, rather than a tag name.
    to me that is more standard way of writing esp for us beginners.
    esp? I don't see any major difference in this code you do understand and that you don't.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Oct 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok I checked the Java Script Menu File and I cant read java Script very well,

    But I think it is Renaming stuff or poss shorting name or adding "dot" to a class name .

    Any how I see where I went wrong in my testing.

    I only had to change this code :

    a
    {
    font-weight: bold;
    text-decoration: none;
    }

    a,
    a:active,
    a:hover,
    a:visited
    {
    color: #0000CC;
    }

    a:active,
    a:hover
    {
    text-decoration: underline;
    }


    <------------------------------------to this below :------------------------>

    a
    {
    font-weight: bold;
    text-decoration: none;
    }

    a,
    a:active,
    a:visited
    {
    color: #0000CC;
    }

    a:hover
    {
    color: #000000
    }

    a:active,
    a:hover
    {
    text-decoration: underline;
    }


    Basically It was the Nesting if that is Proper Lingo by cutting out the a:hover

    and putting it by itself I was able to fix most of what I need to do.

    I just was not use to reading ..... this style of grouping things together or maybe was the naming convention "a," etc

    Oh well I am a Rookie , but I enjoy trying to learn new things, if I only was brave enough to try CSS years ago
    I probably would have traded up my Networking degree into web development, this is much more fun.

    and I also might add when I changed this before I did not properly enclose the tags { <---these things--> }

  7. #7
    Join Date
    Oct 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hats off to Twey

    you gave me enough clues without doing the work for me, now I learned.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •