I want to add an icon over the image. I am trying following, but it doesn't seem to work:
HTML:
<ul>
<li>
<div class="icon">
<img src="image.jpg" />
</div>
</li>
</ul>
CSS:
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
background : url("icon_quick.gif") no-repeat;
border: 1px solid red;
z-index: 2;
overflow: hidden;
}
Demo:
http://jsfiddle.net/tqw4V/
No markup modifications necessary. Your content image (painting) stays in the markup, and the decorative image (smiley) stays part of the CSS.
http://jsfiddle.net/tqw4V/6/
ul{
margin: 0;
list-style: none;
/*position: relative; */
}
.icon{
/*z-index: 2;
overflow: hidden;*/
position: relative;
}
.icon:before {
background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
height: 100px;
width: 100px;
content: '';
position: absolute;
}
You can better change your HTML, since you're adding an inner child on top of the background, which pushes it away.
HTML
<ul>
<li>
<div class="icon"></div>
<img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
</li>
</ul>
CSS
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
width:100px; height:100px;
background : url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
z-index: 2;
overflow: hidden;
position:absolute;
}
JSFiddle.
Here is one way to do it: http://jsfiddle.net/tqw4V/1/
Unfortunately, it requires modifying your markup, but it works. The idea is to have the overlay image be a separate element that you position absolutely over your main element. This works a lot better if the main element is not, itself, absolutely positioned.
HTML:
<ul>
<li>
<div class="icon">
<img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
<div class="overlay"></div>
</div>
</li>
</ul>
CSS:
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
border: 1px solid red;
z-index: 2;
overflow: hidden;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
z-index: 4;
}
}
Just replace the images. Replace their positions. The smiley face should go to the html, and the other to the css. Then by height and width you can set the size of the container. Hope I've helped.
Related
Only solution I found was to put a position: fixed on element I want to fully see. Any other options? (I dont want to 'cool-image' fixed). Help or hint would be awesome. Also, if anyone can explain solution - that would be even better
Fiddle: JSFiddle
HTML
<div class="img-cont">
<div id="slider">
<ul>
<li class="slide">
<img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" >
<div class="cool-image"></div>
</li>
</ul>
</div>
</div>
CSS
.img-cont{
height: 270px;
position: relative;
}
#slider {
position: relative;
background: green;
overflow: hidden;
width: 440px;
height: 200px;
}
#slider ul{
position: relative;
margin: 0;
padding: 0;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 440px;
height: 270px;
text-align: center;
line-height: 300px;
}
div.cool-image{
background-color: white;
position: absolute;
border: 5px solid #EEEEEE;
width: 650px;
height: 350px;
z-index: 1;
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png);
margin-left: -40px; /* Just to product situation */
display: inline-block;
}
Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.
If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;
Like this...
.slide img {
position: absolute;
z-index: 2;
}
.slide {
position: relative;
}
Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;
I will explain my problem.
For school I have to make a website, but it is not working how it should be.
I have a border made of divs around the screen, and the page in the middle. When I first open the page, everything is in place, but when I click on one of the nav items (#link) the page suddenly loses its margin top and left. So it goes outside of the borders. I pasted all the code in the snippet, as I believe it will be too much for a post.
To see the full page and problem, please copy the code in a file to open it in the browser itself. I used vw and vh because it want it to be the same on different screens. I will do the inside elements mostly with percentages
So my questions:
How do I prevent this from happening, and an example?
Is there a way to set #Home as the usual landing space? without adding #Home in the link (and without changing its position)?
And my last question regarding CSS animation, how do I add a transition so it looks like the page is scrolling to the #div.
body{
top: 0;
margin: 0;
padding: 0;
left: 0;
}
.wrapper{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container{
width: 300vw;
height: 200vh;
background-image: url("../img/background.png");
background-size: cover;
}
/* simple nav*/
ul{
display: inline;
z-index: 99;
position: fixed;
}
ul li{
list-style-type: none;
display: inline;
}
ul li a{
text-decoration: none;
}
/*pages*/
.page{
margin: 10vh 10vw;
width: 80vw;
height: 80vh;
transition: 2s;
}
#Interactive{
background: blue;
float: left;
}
#Graphical{
float: left;
}
#Company{
float: left;
}
#Conclusion{
float: left;
}
#Home{
float: left;
}
/*header borders*/
.borders{
position: fixed;
z-index: 30;
}
.border-top{
height: 10vh;
width: 100vw;
top:0;
background: #007CFF;
}
.border-left{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
position: absolute;
}
.border-right{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
float: right;
margin-top: -10vh;
}
.border-bottom{
height: 10vh;
width: 100vw;
bottom: 0;
background: #007CFF;
position: absolute;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="borders">
<div class="border-top">
</div>
<div class="border-left">
</div>
<div class="border-right">
</div>
<div class="border-bottom">
</div>
</div>
<div class="wrapper">
<div class="container">
<div id="Interactive" class="page">
</div>
<div id="Graphical"class="page">
</div>
<div id="Company"class="page">
</div>
<div id="conclusion"class="page">
</div>
<div id="home"class="page">
</div>
</div>
</div>
Thanks for thinking with me, any help is appreciated.
I didn't really know how to call this post, so the search for it was difficult.
Please remove this div
#Interactive{
background: blue;
float: left;}
I think this only you are expecting.
I have made changes to your HTML code and CSS code on the basis of what i thought you wanted to achieve. Below is the code.
* {
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
}
.header {
padding: 10px 50px;
}
ul li{
list-style-type: none;
display: inline-block;
padding: 10px;
}
.wrapper {
flex-grow: 1;
padding: 50px 150px;
}
.page{
transition: 2s;
width: 100%;
height: 100%;
}
#Home{
background-color: pink;
}
#Interactive{
background: blue;
}
#Graphical{
background-color: green;
}
#Company{
background-color: yellow;
}
#Conclusion{
background-color: orange;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="wrapper">
<div id="Home" class="page">
</div>
<div id="Interactive" class="page">
</div>
<div id="Graphical" class="page">
</div>
<div id="Company" class="page">
</div>
<div id="Conclusion" class="page">
</div>
</div>
If you want to use transition for smooth scrolling. Refer to
this
article, you will have to use jQuery.
Also do not use fixed width or height until necessarily required.
Use document.getElementById('Home').focus() in document.ready() of js to bydefault show the Home Page.
Always focus on making responsive solutions with relative content rather than absolute content.
Let me know if you need more help :)
text comes over this stack image any idea how to do it
div has a text of 3-4 lines, an image and pagination on left side bottom. something like this.
Image vertical-aligned :middle,
text vertical-aligned:middle,
small pagination text on the left bottom side of this background stack image
.image {
position: relative;
width: 100%; /* for IE 6 */
}
div {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Since it looks like what you needed, You may use flex, padding and margin:
div {
background:url(https://i.stack.imgur.com/EinaJ.png) top center;
width:620px;
margin:auto;
padding:40px 40px 30px;
height:790px;
position:relative;
display:flex;
flex-flow:column;
justify-content:center;
}
img, p, nav {
padding:5px;
margin:0;
/* see me */
background:pink
}
img {
margin:auto auto 0;
}
nav {
bottom:30px;
right:45px;
margin:auto 0 0;
border-radius:0 0 0.25em 0.25em ;
/* see me */
background:rgba(0,0,0,0.2);
text-align:center;
word-spacing:0.5em;/* better use margin on links, ... */
}
body {
background:#777;
}
<div>
<img src="http://lorempixel.com/200/150"/>
<p>here is</p>
<p>some line</p>
<p>of</p>
<p>text</p>
<nav>navigation : <a href> link</a> <a href> link</a> <a href> link</a></nav>
</div>
A ressource among others that can be usefull: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think you forgot to change color #000 of div. or it may problem of z-index
div {
color:Black;
position: absolute;
top: 200px;
left: 0;
width: 100%;
z-index:222;
}
You should make a container div with 'position: relative;', then include the image inside this div and also include the text with 'position: absolute;';
for example:
#container {
height: 100px;
width: 100px;
position: relative;
}
#container img {
display: block;
width: 100px;
height: 100px;
}
#container span {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
}
and your HTML:
<div id="container">
<img src="" alt="" />
<span>Hello World</span>
</div>
This is the HTML code:
<body>
<div id="container">
<img src="images/coffeebackground1.jpg" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
This is my CSS code:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index:100;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: red;
z-index:1000;
position: relative;
color: red;
}
What I did was I put an image as a background and I want to put the topnav div lying on top of the background image. However, it seems like my code is not working.
The text is not visible because both the background color and the foreground color are set to red, so the element just appears as a red block.
Additionally, the text doesn't appear above the image because it is positioned as relative which means it will be positioned relative to its natural position according to the layout. As you haven't specified an offset in the CSS, it actually just appears in its normal position, which is just below the image.
If you change the position to absolute then its position will be relative to #container instead which I think makes more sense in this case. You can then move it to be above the image by setting a position, like this:
#topnav {
background-color: white;
z-index:1000;
position: absolute;
left: 100px;
top: 20px;
color: red;
}
Background and font color are same, that's why its not appearing
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index: 100;
position: relative;
}
#container img{
top:20px;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: white;
z-index: 1000;
position: absolute;
color: red;
top:0;
}
<body>
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
Remove position relative from #container and set position absolute in #topnav.
or
Remove img tag from #container and set background image on #container in css like that:
`
background: url("images/coffeebackground1.jpg");
background-repeat: no-repeat; //if you don't want to repeat image
background-size: auto; //try others parameters to fit your background
*{
margin:auto;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
z-index:100;
top:20px;
position: relative;
}
#topnav {
z-index:1000;
position: absolute;
left: 10px;
top: 10px;
color: #FFF;
font-family:arial;
font-size:30px;
}If you want to change position of 'Home' please change #topnav:{ left: 70px}. If you want to increase more please left: 80px.. and so on. If you want to decrease please less #topnav{ left:30px.. and so on.}
I have an image animating from right to left... The image is 6000px wide to give a longer duration to the animation. I put the image (clouds-layer-2.png) in a div (layer-2-container) and used the following CSS hoping that the image wouldn't spill over the div creating a horizontal scroll. But unfortunately it's not working and I have 6000px worth of horizontal scroll.
.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}
This can be viewed at http://www.mike-griffin.com/testing. If you use CMD/CTRL+A to select all you'll be able to see the clouds better, if that helps.
I'll also paste all the code below.
-HTML-
<section class="home-section">
<div class="navigation">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</div><!--navigation-->
<div class="creative-designer">
<h2>| Heading one |</h2>
</div>
<div class="home-section-layers">
<img class="layer-1" src="img/white-M-layer-3.jpg" width="" height="">
<div class="layer-2-container">
<img class="layer-2" src="img/clouds-layer-2.png" width="" height="">
</div><!--layer-2-container-->
</div><!--home-section-layers-->
</section><!--home-section-->
</div><!--container-->
-CSS-
.container {
width: 100%;
height: auto;
max-width: 100%;
}
.home-section {
width: 100%;
height: auto;
position: absolute;
}
.layer-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
/*margin-top: -10%;*/
z-index: 1;
}
.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}
.layer-2 {
position: absolute;
z-index: 2;
width: auto;
height: auto;
top: 0;
}
.creative-designer {
text-align: center;
position: relative;
z-index: 5;
color: #666;
margin-top: 40%;
}
.navigation {
color: #0C98D6;
position: relative;
z-index: 10;
top: 0px;
}
.navigation ul {
list-style: none;
width: 100%;
padding-right: 5%;
float: right;
}
.navigation ul li {
float: right;
padding: 10px;
}
Thank you for any help at all.
In the spirit of Stack Overflow, I'm answering your question exactly.
.home-section {
overflow-x: hidden;
}
I want to stress, though, that this site is really heavy, and you should code it such that there aren't going to be load issues on mobile. You can split the clouds in half, and/or use an SVG (the M should also be SVG). Additionally, your clouds are going to be overlapping content should you decide to add stuff on the sides, so you might want to set a border-radius to make the circle crop out the clouds.
Just suggestions, but hope they help!