I'm working on a photo blog, and I'm working on a slightly different idea but and I've got this neat spotlight to work, however trying to duplicate it to make more than one neat little spotlight won't seem to work.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<ul>
<li><div class="tjena"><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></div></li>
<li><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></li>
</ul>
</div>
<div id="overlag 1">
<div id="spotlight" class="spotlight"></div>
</div>
<div id="overlag 2">
<div id="spotlight" class="spotlight"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/okfocus/okshadow/master/src/okshadow.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
display: table;
background-image: url("http://www.wildtextures.com/wp-content/uploads/wildtextures_white-brick-wall.jpg");
background-repeat: repeat;
background-size: 30%;
}
.main {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.main .title {
font-size: 5rem;
margin-bottom: 50px;
}
.main .sub-title {
font-size: 2rem;
}
.main ul {
display: flex;
}
.main ul li {
margin: 0 120px;
}
.spotlight {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
background-image: -webkit-radial-gradient(center, circle cover, transparent -7%, rgba(0, 0, 0, 0.6) 13%);
}
.bild {
height: 300px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
Related
I'm trying to add some hover effects to my landing page and i'm stuck at doing the hover effect at the image, the hover in the title and author I was able to do easily.
I tried some stuff but I still couldn't do, the solutions that I saw here on stackoverflow was using position: absolute, but I was looking for some other solution (if there is).
If the main solution is using position: absolute and you want to please help me understand, I find very difficult to understand and use position: absolute.
Here's how my page look like right now
:root {
--soft-blue: hsl(215, 51%, 70%);
--cyan: hsl(178, 100%, 50%);
--main-bg: hsl(217, 54%, 11%);
--card-bg: hsl(216, 50%, 16%);
--line: hsl(215, 32%, 27%);
--white: hsl(0, 0%, 100%);
--font-size: 18px;
--font: 'Outfit', sans-serif;
}
body {
margin: 0;
font-family: var(--font);
}
.page {
display: flex;
height: 100vh;
background-color: var(--main-bg);
justify-content: center;
align-items: center;
}
.page__container {
box-sizing: border-box;
padding: 20px 20px 0px 20px;
background-color: var(--card-bg);
width: 400px;
height: 650px;
border-radius: 20px;
}
.page__container img {
margin: 0;
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.page__container h1 {
color: var(--white);
font-size: 26px;
margin: 15px 0 10px;
}
.page__container h1 a {
color: var(--white);
text-decoration: none;
}
.page__container .description {
margin: 0;
font-weight: 400;
color: var(--soft-blue);
font-size: 20px;
}
.price-deadline {
display: flex;
align-items: center;
justify-content: space-between;
}
.eth {
display: flex;
align-items: center;
}
.eth .eth-icon {
max-height: 18px;
max-width: 11px;
margin-right: 5px;
}
.eth .eth-price {
color: var(--cyan);
}
.deadline {
display: flex;
align-items: center;
}
.deadline .clock-icon {
max-width: 17px;
max-height: 17px;
margin-right: 5px;
}
.deadline .due-date {
font-weight: 600;
color: var(--soft-blue);
}
.divisor {
height: 1px;
background-color: var(--soft-blue);
border: none;
}
.author {
display: flex;
align-items: center;
padding-top: 10px;
}
.author .avatar {
border: 1px solid white;
border-radius: 50px;
max-height: 40px;
max-width: 40px;
margin-right: 10px;
}
.author .credits {
color: var(--soft-blue);
}
.author a {
font-size: 16px;
color: var(--white);
text-decoration: none;
}
/* Hover Section */
.author a:hover {
color: var(--cyan);
}
.text h1 .link:hover {
color: var(--cyan);
}
<!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.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght#300;400;600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./images/favicon-32x32.png" type="image/x-icon">
<title>NFT Preview Card</title>
</head>
<body>
<div class="page">
<div class="page__container">
<img src="./images/image-equilibrium.jpg" alt="" class="equilibrium">
</p>
<div class="text">
<h1>Equilibrium #3429</h1>
<p class="description">
Our Equilibrium collection promotes
balance and calm.
</p>
<div class="price-deadline">
<div class="eth">
<img src="./images/icon-ethereum.svg" alt="" class="eth-icon">
<p class="eth-price">0.041 ETH</p>
</div>
<div class="deadline">
<img src="./images/icon-clock.svg" alt="" class="clock-icon">
<p class="due-date">3 days left</p>
</div>
</div>
</div>
<hr class="divisor">
<div class="author">
<img src="./images/image-avatar.png" alt="" class="avatar">
<p class="credits">
Creation of Jules Wyvern
</p>
</div>
</div>
</div>
</body>
</html>
i cannot think of another way without position: absolute
but i have created you an example where the the image is positioned automatically on the center using flex box https://jsfiddle.net/r5Lfcbh8/2/
Edit i use position relative on the parent div as relative make the children absolute top left 0 same as relative.
<div class="overlayPar">
<img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="equilibrium">
<div class="imgOverlay">
<span class="eye"></span>
</div>
</div>
.overlayPar {
position: relative;
}
.imgOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 255, 247, .4);
display: none;
}
.imgOverlay .eye {
background: white;
width: 25px;
height: 25px;
display: block;
margin: auto;
}
.overlayPar:hover .imgOverlay {
display: flex;
}
.equilibrium {
display: block;
}
I'm trying to make a navbar for a phone app on the bottom of the screen, something similar to this: https://dribbble.com/shots/3418526-Poppinz-Navbar-Animation
where the add button is a circle icon and a bit higher than the other tabs.
Would this be possible with just HTML, CSS, and jQuery Mobile?
I'm still learning to code and I have to use jQuery Mobile. How can I achieve this?
.nav-icons .ui-btn {
padding-top: 50px !important;
font-family: 'lato', sans-serif !important;
font-size: 18px !important;
font-weight: 100 !important;
text-shadow: none !important;
color: #FFF !important;
background-color: #03314c !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
border: 0px !important;
}
.nav-icons .ui-btn:after {
width: 36px;
height: 36px;
margin-left: -15px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0;
border: 0px;
}
.ui-btn:active {
background-color: #004d78 !important;
}
#home:after {
background: url("icons/home/home_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
font-weight: 100;
}
#two:after {
background: url("icons/clock/clock_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#three:after {
position: relative;
display: flex !important;
justify-content: space-between !important;
}
#four:after {
background: url("icons/dollarsign/dollarsign_white fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#five:after {
background: url("icons/dotmenu/dotmenu_whitefillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
img {
max-width: 50px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, calc(-40%));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h1>hello</h1>
<div data-role="footer" class="nav-icons" data-theme="a">
<div data-role="navbar" class="nav-icons" data-grid="d">
<ul>
<li>Home</li>
<li>2</li>
<li>
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">3
</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
Yeah there are a bunch of ways you could do it. A simple way would be to use position: absolute and transform: translate() to add a circle icon to one of the links that expands outside of the bounds of the parent.
body {
background: #eee;
}
nav {
width: 90%;
max-width: 600px;
background: white;
display: flex;
justify-content: space-between;
margin: 3em auto;
padding: 2em;
}
.special {
position: relative;
}
img {
border-radius: 50%;
max-width: 50px;
position: absolute;
top: 0; left: 50%;
transform: translate(-50%,calc(-115%));
}
<nav>
link
link
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">i'm special
link
link
</nav>
The JQM Navbar widget is injecting a Grid, but you can provide the markup for such a grid by yourself.
The tricky part here is to remove the overflow: hidden style from that grid, then we just need to restore some top and bottom padding. Of course there will be other methods to achieve the same.
As you like to experiment with jQuery Mobile, i have also overridden some other typical (IMHO) too heavy JQM styles, so you can play with it to see the difference simply by commenting each style.
.ui-grid-d {
overflow: visible !important;
}
.ui-grid-d div {
font-weight: normal !important;
font-family: 'Jura', sans-serif !important;
font-size: 12px;
}
.ui-grid-d a {
margin: 0;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
text-align: center !important;
background: white;
padding-top: .3em;
padding-bottom: .9em;
}
.ui-btn-icon-notext.ui-btn-active:after {
background-color: transparent !important;
}
.ui-icon-big {
height: 52px !important;
width: 52px !important;
margin-top: -24px !important;
border-radius: 26px !important;
}
.ui-icon-big:after {
width: 32px !important;
height: 32px !important;
background-size: 22px !important;
margin-top: -16px !important;
margin-left: -16px !important;
//background-color: transparent !important;
}
/* jQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header">
</div>
<div data-role="content">
<h3>Custom Navbar</h3>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<div class="ui-grid-d" data-theme="a">
<div class="ui-block-a">
<div>Home</div>
</div>
<div class="ui-block-b">
<div>History</div>
</div>
<div class="ui-block-c">
<div>Book</div>
</div>
<div class="ui-block-d">
<div>Notifications</div>
</div>
<div class="ui-block-e">
<div>Profile</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you need also the ripple effect, you can find a superb and JQM-compatible implementation here: Ripple effect in Material Design using jQuery and CSS3
I mean I wrote some code. It appears perfectly on 1920x1080 screen, but my friend said he doesn't see the top of the website (he has smaller resolution screen) unless he decrease the scale of the page from 100% (normal) to 50%.
Of course it's smaller so its not good. There is any possibility to make it correct if everyone wants to check my webpage scale my object correctly to their resolution automatically?
Here is my code:
.grey {
background-color: rgba(30, 32, 29, 0.5);
}
.brown {
background-color: rgba(85, 41, 0, 0.6);
}
.red {
background-color: rgba(255, 0, 0, 0.4);
}
.purple {
background-color: rgba(152, 0, 255, 0.4);
}
.blue {
background-color: rgba(0, 0, 255, 0.4);
}
.yellow {
background-color: rgba(255, 255, 0, 0.3);
}
/* CSS reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
body {
height: 100vh; /* középre rendezés */
display: flex; /* középre rendezés */
align-items: center; /* középre rendezés */
justify-content: center;/* középre rendezés */
background: url('http://www.galaxyradio.es/wp-content/uploads/2016/09/Galaxy-Background.jpg') no-repeat center center fixed; /* teljes nagítású háttér */
background-size: cover;/* teljes nagítású háttér */
}
#head, #headstory {
text-align: center; /* középre rendezés szöveg*/
}
#head {
margin: 0 auto;
}
img {
margin-top: -60px;
width: 19%;
height: 19%;
border-radius: 50%;
padding: 1px;
background-color: #666;
filter: grayscale(50%);
transition: all 0.5s ease-in-out;
}
img:hover {
filter: grayscale(20%);
transform: scale(1.1);
}
#profile-card {
background-color: hsla(0, 0%, 100%, .5);
border-radius: 4px;
box-shadow: hsla(0, 0%, 0%,0.9) 10px 10px 80px;
}
#music-title {
text-align: center;
color:rgba(255,255,255,.8);
font-size: 20px;
}
#contacts {
text-align: center;
}
#media (max-height: 850px) {
body {
height: initial;
}
#profile-card {
margin-top: 60px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="profile-card" class="grey">
<div id="head" class="">
<div id="imgsen" class="">
<img src="http://kepkezelo.com/images/ljookd6qf43392rycg01.jpg" alt="coder">
</div>
<div id="headlines" class="">
My name is
<p> <h1>Junior Elliot</h1><p>
My job is
<p> <h3>Learn programming</h3>
From
<p> <h2><i class="fa fa-map-marker"></i> Don't tell anyone <br>but i dont even know.</h2>
</div>
<div id="headstory" class="">
"Learn from every mistake you made. Adapt and Evolve".
</div>
<div id="music-title" class="grey">
<h2>my music</h2>
</div>
<div id="youtubelink" class="g">
<iframe width="640" height="360" src="https://www.youtube.com/embed/kDqdM7wLVns" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="contacts" class="">
You can contact me via
<p> Telepathy </p>
</div>
</div>
</body>
</html>
Use "media query" that will help you to learn better Web designing....learning Bootstrap is a good thing but when you are good with css then go for Bootstrap that will help you learn better design...
Check here how media query works
Really not sure why this is happening, but it's very annoying as I can't seem to find the cause of it.
If I take the below HTML and add a P element inside the class="comments" div then it'll push down the entire class="ratingComments" div that it's inside. Even if I turn off margins and padding it'll still do it, why is this?
It'll probably make more sense to look at this fiddle: https://jsfiddle.net/sz4fodqj/
I want the two divs in the center to be inline, but the P tag prevents this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nrthrn</title>
<link rel="icon" href="./res/icon.png">
<link rel="stylesheet" type="text/css" href="960styling.css" id="stylesheet">
</head>
<div id="wrapper">
<body>
<div class="headerBar">
<img id="logo" src="./res/logo.png"/>
<ul class="menu">
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<a id="loginLink" href="login.html">Login</a>
</div> <!-- end headerBar -->
<div class="promoArea">
<img id="bigLogo" src="./res/bigLogo.png"/>
</div>
<div class="eventsSearchBar">
<p>Order By: </p>
<select required="required" name="field4" class="selectfield">
<option value="Advertise">Closest Date</option>
<option value="Partnership">Furthest Date</option>
<option value="General Question">Rating: High to Low</option>
<option value="General Question">Rating: Low to High</option>
</select>
</div>
<div class="pastEventsContentArea">
<div class="pastEventRowContainer">
<div class="pastEventContainer">
<div class="dateWrapper">
<span class="day"><p id="daytext"><b>23rd</b></p></span>
<span class="month"><p id="monthtext"><b>May</b></p></span>
</div>
<div class="textWrapper">
<div class="title"><p id="eventTitle">ODESZA</p></div>
<div class="location"><p>Location</p></div>
</div>
<div class="buttonWrapper">
<button id="moreInfoButton">Info</button>
<button id="moreInfoButton">Tickets</button>
</div>
</div>
<div class="ratingComment">
<div class="rating">
</div>
<div class="comments"><!--P CLASS HERE MAKES WEIRD THINGS HAPPEN--></div>
</div>
</div>
</div>
<div class="footerBar">
<div class="footerLeft">
<ul>
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="footerRight">
<img src="./res/facebook.png"/>
<img src="./res/twitter.png"/>
<img src="./res/instagram.png"/>
</div>
</div>
<p id="copyright">Copyright 2017</p>
</body>
</div>
</html>
CSS
.pastEventsContentArea{
width: 95%;
margin: 50px auto 50px auto; /*top right bottom left */
padding-top: 20px;
/* background-color: #ff6464;*/
text-align: center;
}
.pastEventContainer{
/*width: 45%;
height: 30%;*/
/* width: 55%;*/
height: 120px;
/* background-color: rgba(0, 0, 0, 0.2);*/
background-color: #ffffff;
margin-left: 5%;
margin-right: 0%;
/* margin-bottom: 10px;*/
/* margin-right: 10px;*/
display: inline-block;
min-width: 500px;
max-width: 500px;
color: black;
border-style: solid;
border-color: #363636;
border-width: 1px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.pastEventContainer .dateWrapper{
width: 20%;
/*background-color: rgba(0, 0, 0, 0.4);*/
height: 100%;
float: left;
font-family: opensans;
color: black;
}
.pastEventContainer .textWrapper{
width: 45%;
/* background-color: rgba(0, 0, 0, 0.6);*/
height: 100%;
float: left;
color: black;
font-family: opensans;
margin-left: 10px;
}
.pastEventContainer .buttonWrapper{
width: 30%;
/* background-color: rgba(0, 0, 0, 0.8);*/
height: 100%;
float: left;
}
.pastEventContainer .dateWrapper .day{
display: inline-block;
width: 100%;
height: 60%;
/* background-color: red;*/
font-size: 25px;
font-family: opensans;
}
.pastEventContainer .dateWrapper .month{
display: inline-block;
width: 100%;
height: 40%;
/* background-color: indianred;*/
font-size: 24px;
}
.pastEventContainer .dateWrapper #daytext{
margin-top: 30%;
}
.pastEventContainer .dateWrapper #monthtext{
margin-top: -10%;
}
.pastEventContainer .textWrapper .title{
/* background-color: aqua;*/
height: 50%;
margin: 0;
margin-top: 30px;
font-size: 20px;
overflow: hidden;
}
.pastEventContainer .textWrapper .location{
/* background-color: blue;*/
margin-top: -20px;;
font-size: 14px;
max-height: 30px;
min-height: 30px;
overflow: hidden;
}
.pastEventContainer .textWrapper p{
margin: 0;
text-align: left;
}
.pastEventContainer .buttonWrapper #moreInfoButton{
display: block;
margin-left: auto;
margin-right: auto;
font-family: Porter;
text-transform: uppercase;
background-color: #242424;
height: 30%;
color: white;
outline: 0;
width: 75%;
border: 0;
padding: 10px;
font-size: 15px;
/*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-top: 10%;
}
.pastEventRowContainer .ratingComment{
display: inline-block;
height: 120px;
background-color: white;
width: 30%;
margin: 0;
margin-left: 50px;
padding: 0;
border-style: solid;
border-color: #363636;
border-width: 1px;
max-width: 300px;
}
.pastEventRowContainer .ratingComment .rating{
/* background-color: red;*/
height: 50%;
display: block;
margin: 0;
}
.pastEventRowContainer .ratingComment .comments{
/* background-color: aqua;*/
height: 50%;
display: block;
text-align: center;
color: black;
font-family: opensans;
font-size: 20px;
position: relative;
}
.pastEventRowContainer .ratingComment a{
display: block;
margin: 0;
padding: 0;
position: absolute;
left: 60px;
top: 15px;
text-decoration: none;
}
p is block level element by default. You can use span instead or change the display properties of .comments in your css. This really depends on what you want to add in the div.
see
https://www.w3schools.com/html/html_blocks.asp
I think that the reason is that .ratingComment has display: inline-block;. That forces the elements to change so that whatever elements you put inside .comments to be inline with the .pastEventContainer. Look at this for example https://jsfiddle.net/sz4fodqj/4/ where the div contains more text, still it's inline with the first div.
I'm trying to make my first site but I can't seem to create what I visualize in my head.
I can't get my #invokeryolo div to show up. I see completely no sense and for the life of me I can't figure out whats wrong. Here's my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dotoker1.css" />
<title>Comprehensive guide to Invoker</title>
</head>
<body>
<div id"invokeryolo"></div>
<div id='contenttable'>
<ol>
<li>Guide overview and hero introduction</li>
<li>Pros and Cons</li>
<li>Spells</li>
<li>Early, mid and late game</li>
<li>Build order and situational items</li>
<li>Countering your counters</li>
</ol>
</div>
<div class="content" id="overview"></div>
<div class="content" id="proscons"></div>
<div class="content" id="spells"></div>
<div class="content" id="earlymidlate"></div>
<div class="content" id="buildorder"></div>
<div class="content" id="counter"></div>
</body>
</html>
CSS
html, body {
background: url(http://dota2walls.com/wp-content/uploads/2014/11/invoker-arsenal-magus-wallpaper.png) no-repeat fixed;
height: 100%;
}
#invokeryolo {
background: url(http://image.blingee.com/images19/content/output/000/000/000/7df/820025845_2071037.gif);
width: 60%;
height: 200px;
position:absolute;
display: inline-block;
border: 1px solid black;
}
#contenttable {
width: 22%;
height: 300px;
display: inline-block;
}
ol {
display:block;
font-style: italic;
color: #CCCC88;
font-size: 130%;
margin-right: 20px;
background: rgba(0, 0, 0, 0.2);
}
li {
margin-bottom: 5px;
background: rgba(0, 0, 0, 0.2);
}
a {
color: #CCCC88;
}
a:visited {
color: #CCCC88;
}
.content {
background: rgba(0, 0, 0, 0.2);
width: 60%;
height: 20%;
margin-left: 23%;
display: inline-block;
}
All suggestions are appreciated. Thanks in advance!
Change this:
<div id"invokeryolo"></div>
to this:
<div id = "invokeryolo"></div>
You missed the = sign.