I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.
Related
So I'm working on an assignment that builds on itself at the end of every chapter in my textbook, and my professor took points off for the header image and the footer not being aligned correctly with the main content of my page, but I can't seem to figure out how to fix this problem.
body {
background-color: #3F2860;
color: #3F2860;
font-family: Verdana, Arial, sans-serif;
}
header {
background-image: url(lilyheader.jpg);
height: 150px;
background-repeat: repeat-y;
position: relative;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
padding: 1em;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border-style: outset;
border-color: #CCCCCC;
padding: 1em;
margin-bottom: 1em;
}
nav a:link {color: #3f2860;}
nav a:visited {color: #497777;}
nav a:hover {color: #a26100; border: 3px inset #333333;}
nav ul {
list-style-type: none;
padding-left: 0;
}
.studio {
font-style: italic;
}
footer {
background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
min-width: 1200px;
max-width: 1480px;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
padding-top: 1em;
}
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
header,nav,main,footer {display: block;}
<head>
<meta charset="UTF-8">
<title>Path of Light Yoga Studio</title>
<link rel="stylesheet" type="text/css" href="yoga.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<! [endif]-->
</head>
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id='wrapper'>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<img class='floatleft' src='yogadoor2.jpg' alt="Yoga Door">
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> provides all levels of yoga practce in a tranquil, peaceful envirionment. Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class='clear'>
Path of Light Yoga Studio<br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br><br>
</div>
</div>
<footer>
Copyright © 2016 Path of Light Yoga<br>
</footer>
</main>
I think I formatted that correctly (first time using this site).
Alright... So there's a lot of issues with your CSS and you also have invalid HTML. HTML requires a body tag... Which you don't have. Browsers were probably adding this because it's something they do. They take invalid html and guess what the developer was trying to build.
So first of, keep in mind, the base of all html pages is as following:
<html>
<head>
<title>title</title>
</head>
<body>
</body>
</html>
Next up, there was a lot stuff going on with CSS. The biggest thing I saw involved floats. Floats are a way to easily make a mess. They have their uses; but, usually there is a better way now a days.
Now looking at your alignment problem at its roots...
From what I understand, you want your header and footer to be the same width as the main content and be the same distance from the left of the screen.
You setup your main content to use #wrapper div and did aligment with that. This is fine. The problem is how you set stuff up is more directed to a webpage where the header and the footer are glued to top/bottom of the page, and full up the width completely.
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
<footer>
</footer>
</main>
</body>
</html>
Having the alignment of the page set on the wrapper means it can't really be applied to the footer and header that well. It will get really messy. Of course this isn't a problem if you the header and footer just take up all the width at the top and bottom of the page.
What did I do to fix this?
First off, let's clean up your HTML. It would make more sense to break your page into 3 pieces. Header, Main, Footer. Right now your footer is inside your main.
So what I did is this:
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
</main>
<footer>
</footer>
</body>
</html>
Next up, I moved the alignment. So instead of having this rule:
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
}
I have these rules:
header, main, footer {
width: 80%;
margin-right: auto;
margin-left: auto;
}
#wrapper{
background-color: #F5F5F5;
}
By doing this, we the alignment rules is being applied to the 3 elements inside the body tag. I do NOT apply to this the body tag itself; because, we should avoid changing the width of the body.
Finally, you also had some weird padding on the main element:
main {
padding-left: 2em;
padding-right: 2em;
}
I don't know why this is here; but, I moved that to the body.
body {
padding-left: 2em;
padding-right: 2em;
}
By placing it on the body it will affect the header, main and footer.
Those are the changes to fix alignment. In addition to those changes I removed various rules and statements that might have been causing issues or not... I do not believe these will have any impact on your page; but, just in case if they were required for some unknown reason you should take a look at your requirements and ensure everything is still correct.
Here is the JSFiddle
Question:
How do I style different elements of a HTML website properly? I've looked all over the internet and read books but am still sort of struggling.
Issue:
My problem is that I have a main heading, which is like the main "title" for my website which displays the website name, but to the left of my heading, I want to style a vertical navigation bar which will be in-line with my heading. Yet I am having trouble styling the navbar and heading to work next to each other, rather than one of them being on top of the other.
JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="homepage.css">
<head>
<title>CSGOWin | Win Big!</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Giveaways</li>
<li>About Us</li>
<li>Contact Us<li>
</ul>
</div>
<h1>CSGO Win</h1>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
background-image: url(bgimg.jpg);
width: 100%;
height: 100%;
background-size: 100%;
}
h1 {
font-family: Arial, Verdana, sans-serif;
background-color: #FFA500;
border-style: solid;
border-radius: 25px;
text-align: center;
margin-top: 50px;
margin-left: 350px;
margin-right: 350px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 45px;
}
ul {
list-style-type: none;
margin-left: 50px;
margin-right: 85%;
margin-top: 50px;
background-color: #FFA500;
}
li a {
font-family: Arial, Verdana, sans-serif;
display: block;
}
.navbar{
}
Finally, I am very new to stack overflow, so I apologise if my question is not fully detailed. I will answer questions if there are any. Thanks for your kind help.
Like mentioned in the comment you can use float: left see this pen http://codepen.io/anon/pen/bpWzeK?editors=1100. Another way to do it is by using flex.
you can add class or id attributes to certain html tags and then in your stylesheet reference that class or id
->.navbar{
}
that references any tag with "navbar" class will get the style in that block
->#thisIsAnID{
}
that references any tag with the id " thisIsAnID" id
so . is used for classes
is used for ids
I am currently working on a practice example website as part of my Computer Science GCSE course. I am having real trouble with the navigation CSS. The website is very much in progress, so I know it's not great, but here is my code:
<!DOCTYPE html>
<html>
<head>
<title>The Cotswold Jeweller</title>
<link rel="stylesheet" href="../Assets/css/normalize.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/grid.css" media="screen" type="text/css">
</head>
<body>
<div class="head">
<h1>The Cotswold Jeweller</h1>
</div>
<div class="nav_contain">
<ul class="nav">
<li><h2>Home</h2></li>
<li><h2>Services</h2></li>
<li><h2>Location</h2></li>
</ul>
</div>
<div class="wrapper">
<p>Welcome to the home of The Cotswold Jeweller on the web. Here at The Cotswold Jeweller we offer a unique and reliable service to create a friendly and local experience for our customers. We are very proud to also stock products from many different popular and large groups, such as Citizen, Butler and Peach and many more while we still maintain our local, reliable ethos.</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=The+Cotswold+Jeweller,+Granville+Court,+Shipston-on-Stour&aq=0&oq=The+Cotswold+Jewe&sll=52.8382,-2.327815&sspn=8.08612,21.643066&ie=UTF8&hq=&hnear=&ll=52.062826,-1.623898&spn=0.006295,0.006295&t=m&iwloc=A&output=embed"></iframe>
</div>
<div class="footer">
<p>Copyright 2014 © The Cotswold Jeweller</p>
</div>
</body>
</html>
And here is the CSS:
body {
background-color: #FFFFFF;
}
.wrapper {
width: 1100px;
margin: auto;
}
.head {
text-align: center;
font-family: "Times New Roman";
font-size: 32px;
}
.nav li h2 a {
text-decoration: none;
color: #000000;
font-family: "Times New Roman";
width: 366px;
float: left;
}
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
}
.nav_contain {
border-top: 5px #990000 solid;
border-bottom: 5px #990000 solid;
}
I would like to have the navigation bar between, the two borders of the navigation container, but they are not aligned properly. Please can you provide a solution below. Thank You.
You can add overflow: auto to the .nav container. This will prevent its height from collapsing because it only contains floated elements.
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
overflow: auto;
}
Alternatively, adding this to .nav_contain has a similar effect.
Add this
.nav li{
display:inline-block;
}
and remove the h2 tags.
You may also have to reduce the size of the "a" tags to get them to stay in a line on screen. I'm on a 1280px monitor at the moment and I had to reduce their width to 300px.
Another alternative is to just remove the li tags completely. The links should still display side by side, and because your borders are outside of ".nav" then they should contain it.
If it doesn't work, just let me know.
generally try to avoid fixed values like
width: 1100px; //(1)
you can replace it for example by
width: 90%; //(2)
the (1) is destroying your site on other resolution than yours. Use (2) to avoid it.
try this code:
http://paste.debian.net/69881/
I want to delete the margin top of my page. I will show you what I mean with a screenshot
You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin?
I post here my css:
div#header {
background-color: #6495ED;
background: -moz-linear-gradient(100% 100% 90deg, black, gray);
background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
margin: 0px;
width: 100%;
}
body {
background-color: #000000;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
color: #FFFFFF;
font-family: sans-serif;
}
p {
color: #FFFFFF;
font-family: sans-serif;
padding: 5px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
So any suggestion about how I can delete this margin just above my header?
Here you can see my html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>Lista coupon</title>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/memoria.js" type="text/javascript"></script>
<style src="../css/style.css" type="text/css"></style>
</head>
<body onload="loadJson();">
<div id="header">
<h1>Lista coupon salvati</h1>
</div>
<div id="content">
<p>Di seguito trovi tutte le promozioni salvate</p>
<div id="list">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Set margin: 0; to <h1> element
Demo: http://jsfiddle.net/5w6Es/
Same problem as with the margin-left of <ul> elements, or margin-top / margin-bottom of <p> elements, etc.
You need to reset their default styles when using them at the borders of your page.
Try removing padding and margin also for the html element, (not only the body)
Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element
html {
margin: 0;
padding: 0;
}
h1 {
...
margin: 0;
}
You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
margin:0px;
}
You don't say what browsers its occuring in.
If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.
Try This
h1
{
margin:0px;
}
The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.
So an example using your mark up above would be
h1:first-child { margin-top: 0; }
This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.
I hope this helps as I was having the sam problem with little luck with the answers provided.
Sorry to ask the same question many before me have asked... I have read lots of these and they all say change
margin: 0;
There is a gap between the two divs (div class ="heady" and div class="menus") I just can't seem to get rid of the white space, hopefully it is clear enough, let me know if its not.
Thanks James.
html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>website</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<link rel="stylesheet" type="text/css" href="CSS/style1.css" />
<body>
<div class="heady">
<br></br>
<h1><a class="header" href="index.html">website</a></h1>
</div>
<div class="menus">
<ul>
<il><a class="list" href="x.html">About</a></il>
<t> | </>
<il><a class="list" href="y.html">Beginners</a></il>
<t> | </>
<il><a class="list" href="z.html">Advanced</a></il>
<t> | </>
<il><a class="list" href="contact.html">Contact</a></il>
</ul>
</div>
</body>
</html>
CSS
/*general rules*/
html,body {
font-size:11pt;
font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
background-color: white;
padding-top: 0px;
margin-top: 0px;
}
h1 {
font-size: 25pt;
margin-left:10px;
margin-bottom:0;
padding-bottom: 0;
}
a:link, a:visited {
color: white;
}
a:hover, a:active {
color: grey;
}
/*header section rules*/
div.heady {
height: 200px;
width: 760px;
padding: 0;
background-color: grey;
background-repeat:no-repeat;
margin: 0;
}
a.header {
text-decoration: none;
}
a.header:link, a.header:visited, a.header:active,a.header:hover {
color: red;
margin:0;
}
div.menus {
padding: 0;
margin:0;
background-color:black;
width: 760px;
text-align: center;
font-size:12pt;
}
a.list {
margin:0;
}
Here is a link to a jsFiddle.
Browsers apply default styles to ceratin elements. In this case it's ul that gets some margin. Note that this margin separates the divs even though the divs themselves have no margins.
Use
ul { margin: 0; }
or include a reset stylesheet
Are you using the Firebug plugin for Firefox? Even if you don't already use firefox, you should download it along with the firebug plugin. With Firebug you can look at an element in your source code and see the styles that are being applied, the layout (width/height, padding, margin), and even manipulate the styles to view what a change in your CSS would do.
I HIGHLY recommend it!
Download Firefox
Download Firebug
.heady { display:block; }
.heady { margin:0; padding:0; }
.heady { line-height:100%; /* or even 0 (if no text present) */ }
the content can fool here, but 1 or all 3 of those should tame the beast across browsers.
google for a "css reset" too