I was told to add a fixed nav bar to the code I had made previously.
Here is the CSS for the code. I reviewed it a lot but can't seem to find the issue with it.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
/* overflow: hidden;*/
background-color: #c4a1a2;
}
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
text-align: center;
color: #ffffff;
font-size: 5vw;
}
h2{
text-align: center;
color: #ffffff;
font-size: 3vw;
}
.table{
width: 100%;
/* height: 00px;*/
}
.table img{
width: 49.5%;
}
.table td{
width: 49.5%;
}
#wrapper
{
width: 99%;
/* max-width: 1500px;*/
min-width: 700px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
/* box-shadow: 3px 3px 3px #666666;*/
}
.navbar {
/*
overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
Here's the actual code. I think it's an issue with the container class but I'm not sure. When I commented out the Wrapper ID it was like the nav bar didn't even exist.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kayak Spot</title>
<link rel="icon" type="image/x-icon" href="images\RVC-Circles-Logo.jpg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layout.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
<div id="wrapper">
<div class="container">
<img src="Images/woman-kayaking.jpg" alt="Kayaking" style="width:100%;">
<div class="centered">
<h1>Kayaking, The pastime to calm your nerves.</h1>
</div>
</div>
<div class="table container">
<tr>
<td><img src="Images/sport%20(1).jpg">
<div class="centered">
<h2>Be it for sport or for leisure, Kayaking is one activity you can't miss.</h2>
</div>
</td>
<td><img src="Images/sport%20(2).jpg"></td>
</tr>
</div>
</div>
</body>
</html>
If you want to have a fixed bar at the top of the page, use this piece of code for the navbar class in your css. With this piece of code, your navbar class will be placed at the top of the page.
.navbar {
background-color: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.navbar a {
display: flex;
justify-content: center;
align-items: center;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Better than using a flex display.
If the navbar falls on the rest of the elements, just give the body or #wrapper margin
#wrapper {
width: 99%;
margin-top: 50px;
}
or
body {
margin-top: 50px;
}
Related
I want to mention that I`m a beginner. ^^ I also want to mention that if I remove the div part at the beginning of the code block:
div {
background-image: url('./images/castle.png'); `I removed this line`
position: absolute;
width: 100%;
height: 100%;
I`m able to see the navbar menu, but if I keep it, I only see the background image. I don't know what to do to be able to see the menu over the image.
Below you can see the code lines.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
img {
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.bg-container {
position: relative;
width: 100%;
height: 380px;
}
.bg img {
background-image: url('./images/castle.png');
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
z-index: 1;
}
.topnav a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="bg-container">
<div class="bg-img"></div>
</div>
<div class="container">
<h1>Welcome to my page</h1>
<div class="topnav">
Home
About
Contact
</div>
</div>
</body>
</html>
To set the background image you can do in different ways:
One would be to use an element of type img using the posiztion: absolute, relative to the body or however to the element you want.
The second way is to set it as background-image directly from the CSS properties.
To make the navbar you should learn to use flex-box, it is very useful in different situations. To remove the margins and paddings use *(CSS universal selector) and if you want also use box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url('https://a.cdn-hotels.com/gdcs/production12/d1130/83f1c8c6-e12d-4e69-8433-c5bbc90b5ad6.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 1rem .8rem;
background: #333;
}
.navbar h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
.navbar a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar">
<h1>Welcome to my page</h1>
<div class="nav-links">
Home
About
Contact
</div>
</nav>
</body>
</html>
I've been playing about with media queries in hopes of getting my head around creating a responsive page.
I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?
html {
scroll-behavior: smooth;
}
body{
font-family: 'Nunito';
background: linear-gradient(#47585B, #E8EFF0);
}
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 2px;
/* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0px;
margin-top: 0.1em;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
background-color: #e6763c90;
box-sizing: border-box;
padding: 0 2rem;
box-shadow: 2px 0px 100px 10px #e6763c90;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
a {
color: black;
text-decoration: none;
}
li {
display: inline-block;
padding: 7px;
margin: 0 0 0 2.5em;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 70vh;
padding: 10rem;
text-align: center;
/* border: 1px solid black; */
}
.dropDown{
display: none;
}
/* On hover animations */
li:hover{
transform: scale(1.08);
}
/* Smaller Screen */
#media (max-width: 1100px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: inline;
margin: 2rem;
z-index: 1000;
}
ul {
position: relative;
bottom: 1.4rem;
}
/* Adjust underline on smaller screen */
h1::after{
content: "";
display: none;
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
li::after{
content: "";
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
z-index: 10000;
}
}
/* Mobile */
#media (max-width: 800px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar {
display:none;
margin:1.2rem;
}
/* Adjust underline on mobile */
h1::after{
content: "";
position: absolute;
width: 100%;
margin-top: 0.1em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1 class="">Original Tombstones</h1>
<ul class="navbar">
<li>New Memorials</li>
<li>Additionals</li>
<li>Renovations</li>
<li>Contact Us</li>
</ul>
</header>
<div class="container" id="home">
<h2>About Us</h2>
</div>
<div class="container" id="new">
<h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
<h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
<h2>Renovations</h2>
</div>
<div class="container" id="contact">
<h2>Get In Touch</h2>
</div>
</body>
</html>
I apologise in advance if my code looks messy but I've not got my head round that bit yet!
Cheers!
So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.
But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .
Try to add the following keywords: only, screen on the media queries ex:
#media only screen (max-width: 800px) {
Also add the following meta tag on your html head :
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
https://www.w3schools.com/css/css_rwd_viewport.asp
I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}
I have an icon which should be floating right. But there is always a lot of space between the right side and the icon. I do not why this is the case. But it should be 5px left from the right side. Maybe it has something to do with the fact that I use the google icons like you can see in my code. How can I get the icon completely to the right?
/* Initial body */
body {
left: 0;
margin-bottom: 100px;
overflow: hidden;
position: relative;
}
/* Basic styling */
.header {
background-color: green;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 10px;
padding-left: 25px;
padding-top: 10px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-top: 0px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.material-icons.md-36 {
font-size: 36px;
padding-right: 5px;
color: white;
}
.icons-right {
float: right;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
align-text: center;
}
.nav li {
display: inline-block;
color: red;
}
html {
position: relative;
min-height: 100%;
}
<!doctype html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A page about me">
<meta name="keywords" content="web developer, projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<!-- google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- the icon font -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>
<body>
<div class="body">
<div class="header">
<div class="icon-menu">
<i class="material-icons md-36 icons-right">lock outline</i>
<span class="icons-right">person</span>
<div class="click"><i class="material-icons md-36">menu</i></div>
</div>
</div>
</div>
</body>
</html>
It is on the right, the container is anyway - but it is as wide as the available space...hard to tell since its transparent.
If you give the class="material-icons md-36 icons-right" a width (say 20px) it'll make the icon only fill that width and be on the right.
Here it goes. Just add a width to the lock icon.
body {
left: 0;
margin-bottom: 100px;
overflow: hidden;
position: relative;
}
/* Basic styling */
.header {
background-color: green;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 10px;
padding-left: 25px;
padding-top: 10px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-top: 0px;
margin-right: 5px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.material-icons.md-36 {
font-size: 36px;
padding-right: 5px;
color: white;
}
.icons-right {
float: right;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
align-text: center;
}
.nav li {
display: inline-block;
color: red;
}
html {
position: relative;
min-height: 100%;
}
.lock-icon{
width: 10%;
}
<!doctype html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A page about me">
<meta name="keywords" content="web developer, projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<!-- google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- the icon font -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>
<body>
<div class="body">
<div class="header">
<div class="icon-menu">
<i class="material-icons md-36 icons-right lock-icon">lock outline</i>
<span class="icons-right">person</span>
<div class="click"><i class="material-icons md-36">menu</i></div>
</div>
</div>
</div>
</body>
</html>
This is a pretty simple way to do it:
button {
padding: 1em;
padding-left: 1.5em;
padding-right: 1.5em;
padding: 3em;
width: 400px;
}
button img {
height: 4em;
width: auto;
margin: -1.25em;
margin-left: 2em;
}
button p {
display: inline;
font-size: 2em;
}
The reason why I've used a button here is because by default it centers its contents, though any form of horizontal centering (that also works on blocks).
Tweak the margin and margin-left of the img and the font-size of the p until you're comfortable with the result.
I have done it by giving the .material-icons.md-36 a negative margin-right
.material-icons.md-36 {
font-size: 36px;
padding-right: 0px;
margin-right: -250px;
color: white;
}
Now it´s on the right side.
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.