So my footer won't stay down. It just appears on the middle of my page. I bet you've seen this question a lot of times but I really need some help since I've read tons of threads and I've tried the general solution outlined here:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I will link my code and hopefully you can notice why the solution doesn't work for me.
HTML:
<!DOCTYPE HTML>
<HTML>
<header>
<title>Heilsa</title>
<link type="text/css" href="stylesheet3.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</header>
<body>
<div id="container">
<img id="bordi" src="taka2.png"/>
<div class="menu">
<ul>
<li>Heim</li>
<li>Hollt Mataræði</li>
<li>Reynslusögur</li>
</ul>
</div>
<div id="content">
<div id="block">
</div>
<div id="meginmal">
<h1>Fyrirsögn</h1>
<p>A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can create a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information. But who cares. The information/junk inside a wall of text are usually related to wherever the wall of text is located, but the best walls of text, which are actually the most irritating, most eye-bleeding ones, are completely random. Walls of text usually make the reader asplode or have their eyes bleed and fall out of their sockets. A number of people can stand it, but not read them. Actually some people can stand and read them. Those people do not have short attention spans. These are boring and patient people who have no life or have all the time in their hands, which are the same, but not really. The punishment of what making walls of text varies of the strictness of the community. But it doesn't really matter. Nobody cares. Walls of texts should be free of links, different font colors, strange characters, which are those other symbols used in society, and capital letters because it ruins the whole purpose of the infamy of walls of texts. It makes them look dumb and weird. Walls of texts are obviously free of huge spaces and outstanding things like capital letters. Of course, paragraphs should never be in a wall of text. Walls of text are known to create nausea, confusion, head explosion, and others. The others being something I can not think of either because I am lazy or if I do not feel like it or I can not actually think of anything. Like what the fuck? That was a rhetorical question right there. What the fuck? You are actually not requesting a satisfactory answer, you just say that because you try to be funny or you feel like it or if you are pissed off. You must get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.
</p>
</div>
</div>
<div id="wrapper">
<img id="undir" src="undir.png"/>
</div>
</div>
</body>
</HTML>
CSS:
body, html {
margin: 0;
padding: 0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
.menu {
width:550px;
height:35px;
font-family:Trajan Pro;
font-size:18px;
text-align:center;
font-weight:bold;
text-shadow:3px 2px 3px #333333;
margin-left:1010px;
position:absolute;
top:150px;
}
.menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
list-style-type: none;
}
.menu li {
display: inline;
padding: 20px;
}
.menu a {
text-decoration: none;
color:white;
}
.menu a:hover {
text-shadow: 8px 5px 8px #333333;
font-size:20px;
}
#content {
min-height:100%;
position: relative;
width: 800 px;
height: 800px;
margin-right:200px;
margin-left:200px;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#block1 { /*IGNORE THIS. I AM SAVING IT FOR LATER*/
background: red;
filter:alpha(opacity=20); /* IE */
-moz-opacity:0.2; /* Mozilla */
opacity: 0.2; /* CSS3 */
position: absolute;
top: 0; left: 0;
height: 100%; width:100%;
border-radius: 20px;
margin:10px;
}
#meginmal {
padding: 20px 30px 20px 30px;
text-align: center;
font-size:20px;
border-right: solid;
border-left: solid;
font-family: Trajan Pro;
}
#bordi {
height:100%;
width: 100%;
margin: 0%;
padding: 10px;
}
#wrapper {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
From your code, you have footer as id wrapper
Change the position from absolute to fixed
#wrapper {
position: fixed;
}
Related
So rather than code dumping, I'll just link a reference to the types I've seen so far.
https://www.html.am/html-codes/marquees/html-marquee.cfm
While these are fairly close to what I want, they're just not quite right. The closest one to what I'm after is the bouncing text... But these are all made based on a container that's bigger than the text.
How can I get my text to scroll left and right only when I have text overflow? (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
I thought all this would be possible in css. But if not JS would be fine.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text">abcdefghijklmnopqrstuvwxyz</div>
Solving the Design Issue
Deliberately designing your content to not fit within view might actually be the fundamental issue to solve here. Maybe it is better for users to show the content visibly without any need to scroll, animate, or script it.
There are many reasons not to animate stuff on your web page from problems you cause for groups of your users, to the pure distraction of moving things.
So, my main answer is you probably ought to design a different solution (such as, giving content enough space).
You'll find almost universally that the marquee tag is to be avoided (and that doesn't mean using a different tag and then animating it with CSS or JavaScript). However, we can still have some fun theoretically, just avoid in real life as it is deprecated.
Fun With Marquee
You can use alternate, with some additional non-breaking spaces to show the content in a visual feast of sliding text. I don't think this is good for your users, but marvel in the potential to have lots of moving things.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text"><marquee behavior="alternate"> abcdefghijklmnopqrstuvwxyz </marquee></div>
I have recently started learning html and css but I cant seem to figure out which approach is the best to get a certain task done .
I want to create a box at the top of the page that covers the whole screen from left to right at a certain height. And inside the box I'd like to have a text which properties can be controlled separately from the box .
So if have created 2 div and assigned 2 ID , one for the text and one for the box . And used CSS to modify the properties of each .
Am I working right so far ?
You have to add any tag containing the text. This is the best solution.
Example:
<header>
<div class="content">
<p>some text</p>
</div>
</header>
And the CSS
header { width: 100%; padding: 20px 0; }
header .content { width: 1000px; margin: auto; }
header .content p { font-size: 22px; color: #000; }
You are correct.
But If you uses classes you will be able to re-use them multiple times on the same page without any conflicts.
When you come to style anything on a page, you will use the wrapping element and/or class/id to control how it is displayed.
.outer {
background: yellow;
padding: 3em 0;
}
.outer.red {
background: red;
height: 60px;
}
.inner {
background: green;
width: 500px;
margin: 0 auto;
color: #fff
}
.inner p {
border-bottom: 2px solid blue;
}
<div class="outer">
<div class="inner">
<p>Did he speak to you? Would you just answer? What things? What people? A month ago, Gus was trying to kill both of us. And now, he pulls you out of the lab and employs you as... what... a, an assistant gunman? A tough guy? Does that make any sense
to you? He says he sees something in you. What kind of game is he playing. Does he think you're that naïve? He can't truly think that you'd forget... let alone Gale, let alone Victor... and all the horror that goes along with all of that.</p>
<p>It's enough. This is still the best way. You go after him with a gun, you'll never get out of it alive. But with this... you slip it into his food or drink, there shouldn't be any taste or smell... thirty-six hours later... poof. A man his age, working
as hard as he does... no one will be surprised. Mike can have his suspicions, but that's all they'll be. Please, one homicidal maniac at a time.</p>
</div>
</div>
<div class="outer red">
</div>
<div class="inner">
<p>Did he speak to you? Would you just answer? What things? What people? A month ago, Gus was trying to kill both of us. And now, he pulls you out of the lab and employs you as... what... a, an assistant gunman? A tough guy? Does that make any sense to
you? He says he sees something in you. What kind of game is he playing. Does he think you're that naïve? He can't truly think that you'd forget... let alone Gale, let alone Victor... and all the horror that goes along with all of that.</p>
<p>It's enough. This is still the best way. You go after him with a gun, you'll never get out of it alive. But with this... you slip it into his food or drink, there shouldn't be any taste or smell... thirty-six hours later... poof. A man his age, working
as hard as he does... no one will be surprised. Mike can have his suspicions, but that's all they'll be. Please, one homicidal maniac at a time.</p>
</div>
I have a website. In Chrome and Internet Explorer there is white space that interrupts the flow of text. I don't know where they come from.
I need help finding them and deleting them.
You can view the full page here: http://printingunlimited.com/business-card-info.htm
HTML code:
<div id="about-product">
<h3 itemprop="description">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"/>
</div>
The CSS that defines about-product handle:
#about-product {padding: 0 0 20px 0; height: 200px;}
img.product-image {display:block; position:absolute; left:560px; top:-5px; }
#about-product h2 {float:left;}
#about-product h3{display:block; font-size:16px; font-weight:normal; padding-bottom:5px; padding-right:5px; width:550px;}
Image pointing out the problem area:
Where does the white space between (your business cards are printed) and (on 14 point card stock) come from?
After some tweaking, this works:
#about-product {
padding: 0 0 20px 0;
height: 180px;
}
#about-product h3 {
display: inline-block;
font-size: 16px;
font-weight: normal;
float: left;
width: 550px;
position: absolute;
}
Try this:
.header-content {
width: 860px;
margin: 0 auto;
height: 190px;
position: relative; /* <~ add this line */
}
ul#drop-nav {
display: block;
float: none;
margin: 0 auto;
position: absolute; /* <~ change this line */
top: 170px; /* <~ change this line */
}
The strategy you should be using to solve these errors yourself is divide and conquer, as follows:
Remove all the html attributes and CSS styling that affects that particular HTML element.
Add back the html elements, in chunks, testing as you go, to see how each addition affects the page.
When you find the problem appear, cut the last batch of changes you made in half, to isolate which style is causing the problem.
When you locate the CSS attribute interrupting your flow of text, remove it or try something different.
All right, so as people have already suggested, your CSS styling is not suitable for IE and chrome. First, you must validate it at W3.
Next, i have added some styling to it to correct it .
Here they are :
<div id="about-product" style="height: 175px">
<h3 itemprop="description" style="display:inline-block;float: left;position: absolute;">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"> </div>
The screen shot is here below:
I've got an assignment for an introductory web design course, and so far it's been real easy, but when the professor introduced div and span tags, I really lost my momentum and have fallen into a slump. I've registered for the course late, and as luck would have it, an assignment on div and span is due tomorrow.
I have been using w3schools extensively thus far, as well as StackOverflow itself, but I can't really find a specific answer to my question, or the answers I find are well beyond my 'skill level'.
I want to emulate a website provided to me; no source code is provided, just an image of what the final product should look like, as well as resources like images, text sizes, etc. Here is the link to the assignment itself.
http://www.cosc.brocku.ca/Offerings/2P89/2P89%20Assign2.pdf
I've gone through the first few bits myself, but the meatier portion of the assignment I'm lost on. I need to make one large div element (I'm assuming), and inside that I need more div elements. I've got to this area:
"Below the main heading is the page's overall content area, with an overall 32% rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centered horizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sized large enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.)"
The image in the link is how it should look, and so far I have everything above the rounded border section with all of the meatier content. Here is what I have thus far:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="http://www.cosc.brocku.ca/Offerings/2P89/Images/rotten.gif"
type="image/x-icon">
<title>Abraham Lincoln: Vampire Hunter - Rancid Tomatoes</title>
<link href="abe.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="banner" style="background: url
(http://www.cosc.brocku.ca/Offerings/2P89/Images/bannerbg.png) repeat-x;width:100%;height:50px;">
<img src="http://www.cosc.brocku.ca/Offerings/2P89/Images/banner.png" alt="">
</div>
<h1>Abraham Lincoln: Vampire Hunter (2012)</h1>
<div class="reviewshell">
<div class="reviewleft">hi</div>
</div>
</body>
</html>
...and style sheet...
.banner {
margin:0px;
text-align:center;
}
.reviewshell {
margin-left:auto;
margin-right:auto;
border:4px solid;
border-radius:20px;
border-color:grey;
width: 800px;
}
.reviewleft {
margin:0px;
text-align:left;
}
.reviewright {
}
.reviewbottom {
}
body {
background-image:url("http://www.cosc.brocku.ca/Offerings/2P89/Images/background.png");
background-attachment:fixed;
font-size:8pt;
font-family:Verdana, Tahoma, sans-serif;
margin:0px;
}
h1 {
text-align:center;
font-size:24pt;
font-family:Tahoma, Verdana, sans-serif;
font-weight:bold;
text-shadow:#999999 3px 3px;
}
blockquote {
}
a:link {
}
a:visited {
}
ul.a {
}
I apologize in advance if homework help is frowned upon here; I've been at this for about 9 hours reading up on HTML and I can't find out how to continue. There is no prof or TA available on Sundays unfortunately.
edit; I should probably mention that I don't need a specific answer, just a link to a page or guide that can help me figure it out. w3schools is indepth, but I still can't get it.
That paragraph basically means "put the main content in a div with the following styles":
width: 800px;
margin-left and margin-right: auto; to center it
border: 4px solid gray
border-radius: 20px;
This is a pretty good Smashing Magazine tutorial: http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
I could write up a guide for you if no one supplies a better answer...
HTH.
I am thinking of various ways to blackout my site for a blackout protest. Which technique would work best?
Method 1 (easiest): Replace existing style sheet with a new one that has this code in it:
* { display: none; }
The benefit here is that search engines can still crawl the site, and people that are familiar with the protest and likely to understand its ramifications can still view the content by viewing source. The downside is that people might think something is wrong as there is no content at all displayed (I am fine with that).
Method 2: Add a background-color: #000; to body and color: #000 to all text elements except for any text element that may be describing why the site looks different. The benefit to this is that more people will understand what is happening. The disadvantage is that it does not really portray the message of the protest. Also, I think it may be bad practice to give text the same color as the background as it is a proven spam technique.
Method 3: Display a test pattern.
Many sites just block out their logos or have a dismissible dialog. I think you can still support a blackout protest without a 503. The point is to make people aware of the problem. You can put up a full-page fixed black div with a message and a link to relevant information. Even a banner about it would be helpful in getting the word out.
Here's what I'm using at http://thinkingstiff.com (link potentially NSFW due to language):
<a id="sopa" href="http://sopablackout.org/learnmore/">**** SOPA</a>
<style>
#sopa {
background-color: black;
color: white;
cursor: pointer;
display: block;
font: normal 150px/500px Helvetica, Tahoma, Arial;
height: 100%;
letter-spacing: -11px;
position: fixed;
text-align: center;
text-decoration: none;
width: 100%;
word-spacing: 50px;
z-index: 9999;
}
</style>
Create a new page that returns an HTTP 503 response code and a response body with regular content. It won't hurt your SEO ratings and it won't affect the rest of your site.