If you remove the a then the styles listed will no longer effect that element. <!-- this is an html comment that does nothing to the code -->
<div id="nav-menu"> <!-- just #nav-menu will affect this -->
<ul>
<li><a href="#">Link</a></li><!-- what you currently have will affect this -->
<li><a href="#">Link</a></li><!-- it's an anchor tag (a) in side of a list tag (li) -->
</ul>
</div>
So removing the a from your code will cause the styles to affect the list tag, because you will only have #nav-menu li . If you just had #nav-menu it would only affect the div with the id nav-menu.
So if you have,
#nav-menu {
background-color: blue;
}
It will make the background color of the div with the id nav-menu blue.
If you have,
#nav-menu li {
background-color: red;
}
Any list tag inside of the div with the id nav-menu will have a red background color.
Have a look a this for an explanation. Start with, What is a rule or "rule set"
It's selecting an anchor element, that's inside of a list element, that's inside of an element with the id nav-menu ; and it's applying the styles between { and } to it.
No, this is not possible by default and I don't know of any software that can. However, you can always create non-administrator accounts for the other members and turn on parental controls. From there you can set logs to record what they're doing/have done, restrict what they have access to, and even restrict which applications they can run.
Basically the bottom line is, to be able to have your pages without content display the same as your pages with content, you're going to have to do something like this.
This isn't production code, and there are compression programs available to remove whitespace. Readability is important for debugging, scanning, and reading in general. This is a forum, and considering that we read 30% slower on a computer, I'd rather not waste my time reading tag/selector soup for a disregarded end tag or forgotten semicolon. Whitespace does not belong in the final produced code, but it has its place in web design.
You've only been on this forum for a year, but just in case you forgot, here's a little reminder.
Haha, I let myself be distracted by the second overflow problem and ignored the original one. Add overflow: auto; to div#sub_container Regards, Arkinder
You and I are clearly getting different resultes ^_^ (refer to the attached screenshot).
Have you tried copy and pasting my finished example? Is it having the same problem? If you're using different, or have added code, please post it. What browser are you testing in?
The entire purpose of using the percentage unit is for a dynamic value. The problem with percentage is the browser is normally left with the question "percentage of what?"
All the browser knows is that you want div#sub_container 's height to be 100%. It interprets it as 100% of div#main_container 's (it's parent element) height. div#main_container doesn't have a set height, so it's height is equal to the height of it's content. All you've told the browser is the min-height cannot be below 100% - in this case 100% is the height of the content. The height and min-height properties are not the same. height tells the browser the desired height of the element. min-height tells the browser the minimum height an element can be.
To fix this give div#main_container a min-height: 100%; and a height: 100%; You should now have this,
You are still left with an overflow problem, so let's keep going through the "height tree." div#sub_container 's height is 100% of div#main_container 's height. div#main_container 's height is now 100% of the body element's height, and the body element's height is 100% of the html element's height. So the html element's height is 100% of the browser's default height.
Basically what this is saying is that the height of div#subcontainer is only going to be the default height of the browser window (height = window without vertical scroll bar). …
For your numbered list to display correctly in Chrome, increase the height of your quickSummary bar. This will keep the list pushed to the right. <a href="#"><h1>proofseeker</h1></a> is not aloud, but <h1><a href="#">proofseeker</a></h1> is.
Your footer displays consistently in Firefox, Safari, Chrome, and Opera. Could you describe the problem, what browser it's occurring in, and/or provide a screen shot of the problem?
Start with fixing all of your CSS errors. Copy and paste the CSS here. You will see that at the bottom of the page a valid form of your code is spit out. You have 30 HTML errors too, but none of them are affecting the page.
In IE6 something is overextending the li and/or the a - causing the ddcontainer to go down into your images. I think it may be from a lot of your comments not being ended in your CSS.
Since the boxes over the images are positioned relatively and the ddcontainer is positioned absolutely, they are both removed from the normal flow of the page, and will be listed from the bottom up in the order they are written. Putting your navigation after the images/boxes in your HTML is a possible fix. However, it will require reposition the navigation back to it's original place.
Or as Kraai said, you could simply move the boxes elsewhere. Regardless, there would still be an inconsistant "height" issue.
I don't see what you're talking about in Opera, and I don't have IE. I'll look at this more later when I have access to a PC. Could you possibly post a screen shot of the problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#objectBar ul {
list-style-type: none;
}
#objectBar li {
display: inline;
padding: 5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="objectBar">
<ul>
<li>First Object</li><li>|</li>
<li>Second Object</li><li>|</li>
<li>Third Object</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
The | should be the HTML code, not the character itself. The text editor here automatically changes it, but it can be found here.
For more space between the bar and the content, simply give the objectBar a height.
To center the objects, add text-align: center; to the ul rule.
To center the bar itself, set a width and add margin: 0 auto; to the objectBar or the ul rule.
If you are using images and would like to move them vertically, use the vertical-align property.
Should you prefer to use float: left; over display: inline;, for whatever reason, a clear: left; will be needed for the …
Also, have a look at this while reading the rest of this post. I've included folders with examples for each part.
Start with the site folder (root folder). This is the folder holding of the documents for your web site (HTML, CSS, JavaScript, images, etc.) Inside of this folder you see they have index.html - this is your home page. They are using the .htm extension, it is exactly the same as .html. When going to a website the document named index is what the user will see first. So when you go to http://www.daniweb.com/ you're actually going to http://www.daniweb.com/index.php
Part 1
Next we have a folder called images. As the name implies this folder is where all of the web site's images will go. When linking to an image from your index.html page, or any web page inside of your site folder that is not in another folder, it's as easy as images/nameOfImage.jpg For example:
<img src="images/nameOfImage.jpg" alt="Description of image." />
Part 2
Next there is a group of HTML files. These are the other pages in your site, such as: about.html, contact.html, news.html, etc. In the description it says "these files may be housed in folders". Which is very true, so let's say you made another folder called pages and placed the three HTML documents I mentioned earlier in it. Now inside of your site folder …
table {
text-align: center; /* this will replace the align: center; you have on your div. Note: it is not centering the div, but the a inside of it. */
}
.menu td { /* this selects all td that are inside of the element with the class menu */
width: 10%;
}
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
My apologies for butting in - just a few things I noticed:
In previously posted HTML you have
src="../myfirstproject/images/genlogo.jpg"
Which tells me that your HTML document is not in the myfirstproject folder. Make sure that you are referring to your CSS file the same way you referred to your image.
align does not exist in CSS. For the text to be centered use text-align: center; . There are several ways to have the paragraph itself centered, but which to use depends on the paragraph's surrounding elements, and their CSS.
You're question is a little vague to me. Some quick Googling comes up with things like this, and this. As far as what the best things to have are is really just a matter of preference. However, two things I would say that every web developer needs is a good text editor and Firebug. Firebug is originally a Firefox add-on. They describe themselves as,
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
It is also available in Safari, Chrome, Opera, and IE6+
