Jump to content

margin


CNT

Recommended Posts

body{	margin: 0em 2em;	background-color: Lime;	font-size: 2em;}

What I want to do is put a horizontal menubar on the very top (right under Favorites bar or browser's menubar) and freeze it there (scrolling down will still keep top menu showing). This is all I have in my CSS (doing steps at a time).Perhaps I should explain how I am looking at this way:one row of horizontal menubar on the very top (and submenus dropdowns too, overlapping whatever is on the second row and so on downwards), freeze it therelittle blank gap in second rowbody (text, image, whatever), scroll up/down (and sideways if res is low)OK. I think I really need a nap now. I must be overlooking something or just tried from doing this late at nights.Chuck

Link to comment
Share on other sites

You can use "position: fixed" to have one element always be in the same place regardless of scrolling.Here's an example

.topbar {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 40px;  background-color: black;}

Link to comment
Share on other sites

You can use "position: fixed" to have one element always be in the same place regardless of scrolling.Here's an example
.topbar {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 40px;  background-color: black;}

Almost? This is what I have now and the menu isn't IN the top row.FWIW, I am doing PHP (the question is relating CSS). See the following: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>

nav.php

<div id="navcontainer">  <ul id="navlist">	<li>	  <a href="index.php">Home</a>	</li>	<li>	  <a href="#">Something</a>	  <ul>		<li>		  <a href="#">Something More</a>etc... won't bore you with the rest

style.css

body{	background-color: Lime;	font-size: 2em;}#navcontainer{	position: fixed;	display: inline;	top: 0;	left: 0;	width: 100%;	height: 40px;	background-color: black;	text-decoration: none;}

Really, I need to thank you to help me with this. I have googled, took class on CSS, studyed in late nights, still not get exactly what I need to understand. I am in need to learn what CSS codes can be in and when/why to use the following:#nav#nav li#nav ul lietcIs there a website that list those code to be within levels? I couldn't find it in W3S or google.FWIW, I want to do this... top row menu in black, white letters. hover cause it to turn yellow, black letters. Upon going into submenus, the yellow needs to remain there while dropdown is black, white letter and hover makes yellow, black letters. This is for low-vision guys.Chuck

Link to comment
Share on other sites

The first page of the tutorial explains what selectors do.http://w3schools.com/css/css_syntax.aspThis page is a list of selectors:http://w3schools.com/cssref/css_selectors.aspYour #navcontainer element has the mistake of being displayed as inline. Inline elements don't have a width or height.

Link to comment
Share on other sites

This page is a list of selectors:http://w3schools.com/cssref/css_selectors.asp
I was referring to how to do the ul, li, etc. Like:
#navlist ul#navlist li li#navlist li:hover#navlist li li:hover

Your #navcontainer element has the mistake of being displayed as inline. Inline elements don't have a width or height.
I don't understand this? Should I rid the #navcontainer?Chuck
Link to comment
Share on other sites

I was referring to how to do the ul, li, etc. Like:
#navlist ul#navlist li li#navlist li:hover#navlist li li:hover

I don't understand this? Should I rid the #navcontainer?Chuck

That's a descendent selector: http://w3schools.com/cssref/sel_element_element.aspYou don't need to get rid of the #navcontainer, just remove the "display: inline" property because it's doing something that you don't want.Are you sure you've thoroughly read and understood the CSS tutorial?
Link to comment
Share on other sites

This link doesn't guide me to understand in doing CSS ul and li. Look at this example from another person...
#navbar#navbar li#navbar li a#navbar li ul#navbar li:hover ul#navbar li:hover li a#navbar li a:hover#navbar li li a:hover

How come there's only one "li" in "navbar li" but two "li" in "navbar li li a:hover" ??What is difference "navbar li" and "navbar li a" ??What is "li a" in "navbar li:hover li a" ??I could go on, this is where I need training with.Chuck

Link to comment
Share on other sites

This link doesn't guide me to understand in doing CSS ul and li. Look at this example from another person...
#navbar#navbar li#navbar li a#navbar li ul#navbar li:hover ul#navbar li:hover li a#navbar li a:hover#navbar li li a:hover

How come there's only one "li" in "navbar li" but two "li" in "navbar li li a:hover" ??What is difference "navbar li" and "navbar li a" ??What is "li a" in "navbar li:hover li a" ??I could go on, this is where I need training with.Chuck

#navbar li selects all <li> elements that are descendents of an element with the id "navbar."#navbar li li selects all <li> elements that are descendents of an <li> element that is a descendent of an element with the id "navbar."#navbar li li:hover selects all <li> elements that have the mouse over them that are descendents of an <li> element that is a descendent of an element with the id "navbar."#navbar li li:hover ul selects all <ul> elements that are descendents of an <li> element that has the mouse over it and that is a descendent of an <li> element that is a descendent of an element with the id "navbar."Trying to explain this in words makes it sound even more confusing.In the HTML structure, it looks like this:
<div id="navbar">  |  +-> <li>		|		+-> <li> (the mouse is over this element)			  |			  +-> <ul>

Link to comment
Share on other sites

#navbar li li:hover selects all <li> elements that have the mouse over them that are descendents of an <li> element that is a descendent of an element with the id "navbar."#navbar li li:hover ul selects all <ul> elements that are descendents of an <li> element that has the mouse over it and that is a descendent of an <li> element that is a descendent of an element with the id "navbar."Trying to explain this in words makes it sound even more confusing.In the HTML structure, it looks like this:
<div id="navbar">  |  +-> <li>		|		+-> <li> (the mouse is over this element)			  |			  +-> <ul>

Understood this much... yet what/why bother with "ul" in "navbar li li:hover ul", since the "english" tells me "navbar li li:hover" means that, what does "ul" have to do with hover? This is one of the confusions.See what I mean? When I list those post #7, you know what all those means off top of your head, this is what I need to learn, so I can understand. Basically, it's the CSS (specifically the list in post #7) is the hardest.Chuck
Link to comment
Share on other sites

All you're using there is the descendent selector. The space indicated that the elements that follows the space is a descendent of the element that precedes the space.As for the :hover part, you might want to change the visibility of the <ul> element when the parent <li> is being hovered over. It's a common technique for CSS menus.

Link to comment
Share on other sites

http://members.toast.net/cnt/purecssmenu.htmlThis above link is exactly what I want to create. Only changes would be size (convert to 2em), make it fixed, maybe run the black all accross the top row, etc.I don't want to use that source. I want to create one like this from scratch, so I can learn how this works. I can do HTML, image, other things, but not CSS well enough. Even with the source code I have from this "purecssmenu", I couldn't erase there, there, to "clean" up all those classes. I just want to learn to do this much, and the school class doesn't teach that. If someone lives in Milwaukee, WI, I would be glad to met one-on-one at a Starbucks or whatever.Just like one of the members in here has a signature saying to learn the hows and whys instead of copying their work. I am Deaf, so I couldn't "listen" to audio from Youtube or some other website.Chuck
Link to comment
Share on other sites

nav.php

<div id="navcontainer">  <ul>	<li><a href="index.php">Home</a></li>	<li><a href="#">Something</a></li>	  <ul><li><a href="#">Something More</a></li>		<ul><li><a href="#">More of this #1</a></li>			<li><a href="#">More of this #2</a></li>			<li><a href="#">More of that #3</a></li>		</ul>	  <li><a href="#">Something Even More</a></li>		<ul><li><a href="#">More of this #4</a></li>			<li><a href="#">More of this #5</a></li>			<li><a href="#">More of that #6</a></li>		</ul>	 </ul>	<li><a href="#">Did you know...</a></li>	  <ul><li><a href="BillofRights.php">Bill of Rights</a></li>		  <li><a href="LibertyorDeath.php">Liberty or Death!</a></li>		  <li><a href="MirandaRights.php">Miranda Rights</a></li>		  <li><a href="DeclarationofIndependence.php">Declaration of Independence</a></li>	  </ul>	<li>	  <a href="#">Contact me</a>	</li>  </ul></div>

Is there something wrong in the code?Also, is this how you guys "dress up" the coding? Like "ul" on same line with "li" or all seperated?Chuck

Link to comment
Share on other sites

I think you are looking for something like this

<div id="navcontainer">   <ul>	 <li><a href="index.php">Home</a></li>	 <li><a href="#">Something</a>	   <ul>		 <li><a href="#">Something More</a></li>		 <li><a href="#">More of this #1</a></li>		 <li><a href="#">More of this #2</a></li>		 <li><a href="#">More of that #3</a>		   <ul>				 <li><a href="#">Something Even More</a></li>			 <li><a href="#">More of this #4</a></li>			 <li><a href="#">More of this #5</a></li>			 <li><a href="#">More of that #6</a></li>		   </ul>		</li>	   </ul>	 </li> 	 <li><a href="#">Did you know...</a>	   <ul>		 <li><a href="BillofRights.php">Bill of Rights</a></li>		 <li><a href="LibertyorDeath.php">Liberty or Death!</a></li>		 <li><a href="MirandaRights.php">Miranda Rights</a></li>		 <li><a href="DeclarationofIndependence.php">Declaration of Independence</a></li>	   </ul>	 </li>	 <li>	   <a href="#">Contact me</a>	 </li>   </ul> </div>

all of below will target in order all ul, all li, and all anchor links within a ul listing.#navcontainer ul{}#navcontainer ul li {}#navcontainer ul li a {}Usually you would use these to set default styling for all these elements.To set the styling for 1st submenu level AND all other submenu within that, different from the default you would use#navcontainer ul{} #navcontainer ul li {} #navcontainer ul li a {}#navcontainer ul ul{} #navcontainer ul ul li {} #navcontainer ul ul li a {}<div id="navcontainer"> <ul> <li><a href="index.php">Home</a></li> <li><a href="#">Something</a> <ul> <li><a href="#">Something More</a></li> <li><a href="#">More of this #1</a></li> <li><a href="#">More of this #2</a></li> <li><a href="#">More of that #3</a> <ul> <li><a href="#">Something Even More</a></li> <li><a href="#">More of this #4</a></li> <li><a href="#">More of this #5</a></li> <li><a href="#">More of that #6</a></li> </ul> </li> </ul> </li> <li><a href="#">Did you know...</a> <ul> <li><a href="BillofRights.php">Bill of Rights</a></li> <li><a href="LibertyorDeath.php">Liberty or Death!</a></li> <li><a href="MirandaRights.php">Miranda Rights</a></li> <li><a href="DeclarationofIndependence.php">Declaration of Independence</a></li> </ul> </li> <li> <a href="#">Contact me</a> </li> </ul> </div>To set the styling for 2nd submenu level AND all other submenu within that, different from the default and 1st you would use#navcontainer ul{} #navcontainer ul li {} #navcontainer ul li a {} #navcontainer ul ul{} #navcontainer ul ul li {} #navcontainer ul ul li a {}#navcontainer ul ul ul{} #navcontainer ul ul ul li {} #navcontainer ul ul ul li a {} <div id="navcontainer"> <ul> <li><a href="index.php">Home</a></li> <li><a href="#">Something</a> <ul> <li><a href="#">Something More</a></li> <li><a href="#">More of this #1</a></li> <li><a href="#">More of this #2</a></li> <li><a href="#">More of that #3</a> <ul> <li><a href="#">Something Even More</a></li> <li><a href="#">More of this #4</a></li> <li><a href="#">More of this #5</a></li> <li><a href="#">More of that #6</a></li> </ul> </li> </ul> </li> <li><a href="#">Did you know...</a> <ul> <li><a href="BillofRights.php">Bill of Rights</a></li> <li><a href="LibertyorDeath.php">Liberty or Death!</a></li> <li><a href="MirandaRights.php">Miranda Rights</a></li> <li><a href="DeclarationofIndependence.php">Declaration of Independence</a></li> </ul> </li> <li> <a href="#">Contact me</a> </li> </ul> </div>And so on.. targeting the next submenu level means just adding extra ul to selector to style that submenu different from previous submenu level.

Link to comment
Share on other sites

I think you are looking for something like this
VERY CLOSE! You got me this far and I thank you!OK, I want:Something (main menu)- Something More (submenu #1)- - Something #1 (submenu #2)- - Something #2 (submenu #2)- - Something #3 (submenu #2)- Something Even More (submenu #1)- - Something #4 (submenu #2)- - Something #5 (submenu #2)- - Something #6 (submenu #2)The recent fix was that the "Something Even More" was a submenu #2. Could you (or anyone) guide me with this little change?The way you did with the coloring was amazing, this is something I can read! So, after the little change, could you (or someone) redo the coloring? After this is fixed, I am going to print that section and STUDY it!Thank you!Chuck
Link to comment
Share on other sites

 <div id="navcontainer">		<ul>		<li><a href="index.php">Home</a></li>		<li><a href="#">Something</a>			<ul>			<li><a href="#">Something More</a>				<ul>					 <li><a href="#">More of this #1</a></li>					 <li><a href="#">More of this #2</a></li>					 <li><a href="#">More of that #3</a></li>				</ul>			</li>			</ul>			<ul>			<li><a href="#">Something Even More</a>				<ul>				<li><a href="#">More of this #4</a></li>				<li><a href="#">More of this #5</a></li>				<li><a href="#">More of that #6</a></li>				</ul>				</li>			</ul>			</li>			<li><a href="#">Did you know...</a>			<ul>			<li><a href="BillofRights.php">Bill of Rights</a></li>			<li><a href="LibertyorDeath.php">Liberty or Death!</a></li>			<li><a href="MirandaRights.php">Miranda Rights</a></li>			<li><a href="DeclarationofIndependence.php">Declaration of Independence</a></li>			</ul>		</li>		<li><a href="#">Contact me</a></li>		</ul>	</div>

#navcontainer ul{} #navcontainer ul li {} #navcontainer ul li a {} #navcontainer ul ul{} #navcontainer ul ul li {} #navcontainer ul ul li a {}#navcontainer ul ul ul{} #navcontainer ul ul ul li {} #navcontainer ul ul ul li a {}<div id="navcontainer"> <ul> <li><a href="index.php">Home</a></li> <li><a href="#">Something</a> <ul> <li><a href="#">Something More</a> <ul> <li><a href="#">More of this #1</a></li> <li><a href="#">More of this #2</a></li> <li><a href="#">More of that #3</a></li> </ul> </li> </ul> <ul> <li><a href="#">Something Even More</a> <ul> <li><a href="#">More of this #4</a></li> <li><a href="#">More of this #5</a></li> <li><a href="#">More of that #6</a></li> </ul> </li> </ul> </li> <li><a href="#">Did you know...</a> <ul> <li><a href="BillofRights.php">Bill of Rights</a></li> <li><a href="LibertyorDeath.php">Liberty or Death!</a></li> <li><a href="MirandaRights.php">Miranda Rights</a></li> <li><a href="DeclarationofIndependence.php">Declaration of Independence</a></li> </ul> </li> <li><a href="#">Contact me</a></li> </ul> </div>

Link to comment
Share on other sites

Line 13 and 14 was "ul" too many. I removed "/ul" and "ul", then it worked! It took me a while to figure it out. At least It's working now, and now I will have to study the whys and the ul/li placements. I take it that the css part with colors is still correct. It's almost 12AM now...Chuck

Link to comment
Share on other sites

Strange? I validated it before posting, anyway the colour coding is still valid.every ul you encounter after the first means a submenu level is produced, if you encounter a <u/>, that submenu level is now closed, and you are back to previous level <ul><!-- 0 level --><li><a href="index.php">Home</a></li><li><a href="#">Something</a><ul><!-- 1 sub level --><li><a href="#">Something More</a><ul><!-- 2 sub level --><li><a href="#">More of this #1</a></li><li><a href="#">More of this #2</a></li><li><a href="#">More of that #3</a></li></ul> <!-- close 2 sub level --></li><li><a href="#">Something Even More</a><ul><!-- 2 sub level --><li><a href="#">More of this #4</a></li><li><a href="#">More of this #5</a></li><li><a href="#">More of that #6</a></li></ul><!-- close 2 sub level --></li></ul><!-- close 1 sub level --></li><li><a href="#">Did you know...</a><ul><!-- 1 sub level --><li><a href="BillofRights.php">Bill of Rights</a></li><li><a href="LibertyorDeath.php">Liberty or Death!</a></li><li><a href="MirandaRights.php">Miranda Rights</a></li><li><a href="DeclarationofIndependence.php">Declaration of Independence</a></li></ul><!-- close 1 sub level --></li><li><a href="#">Contact me</a></li></ul><!-- close 0 level --></div>

Link to comment
Share on other sites

every ul you encounter after the first means a submenu level is produced, if you encounter a <u/>, that submenu level is now closed, and you are back to previous level
Ahh. I couldn't think of that. So, when I work with CSS next, I will see how hover works. Again, thanks for the great idea of using the color sections.The menu is now on the very top-left corner. Thus, the margin is working. When I had the errors, the menu had some padding or whatever pushing away the menu from the border.Thanks for the help. This is something I can move on now.Chuck
Link to comment
Share on other sites

Archived

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

×
×
  • Create New...