What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
Related
I have a website I am creating for a school project. I am very new to html and css. I have created div containers for the different sections of my pages. On my index page, I have 5 containers including the header and footer.
The containers are working everywhere except in 1 location where I am floating images. For some reason, the box is shrink-wrapping under the 3 images. I thought by placing a position:relative in the .container css rule, it would behave like it is with paragraphs and other elements. I would like that container to surround the pictures just like it is with the other boxes on the index page.
Here is the html for that specific container that is not working:
<div class="container">
<article>
<h2>Meet the Staff:</h2>
<div class="gallery">
<figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
<figcaption>Mary the Librarian</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
<figcaption>Ruth the Assistant</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
<figcaption>Esther the Research Librarian</figcaption>
</figure>
</div>
</article>
</div>
And here is the css:
.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;
}
figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;
}
Here is the so you can see what is happening: http://www.ta5zc.com/
Thanks for any help you can provide. I can't seem to figure out what is wrong.
Embarrassing, but I figured it out. The container is acting just like it is supposed to. There was no elements below the images, so there was nothing to stay in place. Therefore, when I floated the images, the box moved up the page like it was supposed to. Like I said, I'm new at this ;-)
Trying layout inline elements I discover wierd behavior.
Can someone explain me why is there any different?
To both HTML I apply this css:
.time {
position: relative;
top:100px;
height: 5px;
background: red;
border-radius:5px;
text-align: justify;
font-size: 0.1px;
padding: 0px 10px;
}
.time > .snapshot {
position: relative;
display: inline-block;
width:2px;
height: 13px;
top: -5px;
background: red;
}
.time:after {
content:'';
width: 100%;
display: inline-block;
}
And now HTML
- Wierd behavior:
<div class="time" >
<div class="snapshot" ></div><div class="snapshot" ></div>
</div>
http://jsfiddle.net/FSLAJ/
Expect behavior:
http://jsfiddle.net/dXwjR/1/
Update
I play a little with inline-block and justify, and I have another wierd example:
<div style="text-align: justify;">
test test test
<div style="display: inline-block; width: 100%;">test test</div>
test test test
</div>
JSFiddle example
I just wonder why second anonymous inline element is not justify?
The difference is due to the fact that inline elements are sensitive to white space in the code, and that's what's providing the spacing in your "expected" example. Add some margin-right to your .snapshot tick marks in your other one and they'll spread out like the other example.
jsFiddle example
It's my problem:
http://jsfiddle.net/Vqa7v/
body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}
#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}
nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}
nav a {
padding: 5px 7px;
color:white;
}
<div id="menu">
<nav>
HOME
SERVICES
ABOUT
BLOG
CONTACT
</nav>
</div>
At first, the menu is fit to background position, but make the Result window smaller & smaller to see when the menu get out of the background position.
How to avoid that and fix menu to background image position? (I want to have a menu in center of my website on its background image)
Had some real trouble understanding what you were looking for, but is this it? Basically it needed a whole bunch of changes that I've made to nav etc.
http://jsfiddle.net/robsterlini/Vqa7v/2/
I solved it by my self: http://jsfiddle.net/Vqa7v/4/
.menu {
position:absolute;
top: 20px;
left:15px;
}
nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}
nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}
<nav>
<div class="menu">
HOME
SERVICES
ABOUT
BLOG
CONTACT
</div>
</nav>
Small the RESULT window width and see the menu is fixed to the background image.
I'm working some css and encountered a weird problem. Two elements are inline-block staying in the same container. Both of them have the width, height, and line-height.
But if we set the first element an empty content, the layout will be disordered (vertical alignment).
You can see the problem here
<div class="part">
<div class="foo"></div>
<div class="bar">bar</div>
</div>
.part {
width: 400px;
height: 80px;
background-color: #ddd;
margin-bottom: 100px;
}
.foo {
display: inline-block;
width: 100px;
height: 80px;
line-height: 80px;
background-color: red;
}
.bar {
display: inline-block;
width: 100px;
line-height: 80px;
height: 80px;
background-color: green;
}
I know empty content is always a bad smell of html code. But I just want to know why this is and how to solve this problem.
I found a similar question. People say we could use a   instead of empty content. Is this the only way we could solve it? Or we have other better solution?
Thanks.
use 'vertical-align: middle;' to the inline-block element
vertical-align: middle;
http://jsbin.com/ajexab/1/edit
At my site on the first page i have two images put together so it looks like a sunset. I want to my logo to go down between them as if it was the sun, but i cant make this happend. The logo is currently at the second page of the site
Heres i the html:
<div id="intro">
<div id="introbaggrundbagved"></div>
<a name="section1" class="section">SECTION 1</a>
<div id="logo">
</div>
</div> <!--#intro-->
And the css:
#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
margin: 0;
position: relative;
z-index: 3;
}
#introbaggrundbagved{
background: url('images/introbagved.png') no-repeat center;
height: 900px;
width: 1440;
margin:0;
position: relative;
}
#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 600px;
height: 600px;
position: relative;
margin-left: 420px;
margin-top: 100px;
z-index: 2;
}
You need to take the #logo div out of its parent element #introand give it a z-index that is larger than both of its siblings— then wrap all of the header elements into an #intro-wrapper div. In addition, I would then position the #logo element using position: absolute, instead of relative, this will give you more granular control on it's placement without disturbing the document flow of the surrounding elements.
Also, it appears that you have the function parallaxScroll updating the top property of #logo, which will prevent the element from being placed between your two images.
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#logo').css('top','+'+((scrolledY*.376))+'px');
....
}