Say logo1 and logo2 is 100px long each and I want to cover half of the logo up.
Whats the best way and neatest way of making two logos over lap and making them in the center of page.
Put both your logos in a <div> and give it margin: 0 auto;.
Then give logo2 z-index: 1; so that it is layered on top of logo1.
Here's a JSFiddle demo.
Page:
<div class="center">
<img src="Link/To/Your/Image/For/Logo1" id="logo1" />
<img src="Link/To/Your/Image/For/Logo2" id="logo2" />
</div>
CSS:
.center {
width: 210px;
margin: 0 auto;
position: relative;
left: 10px;
}
#logo2 {
z-index: 1;
position: relative;
left: -10px;
}
If you make the logos overlap even more (e.g. move logo2 to overlap by 50px with left: -50px; then you must also change the position of the surrounding div to match the overlap with left: 50px;, so the the left positioning for #logo2 and .center should be the same but opposite.
One option is using the style position:absolute;. Following is an example.
<style>
.container{
border:solid 1px red;
text-align:center;
height:500px;
}
#logo1, #logo2{
width:100px;
height:100px;
display:inline;
position:absolute;
top:200px;
}
#logo1{
border:solid 1px green;
left:450px;
}
#logo2{
border:solid 1px blue;
left:540px;/*note 540 = 450 + (100 - 10)*/
}
</style>
Page:
<div class="container">
<div id="logo1"></div>
<div id="logo2"></div>
</div>
Related
I succeeded to put div at the bottom with this code:
#div {
position: absolute;
width: 100%;
height: 58px;
margin: 0 auto;
bottom: 0;
left: 0;
overflow: hidden;
}
Recently, I added a side-bar to my site (300px).
When the side-bar opens, the whole site move left 300px, except for the div in the bottom.
I found that if I delete the position: absolute; from the css, the div will move left like all the elements in the site, but the div will not be in the bottom.
There is a way to move the div when the sidebar open like the all site and also be in the bottom of the page?
Thanks in advance
div{
position:fixed;
bottom:0;
}
If you want to center divs inside a div ,there's an example
HTML
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
CSS:
div.parent{
border:1px solid black;
padding:25px;
text-align:center;
}
div.children{
border:2px solid blue;
background-color:orange;
width:25%;
display:inline-block;
height:250px;
}
Other way to center only 1 div inside another div looks like that
HTML
<div class="parent">
<div class="children">Woho</div>
</div>
CSS
div.parent{
border:1px solid black;
padding:25px;
}
div.children{
border:2px solid blue;
background-color:orange;
width:250px;
margin:0 auto;
}
The margin:0 auto; property makes your div to go in the center.
I need to insert photo in between divs (blue and light-blue) as in the following example.
I did it with absolute positioning:
HTML:
#*Blue and light-blue sections with photo*#
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd">
<div class="image">
<img src="/Content/pictures/MainPhoto.png" />
</div>
</div>
CSS:
.image {
position: absolute;
bottom: -100px; /* bottom space */
right: 100px; /* right space */
}
.image img {
display: block;
}
But this way doesn't work correctly when you change the screen resolution of the device.
I create JSFiddle with this example.
Could you please to suggest another way to resolve this problem?
I need to create responsive design without hardcoded values.
Thanks! :)
you could just use a background and a padding to keep image from sides : DEMO
HTML
<div class="imaged">
<img src="http://lorempixel.com/800/180/food/7"/>
</div>
CSS
.imaged {
padding:20px;
text-align:center;
background:url(my-blue-light-blue-bg.jpg)repeat-x center ;
}
img {
border:solid white 4px;
vertical-align:top;/* or display:block; + margin:auto;*/
}
from your fiddle: inset box-shadow in a single div works too : DEMO 2 / DEMO 3
<div style="
padding:0 20px;
display:table;
min-width: 100%;
box-shadow:
inset 0 120px 0 #0052a4,
inset 0 -120px 0 #c2dffd;
height:244px;
line-height:244px;
text-align:center;
">
<img src="http://lorempixel.com/842/176/city" style="border:solid white 4px;"/>
</div>
HTML
<div class="container-box">
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd"></div>
<div class="image">
<img src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg" />
</div>
</div>
CSS
.container-box {
position:relative;
}
.container-box img {
height:200px;
width:90%;
position:absolute;
top:20px;
left:5%;
border:3px solid #fff
}
Of course I'd never use inline CSS, but there you go. See fiddle here
I think this is what you are trying to do:
http://jsfiddle.net/dc6r1bny/
.image {
position: absolute;
bottom: 30px; /* bottom height */
left: 50%; /* position element 50% from left side */
margin-left: -421px; /* bring it back left half the image size */
}
Then for mobile, you will just need to use media queries to adjust the image size to be 100%, remove the margin, etc. when you hit roughly 842px.
add this css code to the image. it should work.
margin-right:auto;
margin-left:auto;
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
I am using a fluid layout design and I want the div with class center to be centered horizontally inside of the div with class outer. I tried this, but it doesn't work. What am I doing wrong?
HTML:
<div class="outer">
<div class="inner"> // this div has height=0. Why?
<div class="center">
// stuff
</div>
</div>
</div>
CSS:
.outer {
position: absolute;
left: 0;
right: 0;
top: 50px;
height: auto;
}
.inner {
width:100%;
}
.center {
margin:0 auto;
}
use a percentage for margin-left, e.g:
.center
{
width:90%;
margin-left:5%;
}
the reason I used 5% is because since the width of center is 90% of it's container, we have 10% of space remaining, so to center it you'll have to bring it over to the left by half of the available space; which in this case is 5%
You've gotta treat the inner as if it's a regular div in a page, so something like:
#inner {
position:fixed;
top: 50%;
left: 50%;
width:234px;
height:90px;
margin-top:-45px; /*set to a negative number 1/2 of your height*/
margin-left:-117px; /*set to a negative number 1/2 of your width*/
border: 0.5px solid #ccc;
}
This would do the trick and you can adjust accordingly .
Inline-block is probably the best option for the centered div, then use our outer div with text-align:center to center the inner container. You don't really need an inner and a center div the way you have it, but I kept it in for examples sake. Below is a fiddle link:
http://jsfiddle.net/UYw8S/2/
Borders and padding added for example.
<div class="outer">
<div class="inner">
<div class="center">
Inner stuff
</div>
</div>
</div>
.outer {
position: absolute;
left: 0;
right: 0;
top: 50px;
height: auto;
background:#ccc;
border:1px solid #333;
}
.inner {
display:block;
margin:10px;
border:1px solid #333;
text-align:center;
}
.center {
margin:10px 0;
text-align:left;
height:40px;
width:80%;
display:inline-block;
background:#fff;
padding:10px;
}
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.