I'm new to web developing, and I'm learning how CSS works as I go along.
I'm creating a fun template to pass time but I noticed my aligning isn't right at all. When scrolling out or resizing browser everything goes way out of proportion. Any help on what's wrong and or what to improve with what I'm doing (again I'm new, so sorry)
I've tried other solutions and I couldn't get it to work.
I directly linked my codepen example.
https://codepen.io/anon/pen/yxWvJO
<!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">
<title>OSRS - Template</title>
<link rel="icon" href="images/favicon.png" />
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="logo"></div>
<div class="scroll-middle"></div>
<div class="scroll-top"></div>
<div class="scroll-bottom"></div>
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/IcgB_OzA_sE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="discordapp">
<iframe src="https://discordapp.com/widget?id=488699973156864030&theme=dark" width="350" height="380" allowcontrols="true" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
/*
* Defines the body & html attributes
*/
body,
html {
font-family: 'Helvetica', sans-serif;
background-image: url(https://www.runescape.com/img/rsp777/bg2.jpg);
background-size: cover;
text-align: center;
padding: 0;
margin: 0;
}
/*
* Defines the list attributes
*/
ul {
list-style-type: none;
margin: 1;
padding: 0;
position: absolute;
top: 25%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/*
* Defines the list attributes
*/
li {
float: left;
background-image: url(https://www.runescape.com/img/rsp777/splash/button_small.gif);
top: 117px;
height: 63px;
margin: 5px;
position: relative;
width: 152px
}
/*
* Defines the list attributes
*/
li a {
display: block;
color: grey;
top: 25%;
text-align: center;
padding: 20px 16px;
}
/*
* Defines the list attributes
*/
li a:hover {
color: white;
}
::-webkit-scrollbar {
display: none;
}
.video {
position: absolute;
top: 500px;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
width: 100%;
margin: auto;
overflow: hidden;
}
/*
* Defines the container attributes
*/
.container-right {
position: absolute;
width: 250px;
height: 250px;
border-style: solid;
border-width: 2px;
border-color: silver;
border-radius: 10px;
top: 50%;
left: 90%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/*
* Defines the title attributes
*/
.title-box {
text-align: center
}
/*
* Defines the logo attributes
*/
.logo {
background-image: url(https://vignette.wikia.nocookie.net/2007scape/images/4/41/Old_School_RuneScape_logo.png/revision/latest?cb=20170406224036);
position: absolute;
width: 250px;
height: 175px;
background-size: 250px 175px;
top: 5%;
left: 40%;
transform: translate(-50%, -50%);
animation: float 6s ease-in-out infinite;
}
.scroll-top {
background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
position: absolute;
width: 770px;
height: 39px;
background-size: 770px 39px;
background-repeat: no-repeat;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-middle {
background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif);
background-repeat: repeat-y;
position: absolute;
width: 745px;
height: 800px;
top: 650px;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-bottom {
background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
position: absolute;
width: 770px;
height: 39px;
background-size: 770px 39px;
background-repeat: no-repeat;
bottom: -429px;
left: 50%;
transform: translate(-50%, -50%);
}
.discordapp {
position: absolute;
bottom: -565px;
left: 50%;
transform: translate(-50%, -50%);
}
/*
* Defines the flating attributes
*/
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
I highly suggest you try out CSS flexes and grids, your code is missing fundamental formatting so when you resize the browser doesn't really know what to do and just moves things around.
Before trying more complex techniques I'd suggest you try to minimize your CSS, using breaks in HTML and understanding how to efficiently and non-redundantly center elements in your pages.
All and all, that's not the worst start, good luck with your learning process!
I'll start from the end - unfortunately you can't except the same result with this code on every device. While it works on computer screens the problams start on smaller screens - mainly because you are using absolute position and pixels unites.
The solution can be either breakpoints (css media query) so you can style differently depend on screen sizes, or to use percentage values (with min-width values), but that is not recommend with that code.
It's a good practice not using frameworks and code by yourself. You should learn html and css in order to gain more tools. I suggest start with w3schools and mdn, but there are lot of other guides out there...
By the way - it look very nice on my laptop! Good luck, and the most important - enjoy coding!
I recomend you to see about CSS Flexbox and Media queries. this links with many tutorials/examples will help you to understand more about css and positioning. Because your code needs to adapt in every screen (mobile and desktops). your site looks good, keep coding!
Related
new to HTML and CSS. Could anyone teach me how to animate my picture from my current point to, another location? For example, moving from "top: 280px: left 600px;" to "top:180px; left 500px;"
Need someone to guide me along, thanks.
Below is my current code:
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
<img id="robot" src="https://img.favpng.com/20/7/18/clip-art-robot-free-content-image-vector-graphics-png-favpng-pJhfbKDrGy0yuQsKVTrjEu7br.jpg">
Here is a simplified example of an transition between to positions.
The key is to add the transition rule to your element (#robot), where you set the property you want to animate, the duration of the animation, easing function etc. See documentation for more examples.
Note that if you use the all keyword in the mentioned rule for shorthand convenience, it is adviced to specify which property you want to animate in the additional transition-property rule. This is for performance reasons.
In my example I'm using :hover to trigger the animation, but it might as well be when the page loads or when a certain class is added to your element by some JavaScript.
Hope it helps!
.box {
width: 500px;
height: 150px;
position: relative;
padding: 10px;
border: 5px solid green;
}
.cat {
position: absolute;
top: 50px;
left: 50px;
transition: all 1s ease-in;
transition-property: top, left;
}
.box:hover .cat {
top: 10px;
left: 300px;
}
<div class="box">
Hover me!
<img class="cat" src="https://placekitten.com/100/100" alt="A cat">
</div>
Yes, you can do it by simple using css.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
/* Standard syntax */
#keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
</style>
<body>
<img id="robot" src="https://www.w3schools.com/images/compatible_chrome.gif">
<?php ?>
</body>
</html>
Is there a fix for cropping a round image from a square one that will get rid of my white border left behind.
I am trying to use animation css to rotate an earth image in a stary sky. Right now, I am struggling with a white border left over from cropping my image.
I don't have Photoshop right at the moment and I am having a hard time finding a free photo editor that will suffice. My macbook air 2016 model is supposed to have this feature in the preview mode, but it is not high-lit thus unavailable and I don't know why. Any help would be so appreciated it is ridiculous!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--animationlibrary githib url-->
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>
</head>
<body>
<div>
<img id="starrySky" src="img/stary_nebula.jpg" alt=""/>
</div>
<img id="earth" name="earthRotate" src="img/my_round_earth.jpg" alt=""/>
<style>
img{
position: absolute;
left: -10px;
top: -15px;
height: 175px;
width: 175px;
}
**this is what I have now....**
div#earth{
transform: skew(20px, -10px);
transform: rotate(45deg);
border-radius: 50%;
overflow: hidden;
width:150px;
height:150px;
}
img#earth{
background-image: url("https://s.yimg.com/fz/api/res/1.2 /oaK.yDOhW_y44_tplykRWA--/YXBwaWQ9c3JjaGRkO2g9MTE2ODtxPTk1O3c9MTcwMA--/http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg");
}
#earth{
position: absolute;
top: 0px;
left: 600px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
border-radius: 50%;
-webkit-animation-name: earthOrbit;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
overflow: visible;
}
#-webkit-keyframes earthOrbit{
from{ -webkit-transform: rotate(0deg); }
to{-webkit-transform: rotate(360deg);}
}
#starrySky{
position: relative;
top: -10px;
left: -10px;
width: auto;
height: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
text-align: center;
font-size: 25px;
}
</style>
</body>
</html>
just specify what size the parent <div> has and use overflow: hidden if necessary.
extra: to crop in different shapes, just transform the parent <div>, e.g.:
transform: skew(20px, -10px),
transform: rotate(45deg),
border-radius: 50%
I am creating a simple "coming soon" page and for the life of me cannot figure out how to create an image link that, when hovered over, changes to another image.
I've trawled google and cannot find an answer that works.
I am guessing I am missing something obvious and have overlooked it.
I feel like I can't see the wood for the trees.
Html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ablockalypse</title>
<meta name="description" content="Ablockalypse">
<meta name="author" content="Coming Soon">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<img src="images/cityscape.png">
<div id="header">
<img src="images/banner.png">
</div>
<div id="logo">
<img src="images/Logo.png">
</div>
<div id="info">
<img src="images/info_red.png">
</div>
</div>
</body>
</html>
Stylesheet :
body {
background-color: #746747
}
#container {
position: relative;
width: 800px;
height: auto;
display: block;
margin: auto;
max-width: 100%;
width: auto\9; /* ie8 */
}
#header {
position: absolute;
top: 20px;
left: 6%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#logo {
position: absolute;
top: 40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
-ms-transform: rotate(13deg); /* IE 9 */
-webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
transform: rotate(8deg);
}
#info {
position: absolute;
top: 450px;
left:290px;
width: 276px;
height: 134px;
background-image: url(images/info_red.png) no-repeat;;
}
#info :hover {
background-image: url(images/info_green.png) no-repeat;;
}
I would appreciate any help!
the last selector on your stylesheet, has a space that is causing it not to work.
#info :hover should be #info:hover
The good old problem of vertically aligning an img!! I've managed it but by the looks of it, it doesn't work on safari! Has anyone got anyother ways of doing it?
Code:
<div class="logo">
<img alt="" src="img/logo-white.png">
</div>
.logo {
padding-top:2.5%;
height: 104px;
}
.logo img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Thanks
Since the height of the div is fixed, you can cut off the nasty tricks, and simply equal the line-height to the height value.
.logo {
padding-top:2.5%;
height: 104px;
outline: 1px solid red;
line-height: 104px;
}
<div class="logo">
<img alt="Meazey Web design" src="img/logo-white.png">
</div>
first of all, to use css3 'transform' you need to use the safari & chrome prefix:
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
it depends on the safari version, it will be supported from version 7.1 and up: http://caniuse.com/#search=transform
there is more then two ways to do it but let's take a look on two for now:
1)
.logo {
height: 104px;
position: relative;
}
.logo img
{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
2)
.logo
{
height: 104px;
}
.logo > a
{
display: table-cell;
vertical-align: middle;
height: inherit;
}
I want to make like this box shadow its from a psd file :
i have made a screenshot :
http://s3.postimg.org/k59bfo5s3/boxshadow.png
i don't know how i can make that by code of css
but my other idea I thought also to extract the shadow from PSD file like that
and moove it to my html page but i don't know where i can place the code for image of shadow
http://jsfiddle.net/4pbq2tx8/11/
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css :
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
1/
Try with that:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2/
If you want the shadow to be exact length of 1100px you need to change few things:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
And wrap your #carousel in .wrap
<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER
Your shadow looks like a 3D object, so take advantage of that, and use a 3D pseudo element with a box shadow:
#carousel {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 50%;
}
#carousel:after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: -45px;
height: 50px;
background-color: #888;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg);
box-shadow: 0 0 20px 15px #888;
}
jsFiddle
Tested on chrome. Should work on Safari too. For other browsers, you will need add their vendor prefixes, -moz-, -ms-.
Old browsers will not support 3D transformations, and that's ok. No shadow will appear.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Also, you don't need, and should not use images. You can replicate the same effect with linear gradients.