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;
}
Related
I am pretty new to web development so I am facing a margin issue which I think I might be due to position element in css,I'm not sure though .Here in code I have posted below is just a code for practice purpose on position element in css.
Here's my html code:
<!DOCTYPE html>
<head>
<title>Position Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header>
<span class="title-text">Position Demo</span>
</header>
<div class="container-1"></div>
<div class="container-2"></div>
</body>
And here's my css code:
html {
font-size: 62.5%;
}
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.title-text {
font-size: 3rem;
text-align: center;
display: inline-block;
}
.container-1 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 0;
margin-right: 0;
background-color: rgb(218, 173, 173);
}
.container-2 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 30%;
margin-right: 0;
background-color: rgb(149, 218, 183);
}
What you are facing in inspect mode, is not margin.
Just to make sure:
Each element, without changing the display property of the parent element, is placed below it's sibling element. I mean elements are displayed in the page based on their place in your html.
That's why browser shows that yellowish line right of the boxes, it means that this line is taken.
I suggest you set the display property for each section in html.
I'm an illustrator who is doing a piece for the web and fairly new to HTML, CSS, and Javascript. For my basic scene, I need an image of a bird to overlap an image of the sky, because I am going to animate the bird simply (flapping wings, etc.) in the final version.
I've made a div that holds the image of the mountain and the image of the bird. Using CSS, I've successfully overlapped them with z-index, but I can't seem to get relative percentage values to work in terms of their relationship to one another (i.e. I need the bird at a certain place in the sky). I also looked up a method for making the whole design responsive with a tag to control the viewport, but even after including it nothing scales. I'd appreciate any help--I'm trying to wrap my mind around positioning but nothing I try is working.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id='scene'>
<img class='sky' src='skybox.png'>
<img class='bird' src='bird.png'>
</div>
</body>
</html>
CSS
#scene {
position: relative;
z-index: -1;
}
.sky {
position: relative;
z-index: 1;
}
.bird{
position: relative;
z-index: 2;
/* this is where I'd like to add some percentage that
would be responsive and also put the bird at a certain
place in the sky. Pixel values work to position it but
the top has to be negative even to get it in the sky at
all, and percentages do nothing */
}
You want to put the parent container into position: relative and then the children as position: absolute That way, you can control how they act within the parent div.
It's a lot easier if whatever pictures you're using are the same dimensions. If they are, you just set the margins like so:
.bird, .sky, .sun {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Here's a snippet for you to study. :) Let me know if you have any questions!
.scene {
position: relative;
width: 50vw;
height: 50vh;
z-index: 0;
overflow: hidden;
}
.bird, .sky, .sun {
position: absolute;
}
.bird {
border: 1px solid red;
height: 10%;
width: 5%;
bottom: 10%;
left: 20%;
background-color: red;
z-index: 1;
overflow: hidden;
}
.sky {
width: 100%;
height: 100%;
background-color: lightblue;
}
.sun {
top: -10%;
right: -10%;
height: 30%;
width: 20%;
border-radius: 100%;
background-color: yellow;
z-index: 2;
overflow: hidden;
}
<div class="scene">
<div class="bird"></div>
<div class="sky"></div>
<div class="sun"></div>
</div>
I'm an inexperienced HTML learner, so please bear with me.
I'm trying to make a <div> (#banner) stay in the center of the browser even if resized; so I figured I would need another <div> as the #container of the entire browser.
#banner needs to extend its width 100% so I had to use the absolute position.
Even though I have already looked at several other posts here in stackoverflow - I can't figure how to implement their solutions to my particular case.
HTML
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<div id="banner">
</div>
</div>
</body>
</html>
CSS
#container{
}
#banner{
background-color: #e51400;
height: 400px;
position: absolute;
left: 0px;
right: 0px;
font-weight: bold;
text-align: center;
vertical-align:middle;
}
This is basically what I'm trying to accomplish
Do I really need another <div> besides #banner in order to put it in the center ?
Well, I was able to answer my own question due to the tremendous amount of replies I got. Anyways, thanks to this page I was able to tweak the code to how I need it in this case.
Here's my final code:
CSS
#container {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
background-color:black;
}
#banner {
height: 400px;
position: absolute;
top: -200px; //needs to the negative value of half the height
left: 0px;
right: 0px;
background-color:red;
}
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>
I have a row of icons that need to be at the bottom of the page, they also need to be fixed. Simple, right? Not. When you position them fixed, the icons fall into one another so only one icon shows. Well there goes that, but there also goes the chance of placing them at the bottom of the page since I need
#icons {
position:fixed;
bottom:0;
}
I could always manually place them, but this means they cant be fixed like I need them too, and I would have to declare it for different browsers. Help?
Link to website: Roseannebarr.tumblr.com
Here is an example of my HTML
<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">
{LinkOpenTag}<img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
</div>
Fixed position is what it says, 'fixed', and you are using the same position for all of them.
The best way is not to use position:fixed in #outer, instead try with display:inline; and better yet, I see they are inside #holder, use fixed in #holder and modify #tooltip so it can be shown above because it is what is showing the content.
For example:
#holder {
bottom: 0px;
left: -382.5px;
margin: 0px auto 0px 50%;
margin-left: 50%;
position: fixed;
width: 765px;
}
#tooltip {
background: #6CB4E2;
border-top: 30px solid white;
display: none;
left: 50%;
margin-left: -382px;
padding: 10px;
position: absolute;
bottom: 51px;
width: 745px;
}
#outer {
background: #6CB4E2;
bottom: 0px;
display: inline;
float: left;
margin-top: -8px;
}
I would wrap your icons in a div like this:
<div id="myicons_container">
<img src="icon1.gif">
<img src="icon2.gif">
<img src="icon3.gif">
<img src="icon4.gif">
<img src="icon5.gif">
</div>
<style type="text/css" media="screen">
#myicons_container {
position: fixed;
bottom: 0;
}
</style>
Edit : Per your comment, I would suggest re-writing your code to collect the icons in a container element. But, you might get away with this (haven't tested in any browsers):
<style type="text/css" media="screen">
.block {
width: 50px;
height: 50px;
float: left;
position: fixed;
bottom: 0;
}
</style>
Note: you have to give floated items a width and height.
One other note, in your code, you will have multiple elements with the same ID attribute. This is a no-no. You'll need to change it to a class like I've done in the CSS above.