I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Related
I am trying to center everything vertically inside the container of the navbar, called (header-area) such that everything is inline. At the moment the img, left navigation and right navigation are all aligned differently in the container.
An alternative solution is welcome, too.
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 212px;
float: left;
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 19px;
}
.header-right{
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a{
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
Add the following styles to menu-main-menu ul
display: flex;
align-items: center;
Your .logo-wrap value has a float value of left, so you'll want to make sure the other children have a similar quality to appear inline. To do this, add a float: left; styling with your header-left class. For this example, I shrunk the font size and padding to demonstrate the new float value and padding.
I highly recommend researching 'flex' to align your navigation. With flex, you can treat each nav item (logo, links, buttons) as child, and align them vertically with justify-content: center;. This way you won't have to worry about floats or padding issues.
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.header-left {
float: left; /* added */
padding: 24px 0; /* updated */
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 48px; /* updated */
float: left;
padding: 24px 0; /* added */
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul {
padding: 0; /* added */
margin: 0; /* added */
}
.main-nav ul li{
display: inline-block;
padding: 0 6px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 8px;
}
.header-right {
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a {
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
font-size: 8px; /* added */
}
.phone {
padding: 0 20px 0 10px;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
you achieve this using display: flex;align-items:center;. in ..header-area.
please run snippet in full page mode
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
width: 100%;
z-index: 9999;
padding: 9px 10px 26px 10px;
height: 105px;
margin: 0 auto;
display: flex;
align-items:center;
}
.main-logo img{
width: 100%;
}
.menu {
padding-left: 0;
display: flex;
}
.main-nav{
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 12px;
}
.header-right{
width: auto;
display: flex;
align-items: center;
margin-left:auto;
font-size: 12px;
}
.header-right a{
vertical-align: middle;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</div>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</header>
</div>
</body>
</html>
I changed your font-size for demonstration purpose
I have page where I want to put navigation bar Menu on the left side of the page. I'm struggling to align text in a tag to the left side. I tried text align to all three elements a,ul and li but that still didn't fix the problem. Also I have the problem with my horizontal navigation bar. I would like to be aligned with h3 tag in my contentMain div. I'm not sure why my two div's are not next to each other as well. if someone can see where my code is off please let me know. Thanks.
div.container {
width: 100%;
height: 100%;
}
.navMenuLeft {
width: 180px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
}
.navMenuLeft h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.contentMain h3 {
margin-left: 10px;
margin-right: 10px;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.hfNavLeft {
margin-left: 10px;
margin-right: 10px;
}
.hfNavLeft ul {
list-style: none;
text-align: left;
background-color: #d3d3d3;
}
.hfNavLeft li {
text-align: left;
}
.hfNavLeft a {
color: black;
text-decoration: none;
cursor: pointer;
}
.hfNavLeft a:hover {
color: #999999;
}
.contentMain {
margin-left: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
min-width: 800px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="navMenuLeft">
<h3>Menu</h3>
<nav class="hfNavLeft">
<ul>
<li>Reports</li>
</ul>
</nav>
</div>
<div class="contentMain">
<h3>Home</h3>
<nav class="hfNavTop">
Demographic
Adult
</nav>
</div>
</div>
</body>
</html>
It's hard to tell what you want... but I can explain the 'reports' alignment. It's in a ul tag - which has default padding and margins. text-align: left; is the default across the board for all elements already.
https://jsfiddle.net/sheriffderek/tLbbzqws/
<aside class='sidebar'>
<h2>Menu</h2>
<nav class='y-navigation'>
<ul class='item-list'>
<li class='item'>
<a href='#'>Reports</a>
</li>
</ul>
</nav>
</aside>
<section class='main-content'>
<h1>Content</h1>
<nav class='x-navigation'>
<ul class='item-list'>
<li class='item'>
<a class='link' href="#">Demographic</a>
</li>
<li class='item'>
<a class='link' href='#'>Adult</a>
</li>
</ul>
</nav>
</section>
...
ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar {
width: 100%;
max-width: 30%;
float: left;
background: lightgreen;
}
.main-content {
width: 100%;
max-width: 70%;
float: left;
background: lightblue;
}
I made several changes on your code. Is this what you want to achieve? .navMenuLeft and .contentMain next to each other?
body {
margin: 0;
}
div.container {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
}
.navMenuLeft {
width: 180px;
}
.navMenuLeft h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0;
background-color: #000099;
color: white;
padding-left: 5px;
}
.contentMain h3 {
background-color: #000099;
color: white;
margin: 0;
}
.hfNavLeft {
margin-left: 10px;
margin-right: 10px;
}
.hfNavLeft ul {
list-style: none;
background-color: #d3d3d3;
}
.hfNavLeft ul li {
margin: 0;
padding: 0;
}
.hfNavLeft a {
color: black;
text-decoration: none;
cursor: pointer;
}
.hfNavLeft a:hover {
color: #999999;
}
.contentMain {
flex-grow: 1;
padding: 0 1rem;
}
.contentMain .hfNavTop {
margin-top: 12px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="navMenuLeft">
<h3>Menu</h3>
<nav class="hfNavLeft">
<ul>
<li>Reports</li>
</ul>
</nav>
</div>
<div class="contentMain">
<h3>Home</h3>
<nav class="hfNavTop">
Demographic
Adult
</nav>
</div>
</div>
</body>
</html>
I'm not sure your require.
If you what align elements on the left side to left.
just add
ul{
padding: 0;
}
My title basically says it all. For some reason I cannot get it to stretch the entire page. I am new to this so any help would be great.
My page
This is my html for the code. I have been told that the width and margin needed to be changed from a friend and I tried doing that but got the same results.
.maincontainer{
width: 990px;
margin: 0 auto;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!doctype html>
<div class="maincontainer">
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</body>
<footer>2017 Dillan Hall</footer>
</html>
Arrange the html in well structured order and make the container div of with 100% then it will take the whole width: demo below
html,
body{
height: 100%;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
}
.maincontainer{
width: 100%;
margin: 0 auto;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%;
width: 100%;
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
Your HTML code structure is not correct, I have corrected the HTML structure below:
<!doctype html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<div class="picture"><img src="camo.jpg" height="150" style="width: 100%" />
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
</div>
</body>
<footer>2017 Dillan Hall</footer>
</html>
And to make the screen full size you need to modify your CSS code .maincontainer and it will solve your issue.
.maincontainer{
width: 100%;
margin: 0 auto;
}
I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
So basically I can't remove the top section of the page. It is just white space, and no matter how much I alter my css, I can't seem to change anything. I want to have my navbar at the top of the page, with no padding or border or anything. Here is my code, and I am aware it is probably the most easiest thing, it's just that i can't find it at the moment.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="Description" content="This is a test website!"/>
<meta name="author" content="Me!"/>
<title>test | Home</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<nav id="navmenu">
<ul>
<li>Home</a>
<li>About</li>
<li>Tutorials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<aside id="sidenews">
</aside>
<div id="center">
<section id="mainsection">
<article>
<header>
<hgroup>
<h1>This is a test</h1>
<h2>I like tests!</h2>
</hgroup>
</header>
<section>
<p>This is the main section of my section (sectception)</p>
</section>
<footer>
<p>Time and date</p>
</footer>
</article>
</section>
</div>
<footer id="cright">
<p>This is the copyright section. All rights reserved.</p>
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
a{
text-decoration: none;
color: #FFF;
}
a:hover{
color: #333399;
}
#wrapper{
width: 1000px;
margin: 20px auto;
text-align: left;
background-color: #FFF;
}
#navmenu{
background: #3366CC;
color: #eee;
text-align: center;
height: 100px;
padding: 0;
margin:0;
float: top;
width: 100%;
}
#navmenu li{
display: inline-block;
list-style: none;
padding: 20px;
}
#navmenu li:hover{
color: #FFF;
background: #3399FF;
border-radius: 15px;
-moz-border-radius: 5px;
}
#mainsection{
float:left;
width: 630px;
margin:30px;
margin-top: 2
background-color:#FFF;
color: #222;
text-align: left;
}
#cright{
text-align: center;
background-color: #AAA;
clear: both;
}
#center{
width: 1000px;
height: 1000px;
background-color:#FFF;
}
#sidenews{
float:right;
width: 250px;
height: 940px;
margin: 0px 0px;
padding: 30px;
background-color:#FFF;
}
Change the margin of the wrapper to 0 ?
#wrapper{
margin: 0 auto;
}
Your #wrapper element has a top margin of 20px - is that it?
#wrapper{
width: 1000px;
margin: 0 auto;
text-align: left;
background-color: #FFF;
}
Set margin to 0 on wrapper
#wrapper {
background-color: #FFFFFF;
margin: auto;
text-align: left;
width: 1000px;
}