Jump to content

CSS Properties


CNT

Recommended Posts

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

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

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

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

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

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

* {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

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

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

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

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

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

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

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

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

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

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 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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...