There is a little white gap in between the top of my navigation bar and the bottom of my logo graphics. How can I get these to stick together? Am I missing a selector like header or nav? Maybe I missed a declaration?
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 140px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>products</li>
<li>photos</li>
<li>contact</li>
</ul>
</nav>
</body>
</html>
Just declare the image as display:block and then centre as required.
The image is display:inline by default which means it is affected by whitespace...making the image into block element resolves the issue.
JSfiddle Demo
CSS
header img {
display: block;
margin: 0 auto;
}
You could set the margin of the nav to -4 so:
CSS:
nav {
margin: -4px 0 0 0;
}
But this is not the only way...actually this should be your last resort !! There are several better ways to do this.
Related
I'm new to HTML and CSS and am trying to make a menu bar. I placed a navigation bar inside a div assuming that it would kind of be in the center. Instead, it appears to sit on the bottom. Also, how could I position the navigation bar so it's not just floating to the left or the right.
Side question, how can I have it so the menu bar completely extends to the edge of the screen. Like the one at the top of this site.
Here's the code:
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Is this what you want?
I have added margin:0; to the ul.
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</body>
</html>
Other ways this could have been done would have by messing with top and bottom margins(depending on what specific ratios you want). Using this way will get you specifically what alignment you want vertically.
I had tried a lot to bring these text to center but I didn't succeed, so please someone help me out of this. The problem is I am trying to bring only the text to center and rest of them must have be in same format.
Html code:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main page</title>
<link rel="stylesheet" type="text/css" href="cssstyles1.css" /></head></head>
<body>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>services</li>
<li>contactus </li>
</ul>
</body>
</html>
css code:
ul {
list-style-type: none;
margin-top: 05px;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
float: left;
text-align:center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 08px 16px;
text-decoration: none;
border:10px;
display:inline-block;
}
li a:hover:not(.active) {
background-color: #cccccc;
color:black;
}
.active {
background-color: #ffffff;
}
You should add the left:50% to move your listed objects. Change your css like this.
li {
float: left;
text-align:center;
left:50%;
}
I am building my own portfolio/company site and my code is below I try to make it full width but it does not go full width. I am writing the code in html5 and css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TECH-EXPERTS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Our Work</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
nav{
background-color: black;
border-radius: 5px;
display: block;
overflow: hidden;
width: 90%;
}
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: red;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav a:hover{
color: blue;
}
First off, assuming that you want the navbar to span the entire width of the window, you need make sure that you're removing the default margin that is placed on the body element (if you are not using a css reset of some kind that already takes care of that).
Try:
body {
margin: 0;
}
Now remove the width: 90%; that's on your navbar. That should get you pointed in the right direction.
Here's a Codepen of that in action.
So I am trying to make a web tutorials page just to help out my skills and I cannot seem to figure out why there is a space between the bottom of my navigation bar and the top of my first header? If anyone could possibly tell me what I wrote that would separate these two that would be amazing!
body{
margin: 0;
padding: 0;
background: #cccccc;
}
.nav ul{
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li{
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a{
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover{
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active{
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px){
.nav li{
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header{
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="tutorials">HTML</li>
<li class="about">CSS</li>
<li class="contact">CONTACT</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
It's because the h1 element has a default margin set by the user agent stylesheet of the browser.
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
You have to remove this margin.
.header h1 {
margin-top: 0;
}
Obligatory CSS reset link.
body {
margin: 0;
padding: 0;
background: #cccccc;
}
.header h1 {
margin-top: 0;
}
.nav ul {
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a {
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover {
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active {
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header {
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a>
</li>
<li class="tutorials">HTML
</li>
<li class="about">CSS
</li>
<li class="contact">CONTACT
</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
To fix that tiny issue is easy, to use a global reset framework is probably easy too. What I would suggest, you should study the basic default browser stylesheet rules, that will bring you CSS skills to the next level.
You can basically go and read through all the lines:
Mozilla Firefox etc
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
Apple Safari etc http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
They are quite similar, I suggest to read Mozilla's first. We don't have to remember all of them, just the most common ones will be enough, such as the heading, paragraph, list and blockquote etc.
css:
h1
{
margin:0;
}
there is auto margin in h1 tag which you need to make it 0
Hope the above solved the issue.
Just wanted to follow up to ask if you're comfortable using the web inspector tools.
Sometimes you can try a million things with no luck, but inspect the area and it jumps right out. Troubleshooting issues like this is so much easier to do in the inspector.
I really like the ones built into Chrome, but everyone has a preference.
This article on TeamTreehouse.com blog is a pretty good intro!
This navigation bar rearranges itself when the browser window is re-sized, all of the buttons go from being in a straight horizontal line to stacking on top of each other, one by one, as the window is made smaller and smaller. How can they be set to stay in place and stick nicely to the bottom of the header logo, no matter what size the window is?
Screenshot of problem:
http://s29.postimg.org/3tnroxls7/Screenshot1.png
Screenshot of goal:
http://s24.postimg.org/vzuruvqb9/Screenshot2.png
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
header img {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 139px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>products</li>
<li>photos</li>
<li>contact</li>
</ul>
</nav>
</body>
</html>
If I get right, you just want the menu to stay the same size and to stay in line, right? So you could just add a width to your <ul>
ul {
list-style-type: none;
width: 978px;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
See fiddle here.
When you are talking about resizing and respsonsivness you should already be thinking about widths in percentages. For example you have 6 li-s which u are trying to fit in a 100% width...Which means each li should have 16.66% width. In theory this should all work and wrap up nicely, but because of whitespace your problem will persist. To fix that you need to fight the whitespace. refference here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
nav{
width: 1000px;
margin: 0 auto;
}