I made this bar (nav2) to be scrollable if it's not enough screen space, but it seems to be very weird (also because it's my first time I'm doing such thing as a horizontal scrollable bar), the ul is going somewhere in the top, and doesn't come down, I tried float: left, it works, but the ul is not centered in the middle (that's important!)
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
#nav1 {
width: calc(100% / 3);
height: 40px;
line-height: 40px;
background-color: black;
float: left;
}
#nav2 {
width: calc(100% / 3);
height: 40px;
background-color: red;
float: left;
overflow: scroll;
}
#nav3 {
width: calc(100% / 3);
height: 40px;
background-color: yellow;
float: left;
}
#nav2 ul {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
height: 40px;
float: left;
}
#nav2 ul li {
display: inline;
color: black;
text-decoration: none;
}
#nav2 ul a {
padding: 5px 17px;
text-decoration: none;
color: white;
}
#keyframes sin {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
#yvelogo {
margin-left: 17px;
padding: 0;
height: 20px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
a #yvelogo {
border: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>yvemiro</title>
<meta name="author" content="hate">
<meta name="description" content="description for gogel">
<meta name="keywords" content="yve,miro,blog">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
</head>
<body>
<div id="navbar">
<div id="nav1"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></div>
<div id="nav2">
<ul>
<li>Blog</li><li>Stuff</li><li>Me</li><li>Ask</li><li>Archive</li>
</ul>
</div>
<div id="nav3"></div>
</div>
</body>
</html>
'float: left;' will align your divs (nav1, nav2, nav3) side-by-side inside 'navbar', unless you want them side by side.
'navbar' does not have a top margin. Therefore, it aligns itself all the way on top. If you want the navbar to go down a bit, you will need to create a class or div inside your .css file, and give it a top margin.
I have changed your 'nav2' css values as follows:
#nav2 ul {
width: calc(100% / 3);
height: 80px; /* changed 40px to 80px */
background-color: red;
float: left;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap; /* added nowrap */
}
If you double the number of your unordered list items, you will see what I mean.
Is this what you wanted to do?
$(document).ready(
function() {
$("#nav2").niceScroll();
}
);
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
#nav1 {
width: 33%;
height: 40px;
line-height: 40px;
background-color: black;
float: left;
}
#nav2 {
width: 34%;
height: 40px;
background-color: red;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav3 {
width: 33%;
height: 40px;
background-color: yellow;
float: right;
}
#nav2 ul {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
}
#nav2 ul li {
display: inline;
color: black;
text-decoration: none;
}
#nav2 ul a {
padding: 5px 17px;
text-decoration: none;
color: white;
}
#keyframes sin {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
#yvelogo {
margin-left: 17px;
padding: 0;
height: 20px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
a #yvelogo {
border: 0;
}
#media (max-width:990px) {
#nav2 {
overflow-y: hidden;
overflow-x: scroll;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>yvemiro</title>
<meta name="author" content="hate">
<meta name="description" content="description for gogel">
<meta name="keywords" content="yve,miro,blog">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js">
</script>
</head>
<body>
<div id="navbar">
<div id="nav1"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></div>
<div id="nav2">
<ul>
<li>Blog</li><li>Stuff</li><li>Me</li><li>Ask</li><li>Archive</li>
</ul>
</div>
<div id="nav3"></div>
</div>
</body>
</html>
This should fix it up a bit. If you NEED vertical centering, I can revise it once more.
Edit:
Added custom scrollbar plugin and jquery. More information about editing the scrollbar itself can be found at the plugin's official website Here
Related
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;
}
I'm trying to stack three square-shapes on top of each other, with a h1 placed horizontally next to them, different variations of the display selector, doesn't seem to work, and when it's set up "correct" the h1 "eats" the square shapes.
Html
<div class="squares">
<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
</div>
<h1> korius</h1>
Css
h1 {
color: #2d3436;
font-size: 72px;
display: inline;
}
.squares {
display: inline;
}
.squares > div {
display: block;
height: 10px;
width: 10px;
}
#square1 {
background-color: #e67e22;
}
#square2 {
background-color: #2980b9;
}
#square3 {
background-color: #27ae60;
}
Js-fiddle: All the code
Image of wanted result
Minor changes can help you.. So the parent container of the squares should be displayed inline-block so that it can be placed side by side to the text 'korius'. And all the div under squares needs to be displayed block so that they are showing vertically.
.squares {
display: inline-block;
}
.squares > div {
display: block;
margin-top: 10px;
height: 10px;
width: 10px;
}
Check snippet below:
html, body {
width: 100%;
height: 100%;
background: #ecf0f1;
font-family: 'Work Sans', sans-serif;
margin: 0;
}
h1 {
color: #2d3436;
font-size: 72px;
display: inline;
}
.squares {
display: inline-block;
}
.squares > div {
display: block;
margin-top: 10px;
height: 10px;
width: 10px;
}
#square1 {
background-color: #e67e22;
}
#square2 {
background-color: #2980b9;
}
#square3 {
background-color: #27ae60;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>korius</title>
</head>
<body>
<div class="squares">
<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
</div>
<h1> korius</h1>
</body>
</html>
You can also test it here.
I have an unordered vertical list as a navigation bar that is changing to a horizontal list on mobile devices. How do I prevent the list from switching to vertical and stay horizontal within the div element it's in.
Side note: the resulting code snippet is showing the list as vertical, but I suspect it's because the window is being perceived as mobile given it's width
Edit: there also appears to be a small scrollable gap to the right of the screen on mobile.
body {
background-color: #E5E5E5;
}
#nav_bar {
background-color: #2F2F2F;
height: 60px;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#nav_logo {
background-image: url('../img/nav_logo.png');
width: 250px;
height: 40px;
top: 15%;
left: 10%;
position: absolute;
}
#media (max-width: 629px) {
div#nav_logo {
background-image: url('../img/nav_logo_mobile.png');
width: 60px;
height: 39px;
}
}
ul.nav {
list-style-type: none;
left: 70%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
}
li.nav {
float: left;
}
li.nav a {
font-family: 'Roboto Condensed', sans-serif;
display: block;
color: white;
text-align: center;
padding: 18px;
text-decoration: none;
}
li.nav a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald|PT+Sans" rel="stylesheet">
</head>
<body>
<div id="nav_bar">
<div id="nav_logo"></div>
<ul class="nav">
<li class="nav">HOME</li>
<li class="nav">CONTACT</li>
<li class="nav">ABOUT</li>
</ul>
</div>
</body>
</html>
I think the problem is with "left: 70%". On mobile devices the space is just not enough to keep the links in a line.
Give them more space on small screens. I would recommend to set the right value instead of left, btw. On small screens you could just set it to right: 0.
I found some code on w3schools and tried to implement it in your code. This is what I came up with:
ul.nav {
position: relative;
overflow: hidden;
background-color: #333;
}
li.nav {
float: left;
}
li.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
I try to make navigation bar with image centered in the middle and text on the sides of image in the middle, but the problem is I can not create at least a little working thing. My current code to example is below. Any suggestions how to fix ?
<meta name="viewport" content="width=device-width, initial-scale=1">
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif; margin:0; padding: 0;}
.topBar {
overflow: hidden;
background-color: #333;
height: 45px;
position: relative;
width: 100%;
}
.topBar a {
vertical-align: middle;
float: left;
overflow: auto;
display: inline-block;
padding: 2px 16px;
font-family: courier;
font-size: 20px;
color: #f2f2f2;
transition: 0.6s ease;
}
.topBar a:hover {
background-color: rgba(0,0,0,0.5);
}
.topBar-logo {
position: absolute;
left: 50%;
}
.topBar-textLeft {
float: right;
}
.topBar-textRight {
float: left;
}
<div class="topBar">
<div class="topBar-textLeft">
<a>Informacie</a>
<a>Domov</a>
</div>
<img src="http://i.imgur.com/ZbKfy4E.png" class="topBar-logo">
<div class="topBar-textRight">
<a>Album</a>
<a>Kontakt</a>
</div>
</div>
display: flex; justify-content: center; align-items: center; on the parent will create a row that is centered horizontally and vertically. You can remove all of the positioning from the children, too.
<meta name="viewport" content="width=device-width, initial-scale=1">
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif; margin:0; padding: 0;}
.topBar {
overflow: hidden;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.topBar a {
vertical-align: middle;
float: left;
overflow: auto;
display: inline-block;
padding: 2px 16px;
font-family: courier;
font-size: 20px;
color: #f2f2f2;
transition: 0.6s ease;
}
.topBar a:hover {
background-color: rgba(0,0,0,0.5);
}
<div class="topBar">
<div class="topBar-textLeft">
<a>Informacie</a>
<a>Domov</a>
</div>
<img src="http://i.imgur.com/ZbKfy4E.png" class="topBar-logo">
<div class="topBar-textRight">
<a>Album</a>
<a>Kontakt</a>
</div>
</div>
you want to create a div around the image and then assign 40% or some % that will cover the left and right side with the remainder going to the img div. then get rid of the class on the img.
<meta name="viewport" content="width=device-width, initial-scale=1">
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif; margin:0; padding: 0;}
.topBar {
overflow: hidden;
background-color: #333;
height: 45px;
position: relative;
width: 100%;
}
.topBar a {
vertical-align: middle;
float: left;
overflow: auto;
display: inline-block;
padding: 2px 16px;
font-family: courier;
font-size: 20px;
color: #f2f2f2;
transition: 0.6s ease;
}
.topBar a:hover {
background-color: rgba(0,0,0,0.5);
}
.topBar-logo {
position: absolute;
left: 50%;
}
.topBar-textLeft {
float: right;
}
.topBar-textRight {
float: left;
}
<div class="topBar">
<div class="topBar-textLeft" style='width:40%'>
<a>Informacie</a>
<a>Domov</a>
</div>
<div style='width:20%;display:inline-block;text-align:center'>
<img src="http://i.imgur.com/ZbKfy4E.png" >
</div>
<div class="topBar-textRight" style='width:40%'>
<a>Album</a>
<a>Kontakt</a>
</div>
</div>
#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.