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);
Related
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>
I am working on a website, and I am trying to make a top navigation bar. The far left link should be an image with my logo, and the other ones should navigate to different parts of the site. The button with the image lines up differently that the other ones. How can I fix that?
<div id='topbar'>
<a href='index.html' class='topbar-button-home'>
<img src='camelCaseCo_centered_cropped_notext_bold_small.png'>
</a>
<a href='index.html' class='topbar-button'>Home</a>
<a href='index.html' class='topbar-button'>2</a>
<a href='index.html' class='topbar-button'>3</a>
<a href='index.html' class='topbar-button'>4</a>
</div>
<style>
#topbar {
padding: 0;
margin: 0;
display: inline-block;
font-size: 0;
}
.topbar-button {
width: 200px;
margin: 0px;
padding: 20px;
display: inline-block;
border: solid black 1px;
border-radius: 0px;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
.topbar-button-home {
width: 50px;
margin: 0px;
padding: 8px;
border: solid black 1px;
display: inline-block;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
</style>
Thanks in advance!
What about Flexbox?
#topbar {
padding: 0;
margin: 0;
display: flex;
}
.topbar-button {
width: 200px;
margin: 0px;
padding: 20px;
display: inline-block;
border: solid black 1px;
border-radius: 0px;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
.topbar-button-home {
width: 50px;
margin: 0px;
padding: 8px;
border: solid black 1px;
display: inline-block;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
<div id='topbar'>
<a href='index.html' class='topbar-button-home'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a>
<a href='index.html' class='topbar-button'>Home</a>
<a href='index.html' class='topbar-button'>2</a>
<a href='index.html' class='topbar-button'>3</a>
<a href='index.html' class='topbar-button'>4</a>
<a href='index.html' class='topbar-button'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a>
</div>
In the example above, all flex children will have the same height regardless of their content.
Remember, images are inline elements and so they are affected by line height. Try setting your image to diasplay block or inline-block. I see you have it on the link— move it to the image.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
So I will apologize in advance if this question has already been asked, but I will mention it anyway. Basically there is a problem with an HTML document that I have been working on. I set a rule for the links in the span tags for every different link, because I want them to have different text-decoration properties, and it doesn't seem to apply them. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title> MSCC Software </title>
<link type="text/css" rel="stylesheet" href="mscccss.css">
</head>
<body> <!-- I will do an early apology if there is any bad code -->
<div id="header">
<p id="topline"> MSCC Software </p>
<p id="bottomline"> www.mscc.com </p>
</div>
<div id="sidebar">
<span id="google"> Google </span>
<span id="example"> Example </span>
<span id="debt"> Debt </span>
</div>
<div id="content">
<p> Happy Holidays </p>
<img src="http://res.freestockphotos.biz/pictures/12/12626-illustration-of-a-decorated-christmas-tree-pv.png" />
<p> From MSCC! </p>
</div>
<p id="credit"> Created By PharellPharell </p>
</body>
</html>
Now my CSS:
body{
height: 970px;
background-color: rgba:(223,223,223,80%);
font-family: Verdana;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 3%;
margin-left: 3%;
}
#header{
height: 12%;
border: solid red;
background-color: rgb(127,0,0);
border-radius: 25px;
text-align: center;
color: #FFFA7C;
margin-bottom: 15px;
}
#topline{
font-size: 30px;
margin-bottom: 0px;
}
#bottomline{
font-size: 20px;
}
#sidebar{
height: 75%;
width: 15%;
border: solid red;
border-radius: 25px;
background-color: rgb(127,0,0);
text-align: center;
padding-right: 25px;
display: inline-block;
float: left;
}
#google{
font-size: 25px;
color: #EC00BC;
text-decoration: none;
display: block;
padding-bottom: 10px;
}
#example{
font-size: 25px;
color: #EC00BC;
text-decoration: overline;
display: block;
padding-bottom: 10px;
}
#debt{
font-size: 25px;
color: rgb(7,239,20);
text-decoration: none;
}
#content{
height: 75%;
width: 77%;
background-color: rgba(0,119,31,0.9);
border: solid rgb(127,0,0);
border-radius: 25px;
color: rgb(127,0,0);
font-size: 72px;
text-align: center;
float: right;
}
img{
height: 300px;
}
#credit{
font-size: 40px;
color: rgb(127,0,0);
font-family: Arial;
padding-left: 550px;
}
So yeah, that is basically it. I can't figure out what to do about it, and if I'm making a stupid mistake, I apologize. Help would be appreciated for this,
Thanks so much!
BTW. Fun fact- PharellPharell is my GitHub username, you can find me on there if you want to look me up.
I think you should be targeting the a tags instead of just the span they are wrapped in. For example:
#google a{
text-decoration:none;
}
Another approach is to remove the text-decoration from all the links on the site, which will allow the more specific rules to take precedence.
a {
text-decoration: none;
}
my website has a scroll bar that goes quite far over to the right and one that goes down. nothing is displayed in these areas so the scroll bar is unecesary! if anything it could fit all on one page. these creates a lot of white space around my page.
how can i stop this from happening?
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->
</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: relative;
top:-100px;
left: 390px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: relative;
top:-250px;
left: 370px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative;
top:-300px;
left: 480px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative;
top:-290px;
left: 390px;
}
.image2 {
position: relative;
top:-300px;
left: 590px;
}
.box1 {
width: 100%;
height: 5px;
background-color: #FC3B3B;
position: relative;
top:100px;
left: 0px;
}
p {
position: relative;
top:150px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>
<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE</h1>
<h2>COMING SOON... </h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<img src="twitter.png" class="image2" border="0" alt=".">
</div>
<div class="box1">
</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>
EDIT: this is how it should look like
It's an artifact of the relative positioning and setting a left value.
Remove it, and the extra space goes away.
Demo
EDIT
You do not need any relative positioning. The design you are trying to accomplish can be created much more simply with text-align: center.
HTML
<div>
<img src="//placehold.it/200x200">
<h1>Welcome to my page</h1>
<h2>Coming Soon...</h2>
<h3>But for now follow me on Twitter</h3>
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Paytone+One);
div {
text-align: center;
background: #ddd;
border-bottom: 3px solid red;
margin: 5px;
padding: 10px;
font-family: 'Paytone One', sans-serif;
font-size: 24px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
color: red;
}
img {
width: 200px;
height: 200px;
}
Demo