CNT Posted July 26, 2011 Share Posted July 26, 2011 http://www.w3schools.com/cssref/default.aspThe above link doesn't really help me with the following question...What properties can go in which proprieties. I don't know if I said it right!?!? I understand selectors is (h1 ..., p ...) but for id and menus, that's the question. Example: What can I use in:body{ text-decoration: none;} So, I wouldn't mistaken for the following (assuming the following code is an error) : #navcontainer{ text-decoration: none;} I can understand "color" can be in any properties. What I am trying to understand is what exactly does each of the following do: #navcontainer#navcontainer a#navcontainer ul#navcontainer li I print a sheet of link. I can see the betweens of ul and ulul, etc. The question is what will "color" do in "ul" and what will "color" do in "li".Also, why must use hover with anchor or can use without anchors also? Like, what does the following do (if the following are even correct) : #navcontainer li:hover a#navcontainer ul ul li:hover a Chuck Link to comment Share on other sites More sharing options...
CNT Posted July 26, 2011 Author Share Posted July 26, 2011 As I am playing around to see how things work... the following does the SAME THING, why? This is where I am trying to learn as well: #navcontainer ul li {list-style-type: none;} #navcontainer li {list-style-type: none;} Link to comment Share on other sites More sharing options...
CNT Posted July 27, 2011 Author Share Posted July 27, 2011 Both SAME THING? left: 0; margin-left:0 Link to comment Share on other sites More sharing options...
Ingolme Posted July 27, 2011 Share Posted July 27, 2011 In your first example, both are pointing to the same elements because <li> is inside a <ul> but it's also inside the #navcontainer element. If the <li> was in an ordered list, the first one would not work: <ol> <li>Style</li></ol> Descendent selector: Selects an element if the element is a descendent of another.Descendent: The HTML of the specified element is between the two tags of another element:<x> is descendent of <y> and <z>. <z> is a descendent of <y>: <y> <z> <x></x> </z></y> --The difference between margin-left and left is that when margin-left is used, all the content surrounding the element is also affected by the movement of the element. If you just use "left" then only the element will be moved.Try this on a page:HTML <div class="box1"></div><div class="box2">Text</div><div class="box3"></div><div class="box4">Text</div> CSS .box1,.box3 { background-color: blue; width: 100px; height: 100px; position: relative; clear: left;}.box1 { left: 50px;.box3 { margin-left: 50px; } You'll notice that box1 covers the content next to it while box3 doesn't. Link to comment Share on other sites More sharing options...
CNT Posted July 27, 2011 Author Share Posted July 27, 2011 html, body, div, span, ol, ul, li{ border: 0; margin: 0; padding: 0; vertical-align: baseline;} I am not sure where I got that from. Could someone explain what does this do? Is this something to be use in every CSS for every website? Is there something more that should be added to this?Chuck Link to comment Share on other sites More sharing options...
ShadowMage Posted July 27, 2011 Share Posted July 27, 2011 That looks like a reset declaration. All it does is set the margins, padding, and borders to 0 and aligns the text for the elements listed in the selector. This is common practice since browsers can have different default values for margins/padding for different elements. This can cause cross-browser layout problems. A reset fixes this by making sure all browsers use the same values.I typically use a universal reset in my stylesheets:* {margin: 0px;padding: 0px;}The '*' is the universal selector. In other it selects all elements. Link to comment Share on other sites More sharing options...
ste Posted July 27, 2011 Share Posted July 27, 2011 html, body, div, span, ol, ul, li{ border: 0; margin: 0; padding: 0; vertical-align: baseline;} I am not sure where I got that from. Could someone explain what does this do? Is this something to be use in every CSS for every website? Is there something more that should be added to this?Chuck Different browsers have different default styles for elements. Designers will often place this type of CSS declaration at the beginning of stylesheets in order to set there own defaults. The first line (html, body, div, span, ol, ul, li) is simply a list of elements that the declaration will apply to. Often they will use a list of elements like the above or sometimes you will see them use a * which refers to all elements. e.g. * {margin: 0;padding: 0;} Usually they will remove the default margins and padding and set these to their own specification later in the stylesheet. This helps to standardise the way the page will display across browser platforms. Link to comment Share on other sites More sharing options...
CNT Posted July 28, 2011 Author Share Posted July 28, 2011 * {margin: 0;padding: 0;} I understand now and seems I should do that for my websites too. Is this "all" you do or is there others too (besides margin and padding)? What about adding "left" and "top" ??Chuck Link to comment Share on other sites More sharing options...
ste Posted July 28, 2011 Share Posted July 28, 2011 There are a bunch of different CSS resets available. Here's a good article with many of the most popular versionshttp://perishablepress.com/press/2007/10/2...s-reset-styles/ Link to comment Share on other sites More sharing options...
ShadowMage Posted July 28, 2011 Share Posted July 28, 2011 Like ste said there are many different "versions" of resets that developers use. It really depends on personal preference and the requirements of your application. Typically, margin and padding are the only ones I reset. I think there are several senior members here who would also recommend setting the font-size, but it's up to you really.And about the 'left' or 'top' properties, using those in a reset really serves no purpose. Those properties are used in positioning (absolute, fixed, or relative) elements. Without setting position to one of those three, the 'left', 'top', 'right', and 'bottom' properties don't do anything, but it probably isn't a good idea to set positioning in a reset, anyway. Link to comment Share on other sites More sharing options...
CNT Posted July 29, 2011 Author Share Posted July 29, 2011 style.css * /* CSS reset */{ margin: 0; padding: 0;}#navcontainer /* main menu container */{ background: black; width: 100%; font-size: 2em; position: fixed;}#navcontainer ul /* menu ul style */{ list-style: none;}#navcontainer li /* causes horizontal menu */{ float: left; position: relative;}#navcontainer a /* the link style of menu */{ color: white; /* font color */ display: block; line-height: 38px; padding: 0 10px; text-decoration: none; border-right:1px solid yellow;}#navcontainer ul ul /* causes submenu #1 to hide */{ display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; /* what does this do?? */ z-index: 99999;}#navcontainer ul ul li /* this places the submenu #2 in touch next to submenu #1 */{ min-width: 180px;}#navcontainer ul ul ul /* what does this do?? */{ left: 100%; top: 0;}#navcontainer ul ul a /* need descriptions here */{ background-color: black; /* background color for submenu #1 and #2 */ line-height: 1em; padding: 10px; width: 300px; /* this set the width for submenu #1 and #2 */ height: auto;}#navcontainer ul li:hover > ul /* causes submenu #1 to display when mouse hover main menu */{ display: block;}#navcontainer li:hover > a,#navcontainer ul ul :hover > a /* causes links to change to yellow when mouse hover */{ background: yellow; color: black;} I think I finally got it working the way I like it to do so. I copy some of the codes from varies websites (and changed settings, of course). Few more questions...1. Please review my comments (/* comments */). Do I have to correct concept of each elements (are those each called "elements", a selector and declarations, or are those called each "rule"?)2. Some elements I do not understand, I left some "what does this do" comments, please put descriptions in for me.3. In #navcontainer ul ul, why so many elements if only hiding the submenus?4. In #navcontainer ul ul li, how does this work?5. Lastly, since the main menu is fixed, how to set the body to start right below the main menu?Anything else you deem to explain or add, please expound.I upload the website to my ISP, but then I couldn't run it from the hosting site. Maybe they don't have PHP server. As long I could run it from my localhost, that's all matters for now.Thank you.Chuck Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2011 Share Posted July 29, 2011 You have to remember, you are dealing with menus within menus(ul within ul) and the styling cascades down.#navcontainer ul WILL affect itself and ALL ul below it. say you assign a background colour of blue to ul (#navcontainer ul {background-color:blue;}), ALL ul including submenu level ul will be blueif you wish to change the background colour of ALL 1st submenu level ul you would use#navcontainer ul ul {background-color:red;} , Now if there are submenu within that (2nd submenu , 3rd submenu...) they will use the same background colour.If you wish to change 2nd submenu level back to blue you would use#navcontainer ul ul ul {background-color:blue;}, but again! this will cascade down to the remaining menusub levels.This principle applies when styling using #navcontainer ul li, #navcontainer ul ul li or #navcontainer ul a, #navcontainer ul ul a (same as #navcontainer ul li a #navcontainer ul ul li a) Link to comment Share on other sites More sharing options...
CNT Posted July 29, 2011 Author Share Posted July 29, 2011 I am still not understanding what's the difference between ul and li. I don't care for ol. If I say something for 'ul', it doesn't effect 'li'? Likewise, what does 'a' do that 'li' can not do? That's my whole problem, I can NOT differentiate the ul, li, and a. I have google, w3s, etc, and yet still need to learn the distinctiveness of ul, li, and a.ul = Unordered Listli = List Itema = Anchor / LinkChuck Link to comment Share on other sites More sharing options...
thescientist Posted July 29, 2011 Share Posted July 29, 2011 li are list items. they are the children of lists. ordered <ol>, or un-orderd <ul>.<a> tags are anchor tags. they are used to create links. they natively support an href attribute (which creates a link).besides the obvious semantic differences between the two, an <a> supports added functionality. Link to comment Share on other sites More sharing options...
jeffman Posted July 29, 2011 Share Posted July 29, 2011 CNT, it might be helpful if you create some experimental documents where you can explore these elements in a context less complicated than a menu. Create a simple list that does not contain a sub-list or any links. Don't play around with :hover rules. Just try to understand the basics. THEN start adding new elements to your HTML. THEN start adding more rules to the CSS. Link to comment Share on other sites More sharing options...
CNT Posted July 31, 2011 Author Share Posted July 31, 2011 5. Lastly, since the main menu is fixed, how to set the body to start right below the main menu?I tried the following:html, body { height: 100%; }#header { height: 10%; }#content { height: 90%; overflow: auto; } Doesn't work. Wrong codes?Chuck Link to comment Share on other sites More sharing options...
Ingolme Posted July 31, 2011 Share Posted July 31, 2011 I tried the following:html, body { height: 100%; }#header { height: 10%; }#content { height: 90%; overflow: auto; } Doesn't work. Wrong codes?Chuck Does your HTML have a DOCTYPE declaration? Link to comment Share on other sites More sharing options...
CNT Posted July 31, 2011 Author Share Posted July 31, 2011 Does your HTML have a DOCTYPE declaration? index.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hey</title> <link rel="stylesheet" type="text/css" href="style.css" /></head><body><div><?php include("nav.php"); ?></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted July 31, 2011 Share Posted July 31, 2011 I don't see a #header or #content element in your HTML. Link to comment Share on other sites More sharing options...
CNT Posted July 31, 2011 Author Share Posted July 31, 2011 html, body { height: 100%; }#header { height: 10%; }#content { height: 90%; overflow: auto; } Do I need to do this:<body><div=header><div><?php include("nav.php"); ?></div></div><div=content><p>cough cough</p></div></div> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2011 Share Posted July 31, 2011 more like <div id="header"><div><?php include("nav.php"); ?></div></div><div id="content"><p>cough cough</p></div> I don't think the div element will be required as you already have a div container around the menu, if i remember rightly in the nav.php file.<div><?php include("nav.php"); ?></div> Link to comment Share on other sites More sharing options...
CNT Posted July 31, 2011 Author Share Posted July 31, 2011 Thanks, it's working now.I am wondering if I still need the "fixed" in the CSS if I am using the header/content, but that's for me to do trial and error.Chuck Link to comment Share on other sites More sharing options...
CNT Posted August 1, 2011 Author Share Posted August 1, 2011 I am wondering if I still need the "fixed" in the CSS if I am using the header/content, but that's for me to do trial and error.I took some rules out to see what happens... apparently, all I need is the following:#header /* sets top space for menu */{ height: 2.5em;} and I use div id="header" and no div id="content", it works the same as orginal. So, next I will try throw image or other things and see if the menu remain fixed.Chuck Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.