I am creating a webpage in HTML5. I was using a basic footer, but the footer's background color didn't extend until the page border. It has a yellow border around it, even though I gave it distinct margins. Can you guys show me how to fix the margins of my footer so that there is no yellow, only white?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/normalize.css">
<link rel="stylesheet" href="../styles/c05x_sorkin.css">
<style>
body {
background-color: yellow;
font-size: default;
border: 10px double blue;
width: 650px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding-bottom: 0px;
}
img {
float: left;
margin: 20px;
}
main {
text-align: left;
background-color: white;
padding-left: 30px;
padding-right:30px;
padding-top: 12px;
padding-bottom: 0px;
}
h1 {
color: blue;
font-size: 150%;
}
h2 {
font-size: 125%;
margin-bottom: 5px;
}
h3 {
font-size: 115%;
margin-bottom: 0px;
}
blockquote {
margin: 0px;
}
ul{
margin-left: 0px;
padding-left: 20px;
}
li {
margin-left: 0px;
margin-top: 0px;
}
p.citation {
text-align: right;
margin-bottom: .75em;
}
cite{
color: blue;
font-style: normal;
}
footer {
text-align: center;
border-top: 3.5px solid blue;
margin-right: 20px;
margin-left: 20px;
padding-top: 0px;
background-color: white;
font-weight: bold;
font-size: 90%
}
</style>
</head>
<body>
<main>
<h1>Andrew Ross Sorkin, author of <i>Too Big to Fail</i></h1>
<h3>November 2015</h3>
<img src="../images/sorkin_desk260.jpg" alt="Andrew Ross Sorkin" width="260">
<p>New York Times columnist and author, Andrew Ross Sorkin, has been described as <q>the most famous financial journalist of his generation.</q> A leading voice on Wall Street and corporate America, his New York Times bestseller, <i>Too Big to Fail</i>, was the first true, behind-the-scenes, moment-by-moment account of how that financial crisis developed into a global tsunami.</p>
<p>The Economist, The Financial Times, and Business Week all named <i>Too Big To Fail</i> one of the best books of the year. The book was published by Viking October 20, 2009. The book was adapted as a movie by HBO Films and premiered on HBO on May 23, 2011. The film was directed by Curtis Hanson, and the screenplay was written by Peter Gould.</p>
<h2>Praise for <i>Too Big to Fail</i></h2>
<blockquote>“Vigorously reported, superbly organized...for those of us who didn't pursue MBAs and have the penny-ante salaries to prove it.”</blockquote>
<p class="citation"><cite>Julia Keller, Chicago Tribune</cite></p>
<blockquote>“Sorkin's prodigious reporting and lively writing put the reader in the room for some of the biggest-dollar conference calls in history. It's an entertaining, brisk book.”</blockquote>
<p class= "citation"><cite>Paul M. Barrett, The New York Times Book Review</cite></p>
<h2>The cast of the movie: <i>Too Big to Fail</i></h2>
<ul>
<li>William Hurt as Hank Paulson</li>
<li>Paul Giamatti as Ben Bernanke</li>
<li>Billy Crudup as Timothy Geithner</li>
<li>Edward Asner as Warren Buffet</li>
</ul>
</main>
<footer>
<p>Prepared by: Alisha Matreja</p>
<p>Date: November 8th, 2015</p>
</footer>
</body>
</html>
I believe you are going for this result https://jsfiddle.net/8Lfttr01/
just take the margin-left and margin-right out of your .footer css
There are really only a couple of lines you need to change in your CSS:
1. Change:
footer {
text-align: center;
border-top: 3.5px solid blue;
margin-right: 20px;
margin-left: 20px;
padding-top: 0px;
background-color: white;
font-weight: bold;
font-size: 90%
}
to
footer {
text-align: center;
border-top: 3.5px solid blue;
margin: 0 auto;
padding-top: 0px;
background-color: white;
font-weight: bold;
font-size: 90%
}
2. Change:
ul {
margin-left: 0px;
padding-left: 20px;
}
to
ul {
margin: 0;
padding: 0 0 12px 20px;
}
3. Add:
footer p:last-of-type {
margin-bottom: 0;
padding-bottom: 12px;
}
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
Trying to center link between block 3 and block 2 and make it at the top.
Also, the text is suppose to be white with a blue background.
Can not get it centered and inline with the top of the two block and the text is a purple color instead of white, it's like the blue is filtering the white text.
I stink at css and need some help please.
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="block2.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</body>
</html>
body{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10em ;
border: 2px solid black ;
height: 25em;
}
#three {
display: inline-block;
left:1%;
width: 12em;
margin-top: .25em;
margin-left: .25em;
border: 7px solid orange;
}
#link {
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: blue;
color: white;
width: 7em;
}
#two {
float: right;
right: 75%;
width: 12em;
margin-top: .25em;
margin-right: .25em;
border: 7px solid green;
}
#four {
position: absolute;
margin-top: 8.25em;
width: 12em;
margin-bottom: 12em;
margin-left: .25em;
border: 7px solid yellow;
}
#one {
position: absolute;
margin-top: 17em;
margin-right: 2em;
left: 70.50%;
width: 12em;
border: 7px solid blue;
}
Add color to a tag instead of #link
#three {
display: inline-block;
left:1%;
width: 12em;
margin-top: .25em;
margin-left: .25em;
border: 7px solid orange;
}
#link {
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: blue;
width: 7em;
transform: translateX(50%);
vertical-align: top;
position: relative;
}
#link a{
color: white;
}
#two {
float: right;
right: 75%;
width: 12em;
margin-top: .25em;
margin-right: .25em;
border: 7px solid green;
}
#four {
position: absolute;
margin-top: 8.25em;
width: 12em;
margin-bottom: 12em;
margin-left: .25em;
border: 7px solid yellow;
}
#one {
position: absolute;
margin-top: 17em;
margin-right: 2em;
left: 70.50%;
width: 12em;
border: 7px solid blue;
}
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
So in order to get your link to change colors, as Master.Deep has stated you need to add the a tag to #link like so:
#link a{
color: white;
}
There are many ways to center something and bring something to the top. I changed your code around a little bit in order to achieve this and to fix some position issues that you have. Pretty much what I did was wrap everything into a container, made that container have position: relative; then set your 4 boxes to their respective corners using position: absolute; on each of them and using the appropriate left right top bottom tags to do so. Then I placed your link to the top with vertical-align: top; and centered it with text-align: top; in the container.
Please see this example:
.container{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10em ;
border: 2px solid black ;
height: 25em;
position: relative;
text-align: center;
}
#three {
display: inline-block;
width: 12em;
border: 7px solid orange;
position: absolute;
top: 0;
left: 0;
margin: .25em;
}
#link {
display: inline-block;
background-color: blue;
color: white;
vertical-align: top;
width: 7em;
}
#link a {
color: white;
}
#two {
position: absolute;
right: 0;
top: 0;
width: 12em;
margin: .25em;
border: 7px solid green;
}
#four {
position: absolute;
width: 12em;
border: 7px solid yellow;
bottom: 0;
left: 0;
margin: .25em;
}
#one {
position: absolute;
bottom: 0;
right: 0;
width: 12em;
margin: .25em;
border: 7px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="block2.css">
</head>
<body>
<div class="container">
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</div>
</body>
</html>
I've been working on a basic website using just HTML and CSS. The files were saved to a network location and worked fine when previewed in different browsers. I'm doing this at work, so I wanted to take it home and work on it. I copied all the files to a memory stick, keeping the structure the same so that no file paths have changed, and even though it was exactly the same code, the style sheet suddenly wouldn't work properly.
Some of the style sheet works, like the text colours and the background image, so I know it's being seen, but the layout is messed up. I'm using the same browser so I don't understand why the styles work when opened from one location, but only half work when opened from another. As I said, I've checked the file paths and this isn't the problem.
Futhermore, I copied the files to a different location on my desktop from the original location and they messed up again, but in a different way. I copied the files from the memory stick back to the network and it was again messed up.
These are exactly the same files, so I don't understand why sometimes it's working fine and other times it's not. If anyone can offer some insight that would be great!
body {
font-family: Tahoma, Geneva, sans-serif;
background-color: #404040;
background-image: url("Pictures/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
color: #ffffff;
padding: 5px;
}
#main {
width: 75%;
margin: auto;
}
header{
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-top: 5px;
}
#logo {
width: 300px;
padding: 5px;
border: none;
}
#title {
text-align: center;
border-top: solid 7px #DDD;
border-bottom: solid 7px #DDD;
line-height: 0.5;
padding-bottom: 20px;
}
#title h1 {
font-size: 4.68em;
font-weight: normal;
}
#title p {
color: rgb(63,174,42);
font-size: 1.37em;
}
nav {
width: 100%;
overflow: auto;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
border-bottom: 2px solid white;
}
#menu {
list-style-type: none;
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
float: right;
}
.menubutton {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid #404040;
border-right: 5px solid #404040;
}
.menubutton a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
.menubutton:hover {
background-color: rgb(133,15,102);
}
.menubutton a:hover {
color: white;
}
#current {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid rgb(133,15,102);
border-right: 5px solid rgb(133,15,102);
}
#current a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
#current:hover {
background-color: rgb(133,15,102);
}
#current a:hover {
color: white;
}
section {
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-bottom: 5px;
}
aside {
width: 25%;
float: left;
padding: 10px;
}
.sidebarpost {
width: 90%;
margin: auto;
border: 2px solid rgb(133,15,102);
border-radius: 5%;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
}
article {
width: 65%;
float: right;
margin-right: 35px;
}
article h1, h2, h3, h4, h5, h6 {
color: rgb(63,174,42);
font-weight: normal;
}
h1 {
font-size: 2em;
padding-top: 10px;
text-align: center;
}
h3 {
font-style: italic;
font-size: 23px;
}
h4 {
font-size: 18px;
}
.post {
padding: 10px;
border-bottom: 2px solid;
border-color: rgb(133,15,102);
}
#lastpost {
padding: 10px;
}
#marathon {
width: 65%;
display: block;
margin: auto;
text-align: center;
}
a {
color: white;
}
a:hover {
color: rgb(133,15,102);
}
.date {
font-style: italic;
font-size: 12.5px;
}
table {
padding: 5px;
}
tr {
padding: 10px;
}
td {
padding: 10px;
}
section:after {
content: "";
display: table;
clear: both;
}
#media (max-width: 600px) {
aside, article {
width: 100%;
height: auto;
}
}
footer {
width: 100%;
border-top: 2px solid white;
padding-top: 25px;
padding-bottom: 25px;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
}
footer p {
text-align: center;
color: rgb(63,174,42);
}
<!DOCTYPE HTML>
<html>
<head>
<title>CCL HOMEPAGE</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header>
<img src="Pictures/Logo.png" id="logo"></ br>
<div id="title">
<h1>One Step Ahead</h1>
<p>Digital Forensics, Data Analytics and Cyber Security</p>
</div><!--title-->
</header>
<nav>
<ul id="menu">
<li id="current">Home</li>
<li class="menubutton">News</li>
<li class="menubutton">SOPs, Policies and Forms</li>
<li class="menubutton">Official Drive</li>
<li class="menubutton">FocalPoint</li>
<li class="menubutton">HR</li>
</ul><!--menu-->
</nav>
<section>
<aside>
<div class="sidebarpost">
<h3>Latest News</h3>
<h4>NEW INTRANET LAUNCHED</h4>
<p class="date">July 2nd, 2018</p>
<p>2018 sees the redesign of our intranet. Take a look around and let us know what you think.</p>
</div><!--sidebarpost-->
<div class="sidebarpost">
<h4>Useful Links</h4>
<ul>
<li>Contracted Clients</li>
<li>Sales Clients</li>
<li>Focal Point</li>
<li>Google</li>
</ul>
</div><!--sidebarpost-->
</aside>
<article>
<div class="post">
<h1>Homepage Launch</h1>
<p>Welcome to CCL's Homepage. The homepage will be updated with Company news and have pages that aid with access to the most up to date SOP's, policies, procedures and documentation for the business.</p>
</div><!--post-->
<div class="post">
<h2>Dragon Boat Racing</h2>
<p class="date">July 2nd, 2018</p>
<p>There are a limited number of spaces left on this year's Dragon Boat Racing team! The event takes place on 16th September. If you're interested in joining, please email . Click here for more information about the day.</p>
<p>There's also a home made cake up for grabs for the person who comes up with the best team name!</p>
<p>The team so far is:
<ul>
<li></li>
</ul>
</p>
</div><!--post-->
<div class="post">
<h2>Blog Posts</h2>
<p>‘Defence Cases’ written by Jason Dickson</p>
<p>‘The New Nokia 3310: Part 1’ written by Arun Prasannan</p>
</div><!--post-->
<div id="lastpost">
<h2></h2>
<p></p>
</div><!--lastpost-->
</article>
</section>
<footer>
<p>For any updates or additions, please email </p>
</footer>
</div><!--main-->
</body>
</html>
Update: just seen this is only a problem in IE11, unfortunately this is the browser it needs to run on.
Update: When I open the developer tool in IE11, it shows the html is not being loaded correctly. I've got a screenshot to show the difference between the code in the console and my source code. I think this is the issue, as the layout elements such as and are being closed before the actual content inside them, however as can be seen from the text document, this is not how I've programmed it. Any ideas why it would be doing this?
Turns out it was the compatibility mode settings. Not sure why these were on in one tab but not in another, but it's working now.
I'm not the best at CSS and cannot figure out what's wrong. Think it might be the tags I'm using in my sidebar. I would like the nav element with the "vert" id and the div element with the "text-container" id to be NEXT to each other, but the way it is going, it's sending my stuff in the "text-container" into the footer, which is unacceptable.
I'm baffled as to how to get them next to each other. I know elements can be next to each other as it worked in my nav element with the "hor" id with all the a elements next to each other with no problem.
I think it might be the tags, but don't know what I can do about it. I could just axe the navbar as I already have that in the header, but I just spent a lot of time on the navbar to now have to kill it and wish I could keep it.
<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<style>
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 40px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
#text-container
{
width: 1045px;
height: 690px; */
zoom: 1;
margin: 0;
display: inline-block
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
</style>
<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div> Home </div>
<div> The Mountains </div>
<div> The Resorts </div>
<div> Snow Reports </div>
<div> Events & Activities </div>
<div> Plan A Trip </div>
</nav>
<div id="middle">
<nav id="vert">
Home <br/>
The Mountains <br/>
The Resorts <br/>
Snow Reports <br/>
Events & Activities <br/>
Plan A Trip
</nav>
<div id="text-container">
<h1> The Resorts </h1>
<h2> The West Resort </h2>
<p>
The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. West is
home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
</p>
<h2> The East Resort </h2>
<p>
The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest,
steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the East
Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.
</p>
<h2> The North Resort </h2>
<p>
The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but small
enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s oldest
base lodges with ties that go back to the Big Pines ski clubs of the 1940s.
</p>
</div>
</div>
</div>
<div id="footercontainer">
<footer>
© 2016
</footer>
</div>
</div>
</body>
</html>
==main.css==
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 500;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
nav#vert
{
width: 220;;
height: 540;
margin: 0;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./image8.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1045px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 690px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
}
nav#hor > div > a
{
color: #ccccff;
}
nav#hor>div:hover
{
background-color: #01ff02;
}
Here you go...
https://jsfiddle.net/og9wpLmw/
I coloured the two blocks green and red to make them obvious
I fixed & amp; by putting ; on the ends
I fixed by making it
I made boxes next to each other using display:table-cell;
I put all the CSS into the css file
I fixed the widths in nav#vert by including px in the measurement.
Here is the css that makes the difference:
#text-container {
width: 1045px;
height: 690px;
*/ zoom: 1;
margin: 0;
display: table-cell;
background-color:red;
}
nav#vert {
background-color:green;
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
it might be because your "vert" and/or your "text-container" have too big of widths.
You have a fixed width nav - the width is set to 220px, but then you've got padding / margin etc. so it ends up being 270px wide (nb. If you're not familiar, right click on an element in a modern web browser and select "inspect" you can easily measure elements and check out their properties in CSS).
So to fit your other text-container to the right of it you need to reduce it's width to allow for the width of your nav. This can be achieved easily by using calc
width: calc(100% - 270px);
Add that CSS to your text-container (and remove other width declarations) and it'll work. It's not best practice, but you can enforce this declaration to take precedence by adding !important giving you:
#text-container {
width: calc(100% - 270px) !important;
}
You just need to add that in, or amend your existing CSS and you're good to go.
That works, but the problem I noticed later down the line is that if I have an iframe as the first element in "text-container" and don't have something before that iframe, then the nav bar is messed up again.
Is there another display thing I could use?
Yes another question that is a little Unique because I cant find the same question anywhere. I am trying to make a website and so far it looks great in FF and Chrome but in IE8 it looks like crap. I dont know how to fix it been looking up others to see if they are like mine but are not.
the site is funspot.zxq.net yeah I will be changing that up too that is just my start but this is the code
<html>
<head>
<title>The Fun Spot </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="horizontalnav">
<div class="navlinks ">
<ul>
<li>Facebook</li>
<li>Gaia</li>
<li>Roblox</li>
<li>Adventure Quest </li>
<li>Anime Freak</li>
<li>Youtube</li>
</ul>
</div>
</div>
<div id="leftnav">
<p>Info: Love the Knicks as you can see so when I post some stuff here about this. This site would be about me and get better as I become a better developer. </p>
</div>
<div id="theMeat" >
<p><img src="AmareStoudemireNY.jpg" alt="Amare Stoudemire" > This is my favorite Knicks Player right now. Even though Carmelo Anthony is awesome, Stoudemire started the road to the playoffs not really 100% by himself but by himself. </p>
<p> <img src="ewing_knicks.jpg" alt="Patrick Ewing" > This is the man and my favorite player of all times! He was great and I wish that they never traded him his final year because that was an a injustice. He gave them all he ever had and they dissed him, if you agree send me a email. Daddy</p>
<p><img src="favoriteKnicksTeam.jpg" alt="1994 Team" > Now this here is the team you dont forget about. I think the Knicks put together alot of awesome teams but this one was my Favorite. The starters were Patrick Ewing, Anthony Mason, Derek Harper, John Starks, and Charles Oakley. Oh and Pat Riley as the coach. Yeah baby.</p>
</div>
<div id="rightnav">
<p>There will be site's that helped me create this site OOH Rah </p>
</div>
<div id="footer">
<p align="center">Date Edited 20110408</p>
</div>
</div>
</body>
</html>
and for the CSS
#container {
width: 100%;
}
#header{
width: 89%;
height: 15%;
position: relative;
background-image: url(Header.jpg);
border-bottom: 2px solid #000000;
}
#horizontalnav {
width: 89%;
height: 30px;
position: relative;
background-color: #00008B;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left:240px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #FF8C00;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Courier New;
}
.navlinks li a:hover{
color: #ffffff;
text-decoration: underline;
}
#header p {
color: #000000;
font-family: Courier New;
font-weight: bold;
}
#leftnav {
float: left;
width: 10%;
height: 70%;
background-color: #00008B;
border-right: 1px dashed #694717;
}
#leftnav p{
color : #FF8C00 ;
font-family : Courier New ;
font-size : 16px ;
}
#rightnav {
float: left;
width: 9.9%;
height: 70%;
background-color: #00008B;
border-left: 1px dashed #694717;
}
#rightnav p{
color : #FF8C00 ;
font-family : Courier New ;
font-size : 16px ;
}
#theMeat {
background-color: #FF8C00 ;
overflow : auto ;
float: left;
width : 68.9% ;
height : 70% ;
padding: 0px 0px 0px 0px;
}
#theMeat p {
color : #00008B ;
font-family : Courier New ;
font-size : 16px ;
}
#footer {
clear: both;
background-color: #00008B;
width : 88.9% ;
}
#footer p{
color : #FF8C00 ;
font-family : Courier New ;
font-size : 16px ;
}
Here I fixed how it looks in ie8. I change the height from percentage to pixels and it worked.
If that works for you, use it.
here is how it looks http://i.stack.imgur.com/en1P0.png
The HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>The Fun Spot</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type><LINK
rel=stylesheet type=text/css href="/style.css">
<META name=GENERATOR content="MSHTML 8.00.6001.19019"></HEAD>
<BODY>
<DIV id=container>
<DIV id=header></DIV>
<DIV id=horizontalnav>
<DIV class="navlinks ">
<UL>
<LI><A href="http://www.facebook.com/" target=_blank>Facebook</A>
<LI><A href="http://www.gaiaonline.com/" target=_blank>Gaia</A>
<LI><A href="http://www.roblox.com/" target=_blank>Roblox</A>
<LI><A href="http://www.adventurequest.com/" target=_blank>Adventure Quest</A>
<LI><A href="http://www.animefreak.tv/" target=_blank>Anime Freak</A>
<LI><A href="http://www.youtube.com/" target=_blank>Youtube</A>
</LI></UL></DIV></DIV>
<DIV id=leftnav>
<P>Info: Love the Knicks as you can see so when I post some stuff here about
this. This site would be about me and get better as I become a better developer.
</P></DIV>
<DIV id=theMeat>
<P><IMG alt="Amare Stoudemire" src="stack_files/AmareStoudemireNY.jpg"> This is
my favorite Knicks Player right now. Even though Carmelo Anthony is awesome,
Stoudemire started the road to the playoffs not really 100% by himself but by
himself. </P>
<P><IMG alt="Patrick Ewing" src="stack_files/ewing_knicks.jpg"> This is the man
and my favorite player of all times! He was great and I wish that they never
traded him his final year because that was an a injustice. He gave them all he
ever had and they dissed him, if you agree send me a email. Daddy</P>
<P><IMG alt="1994 Team" src="stack_files/favoriteKnicksTeam.jpg"> Now this here
is the team you dont forget about. I think the Knicks put together alot of
awesome teams but this one was my Favorite. The starters were Patrick Ewing,
Anthony Mason, Derek Harper, John Starks, and Charles Oakley. Oh and Pat Riley
as the coach. Yeah baby.</P></DIV>
<DIV id=rightnav>
<P>There will be site's that helped me create this site OOH Rah </P></DIV>
<DIV id=footer>
<P align=center>Date Edited 20110408</P></DIV></DIV></BODY></HTML>
THE CSS
#container {
WIDTH: 100%
}
#header {
BACKGROUND-IMAGE: url(http://funspot.zxq.net/Header.jpg); BORDER-BOTTOM: #000000 2px solid; POSITION: relative; WIDTH: 89%; HEIGHT: 100px;}
#horizontalnav {
BORDER-BOTTOM: #000000 2px solid; POSITION: relative; BACKGROUND-COLOR: #00008b; WIDTH: 89%; HEIGHT: 30px
}
.navlinks {
POSITION: absolute; TOP: 4px; LEFT: 240px
}
.navlinks UL {
MARGIN: auto
}
.navlinks LI {
LIST-STYLE-TYPE: none; MARGIN: 0px 18px 0px 0px; DISPLAY: inline
}
.navlinks LI A {
PADDING-BOTTOM: 7px; PADDING-LEFT: 12px; PADDING-RIGHT: 12px; FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px; TEXT-DECORATION: none; PADDING-TOP: 5px
}
.navlinks LI A:hover {
COLOR: #ffffff; TEXT-DECORATION: underline
}
#header P {
FONT-FAMILY: Courier New; COLOR: #000000; FONT-WEIGHT: bold
}
#leftnav {
BACKGROUND-COLOR: #00008b; WIDTH: 10%; FLOAT: left; HEIGHT: 400px; BORDER-RIGHT: #694717 1px dashed
}
#leftnav P {
FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px
}
#rightnav {
BORDER-LEFT: #694717 1px dashed; BACKGROUND-COLOR: #00008b; WIDTH: 9.9%; FLOAT: left; HEIGHT: 400px;
}
#rightnav P {
FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px
}
#theMeat {
PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ff8c00; PADDING-LEFT: 0px; WIDTH: 68.9%; PADDING-RIGHT: 0px; FLOAT: left; HEIGHT: 400px; OVERFLOW: auto; PADDING-TOP: 0px
}
#theMeat P {
FONT-FAMILY: Courier New; COLOR: #00008b; FONT-SIZE: 16px
}
#footer {
BACKGROUND-COLOR: #00008b; WIDTH: 88.9%; CLEAR: both
}
#footer P {
FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px
}
You are in quirks mode and IE won't attempt to perform like the other far more modern browsers. Add this to your first line: <!doctype html>. Then see where we stand.