I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">
Related
I'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
When I zoom my page in and out it works, but homepage button loses its color, it doesn't expand to the right side.
So I have 2 aims:
1) To center selected area (on the picture allotted by red color).
2) To have homepage's green color expanded to the right to the end of the page.
Sorry for my English. Ask me if I didn't make the question clear.
what I'm trying to do
what I have
what makes me cry
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Infusion</title>
<link rel="stylesheet" type="text/css" href="infusion.css">
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="unlist">
<li class="homepage"><p class="parhome">infusion</p></li>
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</body>
</html>
CSS Code
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 2000px;
margin: 0 auto;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
line-height: 75px;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 25px;
padding-left: 25px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
It's not valid HTML to put a p tag into an li element. You can use a span instead.
Apart from that, you are limiting the width of your navbar with this CSS rule .navbar { width: 2000px; [...] }.
So when you zoom out, those 2000px (on a large monitor at full screen view) are less than what the window shows (zoomed!), therefore the green area's left border starts where those zoomed 2000px start.
You might want to change the navbar width setting to 100%.
Different approaches can be used to achieve what you want. But all of these approaches that i can think of, need a little bit hack. Meaning, the solution that i am posting here is not an elegant way of handling things.
The reason for that, is what you aim consists of two things.
Center the navbar
Make the homepage container fill with green to all the way left.
Trying to solve both, creates some conflicts which are not easy to solve. And especially if you also want your page to be responsive.
Before start as #Johannes stated, your code consists of elements which are not valid, therefore i tried to change your code a little bit, as much as i could.
So here is my approach:
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
padding: 0;
}
.cont {
width: 1280px;
display: flex;
margin: 0 auto;
height: 70px;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
width: 1200px;
margin: 0;
margin-left: -950px;
}
ul.homepage a {
color: #fff;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
<div class="navbar">
<div class="cont">
<ul class="homepage">
<li class="nav-elements parhome">infusion</li>
</ul>
<ul class="unlist">
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</div>
NOTE: You can play with numbers, such as margin-left and width for exact results.
I'm just getting back into Web Development and so I'm working on stretching those muscles again. What I wanted to achieve was a Header on top of my vertical menu with the Initials in the background and the full name in the middle of those initials. I was able to do that with the code in codepen, however it quickly becomes broken when resizing the window. I know that is due in part to the position absolute. Is there another way to achieve this effect and have it be scalable, but stay within the lines of the nav?
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li>Home</li>
<li>Scottish Arts</li>
<li>Bagpipes</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
Giving absolute Position to a child that does not have relative parent , will set it's position relating to BODY .
add position:relative; to nav in css , and everything will be OK ;)
http://codepen.io/anon/pen/LEEwOd
I have this clone of google web page I was just did just for practice. I have this problem where on the browser normally the footer expands to 100% with no spaces at the right side of the screen but as soon as I resize the browser, the footer immediately resizes and its width isn't 100%. Also, there is a huge space to the right of the screen and there's an horizontal scroller that becomes active immediately the window is resized. This is also the same when i try to view the page on mobile phones. I will just paste the css code and the html code below so u can see for yourself.
------------------------INDEX.HTML-------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Clone</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<nav>
<ul>
<li>+You</li>
<li>Gmail</li>
<li>Images</li>
<li class="square" title="apps"> </li>
<li><form action="index.html"> <input type="submit" name="Signin" value="Sign in" /></form></li>
</ul>
</nav>
<div id="content">
<img src="images/logo.png" alt="google logo" title=" Google"/>
<h2>Nigeria</h2>
<form action="#" method="post" >
<input type="text" name="search" />
<input type="submit" name="googlesearch" value="Google Search" />
<input type="submit" name="lucky" value="I'm Feeling Lucky" />
</form>
<pre>
Google.com.ng offered in: Harshen Hausa Asụsụ `` <a href="#">Èdè Yorùbá Pidgin
</pre>
</div>
<div id="footer">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul id="second">
<li>Privacy & Terms</li>
<li>Settings</li>
<li>Use Google.com</li>
</ul>
</div>
</body>
</html>
---------------------------------MAIN.CSS----------------------------------------
body,html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
nav ul {
float: right;
list-style: none;
margin: 15px 5px 0 0;
}
nav ul li {
display: block;
float: left;
padding: 8px;
text-align: center;
}
nav ul li a {
text-decoration: none;
font-size: 13px;
color: #333;
}
nav ul li a:hover {
text-decoration: underline;
}
nav ul li.square {
background: url('images/square.png') 0px 0px no-repeat;
margin: 8px 13px 0px 18px;
}
nav ul li.square:hover {
background: url('images/square-black.png') 0px 0px no-repeat;
}
nav input[type=submit] {
color: white;
height: 30px;
width: 72px;
background: #4585F3;
font-weight: 600;
border: none;
border-radius: 2px;
font-size: 14px;
margin-top: -5px;
}
#content {
width: 575px;
height: 400px;
border: 1px solid grey;
margin: 0 auto;
clear:both;
}
#content img { margin: 147px 10px 0 147px; }
#content h2 {
font-size: 16px;
font-weight: bold;
color: #777;
position: relative;
left: 370px;
top: -23px;
}
#content input[type=text] {
width: 572px;
height: 29px;
border: 1px solid #d9d9d9;
}
#content input[type=text]:hover {
border: 1px solid #b2b2b2;
}
#content input[type=text]:focus {
border: 1px solid #4285f4;
}
#content input[type=submit]{
background-color: #f2f2f2;
border: 1px solid #d8d8d8;
text-align: center;
color: #444;
padding: 5px;
border-radius: 2px;
font-size: 11px;
font-weight: bold;
margin-top: 17px;
margin-left: 180px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#content input[name=lucky]{ margin-left: 13px; }
#content input[type=submit]:hover{ border-color: #c6c6c6; box-shadow: 0px 3px 2px -2px #d9d9d9; }
#content pre { font-size: 12px; margin-top: 40px; margin-left: 30px;}
#content a {text-decoration: none; color: #4122DC; }
#content a:hover {text-decoration: underline; }
#footer {
font-size: 13px;
margin-bottom: 0;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-top: 1px solid #e4e4e4;
width: 100%;
height: 43px;
padding: 0;
}
#footer ul { margin: 0; }
#footer ul li { float: left; padding: 15px 18px 10px 10px; }
#footer ul li a { color: #67656A; text-decoration: none; }
#footer ul li a:hover { text-decoration: underline; }
#footer ul#second { float: right; }
Okay. The div with the id called content is where the problem lies because anytime I remove it I don't have the problem with the footer not fitting the width of the entire screen. I have painstakingly changed the different property values that are for the content div and still the problem still exists. I know am probably going to get responses that its because i am not using the media query syntax but that's not the problem because I have designed sites that didn't have media queries in them but when resized the width of the divs always fit span to 100% and like i said anytime i remove the content div the footer div's width stretches to 100% leaving no space at the right side of the screen.
I would really like answers to this problem. Thanks.
Your H2 element, which is 100% width by default, is set to left: 370px for some reason. This is causing the overflow within the #content div and therefore is the reason behind the space over on the right-hand side of the page.
You need to remove the left positioning as it doesn't really make sense there.
As athms said the problem is the h2, change your class to this:
#content h2 {
font-size: 16px;
font-weight: bold;
color: #777;
top: -23px;
text-align:center;
}
I think the easiest way to design pages like this is using the vh (view height) and calc() properties in css.
Basic CSS:
html, body {
height: 100vh;
margin: 0;
padding: 0;
}
nav {
height: 50px;
width: 100%;
}
main {
width: 100%;
height: calc(100% - 100px); /*100px is the height of the nav + footer*/
}
footer {
height: 50px;
width: 100%;
}
Basic HTML:
<body>
<nav>Navigation here</nav>
<main>Main content here</main>
<footer>Footer content here</footer>
</body>
The benefits of this approach are simplicity, it's fully responsive, and all of the elements stay in the flow of the document (nothing absolutely or fixed positioned).
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.