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.
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 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 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;
}
Here's what it currently looks like:
What's supposed to be the header is currently transparent over the body image. I'm trying to get it to sit behind where it says "NEWS" at the top. The header image is currently inserted with <img src="https://i.imgur.com/wLTnUyF.png"> and I don't know what to add to reposition it.
(I can also add additional details if this isn't enough to get the answer I'm looking for.)
Edit: Here's the whole code: PASTEBIN
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
display: none;
}
.gr-top .gr {
padding-left: 0 !important;
}
/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px; } */
h3 {
font-size: 25px;
text-align: center;
color: #c8b46e;
background-repeat: no-repeat;
background-size: 400px;
background-position: center center;
padding: 20px;
background-image: url("https://i.imgur.com/RbBgBbv.png");
}
.scrollbox {
height: 360px;
width: 420px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.scrollbox2 {
height: 100px;
width: 360px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.gr-body .gr .grf-indent .text {
max-width: 500px;
}
.gr-body .gr .grf-indent .bottom {
position: relative;
bottom: 160px;
left: 10px;
color: #fff;
}
.gr-body .gr .grf-indent .bottom a {
color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
color: #c8b46e;
}
a:hover {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
.container {
position: relative;
}
.bottomleft {
position: relative;
top: 60px;
left: 10px;
font-size: 18px;
}
.topright {
position: relative;
bottom: 444px;
left: 510px;
font-size: 18px;
}
.top {
position: absolute;
top: 0px;
width: 500px;
}
img.back {
margin-top: 70px;
width: 940px;
height: 540px;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrap'>
<h3>NEWS</h3>
<img class="top" src="https://i.imgur.com/wLTnUyF.png">
<img class="back" src="https://i.imgur.com/iYr6KIy.png">
</div>
</body>
</html>
I am not sure what you are trying to do. But if you are trying to add an image to the header, you should do:
<!DOCTYPE html>
<html>
<header>
<img src="https://i.imgur.com/wLTnUyF.png">
</header>
<body>
<img src="bodyimage.png">
</body>
</html>
If that doesn't work, remember to actually download the image and upload it into your workspace.
I ended up figuring up a way to get the results I wanted.
What I did is I added a background specifically to .gr-top .gr h2 and then change the alignment on the text.
Now my journal skin looks like this ; Updated Preview
.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}
Sorry for the bad phrasing on the question. I'll try to be clearer next time.
#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.