What i have looks splendid in firefox, but for some reason all of the text won't seem to stay contained within their respective div's in Chrome. Chrome seems to be assigning random height values to the ul and h1 elements, but for the life of me I can't seem to figure out why. EDIT: Okay, I am going crazy with rage. I mean it even works in explorer............ What is Chrome's (read "my") issue!?!?!?!?!?!
I deleted the screen shot, since i've made some changes. I've simply just uploaded it to the site musingsofamachiavellian.com you should be able to see the issue in all its glory there.
THANK YOU SO MUCH, the fix was as easy as adding html { height:100%;}
This is quite literally the first code i've ever written from scratch, so be gentle :|
CSS:
body {
background-color: #a5e2a8; /*A light green*/
min-width: 960px;
}
#Foundation {
width:960px;
height:100%;
background-color: #3b3b3b; /*Milk White*/
background-color: rgba(59,59,59,0.9);
/* background-color: #212121; /*A light black*/
}
#Header {
height:80px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
}
#TitleText{
height:80px;
width:940px;
font-family: Cambria math;
font-size: 48px;
padding: 16px;
color: #F70D1A;
vertical-align: top;
}
#ButtonBar{
height:32px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
}
#ButtonBarUL{
height:32px;
width:940px;
margin:0px;
padding: 6px;
}
.Button {
text-align: center;
font-family: Cambria math;
font-size: 16px;
padding-top: 0px;
padding-left: 0px;
color: #F70D1A;
display: inline-block;
list-style-type: none;
vertical-align: top;
}
#SidebarContainer {
height:100%;
width:160px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.SideBarContent {
width:140px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
text-align: center;
font-family: Cambria math;
font-size: 12px;
color: #212121;
}
#MainContainer {
height:100%;
width:770px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.ArticleContainer {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.ArticleHead {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
border-bottom:1px solid;
font-family: Cambria math;
font-size: 14px;
color: #F60D1B;
}
.ArticleContent {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
font-family: Cambria math;
font-size: 12px;
color: #212121;
}
#Footer {
height:32px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
font-family: Cambria math;
font-size: 12px;
color: #212121;
clear: both;
list-style-type: none;
text-align: center;
}
ul, li {
list-style-type: none;
}
site:
<!DOCTYPE html>
<head>
<link rel='stylesheet' type='text/css' href='core.css' />
<script type='text/javascript' src='script.js'></script>
<title>Musings</title>
</head>
<body>
<div id='Foundation'>
<header id='Header'>
<h1 id='TitleText'>Musings of a Machiavellian</h1>
</header>
<div id='ButtonBar'>
<ul id='ButtonBarUL'>
<li class='Button'>About |</li>
<li class='Button'>Past |</li>
<li class='Button'>Future |</li>
<li class='Button'>FAQ |</li>
</ul>
</div>
<section id='SidebarContainer'>
<div class='SideBarContent'>
<p>Chronicles</p>
</div>
</section>
<section id='MainContainer'>
<div class='ArticleContainer'>
<div class='ArticleHead'>
<h1>Hey! Thanks for stopping by. We're currently under construction...</h1>
</div>
<article class='ArticleContent'>
<p>This will be blog 2.0 - A webspace for own personal experimentation, and to chronicle (err.... blog) some musings.</p>
<p>They'll range in topic from politics, to science, to strategy, to economics. Stay tuned, or simply send me a message.</p>
<p>I'm by no means a web-development expert. If you see something that should be improved, I more than welcome your suggestions. Feel free to shoot me an e-mail!</p>
</article>
</div>
<div class='ArticleContainer'>
<div class='ArticleHead'>
<h1>I hate chrome...</h1>
</div>
<article class='ArticleContent'>
<p>If you're viewing this page in Chrome, chances are it looks jumbled. The reason, no clue... but the search for an answer is quickly turning intot he bane of of my existance.</p>
<p>Frustration level.... over 9000! I mean, it even works in internet exploder...</p>
</article>
</div>
</section>
<footer id='Footer'>
<ul id='ContactInfo'>
<li>info'at'Musings...</li>
</ul>
</footer>
</div>
</body>
</html>
I did alot of tuning up. Take a look here http://codepen.io/anon/pen/Ezham
Noticeable I used %'s instead of pixels and added correct positioning.
I see two things:
1. The Cambria math font is causing problems.
2. You should add this css: html { height: 100% }
I believe this is because the div Foundation needs to match its css. Foundation and foundation. One is capitalized and one is not.
Related
I am relatively new to HTML and CSS and am working on recreating websites.
My output looks like this
My (sloppy) code is here:
Both the CSS and HTML
http://pastebin.com/4EVBj5zK
I would like to know how to properly align my text to the right of the div.
Make the text container have absolute positioning, and then position it to the very top and right of its parent.
You also need to make sure the parent element is relatively positioned.
head{font-family: Verdana, Geneva, sans-serif;
}
body{background-color: #C0C0C0;
}
p{font-family: "Courier New", Courier, monospace;
}
.borderlist{
list-style-position:inside;
list-style-type:none;
}
.header{
font-family: Verdana, Geneva, sans-serif;
font-size: 50px;
float: left-side;
padding-top: 20px;
padding-left: 50px;
}
a:link, a:visited, a:active{
text-decoration: none;
color: #292421;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
display: inline-block;
border : 4px solid orange;
width: 275px;
padding: 30px;
background-color: #D3D3D3;
}
a:hover{
text-decoration: none;
color: #292421;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
border : 4px solid #ee7600;
padding: 30px;
background-color: #E8E8EE;
}
.div_top{
background-color: #E18A07;
width: 700px;
height: 300px;
padding-left: 50px;
padding-top: 75px;
margin-left: 75px;
float:left;
position:relative;
}
.div_top_text{
width: 75px;
top:0px;
right:0px;
position:absolute;
padding-right: 20px;
vertical-align:top;
}
.br_bigger{
margin: 100px;
padding: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style_test.css">
<title>Freepbx Support</title>
</head>
<body>
<header class="header"><b>FreePBX</b> Support</header>
<br>
<div class="div_top">
<li class="borderlist">FreePBX initial setup</li>
<br>
<br>
<br>
<li class="borderlist">FreePBX Advanced setup</li>
<div class="div_top_text">FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX</div>
</div>
</body>
</html>
Try this, this solution would take care of the browser being resized.
* Note: I noticed you are using li tags and I did not see any ul tag, generally li are using along with ul
.list-boxer{
float: left;
}
.list{
width: 275px;
list-style: none;
margin: 0px 0px;
padding: 0px 0px;
}
.list li{
width: inherit;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
padding: 0px;
}
.list li a{
display: block;
padding: 30px 30px;
margin: 25px 0px;
border : 4px solid #ee7600;
}
.div_top_text_boxer{
overflow: hidden;
padding: 25px;
}
.div_top_text{
width: 98%;
padding: 1%;
}
<div class="list-boxer">
<ul class="list">
<li>FreePBX initial setup</li>
<li>FreePBX Advanced setup</li>
</ul>
</div>
<div class="div_top_text_boxer">
<div class="div_top_text">
FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX
</div>
</div>
I'm trying to create a navbar with some items on the left and some items on the right (Item 1 on the left, items 2 and 3 on the right). My JSFiddle has my current code.
What I have tried to fix this issue:
float: right
text-align:right
None of them seem to work. I'm sure there is a super simple solution, but I just can't think of it.
HTML:
<div class="navbar">
<!--Create the button home -->
<p class="innav">Num1</p>
<p class="HL">|</p>
<p class="rightIn">Num2</p>
<p class="HL">|</p>
<p class="rightIn">NUM 3</p>
<p class="HL">|</p>
</div>
CSS:
div.navbar{
width:100%;
height: 30px;
background-color: #03572c;
}
p{
display: inline;
}
p.innav{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
p.rightIn{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
.HL{
margin-left: 10px;
color:white;
font-size:24px;
}
JSfiddle
Any help would be greatly appreciated! :)
Add these style to your css.
p.rightIn,
p:nth-child(4),
p:nth-child(6)
{
float: right;
margin: 0px 5px;
width: auto;
}
Jsfiddle
I would recommend that you use a CSS grid system for this, since you are likely to need this functionality over a over on your sites.
Here are some grid systems that I have used in the past:
Pure CSS
http://purecss.io/grids/
Foundation
http://foundation.zurb.com/docs/components/grid.html
Bootstrap
http://getbootstrap.com/css/#grid
Semantic UI
http://semantic-ui.com/collections/grid.html
Or, if you feel like creating your own grid system, here is a good article about it:
http://www.sitepoint.com/understanding-css-grid-systems/
nav {
background: #000000;
width: 100%;
display: block;
padding: 8px 0;
font-family: arial;
font-size: 13px;
}
nav span {
display:block;
width:100%;
line-height: normal;
text-align:right;
}
nav a {
color: #ffffff;
padding: 0 10px;
text-decoration: none;
display:inline-block;
border-right:1px solid #ffffff;
}
nav a:first-child{
float:left;
}
nav a:last-child{
border:none;
}
<nav>
<span>
Link 1
Link 2
Link 3
</span>
</nav>
Demo
I have tried absolute to my footer to stay on the bottom of the page but it covers up the elements that are already at the bottom instead of going underneath them. Fixed does the similar thing except if the page is longer it will cover up elements in the center of the page. I literally just want the backgound color of my div to extend to the bottom of the page and have my logo and text stay in between the div at a set height. Here's what I've got.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>
</title>
<div class="heading">
<img src="Images/Redbird.gif" alt="Redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px">
<form>
Search:
<input type="search" name="Search" style="float:right;">
</form>
<br></br>
<button type="button" id="Login">Login</button>
<button type="button" id="Login">Create New Account</button>
<h1>Technology Blog</h1>
<a href="index.html">
<img src="Images/House.png" alt="Home" style="width:35px; height:35px;">
</a>
</div>
<div class="table">
<table style+"width:100%">
<tr>
<td>Phones & Tablets</td>
<td>Computers & Laptops</td>
<td>Internships</td>
<td>Troubleshooting</td>
<td>Product Ratings & Reviews</td>
</tr>
</table>
</div>
</head>
<body>
<div class="Welcome">
<h2>Welcome</h2>
<p>Welcome to Illinois State University's Technology Blog. Here you can view and post questions, answers, reviews, and other information that is related to technology. This website is for Illinois State University Students ONLY! You must sign in or create an account to view or post on this website.</p>
</div>
<div class="Slideshow">
<img src="Images/DellComps.jpg" alt="Computers" style="width: 397px; height: 298px">
</div>
</body>
<div class="Footer">
<img src="Images/Seal.png" alt="ISU Seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px">
Copyright 2014 # TEC 319 Group <br/> Illinois Sate University
</div>
</html>
heres the CSS. I only need to edit the .Footer tag i believe
html{
height: 100%;
position: relative;
}
h1{
text-align: center;
font-family: impact;
font-style: italic;
}
.heading{
background-color: #CA0000;
height:150px;
}
td{
border:5px solid black;
text-align:center;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
}
table{
width:100%
}
.table{
background-color:black;
height:53px;
}
form{
float:right;
}
button{
float:right;
}
.Slideshow img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer{
margin-top: 40px;
text-align: center;
background-color: #D8D8D8;
padding-bottom: 20px;
width: 100%;
}
.Preview td{
display: block;
text-align: left;
color: black;
background-color: white;
}
.Blog td{
display: block;
text-align: left;
color: black;
background-color: white;
border: 0px;
}
.newPost h2{
display: block;
position: center;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
color: white;
background-color: #790000;
border: 5px solid black;
border-collapse: collapse;
width: 250px;
text-align: center;
}
h3 {
color: white;
background-color: #790000;
border: 5px solid black;
}
h4{
text-align: left;
font-size: 14pt;
color:#790000
}
.back h2{
display: block;
position: left;
border:5px solid black;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
width: 100px;
}
form.comment{
float:left;
size
}
a.blogTitle:link {
color: #790000;
text-decoration: none;
}
a.blogTitle:visited{
color: #790000;
text-decoration: none;
}
a.blogTitle:active{
color: #790000;
text-decoration: none;
}
a.blogTitle:hover{
color: #CA0000;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited{
color: white;
text-decoration: none;
}
a:active{
color: white;
text-decoration: none;
}
a:hover{
color: #CA0000;
text-decoration: none;
}
You need to set the footer position to relative to have it respect other elements on the page. Both absolute and fixed remove the element from the page flow, which causes overlapping.
Demo
Change position:relative to fixed in the demo CSS and then uncomment bottom to see the difference. You can also play with height on the body tag to see how behavior changes.
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<p>Footer stuff</p>
</div>
body {
margin:0;
padding:0;
}
#content {
height:1200px;
width:100px;
background-color:#eee;
position:relative;
margin:0;
padding:0;
border:1px solid black;
}
#footer {
width:100px;
position:relative;
/* bottom:0; */
background-color:#eee;
margin:0;
padding:0;
border:1px solid black;
}
I am working on a website for a course I am studying and I have ran into an issue with lists. I need to display a list on a particular page with lower-alpha as the bullet type, but nothing is showing.
I have used the find tool in Notepad++ to search for all lines containing list-style-type and checked they weren't set to none.
I also need the list on the navbar to have images as the style type.
HTML page containing list and CSS:
#font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
margin: 0;
border: 0;
padding: 0;
font-size: 12px;
font-family: arial, sans-serif;
}
body {
width: 100%;
height: 300%;
background-color: #D8D8D8;
}
nav {
font-family: customFont;
font-size: 30px;
width: 100%;
height: 50px;
position: fixed;
z-index: 50;
}
.nav-background {
width: 100%;
height: 100%;
background: #12A7CB;
opacity: 0;
position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
width: 100%;
height: 320px;
}
#slideshow {
position:relative;
height:320px;
width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
width: 100%;
height: 320px;
box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
float: left;
padding-left: 100px;
padding-right: 200px;
}
#nav {
background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
width:100%;
height:66px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title {
display:none;
color:#EDEDED;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.navigation {
list-style-image: url('navIcon.png');
}
li {
display:inline;
padding:15px;
color: black;
}
.navigation a {
font-size: 19px;
font-family: customFont;
/*text-decoration:none;*/
color: #01ebfe;
}
.navigation a:hover {
opacity:0.36;
}
.wrapper {
width: 900px;
height: 1000%;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: white;
padding-top: 100px;
box-shadow: 10px 10px 5px #888888;
}
p{
font-size: 14px;
padding-bottom: 32px;
}
p:first-letter {
font-size: 32px;
color: #71CAE0;
}
h1 {
font-family: customFont;
font-size: 32px;
font-weight: bolder;
color: #12A7CB;
text-align: center;
}
h2 {
font-family: customFont;
font-size: 22px;
font-weight: bold;
color: #12A7CB;
text-align: left;
text-decoration: underline;
}
section {
width: 100%;
height: 100%;
background-color: #D8D8D8;
}
img.logo {
text-align: center;
margin: auto;
display: block;
}
img.slideshow {
width: 100%;
height: 480px;
}
footer {
width: 900px;
margin: 25px auto 0 auto;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background-color: white;
text-align: center;
box-shadow: 10px 10px 5px #888888;
}
.members {
padding: 10px;
display: inline-block;
background-color: #e4f4f8;
margin-top: 15px;
margin-left: 15px;
border: 1px solid #12A7CB;
float: right;
}
ol {
list-style-type: lower-alpha;
}
li {
list-style-type: lower-alpha;
}
ol.test {
list-style-type: lower-alpha;
}
.members ol {
list-style-type: lower-alpha;
}
.members li {
display: block;
color: #6c6c6c;
list-style-type: lower-alpha;
padding: 5px;
margin-bottom: 5px;
}
/** START TABLE STUFF **/
table, tr, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
}
table {
margin-top: 500px;
}
.disco {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
}.disco table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.disco tr:last-child td:last-child {
border-bottom-right-radius:8px;
}
.disco table tr:first-child td:first-child {
border-top-left-radius:8px;
}
.disco table tr:first-child td:last-child {
border-top-right-radius:8px;
}
.disco tr:last-child td:first-child{
border-bottom-left-radius:8px;
}
.disco td{
vertical-align:middle;
background: green;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:center;
padding:18px;
font-size:10px;
font-weight:normal;
color:#000000;
}
.disco tr:last-child td{
border-width:0px 1px 0px 0px;
}
.disco tr td:last-child{
border-width:0px 0px 1px 0px;
}
.disco tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.disco tr:first-child td{
background:red;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
color:#ffffff;
}
/** END TABLE STUFF **/
.video-wrapper {
width: 100%;
text-align: center;
}
.video-wrapper a {
color: blue;
text-decoration: none;
font-size: 12px;
font-family: arial, sans-serif;
}
.social img {
padding-top: 32px;
padding-right: 8px;
width: 48px;
height: 48px;
border: none;
}
<!DOCTYPE html>
<html>
<!--
Author: *******
Date: 11/08/2014
-->
<head>
<meta charset="utf-8" />
<title>Biography - Three Doors Down</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<script type="text/javascript" src="../js/header.js"></script>
</head>
<body>
<nav class="nav">
<div class="nav-background">
</div>
<div class="nav-content">
<img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</nav>
<header class="header">
<div id="slideshow">
<img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
<img src="../images/header2.jpg" alt="Three Doors Down" />
<img src="../images/header3.jpg" alt="Three Doors Down" />
</div>
</header>
<section>
<div class="wrapper">
<h1>Biography</h1>
<div class="members">
<h2>Band Members</h2>
<ol>
<li>Brad Arnold</li>
<li>Chris Henderson</li>
<li>Greg Upchurch</li>
<li>Chet Roberts</li>
<li>Justin Bitonen</li>
</ol>
</div>
<p>If rock ‘n’ roll had fairy tales, the 3 Doors Down story would be one of the most popular. Their story begins in childhood, it celebrates friendship, honesty and making the most of God-given talents. It’s about faith in your teammates and collaboration, trusting instincts and, once success is achieved, lending a hand to help others. </p>
<p>They made their mark early, selling 6 million copies of their debut album, and rather than allow that moment to define themselves, they have developed as musicians, songwriters and friends. The stories and emotions related in their songs resonate with audiences: Their music and lyrics are as approachable as the guys in the band. “The main thing is the lyrics,” says Brad Hardin, a radio programmer in Tampa, Florida, at one of the first stations to play 3 Doors Down's music. “I've watched them mature as a band. They work hard, they do anything for their community and they're so sincere and easy to be around. And that comes out in their music.” “I’ve got to make this life make sense” is a line from one of 3 Doors Down’s most popular songs, “Away From the Sun” and in many ways it sums up a key attraction to the band’s work: The directness of Brad Arnold’s lyrics. “Something I have always tried to do when writing a song: Talk about something besides the rims on the car, something somebody can identify with, but make it open-ended so a listener can make it adapt to their own life,” he says.</p>
<p>Chris Henderson explains “One Light” as song that points out “everyone is looking for the leader to get behind so that change can begin.” Arnold adds: “It’s about giving the world more than you can take from it.” It could also be a description of 3 Doors Down’s Better Life Foundation that they founded in 2003 to help children in need of food, shelter and medical attention. “Every time we do something with our foundation or for the military, we’re just the catalyst,” Arnold says. “When I leave an event, I feel like I have been given something. We’ve been able to do a lot of good things, so it’s hard to look at it as giving back.”</p>
<p>Brad, Todd and Chris all agree they have created a family by being in a band together. They left Mississippi for Nashville and still live just a few miles from one another and share their lives onstage and off. 3 Doors Down is a brotherhood of rock ‘n’ rollers whose bonds with each other and their fans only grow stronger with age.</p>
</div>
</section>
<footer>
<div class="nav-content">
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</footer>
</body>
</html>
I would appreciate any help because this assignment is due tomorrow.
Probably you forgot about something...
li {
display: list-item;
}
In your code there is display:inline which isn't list item and haven't list styles.
I'm new to creating websites and can't seem to find out why the alignment of my website doesn't work properly.
On all three of my computer monitors, the website looks fine:
http://www.spectanium.com
But I looked at it on my one friends computer and it looked wrong.
I have a main body and then space on both the right and left, but depending on the monitor I use, there has been varying space and it looks bad...
Can anyone take a look at my code and see what I'm doing wrong?
index.html -->
<html>
<head>
<title>Spectanium Studios</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul>
Homepage<li>Products</li>
<li>About Us</li>
</ul>
</div>
<div id="content">
<div id="updatesCol">
<h2>Recent Updates</h2>
<h3> * Website Created *</h3>
<p></p>
<p style="font-size:small">Website is now done!</p>
</div>
<div id="contentCol">
<h2>Welcome to Spectanium!</h2>
<p>
<em>So far we have to do a few things before we are ready to roll!</em>
</p>
<h3>Game Stuff:</h3>
<ol>
<li>Finish the actual game.</li>
<li>Get final graphics.</li>
<li>Get final music.</li>
<li>Find out distribution method.</li>
</ol>
<h3>Website Stuff:</h3>
<ol>
<li>Write descriptions for about us.</li>
<li>Improve it</li>
<li>Make it pretty</li>
</ol>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
<p></p>
<p> © 2014 Spectanium Studios</p>
</div>
</body>
</html>
default.css -->
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:190%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
h1, h2, h3 {
color: #B13413;
}
h2 {
font-size: 1.6em;
}
h3 {
margin: 0;
font-size: 1em;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
border-bottom: 1px dotted #CCCCCC;
text-decoration: none;
color: #3284B5;
}
a:hover {
border: none;
}
img {
border: none;
}
/* Header */
#header {
width: 890px;
height: 273px;
margin: 4px 0 4px 300px;
background: url(images/header.png) no-repeat;
}
/* Menu */
#menu {
background: url(images/topborder.png) repeat-x;
width: 950px;
height: 41px;
margin: 0 auto;
margin-left:275px;
background-color: #a1a1a1;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#menu li {
display: inline;
text-decoration:none;
}
#menu a {
display: block;
float: left;
height: 28px;
padding: 15px 20px 0 20px;
text-decoration: none;
color: black;
font-weight:bold;
border-bottom: 0 dotted #DDDDDD;
}
#menu a:hover{
height:8px;
color: #B13413;
}
/* Content */
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:275px;
height: 1000px;
}
#updatesCol {
float: right;
width: 250px;
height:1000px;
border-left:1px black solid;
text-align:center;
}
#contentCol {
float: left;
width: 500px;
padding: 20px 0 0 0;
margin-left:25px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:275px;
padding: 10px 0;
font-size: smaller;
background: url(images/bottomborder.png) repeat-x;
clear:both;
}
#footer * {
color: #666666;
}
This is how it's displaying to me, running on 1920x1080.
http://s30.postimg.org/s3w6clowg/hello.jpg
Problem is your backgorund. It's set to repeat-y but the width it's 1450, so it will repeat-y but won't extend further than that.
Also it'll look a bit to the left because you set all the margins in pixels, like the header:
4px 0 4px 300px .
So no matter what it'll be pushed from the left to the right of 300px. If my resolution is high it'll show a huge gap on the RIGHT side of the page.
This is because you are using margin-left to align the whole website so when it scales up it is still aligned to the left. Use margin: 0 auto; to center your website. If you want the website to stay aligned to the left like it currently is however then use a percentage instead. You probably should also set a background color or having a repeating background to avoid the black background when the page is wider than your background image.
Try this.
body{
background-position-x:center;
}
body > div{
margin:auto !important;
}
Now the content is centered I assure you. But it won't feel centered as the blackened area in the background-image you are using is not centered horizontally. You can see the green line is longer than the red line. Correct that and you're good to go.
My suggestion is that you use an image on background which doesn't have blackened area and achieve that by css
You have specified a absolute margin-left which is causing the problem.
I changed some parts of your css file and it works fine for me.
basically replace absolute margins with
margin-left:auto
margin-right:auto
Changes in default.css
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('http://www.spectanium.com/images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:100%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
#header {
width: 890px;
height: 280px;
margin-left:auto;
margin-right:auto;
background: url(http://www.spectanium.com/images/header.png) no-repeat;
}
#menu {
background: url(http://www.spectanium.com/images/topborder.png) repeat-x;
width: 950px;
height: 51px;
margin-left:auto;
margin-right:auto;
background-color: #a1a1a1;
}
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:auto;
margin-right:auto;
height: 1000px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:auto;
margin-right:auto;
padding: 10px 0;
font-size: smaller;
background: url(http://www.spectanium.com/images/bottomborder.png) repeat-x;
clear:both;
}