I have big problems with css buttons... My screen size is 1366x768 and their position is just fine until I zoom out in browser or show it to someone who have bigger screen.
Can anyone help me, please?
Site with problems: http://riotpointscodes.info/region.html
You are positioning your buttons absolutley to the document body:
Example left button:
position: absolute;
top: 475px;
width: 251px;
Place all buttons in a container positioned over your paper and set the position to relative or absolute and then play with the placement of the buttons.
When you use absolute positioning, you need an anchor point. The anchor point is the first element up the HTML tree that has position:relative defined. If no element is found, the BODY tag becomes the anchor point.
Since you have a wrapper with stuff inside it, this should be come your anchor point in order to keep everything inside even if the browser resizes, not the BODY.
Bored at work today and your graphics were pretty cool so....
Here you are my friend:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Riot Points Codes</title>
<link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" />
<style type="text/css">
body {
background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14;
margin: 0;
padding: 0;
}
#wrapper {
width: 895px;
height: 493px;
position:relative;
top:180px;
margin:0 auto;
background: url('region_files/paper.jpg') no-repeat top center;
}
.choice {
background: url("region_files/map.png") no-repeat scroll 0 0 transparent;
height: 212px;
left: 50%;
margin-left: -259px;
position: absolute;
top: 43px;
width: 517px;
}
.logo {
left: 50%;
margin-left: -205px;
position: absolute;
top: -135px;
}
#lol-custom-buttons {
position: absolute;
bottom: 107px;
left: 0px;
width: 100%;
height: 90px;
text-align:center
}
.play-free-link {
height: 90px;
width: 251px;
background-repeat: none;
color: #ECC873;
display: inline-block;
}
.play-free-link.one {
background-image: url("http://riotpointscodes.info/images/1n.png");
}
.play-free-link.one:hover {
background-image: url("http://riotpointscodes.info/images/1h.png");
}
.play-free-link.two {
background-image: url("http://riotpointscodes.info/images/3n.png");
}
.play-free-link.two:hover {
background-image: url("http://riotpointscodes.info/images/3h.png");
}
.play-free-link.three {
background-image: url("http://riotpointscodes.info/images/2n.png");
}
.play-free-link.three:hover {
background-image: url("http://riotpointscodes.info/images/2h.png");
}
</style>
</head>
<body>
<div id="wrapper">
<div class="logo"><img src="region_files/logo.png"></div>
<div class="choice"></div>
<div id="lol-custom-buttons">
<a class="play-free-link one" href="http://riotpointscodes.info/"></a>
<a class="play-free-link two " href="http://riotpointscodes.info/"></a>
<a class="play-free-link three" href="http://riotpointscodes.info/"></a>
</div>
</div>
</body>
</html>
Related
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
I have a simple HTML document (snip):
<html lang="en">
<body>
<div class="background"></div>
<header class="main-header">
<div>
<a href="../index.html" class="main-header__brand">
uHost
</a>
</div>
</header>
</div>
</body>
</html>
I noticed the following.
If I apply the following style:
background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 100%;
}
Then the background image covers the whole viewport as expected.
If I then add:
html {
margin-left: 10%;
margin-right: 10%;
}
The margin is correctly applied to the left and right of my content. But also to the left side only of the background. Ie:
I am confused as to why, as I thought fixed elements were positioned relative to the viewport? So why is a style on the html element influencing the rendering of the background?
As a solution to get what I wanted (some margin on both sides), I can do something like:
html {
width: 80vw;
margin: auto;
}
.background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 80vw;
}
Which produces:
But again, I'm unsure why the margin property on the html element is affecting my fixed background div?
When using position fixed, the element will still follow its natural initial placement, unless otherwise specified via the top left bottom or right attributes. Here you can see, even though the body element has a margin of 10px, the background element is still at the top left.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px;
}
h1 {
color: white;
text-align: center;
}
.background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Solar_Eclipse_May_20%2C2012.jpg/1024px-Solar_Eclipse_May_20%2C2012.jpg");
width: 300px;
height: 300px;
background-size: cover;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
<body>
<div class="background">
<h1> Solar Eclipse </h1>
</div>
</body>
I have a map image (1080x1080px) I want this to be the the background of the body or a container div. I need the image to stay fixed in its place always, even when resizing the browser window.
I have divs inside of the main div container and these divs have images which are map markers that have been places at specific locations and they are toggled on and off as required.
Both the background image (map) and the markers need to stay in their position permanently.
How can I achieve this? What I have is not working...
body, html {
height: 100%;
}
#bg {
background-image: url(treasuremap_01.jpg);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>
You need to set the #bg property of width and height the same as the background-image size.
body, html {
height: 100%;
}
#bg {
background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
height: 1080px;
width: 1080px;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>
I'm only loading the background image in the HTML in the case that you're pulling the image dynamically via PHP. Otherwise, you can create separate classes with background images in the CSS file.
fixed and cover didn't use to play well together, and you would have to put the height property in an outer container, but I tested this code on Chrome, Firefox, Safari, and Opera, and it works fine.
div {
width: 100%
height: 90vh
background-repeat: no-repeat
background-position: center center
background-size: cover
background-attachment: fixed
} . End every of the sentence in an hyfin
Thanks but it won't send I'm trying to find a way out to send in a simple language programming. You can also write this code in the background shorthand then you'd simply add the background image to the div and adjust the height property as necessary.
Apostrophe in between the backgroundimage and and hyfin to end it to get the picture
I'm making a gaming site and I'm having some troubles with text positions. What im trying to achieve is having my navbar text ontop of a custom navbar backgroud
how it looks now
navbar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
}
.topnav{
position:absolute;
text-align: center;
margin:auto;
width: 50%;
}
.topnav a {
line-height: 200px;
padding: 50px;
display: ;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.navbackground {
position:absolute;
top: -50px;
left:0;
right:0;
bottom: 700px;
margin:auto;
width: 50%;
}
.banner {
position:relivent;
top: 10px;
left:0;
right:0;
bottom:0;
margin:auto;
width: 100%;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<img src="nav.png" class="navbackground ">
<img src="wallpaper.JPE" class="banner" >
</body>
</html>
I was considering adding the nav.png as a background image in the topnav class but i couldn't seem to get it to scale if you no how to scale it correctly or have any suggestions please let me know!
ps.. I'm new to CSS, HTML please cut me some slack :)
Even tough z-index property works (it controls how do elements stack on each other), since you have stated you are new to HTML, you should understand that probably the best way to achieve what you need is to correctly order your elements.
You now have:
topnav
link1
link2
link3
topnav background
webpage background
The elements are rendered on the way you write them. So, for example, to get the background to be rendered first, you have to write it first.
webpage background -- this will be rendered first
topnav
link1
link2
link3
topnav background
Also, for the topnav background, you need to place it before the topnav. But if also what you want is for the topnav to be relative to the background, you also will need to nest them:
webpage background
topnav background -- background is the parent of topnav
topnav
link1
link2
link3
That way, the order of rendering is:
Draw webpage background
Draw topnav background
Draw topnav (nothing here, just a placeholder)
Draw links
As you can see, your topnav in this case is kind of useless. You can just apply a background to the topnav and discard the topnav background element:
webpage background
topnav -- here we apply the background using background CSS property
link1
link2
link3
I hope that made it clear. You can achieve the same results without changing your HTML using z-index, but I recommend first to have a clear HTML and semantic.
You have to set z-index (higher one for nav)
More on w3schools.
topnav{
z-index: 1000;
}
You need to add z-index to the parent of Nav.
Setting it as a background image would be the better option, in my opinion.
You can scale the background image using the background-size CSS property which you set to either contain or cover (Depending on how you want it to behave if the aspect ratios of div and png don't match, see https://www.w3schools.com/cssref/css3_pr_background-size.asp).
Rather than scaling the background I'd suggest either scaling the image in an image editor to match the size of your navigation-div or setting the dimensions of the div to match your png.
Same for the background image. You could make it the background-image of the body or a surrounding div.
Here's an example: https://jsfiddle.net/hg5jxn3s/7/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
background: url(wallpaper.JPE) no-repeat top left;
background-size: cover;
}
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: contain;
position:relative;
text-align: center;
margin:0px auto;
width: 900px;
height: 150px;
padding:70px 0px;
}
.topnav a {
line-height: 1em;
padding: 0px 50px;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</body>
</html>
You'll notice that I've changed the width from flexible (50%) to a fixed width. I've done this because the navigation items themselves don't scale in your setup, so at a certain size they'd break into a second row which doesn't work with that background-image that well.
You can see what it would look like if you change the above CSS for topnav to:
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: 100% 100%;
position:relative;
text-align: center;
margin:0px auto;
width: 50%;
height: auto;
padding:70px 0px;
}
see https://jsfiddle.net/hg5jxn3s/10/
Are you looking for something like this? ;)
Basicly in your code, give your .topnav{ ... } a position of relative + give it the background image as I did in this fiddle. Then make a new html div with a class="nav" and add the css .topnav .nav{ position: absolute; left: 10%; width: 80%; } and give the .topnav a a style of line-height: 60px; width: 24%; display: inline-block;
I think that were like almost all changed I made.
body {
background-color: black;
height: 100%;
margin: 0;
padding: 0;
}
.topnav {
display: block;
margin: 20px auto;
width: 80%;
height: 60px;
background-image:url(https://i.stack.imgur.com/h54t6.png);
background-repeat: no-repeat;
background-position: center;
background-size:100%;
position: relative;
}
.topnav .nav {
position: absolute;
left: 10%;
width: 80%;
}
.topnav .nav a {
line-height: 60px;
display: inline-block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
width: 24%;
}
.navbackground {
position: absolute;
top: -50px;
left: 0;
right: 0;
bottom: 700px;
margin: auto;
width: 50%;
}
.banner {
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<img src="https://cdna.artstation.com/p/assets/images/images/005/718/562/large/josh-bruce-headerfinal.jpg?1493246411" class="banner">
<div class="topnav">
<div class="nav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</body>
</html>
Demo Page: http://apps.pc-tips.in/play/
In the above, the div containing "Ask any question & get" is centered, but the div containg the line "answers on" is not. why? Both have been styled similarly. given width, absolute position, margin auto.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
margin:0 ;
padding:0 ;
}
#sidebar {
height: 600px;
width: 200px;
}
#topside {
height: 108px;
background-image: url(Untitled-3.jpg);
background-repeat: repeat-x;
text-align: center;
position: relative;
}
.down {
bottom: 3px;
position: absolute;
margin: auto;
width: 200px;
}
#bottomside {
background-image: url(Untitled-4.jpg);
height: 492px;
position: relative;
}
#wrapper #sidebar #topside {
color: #FFF;
font-size: 0.9em;
font-weight: bold;
}
.delhi {
font-size: 1.8em;
}
.top {
top: 3px;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="topside"><br /> <span class="delhi">Delhi </span> Questions and answers.
<div class="down">
Ask any question & get
</div>
</div>
<div id="bottomside">
<div class="top"> answers on </div>
</div>
</div>
</div>
</body>
</html>
would anyone like to point out what I am missing here?
As kuroir's answer says, you can't center elements this way if you're also using absolute positioning.
Your "ask any question" div isn't being centered, you've given it the same width as its container.
The only reason the two look different is that there's a text-align: center on the #topside container, and not on the #bottomside container.
You can't center an element via margin:0 auto when it has position:absolute added to it. Remove the position:absolute from .top and it should work.
Not sure what you're trying to achieve, but this pretty much solves the problem you have. Remember you can use padding to "center" contents. That will save you from having to set the width explicitly.
You need to change your CSS, updating the '#bottomside' and '.top' styles like so:
#bottomside {
background-image: url(Untitled-4.jpg);
height: 492px;
position: relative;
text-align: center;
}
.top {
top: 3px;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
}
The changes are self explanatory, if there is a confusion, let me know.