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>
Related
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>
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;
}
I'm trying to keep a custom shape of a container (the parent div) to not change when the posts (the child div), are scrolled up.
This is what it's supposed to look like all the time.
This is what it looks like when the posts are scrolled up.
I'd like the cut off corner to stay that way. I've tried using z-index for each element, but that doesn't seem to help.
Any help would be appreciated!
#container {
background: {
color: background
}
;
width: 400px;
height: 435px;
margin-left: 20px;
margin-top: 30px;
overflow-x: hidden;
overflow-y: scroll;
z-index: 12;
display:inline-block;
position: absolute;
}
#container:before {
content: '';
top: 0;
right: 0;
border-top: 70px solid {
color: border
}
;
border-left: 70px solid transparent;
background-color: transparent;
width: 0;
z-index: 999;
position: absolute
}
#border {
background: {
color: border
}
;
width: 450px;
height: 490px;
margin-left: 800px;
margin-top: 200px;
z-index: 10;
position: absolute;
}
#border:before {
content: '';
top: 0;
right: 0;
border-top: 60px solid {
color: background
}
;
border-left: 60px solid transparent;
background-color: transparent;
width: 0;
z-index: 10;
position: absolute;
}
.posts {
max-width: 400px;
padding-bottom: 30px;
margin-left: 3px;
margin-right: 3px;
margin-bottom: 30px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
background-color: white;
overflow-x: hidden;
position: relative;
z-index: 11;
}
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description}
<meta name="description" content="{MetaDescription}" /> {/block:Description}
<meta name="color:background" content="#FFFFFF" />
<meta name="color:border" content="#000000" />
</head>
<body>
<div id="border">
<div id="container">
{block:Posts}
<div class="posts">
...
</div>
</div>
</div>
</body>
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.
I am practicing html and css and want to make a website, but the text isn't scaling properly.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
</head>
<body>
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text">Home</p>
</div>
<div id="home-div-button"></div>
</div>
</body>
</html>
css:
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
background-size: cover;
}
html, body {
height: 100%;
}
#huge {
width: 85.8%;
height: 100%;
position: relative;
background-color: rgba(255, 103, 48, 0.5);
left: 7%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 77.5%;
height: 22.5%;
border-radius: 70px;
top: 2.5%;
left: 11%;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 19.5%;
height: 12%;
border-radius: 30px;
color: #FFFFFF;
position: fixed;
left: 12%;
top: 6%;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 20%;
height: 12%;
border-radius: 30px;
z-index: 1;
top: 8%;
left: 12.5%;
position: fixed;
}
#home-text {
font-size: 3.3em;
font-family: Comfortaa;
text-align: center;
line-height: 1.3em;
top: 2.3%;
left: 13%;
}
When I resize my browser everything scales except the text, which starts going out of the button that it is on top of.
I can't find an easy answer for this anywhere. All I need is a technique that I can repeat for other situations that will make the text scale with everything else.
body { background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); background-repeat: no-repeat; background-size: cover; } html, body { height: 100%; } #huge { width: 85.8%; height: 100%; position: relative; background-color: rgba(255, 103, 48, 0.5); left: 7%; } .navbar div, .navbar div p { position: fixed; } #navbar-background { width: 77.5%; height: 22.5%; border-radius: 70px; top: 2.5%; left: 11%; background-color: rgba(255,255,255, .2); z-index: 1 } #home-div { background-color: rgb(249, 162, 100); width: 19.5%; height: 12%; border-radius: 30px; color: #FFFFFF; position: fixed; left: 12%; top: 6%; z-index: 2; border-top: 1px white solid; border-left: 1px solid white } #home-div-button { background-color: rgb(200, 131, 78); width: 20%; height: 12%; border-radius: 30px; z-index: 1; top: 8%; left: 12.5%; position: fixed; } #home-text { font-size: 3.3em; font-family: Comfortaa; text-align: center; line-height: 1.3em; top: 2.3%; left: 13%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link href="style.css" rel="stylesheet" text="text/css"> </head> <body> <div id="huge"></div> <div class="navbar"> <div id="navbar-background"></div> <div id="home-div"> <p id="home-text">Home</p> </div> <div id="home-div-button"></div> </div> </body> </html>
If you put the snippet to a full page, then the text will be in the right spot.