I recently started to make a web-server, I'm usually working with back-end code, but now I got a project to do. I'm still very green on CSS and HTML. So basically I need to somehow move the bank logo down and the Label - "Maze bank of Los-Santos" a bit closer to the logo, I have researched a lot of, but I still don't understand the working principle of the position, width, display, margin, top sometimes work, sometimes doesn't, at some times I use right, left positioning, but at this point I don't know how to do it.
This is how my website looks:
My index code:
<!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" href="/static/style2.css">
<title>Maze bank - Log In</title>
<link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<br>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
<form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
<div class="login-box">
<div class="textbox">
<i class="fa fa-credit-card" aria-hidden="true"></i>
<input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
</div>
<div class="textbox">
<i class="fa fa-key" aria-hidden="true"></i>
<input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
</div>
<button class="link">Forgot password ?</button>
<input class="btn" type="submit" name="" value="Log in">
</form>
</div>
<div class="copyright">
<h4>©™ 2019 Copyright All Rights Reserved</h4>
</div>
</body>
</html>**strong text**
Here's my CSS Code:
#import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
p{
display:block;
color: #2ECC71;
font-family: 'Teko', sans-serif;
font-size: 50px;
text-align: center;
font-weight: bold;
border-block: 2px solid black;
text-shadow: 2px 2px #1a1111;
}
p:first-letter{
display:block;
/*adjust the letter position for best appearance*/
margin:4px 4px 0 5px!important;
/*set font family color and size*/
color:#2ECC71;
font-size:1.5em;
font-family: 'Teko', sans-serif;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
}
html, body{
margin: auto;
background: white;
background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}
.logo{
font-family: fantasy;
}
.login-box{
width: 280px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #e16a74;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
float: left;
width: 80%;
margin: 0 10px;
}
.btn{
width: 100%;
background: #e16a74;
border: 2px solid #e16a74;
margin: 12px 0 ;
cursor: pointer;
font-size: 18px;
padding: 5px;
color: white;
}
.btn {border-radius: 12px;}
.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
bottom:0;
}
.copyright h4{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 10;
text-align: center;
}
.login-box button.link
{
background:none;
border:none;
color: wheat;
font-family: 'Teko', sans-serif;
font-weight: normal;
font-size: 20px;
position:relative;
bottom:1000%;
left:55%;
}
Firsts, check your code to be valid :) For example, <img> element should not have a closing tag. You should always try to have valid html because html with errors can affect rendering in browsers.
Secondly, I see that you added a <br> after <body> and before <img>. Possibly this is to make a small margin above the logo. Don't do that because this way you will never get a reliable distance from the top across browsers. Remove <br> and use margin-top: 16px or so style in your css for img.
Next, give a css class to your p element, like <p class="bank-name"> and style it in css:
.bank-name {
color: white;
margin-top: 10px;
}
This p is very specific, so you should give it a dedicated class because you can have other <p>s on the page that do not need the same appearance.
Two more things:
Avoid inline styles in html.
Do not use !important unless you have a huge reason to do it.
Also <p> is block by default, so you do not need that display: block in html. You can often find default styles at W3school.
Hope, this helps!
You just need to have a div tag to regroup your image and text. That div must have display: block so that the text won't be on the same line, but under. Now depending of the width of the image, you will probably need to align the text with text-align: center
You can read more about css rules on w3Schools
img {
display: block;
text-align: center;
}
<div>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span>Maze Bank Of </span>Los-Santos</p>
</div>
Related
I need some help with my messy code (excuse me for having lot of text in my native language). I need to fit the IFRAME in between head and footer of the site, so it will look the same on every monitor (resolution).
Thanks!
body {
margin: 0;
background-image: linear-gradient(to right, #292c33, #a0b2d0, #dee9f6, #a0b2d0, #292c33);
}
p{
color: #272727;
text-align: left;
display: block;
font-family: 'Montserrat', sans-serif;
padding-left: 14px;
font-size: 12px;
text-decoration: none;
// nadefinování písma na stránce
}
.nav{
background-color: #eaeaea;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #272727; // barva fontu
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
border-bottom: 3px solid transparent;
font-family: 'Montserrat', sans-serif;
height: 30px;
}
.nav a:hover{
border-bottom: 3px solid #310a0b;
}
.nav a.active{
border-bottom: 3px solid #b50c0f;
}
.fotka{
display: block;
float: right;
width: 5%;
height: 5%;
margin: 12px;
}
footer{
padding: 1px;
background-color: #eaeaea;
color: #272727;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
.zvideo{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='favicon.ico?' type='image/x-icon'/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Hlavní stránka</title>
</head>
<body>
<div class="nav">
<a class="active" href="index.html">Domů</a>
Zaklínač
Hry
Knížky
<img class="fotka" alt="logo stránky" src="logo.png">
</div>
<!--NÁSLEDUJE DIV IFRAMU-->
<div class="zvideo">
<iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
</div>
<footer>
<p>Autor: Jan Michalisko</p>
<p>Můj email: hachikolp#gmail.com</p> <!--mailto: mi přišel velmi barbarský, takže jsem tam nechal jenom paragraf-->
</footer>
</body>
</html>
I hope that you will be able to identify what is footer, head etc., i am really not a good at coding yet, lol. Thank you for help!
According to the comments, you just trying to center an iframe. The I in iframe stands for inline. So the correct name for the <iframe> tag is: inline frame. As the name indictaes, it is not a block level element but an inline element. As such it can not be centered by using margin: 0 auto; by default. So you need to add display: block; first, in order to change the iframe into a block level element.
iframe {
display: block;
margin: 0 auto;
background-color: blue;
}
<iframe src="">Just a Test</iframe>
Below is a header block I created, with a title stacked atop a 'navbar'. If you look at the code, you'll see an <h1> tag that's wrapping two (2) tags, and their contents — its fundamental (or essential) structure looks something like this:
<h1>
<div>
<!-- Nested <span> tags -->
</div>
<div>
<!-- Nested <span> tags -->
</div>
</h1>
The Issue
The issue is that when the view port is shrunk (which happens on mobile devices, obviously) the elements wrap in all crazy sorts of ways. The way it wraps, seems to be contingent on the view-port size, but nevertheless; it always wraps in a way that is most undesirable.
How can I make it wrap so that when the screen shrinks to the point where it has to wrap, the entire second word OPINIONS wraps, instead of just pinions or bstract?
#import url('https://fonts.googleapis.com/css?family=Cardo|Cinzel&display=swap');
:root {
--red-alpha: #7C000D;
--red-beta: #9C0810;
--charcoal: #060912;
}
body {
background-color: #555;
}
#head-alpha {
display: block;
background-color: #808080;
border: 2.5px ridge #500C12;
width: 90vw;
height: 18%;
padding: 2.5px;
display: block;
margin: 0 auto;
top: 0;
}
#head-beta {
display: block;
background-color: #808080;
border: 1px solid #400;
width: 400px;
height: 18%;
padding: 2.5px;
display: block;
margin: 0 auto;
top: 0;
}
.xxl-a {
color: var(--red-alpha);
font-family: 'Cinzel', serif;
font-size: 55px;
margin-right: -3px
}
.xxl-b {
color: var(--charcoal);
font-family: 'Cinzel', serif;
font-size: 55px;
margin-left: -4px;
}
.nav {
display: block;
width: auto;
border: 1.25px solid #88040C;
height: 32px;
background: #101218;
margin: 0;
padding: 6px 16px;
top: 0;
position: sticky;
position: -webkit-sticky;
color: var(--red-beta);
font-weight: 500;
}
.lrg-fg {
font-size: 20px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>SOLO</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<h1 id="head-alpha">
<div>
<span id="span_1" class="xxl-a">A</span>
<span id="span_2" class="xxl-b">bstract</span>
<span id="span_0" class="xxl-b"> </span>
<span id="span_3" class="xxl-a">O</span>
<span id="span_4" class="xxl-b">pinions</span>
</div>
<div class="nav">
<span class="lrg-fg">HOME • </span>
<span class="lrg-fg">BLOG • </span>
<span class="lrg-fg">UPDATES</span>
</div>
</h1>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<h1 id="head-beta">
<div>
<span id="span_1" class="xxl-a">A</span>
<span id="span_2" class="xxl-b">bstract</span>
<span id="span_0" class="xxl-b"> </span>
<span id="span_3" class="xxl-a">O</span>
<span id="span_4" class="xxl-b">pinions</span>
</div>
<div class="nav">
<span class="lrg-fg">HOME • </span>
<span class="lrg-fg">BLOG • </span>
<span class="lrg-fg">UPDATES</span>
</div>
</h1>
</body>
</html>
The selector ::first-letter does exist, which should help you do this much more simply. You can just use a single span then. Usage is along the lines of
#span-1::first-letter {
color: var(—A);
}
PS, the best practice for CSS is to not use IDs in selectors. Those tend to be left alone so the JavaScript can use them, and instead classes tend to be used.
You could wrap all your "Abstract" and all your "Opinions" elements in a container and then wrap those in another container. Now you can apply display: flex and easily change the flex-direction when the screen width changes.
Use a div for Abstract and Opinions. Also declare a viewport in the head section. Use height 100% on html & body to make space for the #head height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SOLO</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cardo|Cinzel&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="head">
<div>
<span id="span_1" class="xxl-a">A</span>
<span id="span_2" class="xxl-b">bstract</span>
</div>
<div>
<span id="span_3" class="xxl-a">O</span>
<span id="span_4" class="xxl-b">pinions</span>
</div>
<div class="nav">
<p>Hello World!</p>
</div>
</div>
Use the flex-wrap to wrap the span's
:root {
--A: #800;
--B: #090909;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
height: 100%;
-webkit-text-size-adjust: 100%;
}
body {
height: 100%;
margin: 0;
font: 400 1rem/1.5 'Cinzel', serif;
background-color: #555;
}
#head {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 18%;
padding: 2px;
background-color: #aaa;
border: 1px solid #400;
}
.xxl-a {
display: inline-block;
padding: 0 3px;
color: var(--A);
font-family: 'Cinzel', serif;
font-size: 55px;
}
.xxl-b {
display: inline-block;
padding: 0 3px;
color: var(--B);
font-family: 'Cinzel', serif;
font-size: 55px;
}
div.nav {
width: 100%;
height: 50px;
position: -webkit-sticky;
position: sticky;
top: 0; left: 0;
border: 1px double #A00;
background-color: #444;
}
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
body {
background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
font-size:50px;
font-family: 'Raleway', sans-serif;
position: absolute;
color: white;
left: 790px;
}
.title {
position: relative;
}
.text {
color: white;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
line-height: 10px;
}
.nfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black|50%;
}
.sfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black;
}
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:750px;
margin-bottom: 500px;
background-color:black;
position: absolute;
}
.text-desc {
color:white;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
}
.buttonnfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonof {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
background-color:#05a2aa;
}
.buttonsfa:hover{
background-color:#05a2aa;
}
.buttonof:hover{
background-color:#05a2aa;
}
<!doctype html>
<html>
<head>
<title> SpeedyAlts </title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class='bg'>
<a class="title"> SpeedyAlts </a>
<div class="nfa">
<center>
<a class="text"> NFA Account </a>
<br>
<br>
<a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
</center>
<a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="sfa">
<center>
<a class="text"> SFA Account </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="of">
<center>
<a class="text"> Optifine Cape </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
</div>
</div>
<script src="https://embed.selly.gg"></script>
</body>
</html>
I have got no idea why it is not working. For some reason with margin-top margin-left etc. It's not moving it up nor down with any of the margins. Could Anyone help? I am not that good at HTML nor with CSS so excuse any code that is badly formatted if there is any. Also, if anyone could give me any advice on problems like this in the future that would be helpful. Thanks.
Your div in question has position:absolute. You will need to either remove this, or use top and bottom, left and right to move it on the page. In your example, if you'd like to move the element up on the page you will need to declare:
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
background-color:black;
position: absolute;
left:750px;
bottom: 500px;
}
Please keep in mind this means your element will always be 500px from the bottom and 750px from the left. It is better to use percentage values.
To move it up, you can try one of these to the class .of :
Margin approach
margin-top:-50px;
Absolute positioning approach
top: 300px; //change this value as needed
Transform approach
transform:translateY(-50px);
Here I'm creating a button but for some odd reason the text is a little off and isn't centered even though I have used display: block; and text-align: center; inside my css file.
Line 30 is where my button starts here is my html and custom css code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<title>Proto X Media - Home</title>
</head>
<body>
<div class="bg1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="lgsize" src="logo.gif" alt="Logo">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="pushdown">
<div class="col-md-6 col-md-offset-3">
<span class="text-center title">Proto X Media</span>
<p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
<div class="buttonpad">
<div class="button">
<span>Explore</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And here is my css on line 39 is where the code for my button is
.title {
font-family: 'Bree Serif', serif;
font-weight: 800;
font-size: 500%;
color: 373d44#;
display: block;
text-align: center;
}
.bg1 {
background-image: url("bg2.jpg");
background-size: cover;
}
.lgsize {
width: 120px;
height: 110px;
}
.pushdown {
padding-top: 100px;
padding-bottom: 250px;
}
.menu {
font-size: 100%
font-family: 'Bree Serif', serif;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
background-color: transparent;
text-decoration: none;
}
.subtext {
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 18px;
display: block;
}
.button {
width: 82.61px;
height: 37.65px;
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
.buttonpad {
padding-top: 10px;
}
Thank you very much ! Also if you haven't noticed I'm using Bootstrap for my grid.
For centering horizontal, change your markup to this and you should be fine
<div class="button"><span>Explore</span></div>
When breaking line using an inline element, that line break cause a white space at the end pushing the text slightly to the left
For centering vertical, use line height, like this
.button {
width: 82.61px;
height: 37.65px;
line-height: 37.65px; /* added property */
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
Try to use padding like this;
padding: 6px 12px;
OR
.button{
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
One simple fix is to use line-height as the height of the containing div, as in this jsfiddle :
.button span
{
display: block;
line-height: 37px;
}
https://jsfiddle.net/az2vs6y3/1/
Or you could also use negative margin and absolute positionning, but it would be slightly less flexible.
Why are you using div as button, use html button for hyperlink and css looks fine
<input type="submit" value="Explore">