It seems that when I zoom in on my browser, my navigation buttons completely go on top of each other. Check the following images:
Normal: http://i.imgur.com/yFxwrXw.png
Zoom: http://i.imgur.com/OnUP6Sg.png
Does anyone know a way to prevent this / stop this from happening?
body {
width: 100%;
height: 100%;
padding: 0;
max-width: 960px;
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 0.4166666666666667% 2.5%;
background: #595959;
margin: 0 10px;
border:1px solid #828282;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
width: 99.79166666666667%;
min-height: 50%;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="logo">
<img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</body>
</html>
body {
width: 100%;
height: 100%;
padding: 0;
min-width: 960px; /* Change max-width to min-width */
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
Set min-width: 960px; in body
DEMO
Here is a Fiddle
Related
I am trying to make a portfolio for an assignment and when I try to make the page window smaller, the text will overlap making it all messy. I once fixed this issue with min-width but I can't seem to fix it this time.
I can't get my head around why it keeps doing it, I am fairly "new" to HTML/CSS and lack the experience to fix this issue, if someone could help me resolve this I'd be grateful.
Thanks.
HTML
<head>
<title>CPD Portfolio - Home</title>
<meta charset="UTF-8">
<meta name="description" content="CPD Portfolio">
<meta name="author" content="Ashley Tanner-Mortell">
<meta name="viewport" content="width=device-width, inital=scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<ul>
<li><a class="active" href="home_page.html">Home</a></li>
<li>University</li>
<li>Sports</li>
<li>Student Mentor</li>
</ul>
<div id="gradient">
<div class="container">
<img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
<div class="centered" style="top:15%">CPD Portfolio</div>
<div class="centered" style="top:20%;">_______________</div>
<div class="centered" style="top:30%; font-size:6vh;">Ashley Tanner-Mortell</div>
</div>
</div>
</body>
<footer>
<p>Footer Details</p>
</footer>
</html>
CSS
body,html{
margin: 0;
min-width:500px;
}
footer {
float: left;
background-color: grey;
padding: 0;
width: 100%;
text-align: center;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to right, silver, lightgrey);
}
li {
list-style-type: none;
float: left;
}
li a {
list-style-type: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
list-style-type: none;
background-color: #E1E1DC;
}
.active {
background-color: #00628B;
}
.container {
margin: 0;
color: white;
font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}
.centered {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
#gradient {
height: 1300px;
background-color: grey; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}
.box1, .box2{
border-style: solid;
border-width: 1px;
background-color: #F5F5F5;
}
.box1{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box2{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box3{
float: center;
width: 90%;
}
Here you go, just replace below code HTML and CSS - Refer my comments for changed code.
CSS
body,html{
margin: 0;
min-width:500px;
}
footer {
float: left;
background-color: grey;
padding: 0;
width: 100%;
text-align: center;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to right, silver, lightgrey);
}
li {
list-style-type: none;
float: left;
}
li a {
list-style-type: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
list-style-type: none;
background-color: #E1E1DC;
}
.active {
background-color: #00628B;
}
.container {
margin: 0;
color: white;
font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}
.centered {
position: absolute;
top: 10px;
left: 0;
right:0;
/* transform: translate(-50%, -50%); */
}
#gradient {
height: 1300px;
background-color: grey; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}
.box1, .box2{
border-style: solid;
border-width: 1px;
background-color: #F5F5F5;
}
.box1{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box2{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box3{
float: center;
width: 90%;
}
/* added css for portfolio section */
.portfolioSection{
padding-top: 100px;
text-align: center
}
/* added css for portfolio heading */
.portfolioHead{
border-bottom:1px solid #000;
display: inline-block;
}
HTML
<ul>
<li><a class="active" href="home_page.html">Home</a></li>
<li>University</li>
<li>Sports</li>
<li>Student Mentor</li>
</ul>
<div id="gradient">
<div class="container">
<img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
<!-- wrapped your divisions with parent devision for better control through out screens -->
<div class="centered portfolioSection">
<!-- added class to control heading styles -->
<div class="portfolioHead">CPD Portfolio</div>
<div style="font-size:6vh;">Ashley Tanner-Mortell</div>
</div>
</div>
</div>
</body>
<footer>
<p>Footer Details</p>
</footer>
Also suggest you to go through this - https://www.w3.org/ and also youtube some free tutorial on HTML and CSS as i can see many basic issues in your css and html. :)
I'm not sure how to ask this questions but I will try my best to explain what I'm trying to accomplish.I have a banner on my homepage and inside this banner I have a div that is overlapping it.
Now, by overlapping this item over the banner It creates a problem where all other content on my homepage is going behind this overlapped item.. Example: my footer (which is marked in red) is going behind this overlapped item and I want to stop this from happening, I want all contents to go below it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #444;
font-size: 13px;
background-color: #fafafa;
font-family: Arial, sans-serif;
}
.container {
height: auto;
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
secion {
width: 100%;
height: auto;
background-color: #fff;
}
header {
width: 100%;
height: 168px;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16);
}
.top-nav {
width: 100%;
height: 42px;
background-color: white;
}
.top-nav ul {
float: left;
line-height: 42px;
list-style-type: none;
}
.top-nav ul li {
display: inline-block;
}
.top-nav ul li a, a:visited {
color: #444;
padding: 42px 12px;
text-decoration: none;
}
.top-nav ul li a:hover {
background-color: #fafafa;
}
.center-console {
width: 100%;
height: 80px;
background-color: #f4f4f4;
}
header nav {
width: 100%;
height: 46px;
background-color: #fff;
}
header nav ul {
float: left;
line-height: 46px;
list-style-type: none;
}
header nav ul li {
margin: 0;
display: inline-block;
}
header nav ul li a, a:visited {
color: #444;
padding: 46px 12px;
text-decoration: none;
color: rgba(0,0,0,.54);
}
header nav ul li a:hover {
color: #15c;
background-color: #fff;
box-shadow: 0 4px 8px 0 #dcdcdc;
}
.logo {
float: left;
width: 200px;
height: 50px;
margin-top: 15px;
background-color: #fff;
}
.center-console form {
float: right;
width: 400px;
height: 40px;
padding: 0 15px;
margin-top: 20px;
border-radius: 3px;
background-color: #fff;
}
.search-icon-small {
width: 18px;
height: 19px;
float: right;
margin-top: 11px;
background-repeat: no-repeat;
background-image: url("../images/search-icon-small.png");
}
header form input[type=text] {
border: 0;
width: 342px;
height: 40px;
outline: none;
background-color: #fff;
}
.shopping-cart {
width: 38px;
height: 32px;
float: right;
margin-top: 7px;
font-size: 25px;
background-repeat: no-repeat;
background-image: url("../images/shopping-cart.png");
background-position:bottom;
}
.item-count {
color: #fff;
width: 18px;
height: 18px;
float: right;
font-size: 10px;
line-height: 19px;
font-weight: bold;
border-radius: 50%;
text-align: center;
background-color: #4683ea;
}
/*** Homepage ***/
.banner {
width: 100%;
height: 480px;
background-color: #4387fd;
}
.banner form {
width: 880px;
height: 50px;
margin: 0 auto;
padding: 0 15px;
margin-top: 228px;
border-radius: 3px;
background-color: #fff;
}
.search-icon {
width: 30px;
height: 30px;
float: right;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url("../images/search-icon.png");
}
.banner form input[type=text] {
border: 0;
width: 805px;
height: 50px;
outline: none;
background-color: #fff;
}
.featured-items {
width: 1200px;
height: 358px;
padding: 21px;
margin-top: 100px;
border-radius: 6px;
position: absolute;
overflow: hidden;
background-color: #fff;
}
.featured-items ul {
list-style-type: none;
}
.featured-items ul li {
float: left;
width: 214px;
height: 214px;
margin-right: 22px;
background-color: #f5f5f5;
}
.featured-items ul li:last-child {
margin: 0;
float: right;
}
footer {
width: 100%;
height: 400px;
margin-top: 80px;
overflow: hidden;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>BasicOffer</title>
<link rel="stylesheet" type="text/css"href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="top-nav">
<div class="container">
<ul>
<li>Selling</li>
<li>Help</li>
</ul>
<ul style="float:right;">
<li>Account</li>
</ul>
</div>
</nav>
<div class="center-console">
<div class="container">
<div class="logo"></div>
<form>
<input type="text" placeholder="Search..">
<div class="search-icon-small"></div>
</form>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>Health & Beauty</li>
<li>Household Supplies</li>
<li>Baby & Toddler</li>
<li>Home & Garden</li>
<li>Electronics</li>
<li>Pet Supplies</li>
</ul>
<div class="shopping-cart">
<div class="item-count">11</div>
</div>
</div>
</nav>
</header>
<div class="banner">
<div class="container">
<form>
<input type="text" placeholder="What are you looking for?">
<div class="search-icon"></div>
</form>
<div class="featured-items">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<footer>This will be the footer</footer>
</body>
</html>
Design:
Thanks,
Richard.
Instead of using absolute position. you can try
margin-top: -150px;
position: relative;
working example
It's unclear why absolute positioning is needed in this example, but I recommend you look into using position: relative for the content block that follows the banner.
Relative positioning behaves mostly like the default (static) when it comes to layout flow, but it supports the z-index layering like absolute positioning. (Considering using relative position also on the banner if you don't really need it to be absolutely positioned.)
I'm learning HTML and I've made a program I need help for. I have written all the code but I want the pictures BOB 1/2/3 to be next to each other. Futhermore I don't know why I can't see the "Home". Also want that the the information at the buttom of the page should be next to each other
Thanks in advance :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first website</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<style>
body{
background: #00FF33;
font-family: Verdana, Tahama, Arial, sans-serif;
font-size: 18px;
overflow: auto;
}
h1, h2, h3 {
text-align: center;
padding-left: 5%;
color: #000066;
}
p {
padding: 2%
color: #000066;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%
background: #000000;
border: 1px solid #878E63;
border-radius: 2px;
box-shadow: 0 0 10px 0px rgba(12, 3 , 25, 0.8);
}
#callout {
width: 100%;
height: auto;
background: #000000;
overflow: hidden;
}
#callout p{
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #FFFF00;
}
#callout p a{
color: #CC0000;
text-decoration: none;
}
header {
width: 96%;
min-height: 125px;
padding: 5px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 50px;
}
nav ul li {
float: left;
border: 1px solid #878E63;
width: 15%;
}
nav ul li a {
background: #F1F0D1;
display: black;
padding: 5% 12%
font-weight: bold;
font-size: 18px;
color: #878E63;
text-decoration:none;
text-align: center;
}
nav ul li:hover, nav ul li.active a {
background-color: #878E63;
color: #878E63;
}
.banner img {
width: 100%;
border-top: 1px solid: #878E63;
border-bottom: 1px solid: #878E63;
}
.clearfix {
clear: both;
}
.BobContainer{
width: 29%;
display: inline-block;
text-align: center;
margin: 0 1.666%;
}
.left-col {
width: 55%;
margin: -2% 1% 1%;
float: left;
}
.sidebar {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
.hallo{
float: left;
margin: 0 auto;
width: 100%;
height: auto;
padding: 1%;
}
.section{
width: 29%;
margin: 2% 2%;
display: inline-block;
text-align: center;
}
footer{
background: #878E63;
width: 100%;
overflow: hidden;
}
footer p, footer h3{
color: #F1F0D1;
}
footer p a{
color: #F1F0D1;
text-decoration: none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
ul li img{
height: 50%;
}
.footerLogos{
width: 45%;
margin: 0 2.45%;
display: inline-block;
text-align: center;
}
/*---------MEDIA---------*/
#media screen and (max-width: 478px){
body{
font-size: 13px;
}
}
#media screen and (max-width: 740px){
nav{
width: 100%;
margin-bottom: 10px;
}
nav ul{
list-style: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li{
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #878E63;
border-left: 0px solid #878E63;
border-bottom: 1px solid #878E63;
border-right: 0px solid #878E63;
}
nav ul li a{
padding: 8px 0;
font-size: 16px;
}
.left-col {
width: 100%;
}
.sidebar{
width: 100%;
}
.section{
float: left;
width: 100%;
margin: 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="callout">
<p>Call us at <b>123456</b></p>
</div>
<header>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"
</header>
<nav>
<ul>
<li class='active'>Home</li>
<li>Prices</li>
<li>Who are we?</li>
</ul>
</nav>
<div class="banner">
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
</div>
<section class="left-col">
<p style ="text-indent: 50px;">Restaurant websites are a great place to find inspiring designs and also to check out some nice ways of displaying photographs within a design. Since the main content of a restaurant is their food – or at least it should be – there is no better thing to do than show beautiful images of the food</p>
<p style ="text-indent: 50px;">HELLOZZ</p>
</section>
<aside class="sidebar">
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<div class="hallo">
</div>
</aside>
<div class="BobContainer">
<h3>BOB1</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Du</p>
</div>
<div class="BobContainer">
<h3>BOB2</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Er</p>
</div>
<div class="BobContainer">
<h3>BOB3</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Dum</p>
</div>
<footer>
<div class="footerLogos"
<p>Call us at:</p>
<p><b>123456</b><br>
Or write to<br>
www#hotmail.com<br>
2670 Greve</p>
</div>
<div class="footerLogos"
<ul>
<li><img src="http://www.adweek.com/socialtimes/wp-content/uploads/sites/2/2013/04/2-150x150.png"</li>
<li><img src="http://virtualmarketingpro.com/blog/empreendeglobal/wp-content/uploads/sites/897/2015/01/logo-youtube-335x320.png"</li>
</ul>
<div class="footerLogos"
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
</div>
</footer>
</div>
<p style="text-align: center; padding:0px;">©Copyright - hala hala, 2015</p>
</body>
</html>
In CSS Code Try Adding To Section Styles : display: inline-block;
Also Delete : float : left;
I’m creating this website and I made this nav bar. It had dummy links in the anchor tags and I had a hover property on my buttons. All of this was working properly. I had made a few changes to the code and now none of it works. I cannot figure out where I went wrong. I was editing properties and things just stopped working.
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html,
body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<title>CM Sound | Home</title>
<meta charset="UTF-8">
<meta name="description" content="CM Sound's studio webpage">
<meta name="author" content="Ryan Buck | May 2015">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Add this in nav ul li a
:
position: relative;
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html, body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {
}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
position: relative;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
nav {
height: 40px;
position: relative;
}
just add the position relative to nav
So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}