I need some help. I have created an image of a nav bar. I positioned all the items using CSS individually. I would like to find out if there is a way to configure the CSS code so that I could move the rectangle with everything inside at once. I would appreciate any help. Thank you in advance.
Demo:
.numbersystem1 {
font-family: tahoma;
position: absolute;
top: 85px;
left: 600px;
}
.rectangle {
width: 530px;
height: 60px;
border: 1px solid #000;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.nvbr {
font-family: tahoma;
font-size: 15px;
position: absolute;
top: 87px;
left: 631px;
}
.nvbrleft {
font-family: tahoma;
font-size: 15px;
position: absolute;
top: 165px;
left: 640px;
}
.nvbrright1 {
font-family: tahoma;
font-size: 15px;
position: absolute;
top: 165px;
left: 940px;
}
.nvbrright2 {
font-family: tahoma;
font-size: 15px;
position: absolute;
top: 165px;
left: 1100px;
}
.nvbrright3 {
font-family: tahoma;
font-size: 15px;
position: absolute;
top: 165px;
left: 1020px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="articles.css">
</head>
<body>
<p class="numbersystem1"> 1.</p>
<p class="nvbr"> Nav Bar</p>
<div class="rectangle"></div>
<p class="nvbrleft"> Yourwebsitename</p>
<p class="nvbrright1"> Home</p>
<p class="nvbrright2"> idea3</p>
<p class="nvbrright3"> about</p>
</body>
</html>
Related
I am having some issues with this DIV not getting centered.
I am sure it is something with CSS,
I need some corrections to CSS below and to get rid of unnecessary CSS statements if not needed
I would like the div to be centered and 75% wide
Thanks,
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
margin: auto;
margin-left: auto;
margin-right: auto;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 95%;
height: 90%;
overflow: auto;
align-self: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMT Explorer</title>
<link rel="stylesheet" href="explorer.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="main_div" style="position: relative; "></div>
<div id="popup_factory" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseFPopup()">×</a>
</div>
<div id="popup_stations" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseSPopup()">×</a>
</div>
<script type="text/javascript" src="explorer.js"></script>
</body>
</html>
If it's a popup, it should propbably have position: fixed, not absolute. And then, these settings should work:
.css_main_popup {
visibility: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 90%;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
overflow: auto;
transition: opacity 10ms;
}
So the important settings for centering (horizontally AND vertically) are position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); (no margin, no align-self)
That would result in something like this (visibility excepted):
.css_main_popup {
transition: opacity 10ms;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 75%;
height: 90%;
overflow: auto;
background: red;
}
<div class="css_main_popup"></div>
Just using left and position: absolute you are able to push the div to the center of the screen.
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
font-weight: bold;
text-decoration: none;
color: #333;
border: 1px solid black;
width: 75%;
left: 15%;
font-size: 30px;
padding: 10px;
background: #fff;
border-radius: 5px;
height: 90%;
overflow: auto;
}
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
</body>
</html>
Here's the css to help
font-size: 15pt;
width: 500px;
height: 500px;
background-image: url("bto.jpg");
filter: blur(8px)
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
body, html{
width: 100%;
height: 100%;
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
background-image:url('https://placeimg.com/1000/1000/people');
width:100%; height:100%;
-webkit-filter: blur(5px);z-index:0;
position:absolute;
background-position: center;
background-size:cover;
z-index:-10;
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="bgImageContainer">
</div>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.
body {
margin:0;
padding:0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
background-size: cover;
height:100%;
z-index: -1000; /* Keep the background behind the all your content */ height: 20%; width: 20%;
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(1px);
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.
That way only the image gets blurred, not everything else.
body {
font-size: 15pt;
width: 500px;
height: 500px;
}
body::before {
background-image: url("https://picsum.photos/id/1015/1024/768");
filter: blur(8px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: '';
z-index: -1;
}
.trbp {
width: 500px;
height: 40px;
border: black;
}
.trb {
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
display: inline-block;
}
.btp {
position: relative;
top: 120px;
left: 30px;
}
.bth {
position: relative;
top: 100px;
left: 30px;
}
.blb {
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
I create an input, but in Chrome and MS Edge it will show a ugly black borders/frame around the input if you click on that input. In Firefox the frame/border would not appear. How can I remove this frame/borders in Chrome/ MS Edge?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="EDT1"
style="display: block; margin: 0px; padding: 0px; position: absolute; top: 15px; left: 15px; height: 26px; min-height: 26px; max-height: 26px; width: 200px; min-width: 200px; max-width: 200px; z-index: 183; background-color: transparent; visibility: visible; border-width: 0px; border-style: solid;">
<input type="text" value="Text" title="" readonly=""
style="display: block; margin: 0px; position: absolute; height: 26px; min-height: 26px; max-height: 26px; resize: none; border-width: 0px; font-family: Arial; font-size: 12pt; line-height: 12pt; color: rgb(0, 0, 0); cursor: text; background-color: transparent; left: 0px; top: -2px; width: 194px; min-width: 194px; max-width: 194px; padding: 2px 3px 0px; text-align: left;">
</div>
</body>
</html>
Please add the following css:
input:focus{
outline: none;
}
This will remove the default and add a border similar to the on on Firefox. Also, practice separation of structure from presentation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#EDT1 {
display: block;
margin: 0px;
padding: 0px;
position: absolute;
top: 15px;
left: 15px;
height: 26px;
min-height: 26px;
max-height: 26px;
width: 200px;
min-width: 200px;
max-width: 200px;
z-index: 183;
background-color: transparent;
visibility: visible;
border-width: 0px;
border-style: solid;
}
input {
display: block;
margin: 0px;
position: absolute;
height: 26px;
min-height: 26px;
max-height: 26px;
resize: none;
border-width: 0px;
font-family: Arial;
font-size: 12pt;
line-height: 12pt; color: rgb(0, 0, 0);
cursor: text;
background-color:
transparent;
left: 0px;
top: -2px;
width: 194px;
min-width: 194px;
max-width: 194px;
padding: 2px 3px 0px;
text-align: left;
}
input:focus{
outline: none;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="EDT1">
<input type="text" value="Text" title="" readonly="">
</div>
</body>
</html>
I have the following problem. When I try to position my button using
margin: 0 auto;
It sticks the button to the left. If I type any number eg.
margin: 0 100px;
it does work. I am curious what I am missing? I have
display: block;
width: 200px;
I would like to add that I need to position this button at the bottom of the container. 3% of the bottom edge of the screen and in the middle of the screen.
this is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
and CSS
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
bottom: 3%;
width: 200px;
height: 46px;
margin: 0 auto;
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
Thank you in advance
Robert
Its because of the position absolute
if you want to center it try adding this to your code:
.btn{
left: 50%;
transform: translateX(-50%);
}
The reason why your margin: auto; does not work is because your button has a position: absolute;
Of course you want to solve this without having to change the elements' position. With position: absolute; you can use the left and right properties:
left: 0; and right: 0; this will center an element with the position of absolute relative to (the width of) its parent that has a position of relative.
View the Code Snippet below in Full Page to have a better view.
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
left: 0; /* added */
right: 0; /* added */
bottom: 3%;
width: 200px;
height: 46px;
margin: 0 auto;
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
As VXp already wrote in his comment: To horizontally center an absolutely positioned element inside its container, you need left: 50% (which moves its left border to the middle) and transform: translateX(-50%) (which moves the element back left by half of its own width) - see the snippet below, where those are the only changes to your given code. (and margin: 0 autowon't do anything in this case, since it's position: absolute)
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
bottom: 3%;
width: 200px;
height: 46px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
For some reason my div Username is not appearing.
Im trying to create a website and i cant seem to figure out what is wrong with my code. If there is not something wrong with my code can it be netbeans? Thank you!
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#header{
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #002EE4;
border-radius: 3px;
}
#logo{
width: 80px;
height: 75px;
z-index: 1;
}
#loginpic{
position: absolute;
left: 700px;
top: 105px;
width: 215px;
height: 215px;
}
#name{
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#nm-input{
font-size: 18px;
position: relative;
margin-left: 700px;
margin-bottom: 500px;
bottom: 25px;
background-color: rgb(220,220,220);
}
#surname{
z-index: 1;
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#username{
}
</style>
</head>
<body>
<div id="header"></div>
<img id="logo" src="BrainNetwork.png"/>
<img id="loginpic" src="BrainNetwork.png"/>
<form>
<div id="name">Name:</div>
<input id="nm-input" type="text" name="Name"/>
<div>Username</div>
</form>
</body>
now it's working check it out
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#header{
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #002EE4;
border-radius: 3px;
}
#logo{
width: 80px;
height: 75px;
z-index: 1;
}
#loginpic{
position: absolute;
left: 700px;
top: 105px;
width: 215px;
height: 215px;
}
#name{
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#nm-input{
font-size: 18px;
position: relative;
margin-left: 700px;
margin-bottom: 500px;
bottom: 25px;
background-color: rgb(220,220,220);
}
#surname{
z-index: 1;
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#username {
min-width: 50%;
min-height: 50%;
background: red;
z-index: 10;
}
</style>
</head>
<body>
<div id="header"></div>
<img id="logo" src="BrainNetwork.png"/>
<img id="loginpic" src="BrainNetwork.png"/>
<form>
<div id="name">Name:</div>
<input id="nm-input" type="text" name="Name"/>
<div id="username">Username</div>
</form>
</body>
It is showing the Field, just try scrolling to the top right corner of your browser. And also modify your constraints.
Replace your css with.
#name{
position: r;
font-size: 18px;
}
#nm-input{
font-size: 18px;
position: relative;
bottom: 25px;
background-color: rgb(220,220,220);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#header {
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #002EE4;
border-radius: 3px;
}
#logo {
width: 80px;
height: 75px;
z-index: 1;
}
#loginpic {
position: absolute;
left: 700px;
top: 105px;
width: 215px;
height: 215px;
}
#name {
position: relative;
margin-left: 0px;
margin-top: 20px;
font-size: 18px;
}
#nm-input {
font-size: 18px;
position: relative;
margin-left: 50px;
margin-bottom: 50px;
bottom: 25px;
background-color: rgb(220, 220, 220);
}
#surname {
z-index: 1;
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#username {}
</style>
</head>
<body>
<div id="header"></div>
<img id="logo" src="BrainNetwork.png" />
<img id="loginpic" src="BrainNetwork.png" />
<form>
<div id="name">Name:</div>
<input id="nm-input" type="text" name="Name" />
<div>Username</div>
</form>
</body>
</html>
Your Code is working fine. I have just changed the margin-left and margin-top property's value.
I think you want to embed some form. Better use table tag for that.
You have margin-bottom: 500px; in #nm-input. Your username is 500px below, probably you just don't see it.