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.
I have no idea what you're talking about. There is no HTML element that can import anything. Are you wanting a background image, color, etc? You simply aren't providing enough information.
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). …
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
To the top of the page and it looks nice in Chrome and IE, but in Firefox the sidebar is all "scrunched up" (for lack of a better term.. haha). Basically the line breaks between the links are missing, so it looks like a paragraph instead of 10 separate links.
Any idea what would cause that?
I'm going to quote a mentor of mine for this,
“That line your are playing with is the doctype which is required for all modern web pages. If it works without it, that tells me you originally created the page without it. The doctype is the set of rules you are telling the browser you are using to create the page. Change the doctype, change the rules.” - doc
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?
All of this sounds great; but without any knowledge or experience with HTML or CSS you're simply wasting your time; and we can't do it for you.
What did you use to make the design? Is it just an image of what you would like your web page to look like?
Regards, Arkinder
Note: Never ever use tables for layout. This was a method used for presentation before other options existed, in 1996. David Siegel, the guy who had the fantastic idea, regretted it a year later. We now have Cascading Style Sheets (CSS), use it instead.
I was unaware of this plugin. Not that I'll ever use it, but it's nice to be updated.
jQuery is a JavaScript library that has a plugin for almost any animated effect you can think of. It's been taking over the web lately, and it's easy to see why. There are some exciting things in stored with the release of CSS3, and jQuery's use growing. For those that are interested, some interesting examples can be found here, here, and here - this is also cool.
Regards, Arkinder
Note: Even though the conversation is some what related; we should probably stop hijacking this thread. ^_^
The blink tag is deprecated and shouldn't be used. Use the jQuery Blink plugin instead. Simply include the jQuery library and plugin in your code, then any element with the class blink will blink.
The value blink was used in CSS1 to replace the Netscape browser's blink tag, which is deprecated. The value is not supported in IE, Chrome, Opera, or Safari.
It's not an error, IE simply lacked the support for the format. For loading times sake, use the gif format. If the png format is absolutely necessary, use the JavaScript code posted by Kraai. Both are excellent solutions.
It's impossible to say what book is "the best". A books effectiveness is different for every person; but nothing is more effective than experience. As macgurl70 said, a good place to start would be w3schools.
I understand, and it's a very good thing to encourage. However, if you read all of the original poster's messagers, you will see that he or she had requested something similar to Twitter's search bar. After posting just the input from Twitter's code the poster ran into the problem of, "You can't click on the magnifying glass, it's not a button, just a picture." So the rest of Twitter's code was posted - just pointing out that the user did in fact ask.
Myspace was originally coded in 2003, long before standards had really taken hold - they still haven't really. There's no debating that their code is sloppy at best; but if you became the biggest social networking site for a few years after being created in 10 days - would you like trying to rewrite the code? It's a nightmare and they know it.
You're using both float: left; and position: absolute; , only one is needed and putting only cancels one out. Also, when using float: left; or position: absolute; the element is removed from the normal flow of the page. Try using top and left to position the image where you would like it.
The span has nothing to do with "achieving a presentational style", and it's hardly meaningless.
When using firebug to replace Twitter's search bar with yours - you can't click the magnifying glass to search, and since it's set as a background image for the input I can't use jQuery to make it clickable. Wow, I really wish I had another element that I could position over my search bar that has the magnifying glass in it or as a background image - that way I could click on it to search. On Windows, Leopard, and Ubuntu a magnifying glass is used to represent search, and that's just what I'm accustomed to. According to a study done by Seagate, in 2005, 76% of American's owned a personal computer. According to the CIA World Factbook there are an estimated 1,018,057,389 internet users worldwide - conducted in the year 2005. That's a lot of people accustomed to clickable images, and was 5 years ago.
7 months ago Twitter had 105 million registered users and counting. I highly doubt that they have novice programmers working for them, and doubt even more that any piece of their code is meaningless.
Regards, Arkinder
The magnifying glass used is from Wikipedia.org and can be found here.
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 …
The target attribute is becoming/is deprecated, and frames are just a bad idea. This was written two years ago, but remains accurate today.
The best way to accomplish this is through a scripting language such as JavaScript, or as VulcanDesign said, jQuery - a JavaScript library that takes away the long coding for animated web effects.
I understood what the poster wants, if you look at my post, you can see how to do exactly that with html. Basically it involves the link being a link to a hidden target on the same page, and you change the target to unhidden and the previous section to hidden when you do that. Again, take a look at the source code for the page I posted in my previous post....
Cheers!
HTML cannot change elements by itself. The link you provided is not purely HTML - jQuery is being used to show and hide the elements.
I believe you both are miss reading the question. The user wants the content switched from, "Lorem Ipsum is simply dummy text of the printing and typesetting industry...." To the registration form when the user clicks a registration link.
HTML alone does not have the ability to replace elements via onclick.
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 …
The various parts of the site are being called from the server with PHP. What you posted isn't actually the HTML. You can always just view the pages source for the HTML, but as I said before - it's would be a rather tedious process.
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.
I expected as much but was hoping otherwise. To make the post look the same, you will need to edit the HTML to match the "Post" section and one or two others in the second template's CSS. It will require tedious repetition, a lot of going back and forth, and is something I can't really help you with. Unless of course you can just paste the correct HTML over, then it's a matter of finding the right CSS to add.
I apologize, I thought you were referring to the left gap from the advertisement. A different template means different stylings for the table when you post. It's just part of the template and changing it would require access to the CSS.
