I got a quick question. I tried to find out everything myself on the forum but no luck, so I will be straightforward. I created this navbar, but faced a problem. When I zoom in, it zooms in perfectly, doesn't clash or anything, but it doesn't scroll left or right (and at the same time it doesn't show the entire navigation bar, when zoomed in).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='design.css' />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="brain.js"></script>
<body>
<div class="wrap">
<div id="navigation">
<ul>
<li> Home </li>
<li> Top rated </li>
<li> Suggestions </li>
<li> Latest news </li>
<li> About </li>
<li> Contact us </li>
</ul>
</div>
<div >
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
.wrap {
width: 80%;
margin: 0 auto;
height: 800px;
}
#navigation {
height: 40px;
font-size: 14px;
font-weight: bold;
text-shadow: 3px 2px 3px #333333;
width: 100%;
min-width: 800px;
}
#navigation a {
text-decoration: none;
color: #00F;
padding: 13px 12px 12px 12px;
color: white;
}
#navigation li {
display: inline-block;
}
#navigation ul {
background-color: #3d3f45;
text-align: left;
padding: 10.5px 0px;
margin: 0px;
}
#navigation ul li:hover a {
background-color: rgb(148, 145, 145)
}
The element that's dictating whether or not there's a scrollbar (in your case) is the <html> element. If you were to check out the CSS file link you've provided in the line:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
You'd see something like this: html{overflow-x:hidden}
This line is causing the issue. You'll have to write some CSS that overrides it. I went ahead and created a demonstrational codepen that shows the fix. See link below:
http://codepen.io/anon/pen/KrybjR
Related
My hover code is only working on a specific zoom size, which is 67% for all of the the boxes. However, when I zoom to 80% only two work. When I zoom in to 100% only one works. I will provide the parts that are used. I need my code to show where the boxes are for main-nav in different zoom-ins please help. Here is the HTML & CSS code thank you:
HTML
...
<div class="row">
<div class="logo">
<img src="LogoSmall.jpg">
</div>
<ul class="main-nav">
<li class="active"><a>Sell Your House</a></li>
<li>How It Works</li>
<li>Compare</li>
<li>About</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
<div class="title">
<h1>Sell Your House Today<br>
Get Started Now...</h1>
<div class="button">
Get Started
Learn More
</div>
</div>
</header>
CSS
...
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(HouseJPEG.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 140px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
Im kind of new to programming and to this website. I copied your code and it worked fine for me. Im using Google Chrome right now and no matter how much I zoom in, the hover effect always does its job. You could try specifying the viewport in the area by:
<!DOCTYPE html>
<html>
<head>
<title>Your Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
!DOCTYPE html is to tell the browser to use HTML5 but what you should really be looking at is the meta viewport. I hope this helps
I am trying to make a horizontal menu
but these empty blocks are between my menu items (aprox 50px x 50px)
I used chrome inspect tool and these random blank anchors are there with nothing inside and ==$0 at the end
.navbar{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
}
.navbar a{
float: left;
display: block;
text-align: center;
padding: 30px 25px;
border: none;
margin: none;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background: #54d5f2;
color: black;
}
<html>
<head>
<title>I Want Flowers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>
Store Locations
Contact Us
</div>
</body>
</html>
Its because you close your <a> like this: <a/> instead of </a> here:
<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>
I think you make mistake while closing the anchor tags
<a href="./homepage.html">Home Page<a/>
to
Home Page
Replace you HTML by this HTML
<div class="navbar">
Home Page
Products
Store Locations
Contact Us
</div>
That was the after effects of not closing the anchor tag as it should have been.
Just change <a/> to </a> and you're good to go.. :)
.navbar{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
}
.navbar a{
float: left;
display: block;
text-align: center;
padding: 30px 25px;
border: none;
margin: none;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background: #54d5f2;
color: black;
}
<html>
<head>
<title>I Want Flowers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
Home Page
Products
Store Locations
Contact Us
</div>
</body>
</html>
I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.
However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.
Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.
I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.
Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.
Thanks!
body{
padding: 0px;
margin: 0px;
}
.navbar{
height: 50px;
width: 100%;
background: #b4cef7;
}
.logo{
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul{
list-style-type: none;
}
.navbar ul li{
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a{
text-decoration: none;
color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Simple CSS Navbar</title>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You have a set height on the navbar and a block level element, forcing the navbar to a new line.
There's many ways you could have the elements on the same line, such as floating or displaying inline-block.
Here's a simple demo of using inline-block:
body {
padding: 0px;
margin: 0px;
}
.navbar {
height: 50px;
width: 100%;
background: #b4cef7;
}
.navbar>* {
display: inline-block;
vertical-align: top;
}
.logo {
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar ul li {
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a {
text-decoration: none;
color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.
Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!
How can i shorten the white space?
here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Larry Rosenburg Official Website </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home </li>
<li> Lincoln </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
</header>
<div class="clearfix"> </div>
<div id="title">
<p>Larry Rosenburg </p>
</div>
<div id="profile">
<img src="picture.jpg" width="25%" alt="" id="profile-pic" >
</div>
</body>
<footer>
</footer>
</html>
And here is the css:
body{
width: 100%;
}
#logo_picture{
margin-left: 80px;
}
#logo img, #logo nav{
float: left;
}
#logo nav{
line-height: 120px;
margin-left: 250px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline;
}
nav a{
color: black;
font-size: 20px;
font-family:'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration:none;
}
nav a, nav a:visited {
color: black;
}
nav a.selected, nav a:hover{
color: grey;
}
#title{
font-size: 70px;
margin-top: 70px;
margin-bottom: 0;
text-align: center;
font-family: 'Anton','sans-serif';
}
#profile-pic{
border-radius: 30px;
background: url('picture.jpg');
margin: 30px auto;
display: block;
padding: 0;
border-top: 0;
}
.clearfix {
clear: both;
}
Your CSS margin: 30px auto; of #profile-pic sets the top and bottom margin as 30px. That is the white space you are seeing. Either set the margin individually or set it all at once. Don't use the current style.
Before posting questions like this, please try to inspect the html element using any Web Browser. All web browsers shows the layout and margins of elements. It would help you in solving issues faster.
I have edited this. now you may try this because it works fine in my device.
#profile-pic {
background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
border-radius: 30px;
border-top: 0 none;
display: block;
margin: -60px auto;
padding: 0;
}
[here the screenshot][checked]
Try this.
<p style="margin-bottom:0px">Larry Rosenburg </p>
There might be some margin-top on the image as well.
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!