Currently working on adding a page to a website, and what I want to do is make boxes appear in HTML on my site.
I've looked through the HTML and CSS and there does not seem to be any issues with formatting, syntax, etc. So, my question is why won't the boxes appear?
I'm trying to do something similar to this here:
CodePen Example
.
This is my HTML & CSS for the page
Website HTML
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Projects</title>
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="inner">
<h3 class="masthead-brand">FV4</h3>
<ul class="nav masthead-nav">
<li class="active">About Me</li>
<li class="active">Contact</li>
<li class="active">Projects</li>
</ul>
</div>
<div class="mainContent">
<div class="box">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box">
<h2>Title 2</h2>
<div class="box-banner"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box">
<h2>Title 4</h2>
<div class="box-banner"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box">
<h2>Title 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box no-text">
<h2>Title 6</h2>
<div class="box-banner"></div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<script src="../../scripts/scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Website CSS
/*
* Globals
*/
#import 'http://fonts.googleapis.com/css?family=Open+Sans:400,700';
.mainContent{
perspective: 80em;
width: 960px;
margin: 0 auto;
}
.box{
float:left;
position: relative;
display: inline;
width: 300px;
height: 180px;
background: #FFFFFF;
box-sizing: border-box;
padding: 15px;
margin: 10px;
box-shadow: 0px 0px #shadowBlurRadius fade(#page-background-main-color, 35%);
opacity: 0;
}
h2 {
margin: 0;
margin-bottom: 10px;
}
p {
margin: 0;
}
.box-banner{
background: #CCCCCC;
height: 80px;
margin: 0px -15px;
margin-bottom: 6px;
background-position: center center;
}
&.no-text .box-banner{
height:129px;
}
.toolbar{
position: absolute;
display:block;
z-index:999;
top: 0px;
right: 0px;
width:100%;
transform:scale(0);
}
.btn{
font-size:1.5em;
font-weight: 700;
text-decoration:none;
background: rgba(0,0,0,0.4);
padding: 0px 10px 4px 10px;
color: lighten(#page-background-main-color, 10%);
display:block;
&.left {
float:left;
font-weight:400;
}
&.right{
float:right;
}
}
a,
a:focus,
a:hover {
color: #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: white;
}
body {
color: black; /*#bf0a0a*/
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 200px rgba(0,0,0,.5);
box-shadow: inset 0 0 200px rgba(0,0,0,.5);
}
/* Padding for spacing */
.inner {
padding: 30px;
}
.headshot{
width: 25%; /* you can use % */
height: auto;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: black;
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:focus {
color: black;
border-bottom-color: #bf0a0a;
}
.masthead-nav > .active > a:hover {
color: #bf0a0a;
border-bottom-color: black;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
a .fa:hover{
color: white;
}
/* HyperLink Style */
a:link {
color: #BF0A0A;
text-decoration: none;
}
a:visited {
color: #87CEEB;
text-decoration: none;
}
a:hover {
color: #780078;
text-decoration: none;
}
a:active {
color: #FF0000;
text-decoration: none;
}
/* End HyperLink Style */
And this is the only thing that appears when I open the index.html in my browser:
Have you tried removing opacity:0 from your .box css?
http://codepen.io/anon/pen/EaopWv
.box{
float:left;
position: relative;
display: inline;
width: 300px;
height: 180px;
background: #FFFFFF;
box-sizing: border-box;
padding: 15px;
margin: 10px;
box-shadow: 0px 0px #shadowBlurRadius fade(#page-background-main-color, 35%);
/*opacity: 0;*/
}
I have run the code using HTML and CSS files attached.
Problem is with css file. In .box css declaration at line 27, opacity set to 0 because of which boxes are not visible. Change this to 1 and run the code again.
More about Opacity CSS:
http://css-tricks.com/almanac/properties/o/opacity/
Related
As the title says. Can't say much more.
As you can see this occurs on both Chrome and Firefox.
webkit scroll bar, didn't work. Deactivated scroll bar.
Overflow: scroll
My code
I also need to add extra details. My issue occured after not many changes, it worked completely fine before I added a certain section (The button at bottom, with 'All Information'
#font-face {
font-family: Bluu;
src: url(cdn/fonts/BluuNext-master/fonts/BluuNext-Bold.otf);
}
#font-face {
font-family: Karrik;
src: url(cdn/fonts/karrik_fonts-main/fonts/Web/TFF/Karrik-Regular.ttf);
}
html {
scroll-behavior: smooth;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
body {
background-color: #64B6AC;
overflow-y: scroll;
overflow-x: hidden;
}
.content {
background-color: #C0FDFB;
max-width: 75%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.interior {
margin-left: 40px;
}
.hamburger {
font-size: 40px;
color: black;
text-decoration: none;
margin-top: 20px;
}
/* General Styles for all */
.lower-area {
margin-top: 100px;
text-align: center;
margin-bottom: 100px;
}
.button-styles {
background: #FFFFFF;
border-radius: 5px;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 30px;
padding-left: 30px;
border: none;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
font-family: Karrik;
color: rgb(8, 8, 8);
text-decoration: none;
font-size: 16px;
transition: 0.3s ease-in-out;
}
.button-styles:hover {
color: #FFFFFF;
background-color: rgb(8, 8, 8);
}
/* Headings */
.large-heading {
font-family: Bluu;
font-size: 7vw;
}
.medium-heading {
font-family: Bluu;
font-size: 5vw;
}
.sub-heading {
font-family: Karrik;
font-size: 3vw;
}
/* Paragraphs */
.paragraph {
font-size: 1.4vw;
max-width: 90%;
display: block;
font-family: Karrik;
font-weight: 200;
}
/* Mobile responsiveness */
#media (max-width:1000px) {
.content {
min-width: 100%;
min-height: 100%;
}
.hamburger {
font-size: 25px;
margin-top: 40px;
}
.paragraph {
font-size: 4vw;
}
}
<!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">
<script src="https://kit.fontawesome.com/9ab5d42652.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>KDGuide</title>
</head>
<body>
<div class="content">
<div class="interior">
<div class="top-area">
<a class="hamburger" href="/">☰</a>
<h1 class="large-heading">Welcome to CODE SNIPPET</h1>
<h1 class="sub-heading">This is a code snippet</h1>
<p class="paragraph">I am having an issue where I can not
scroll higher than a certain point.
</p>
<h1 style="text-align: center; ">
<a href="#alltutorials" class="large-heading" style="text-decoration: none; color: black;">
<i class="fa-solid fa-arrow-down"></i>
</a>
</h1>
</div>
<div class="lower-area">
<br>
<h1 class="sub-heading" id="alltutorials">All Info</h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim varius dolor et varius. Duis sit amet rhoncus eros, at consequat nisi. Donec sed finibus enim. Aenean rutrum odio vitae cursus bibendum. Maecenas pharetra libero lorem, sed maximus metus rhoncus.
</p>
View
</div>
</div>
</div>
</body>
</html>
that is probably because of what you used to center your content.
You should consider using display flex to center your content in your body.
You used translate top with 50% which is not related to the height of your page
This question already has answers here:
Flexbox responsive row column layout
(3 answers)
Converting desktop layout to single-column mobile layout
(1 answer)
Closed 1 year ago.
I am working on a website.
I have a container, that has two columns. On the left, I have a product image, that when you hover on it, it shows that product in use.
To the right, I have a title, description, tech drawings.
I want it so that when the screen is resized to a mobile format, or even if the browser is shrunk, the columns will stack on top of one another.
Right now the image just gets smaller and smaller until you cannot see it.
I tried several attempts at using FlexBox. Did not have any luck. Here was the guide/rules I was following: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a quick JSfiddle I made up to see what I am talking about. This does not have any "attempt" code in it. Just the base code for the containing div, left and right columns, with some example images and text. https://jsfiddle.net/fmcdLxa4/1/
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
padding: 15px;
}
/* Columns */
.left-column {
float: left;
width: 50%;
padding: 10px;
position: relative;
border-bottom: 1px solid #E1E8EE;
}
.right-column {
float: left;
width: 50%;
padding: 10px;
}
/* Left Column */
.left-column img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: auto;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
.product-description a {
color: #358ED7;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: transparent;
}
.flip-box-back {
background-color: transparent;
transform: rotateY(180deg);
}
<div class="container">
<!-- Left Column -->
<div class="left-column">
<p> </p>
<div height="15"></div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" style="max-width: 100%">
</div>
<div class="flip-box-back">
<img src="http://www.deepdiveintel.com/wp-content/uploads/2013/09/Owl-Eye-art-300x300.jpg" style="max-width: 100%">
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Lorem ipsum dolor sit amet</span>
<h1>Lorem ipsum dolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sem, bibendum id tellus ac, aliquam faucibus massa. Nulla facilisi. Fusce vel condimentum velit. Praesent nec ultricies erat. Sed ante lectus, ultrices ut laoreet id, tincidunt
a augue.</p>
<p>Technical drawings: 7/0 | 8/0
<p />
</div>
</div>
</div>
Any help would be awesome!
flex can wrap if you set it so. Also, one of your card's image needs to remain in the flow, so it can size its container. then flex:1 1 XX% will do the job.
https://codepen.io/gc-nomade/pen/MWpxYZw
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap:wrap;
padding: 15px;
}
/* Columns */
.left-column {
flex:1 1 40%;
padding: 10px;
position: relative;
border-bottom: 1px solid #E1E8EE;
min-width:320px;
}
.right-column {
flex:1 1 40%;
padding: 10px;
}
/* Left Column */
.left-column img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: auto;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
.product-description a {
color: #358ED7;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-back{
position: absolute;
top:0;
}
.flip-box-front,
.flip-box-back {
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: transparent;
}
.flip-box-back {
background-color: transparent;
transform: rotateY(180deg);
}
<div class="container">
<!-- Left Column -->
<div class="left-column">
<p> </p>
<div height="15"></div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://picsum.photos/id/1003/300/300" style="max-width: 100%">
</div>
<div class="flip-box-back">
<img src="https://picsum.photos/id/10/300/300" style="max-width: 100%">
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Lorem ipsum dolor sit amet</span>
<h1>Lorem ipsum dolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sem, bibendum id tellus ac, aliquam faucibus massa. Nulla facilisi. Fusce vel condimentum velit. Praesent nec ultricies erat. Sed ante lectus, ultrices ut laoreet id, tincidunt
a augue.</p>
<p>Technical drawings: 7/0 | 8/0
<p />
</div>
</div>
</div>
I'm having this problem that my header,footer and bar part are not fixed when i scroll through the page if i attach an image the image kinda off overlaps and becomes above the header.
this is the css code:
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
position: fixed;
}
body{
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.homeage_product {
position: relative;
width: 50%;
}
.homeage_but {
width: 100%;
height: auto;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
#lblCartCount {
font-size: 12px;
background-color: crimson;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
.form-inline {
display: flex;
}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
also here i can't figure out why the following <div> tag is not clickable (meaning the user and the shooping cart):
<div class="icons">
<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
<asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
the rest of the html code:
</div>
<div class="content">
<!-- Image of a product with button refrence to the product it self -->
<div class="homeage_product" >
<img src="images/cake.jpg" alt="" style="width:100%; height:300px; padding: 0;">
<button class="homeage_but" >CLICK ME!</button>
</div>
</div>
<h4><center><u>Welome to our Bakery shop!</u></center></h4>
<p>
Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
tellus tincidtant tristique.
</p>
<div class="footer">
</div>
</body>
</html>
Add z-index your header style in css:
.header
{
z-index: 99;
}
The z-index property specifies the overlay order of positioned elements. Elements with a greater z-index will therefore always be in front of elements with a lower z-index. Setting the z-index to a value greater than (or even equal to) 0 sets that element to be on top of non-positioned elements with no z-index specified. You could always set it to a value lower than 99, but, it is common practice to avoid potential clashes with other positioned elements.
Let me know if this works for you :)
I'm unsure how to make the main container ("main") centred? The div box needs to be centred but it is stuck on the left. I wish to keep a certain amount of margin between the overall space and the main div section, but I don't wish to restrict it to snap left?
I am still learning CSS. Any feedback on the layout or how I've done my coding is appreciated. Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Business Title</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<header>
<img class="mainImage" src="image/logo.png">
</header>
</head>
<body>
<div class="main">
<h1>Simple Business.</h1>
<ul>
<li>I need Option 1.</li>
<li>I just need Option 2.</li>
<li>I just need Option 3.</li>
<li>I need Option 4.</li>
</ul>
<footer>
<h1>About THIS BUSINESS.</h1>
<p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat.
</p>
</footer>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
----------
**CSS:**
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
background-color: #ececec;
font-size: 12px;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
h1 {
font-family:'Arial Black';
font-size: 4em;
padding-top: 5px;
}
li {
text-decoration: none;
font-size: 2em;
line-height: 2.5em;
color: #FF48D0;
}
ul {
list-style: none;
padding: 0;
}
.mainImage {
width:75%;
max-width:483px;
}
a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}
/******************************************
/* LAYOUT
/*******************************************/
.main {
background-color: #FFF;
margin:1em;
margin-left: 2em;
margin-right: 2em;
float: center;
max-width: 960px;
}
.about, p {
float:center;
max-width: 960px;
padding-left: 1em;
padding-right: 1em;
text-align: justify;
}
header {
padding:10px;
}
footer {
padding: 5px;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
/* =======================================================================
Media Queries
========================================================================== */
#media only screen and (max-width: 930px) {
.main {
max-width: 95%;
margin: 0 auto;
text-align:center;
padding-bottom: 1.5em;
float: none;
}
h1 {
font-size: 2.5em;
text-align: center;
}
li {
font-size: 2em;
line-height: 2.5em;
}
}
#media only screen and (max-width: 480px) {
.main {
max-width: 95%;
}
h1 {
font-size: 2em;
text-align: center;
}
li {
font-size: 1.4em;
line-height: 2em;
}
}
You just need to add margin: 0 auto; to your css for that element.
Like so:
.main {
margin: 0 auto;
}
This will centre the element automatically to the users browser.
CSS Margins
The classical way to center an element with CSS is to set left and right margin to auto
Your code should be
.main {
background-color: #FFF;
margin: 1em auto;
max-width: 960px;
}
.main {
background-color: #FFF;
max-width: 960px;
display: table;
margin: 0 auto;
}
Fiddle: Demo
I am using Simple Grid and looking to expand the width of my background image of a grid container to the full width of the browser. I have tried multiple techniques to expand the image, but nothing has been working. Should I wrap the container in another div and use that div as a background, or is there a simple css fix to my issue?
HTML: (Div id is "body-wrapper-grid")
TEST
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/javascript" src="navicon.js">
</head>
<body>
<!-- Start Navigation Grid -->
<div class="grid" id="nav-wrapper-grid">
<!-- Start Columns -->
<div class="col-1-1">
<!-- Start Navigation Wrapper -->
<nav id="nav-wrapper">
<div id="links">
<img src="images/TEST.png" />
<ul id="nav">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</div>
</nav>
<!-- End Navigation Wrapper -->
</div>
<!-- End Columns -->
</div>
<!-- End Navigation Grid -->
<!-- Start Mission Statement Grid -->
<div class="grid grid-pad" id="body-wrapper-grid">
<div class="col-7-12" id="iphone-mockup">
<img src="images/iphoneMockup.png" />
</div>
<div class="col-5-12" id="mission-statement">
<div id="main-logo">
<img src="images/image.png"/>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id malesuada est. Sed elementum magna dictum aliquam fringilla. Pellentesque nec viverra augue. Nam cursus arcu nec bibendum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent est nisl, pretium sed diam a, porta gravida urna. Donec facilisis eleifend lectus, ac facilisis eros vehicula a. Curabitur hendrerit, risus non pharetra semper, mi ipsum viverra arcu, a tincidunt velit neque vitae enim. Cras elementum est sit amet luctus aliquet.</p>
<div id="app-store-badge">
<img src="images/appStoreBadge.png" />
</div>
</div>
</div>
<!-- End Mission Statement Grid -->
CSS:
html, body {
margin: 0;
padding: 0;
background-color: #cecece;
overflow-x: hidden;
font-family: 'HouschkaAlt', Fallback, sans-serif;
}
#font-face {
font-family: 'HouschkaAlt';
src: url('fonts/FontName.eot');
src: url('fonts/FontName.eot?iefix') format('eot'),
url('fonts/FontName.woff') format('woff'),
url('fonts/HouschkaAlt-Medium.ttc') format('truetype');
font-weight: normal;
font-style: normal; }
#nav-logo img {
width: 150px;
height: 40px;
}
.grid {
background-color: #fff;
}
/* NAVIGATION LINKS */
li a {
display: block;
width:100%;
background:#fff;
color: #3d6430;
font-size: 15px;
line-height: 40px;
text-decoration: none;
margin-top: 5px;
padding-left: 20px;
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#links {
width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
}
#nav-logo {
float: left;
display: inline;
}
ul {
width:100%;
background-color: #fff;
height: 40px;
padding: 0;
display: inline;
}
li {
padding: 0 20px;
float: left;
list-style-type: none;
}
#menu {
display: none;
}
#body-wrapper-grid {
background: url('images/downtown.jpg') 0 0 repeat-x;
width: 9999px;
padding-bottom: 0px;
margin-bottom: 0px;
overflow: hidden;
}
#iphone-mockup img {
vertical-align: bottom;
margin: 0 auto;
padding-bottom: 0px;
}
#mission-statement {
text-align: center;
background-color: #fff;
margin: 0px;
padding: 10px;
float: right;
}
#main-logo img {
display: block;
margin: auto;
}
/* APP STORE BADGE */
#app-store-badge img {
width: 200px;
height: 50px;
padding-bottom: 10px;
}
}
#features-detail-grid h3, p {
text-align: center;
color: #3d6430;
font-weight: bold;
}
/* Navigtion for Small Devices */
#media screen and (max-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#menu {
width:1.4em;
display: block;
background:#fff;
font-size:1.35em;
text-align: center;
color: #3d6430;
float: right;
top:0;
}
#logo {
float: none;
}
#nav.js {
display: none;
padding: 0;
}
ul {
width:100%;
list-style:none;
height: auto;
}
li {
width:100%;
border-right:none;
border-top: 1px solid #3d6430;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
See if this helps you: http://jsfiddle.net/panchroma/DK9rJ/
I've commented out some of your images so it's easier to see what's happening. The important bit is that I've added a wrapper around the area where you want the full size image background and that this wrapper is outside the div of class grid.
<div class="body-background">
<div class="grid grid-pad" id="body-wrapper-grid">
....
</div> <!-- close class="grid grid-pad" id="body-wrapper-grid" -->
</div> <!-- close body-background -->
Since the <div class="body-background"> is outside the <div class="grid ..> it will extend full width and you will be good to go.
Good luck!