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.
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>
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 having trouble with the text within the button in particular. Whenever I try to apply padding to the top or bottom of the button so the text is centered, bu all it does is move the whole button. I suspect it has a lot to do with my lack of understanding with positioning and display.
<!DOCTYPE html>
<html>
<head>
<title>WhiteGrid</title>
<link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
<div>
<div id="header"><img src="title.png"></div>
<div id="navbar">
<div class="button"><p>Home</p></div>
<div class="button"><p>Gallery</p></div>
<div class="button"><p>About</p></div>
<div class="button"><p>Settings</p></div>
</div>
<div id="body"></div>
<div id="footer"><p>Copyright© 2015 Hayden Shaw. All rights reserved.</p></div>
</div>
</body>
</html>
CSS:
body {
background-color: #C6C1C9;
}
#header {
display: block;
background-color: #856799;
height: 60px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
display: block;
margin: auto;
}
#navbar {
display: block;
background-color: rgba(73,71,74,0.7);
height: 40px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
display: block;
width: 100%;
min-height:500px;
}
#footer {
padding-top:24px;
display: block;
background-color: #7D7285;
width: 100%;
height: 60px;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
position: relative;
text-shadow: 0px -1px rgba(0,0,0,0.2);
color: #A3A3A3;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
.button{
margin:0px;
text-shadow: 0px -1px rgba(0,0,0,0.2);
font-family: Verdana;
text-align: center;
color: white;
display: inline-block;
height: 40px;
width: 80px;
background-color: rgba(73,71,74,0);
}
.button:hover{
background-color: #353336;
color: #856799;
}
Thanks in advance.
Don't apply padding to the button but to the paragraph you have the text in. If you are having trouble laying out the text, I would suggest using an image of the text which would be easier.
It seems like you are trying to create a menu bar. I wouldn't do it using divs. Using a table or list is much easier.
<table>
<tr>
<td>Home</td>
</tr>
</table>
<ul>
<li>Home</li>
</ul>
This will be much easier to style.
There's no need to use positioning for this. And you shouldn't be using div's to create buttons either, for a number of reasons.
The best thing you could do is use the <button /> element, or use an anchor tag instead:
HTML:
Button
CSS:
.paddedButton
{
padding: 10px;
}
.khaki
{
background-color: khaki;
}
.noUnderline
{
text-decoration: none;
}
.noUnderline:hover
{
text-decoration: underline;
}
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;
}
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}